[MBTI 테스트(9)] Result 구현하기

끝 문항에서 넘어가면 결과페이지로 넘어가기

function goNext(qIdx){
  if(++qIdx === endPoint){
    goResult();
  }

goNext 함수에서

endPoint에 도달하면

goResult함수로 이동하게 한다.

 

 

Result 섹션

main 섹션코드를 긁어와서 조금 수정해준다

 

    <section id="result" class="mx-auto py-5 px=3"">
      <h1> 당신의 결과는? </h1>
      <div id="resultImg" class="col-lg-6 col-md-6 col-sm-6 col-12 mx-auto">
      </div>

이미지는 메인과 다르게

결과마다 이미지가 달라야하기에,

id를 resultImg라고 적어둔다.

 

 

결과값에 따라 다른 이미지 출력하기

 

이미 만들어져있는 data.js 파일을 보면

infoList라는 리스트 안에

name, desc 라는 key와 각각의 value가 정의되어있다.

 

이 내용이 들어갈 위치를 index.html에서 만들어준다.

 

      <div class = "resultname">
      </div>
      <div id="resultImg" class="col-lg-6 col-md-6 col-sm-6 col-12 mx-auto">
      </div>
      <div class = "resultDesc">
        
      </div>

      <button type="button"> 공유하기 </button>
    </section>

name, desc내용이 들어갈 자리를 div 태그로 만들어주고

button은 나중에 공유하기 버튼을 만들 예정이므로 남겨둔다.

 

 

goResult함수 만들기

start.js 파일에서 다음과 같이 상단에 정의해준다.

const result = document.querySelector("#result");

 

goNext 함수 코드를 복사해서

main > qna

qna > result로 변경해준다.

function goResult(){
  qna.style.WebkitAnimation = "fadeOut 1s";
  qna.style.animation = "fadeOut 1s";

  setTimeout(() => {
    result.style.WebkitAnimation = "fadeIn 1s";
    result.style.animation = "fadeIn 1s";
    setTimeout(() => {
      qna.style.display = "none";
      result.style.display = "block";
    }, 450)
})
}

 

 

result.css 만들기

#result{
  display: none;
}

index.html 파일에 링크거는것 잊지말기!!

 

 

 

 

오류 수정하기

function goNext(qIdx){
  if(qIdx+1 === endPoint){
    goResult();
    return;
  }

++qIds로 시작하니 2부터 시작한다.

따라서 qIdx+1로 바꿔준다.

 

또 마지막문항이 끝나면

return을 넣어준다,