[Personal] MBTI Test 사이트 구조

html

1. article 태그 이용해 시작화면 / 문제화면 / 결과화면 순으로 구현
2. mbti에서 type별 점수를 hidden type의 input 태그를 이용해서 앞의 것의 점수를 네가지 type별로 저장하는 칸을 만듦(바깥에는 보이지 않지만 내부적으로 정보를 저장할 경우에는 hidden input 태그 사용)
3. button A와 button B를 사용해서 A버튼을 눌렀을 때만 해당 type의 앞의 글자에 대한 점수를 저장할 수 있도록 만듦, B 클릭시 점수는 저장되지 않고 다음 문제로 넘어가게 하기

javascript(jquery)

1. num을 사용해서 1번부터 하나씩 증가하도록 만듦
2. q라는 javascript 객체를 이용하여 각 문제 번호 별로 해당하는 정보를 담을 수 있도록 함(저장)
3. result 라는 javascript 객체를 이용하여 mbti 결과를 key로 해서 그에 해당하는 정보(동물 이름, 설명, 이미지 주소)를 담을 수 있도록 함
4. 함수 & 이벤트
   • start 함수 : 테스트 시작 버튼을 눌렀을 때 동작하는 함수, 시작화면을 hide라는 jquery 문법을 이용해서 시작화면을 숨기고 question(문제) 화면을 보여주고 다음 문제(next 함수)를 출력하도록 구현
   • 버튼 A 클릭 이벤트 : A를 클릭하면 type 정보를 가져와 그 type의 값에서 1을 올려주고 다음 문제로 넘어가게 함
   • 버튼 B 클릭 이벤트 : B 클릭 시 next함수 실행(앞의 것의 점수만 저장하기로 했기 때문에 ex) EI 중 E)
   • next 함수 : if-else문으로 마지막 문제일 경우와 마지막 문제가 아닐 경우로 나눔
     • 마지막 문제일 경우(if) :
       • num이 13일경우(마지막 문제일 경우) 어떤 대답을 클릭하게 되면 질문화면을 숨기고 결과화면을 보여주도록 만들어줌,
       • mbti를 구하는 핵심 로직 구현 : mbti라는 문자열 자료구조 형을 만들어서 각각의 type 별로 삼항연산자를 이용하여 로직 작성 ex) EI에서 E의 점수를 input 태그에 저장하였는데 그게 2보다 작으면 I고 그게 아니라면 E
       • 앞서 말한 로직을 이용해서 나온 mbti를 이용해서 result라는 object에서 해당 mbti의 value 속 key들을 활용하여 이미지 주소, 이름, 설명 도출하여 결과화면에 넣어주는 것을 구현
     • 마지막 문제가 아닐 경우(else) :
       • progress bar에 .attr을 이용하여 style속성(css속성)을 width 값을 calc로 변경해주어 편리하게 1/12(문제의 수가 12문제여서)씩 증가하게 함
       • title, type, A, B 에 해당하는 정보는 q라는 object에서 문제 번호를 key(num)로 그 정보를 가져올 수 있게 함
       • 다음 문제로 넘어갈 시 num++을 해줌으로써 1이 증가해 다음 문제로 넘어 갈 수 있도록 함