심리테스트 만들기 (2) 화면 구성하기

요 며칠간 많이 놀면서도 간간히 심리테스트 사이트를 손봤습니다.

엄청난 양의 검색과 복붙을 한 결과 아래 같은 결과가 나왔습니다.

 

http://happyfacefriend.github.io/

아직 디자인도 제대로 안 했지만, 많은 추가사항이 있었습니다.

 

-화면을 시작/문항답변/종료 화면으로 3개의 html로 분할했습니다.

-txt 파일에 형식에 맞게 문제와 답변들을 적어두면 자동으로 문항들의 html element들을 만들어줍니다.

-답변을 고르면 자동으로 슬라이드 되며 다음 질문으로 넘어갑니다.

-각 화면 전환 간에 fade in/out 효과가 있습니다.

 

html 디자인을 하면서 정말 많은 어려움이 있었습니다.

이미지 위에 텍스트 올리기, 옆으로 swipe 하는 효과 내는 법, fade in/out 효과 내는 법, txt파일 읽는 법, 답변들 위치 맞게 놓는 법 등 다 나열할 수도 없지만 전부 검색과 웹 개발 왕고수인 친구의 도움으로 해결했습니다.

 

 

또 주제도 정했습니다.

MBTI 심리검사를 바탕으로 검사를 하고, 그 결과에 따라 어울리는 초능력을 보여주는 겁니다.

초능력은 독심술, 염력 등 메이저한 능력들 말고 제 머리속에서 나온 이상한 능력들로 하기로 했습니다.

한 30가지 정도 브레인스토밍해놨고, 그나마 MBTI 유형들과 연관성 있는 능력들을 매칭할 예정입니다.

 

생각보다 질문지를 만드는 게 고역이었는데요,

이 블로그가 많은 도움이 됐습니다.

 빌하임의 생산성 1번지 : sexybill.tistory.com/93

또 이미지 찾기 좋은 사이트도 찾았습니다.

 픽스베이 : pixabay.com/

 

이제 디자인을 다듬고 결과화면의 내용을 구성하기만 하면 얼추 끝날 것 같습니다.

앞으로도 화이팅!

 

깃 허브 : github.com/HappyFaceFriend/HappyFaceFriend.github.io

심리테스트 링크(개발중) : http://happyfacefriend.github.io/

변경된 깃 허브 :  https://github.com/HappyFaceFriend/SuperpowerMBTI 

(2022.08.05) 심리테스트를 테스트 할 수 있는 링크는 차후 블로그를 활용하기 위해 제거했습니다.

깃 허브의 프로젝트를 clone 해서 봐주시면 감사하겠습니다.