MBTI 테스트 만들기 (JS,HTML,CSS)

https://github.com/zhoho/Oss_project

https://handongbti.netlify.app

Handongbti

GitHub - zhoho/Oss_project: 22-1 open source software final project

 

요즘 MBTI와 같은 성격유형검사들을 즐기는 사람들이 많아졌다. 나 또한 재밌게 즐기는 편이었고, Open source software 수업 과제로 나만의 성격유형검사를 만들면 재밌겠다는 생각이 들어 만들어 보았다.

 

만들때 밑의 내용을 고려했다.

 

1. 이미 있는 유형의 검사와 컨셉이 겹치지 않도록

2. 대상은 학교 재학생

3. 귀여운 UI

4. 성격 유형별 특징,질문 정리

5. 가볍게 즐길 수 있도록

---

start.js

1. 이 파일에는 페이지에 버튼들을 클릭했을 때 나타나는 이벤트들을 정리해놓은 함수들이 들어있다. 나는 결과를 MBTI 유형 16가지로 나눴고, 각 질문에 답변에 상반되는 유형(ex I & E 또는 P & J)을 선택할 수 있도록 한 후 선택 시 답변에 해당하는 type값을 받아온다. 선택된 type의 key값이 가지고 있는 value를 1씩 증가시킨다. 상반되는 유형(ex I & E 또는 P & J) 중 value값이 더 큰 것을 선택한 후 미리 생성한 문자열 select_to_mbti에 push 한다.

ex) 

mbti value
E	1	I	4
N	2	S	3
F	2	T	3
P	5	J	0

위와 같이 결과가 나온다면 select_to_mbti =('I', 'S', 'T', 'P') 되는데 join("") 함수를 이용해 깔끔하게 ISTP로 출력될 수 있도록 정리한다. 이후 각 mbti 유형에 따른 retrun값을 지정하고 point라는 변수에 할당 후 유형별 특징과 이미지가 출력될 수 있도록 한다.

 

2. 테스트 다시 하기 기능 구현할 때 원래 페이지만 시작페이지로 이동하도록 구현했는데, 이때 이전 테스트에서 선택한 값들이 남아 있는 문제가 있었다. 그래서 location.reload(true)를 이용해 브라우저가 갖고 있던 캐시를 무시하고 새로운 리소스를 부르는 방법으로 구현했다.

 

3. 가장 해결하기 어려웠던 문제인 모든 유형 확인하기이다. 모든 유형 확인하기 페이지에선 appendchild 함수가 실행되어 이미지가 출력되기 때문에 유형 버튼을 클릭하면 이전 이미지가 삭제되지 않고, 밑으로 계속 추가되었다. 따라서 removeImage() 함수를 선언해서 모든 유형 확인하기 페이지에서 버튼을 클릭할 때마다 함수가 콜 되어 이전의 이미지 데이터를 삭제하는 방법으로 구현했다. removeImage() 함수는 이미지 데이터가 비어있지 않다면 removeChild()를 통해 데이터를 지우도록 설계했다.

 

data.js

qna_list와 info_list를 선언했다. qna_list에는 테스트 질문과 답변 그리고 답변에 따른 type을 정리한다. info_list에는 결과 페이지에 출력될 정보를 정리한다.

 

Image

각 유형마다 해당되는 캐릭터들을 직접 그렸다. 귀엽고 각 유형마다 특징을 살릴 수 있도록 노력했다. 

 

etc

font는 google font를 이용했으며, 배포는 Netlify를 이용했다. github 연동도 되고 무료로 이용할 수 있어서 간단한 프로젝트 할 때 사용하기 좋다고 생각한다.

 

---

Using : Js, Html, Css, Bootstrap, Git, Github, Netlify

Reference : https://www.youtube.com/watch?v=PZgmClpRwcE 

Duration of work : About 2 weeks