[javascript] 심리테스트 만들기 - 2

진행 상태 바
진행 상태 바 표시는 생각보다 간단했다
html에서 status bar를 status로 감싸주고
질문으로 넘어가는 함수 안에
statusBar의 with를 (100/전체 질문 수)*(질문index-1) + "%" 로 변경되게 하였다.

Result페이지 이동
질문으로 넘어가는 함수 안에
질문의 index 가 전체 질문 개수와 같으면 결과 함수가 실행되게 설정

if(qIdx === qCount){
goResult();
return;
}

결과값을 도출하려면 사용자가 몇 번째 질문에서 몇 번째의 답을 적었는지를 담아주어야 하는데
질문을 생성하는 함수에 answer의 index값을 받아서
답변을 클릭하면 만들어 놓은 select 배열의 qIdx 번째의 요소의 값에 aIdx 값이 들어가게 만들어주었다.

    for(let i in qnaList[qIdx].a){
        addAnswer(qnaList[qIdx].a[i].answer, qIdx, i);
    }

*이 부분에서 for문으로 aIdx값을 넣어주었는데
이 각각의 값을 addAnswer()이 기억하고 있다가 click이벤트가 발생했을 때 해당 aldx값을 받아올 수 있는 게 새삼 신기했다.

const qnaList = [
  {
    q: '질문',
    a: [
      { answer: '답변1', type: ['1', '2', '4', '9'] },
      { answer: '답변2', type: ['0', '3', '6', '5', '10'] },
      { answer: '답변3', type: ['7'] },
    ]
},
.
.
.
]

let select = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]

질문/답변의 데이터
데이터의 경우에는 위와 같이 질문과 답변, 그리고 답변의 type이 담긴 리스트를 작성해 놓았고,
결과를 도출할 땐 답변 클릭 시 클릭한 answer의 type에 반복문을 사용하여
미리 만들어 놓은 10개(질문 수) 요소가 담긴 배열 안에 해당 인덱스 위치의 값을 +1 하는 방법을 사용했다.

answer.addEventListener("click",function(){
        let child = document.querySelectorAll(".answerList");
        let target = qnaList[qIdx].a[aIdx].type;

        for(let i=0; i<target.length; i++){
            select[target[i]] += 1;
        }
        goNext(++qIdx);
});

 

그리고 select의 0부터 9까지의 요소 중 가장 높은 숫자의 인덱스번호를 추출하여

해당 인덱스 번호의 결과값을 노출했다

 

function calResult(){
    const resultValue = select.indexOf(Math.max(...select));
    return resultValue;
}

function setResult(){
    const resultValue = calResult();
    const resultName = document.querySelector(".resultName");
    resultName.innerHTML = infoList[resultValue].name;
    const resultDesc = document.querySelector(".resultDesc");
    resultDesc.innerHTML = infoList[resultValue].desc;
    const imgDiv = document.querySelector("#resultImg");
    const resultImg = document.createElement("img");
    const imgUrl = `./img/image-${resultValue}.png`;
    resultImg.src= imgUrl;
    imgDiv.appendChild(resultImg);
}