Quiz Effect 07 - 객관식 확인하기 CBT 카드 유형에 대해 알아보자 3

지난 번에 이어서 추가한 내용들을 위주로 보여드리겠습니다.

점수 결과 표시

//정답 확인
    const answerQuiz = () => {
        const cbtSelects = document.querySelectorAll(".cbt__selects");
        let correctCount = 0; // 맞힌 문제 수를 저장할 변수

        questionAll.forEach((question, number) => {
            const quizSelectsWrap = cbtSelects[number];
            const userSelector = `input[name=select${number}]:checked`;
            const userAnswer = (quizSelectsWrap.querySelector(userSelector) || {}).value;

            const numberAnswer = userAnswer ? userAnswer.slice(-1) : undefined;

            if(numberAnswer == question.answer){
                console.log("정답");
                cbtSelects[number].parentElement.classList.add("good");
                correctCount++; // 맞힌 문제 수 증가
            } else {
                console.log("오답");
                cbtSelects[number].parentElement.classList.add("bad");

                //오답일 경우 정답 표시
                const label = cbtSelects[number].querySelectorAll("label");
                label[question.answer-1].classList.add("correct");
            }

            //설명 숨기기
            const quizDesc = document.querySelectorAll(".cbt__desc");

            if(quizDesc[number].innerHTML == "undefined"){
                quizDesc[number].classList.add("hide");
            } else {
                quizDesc[number].classList.remove("hide");
            }
        });

        // 전체 문제 수와 맞힌 문제 수를 이용하여 점수 계산
        const totalScore = Math.round((correctCount / questionAll.length) * 100);

        // 점수 결과를 표시하는 요소에 점수를 출력
        const scoreElement = document.querySelector(".cbt__score");
        scoreElement.textContent = `당신의 점수는 ${totalScore}점 입니다.`;
    };

문제 풀이 결과에 따른 점수 결과를 표시하기 위해서는, 먼저 사용자가 맞춘 문제 수를 계산해야 합니다.

이를 위해서는 문제마다 사용자가 선택한 답안과 해당 문제의 정답을 비교하면서, 맞힌 문제의 개수를 셀 수 있습니다.

 

위 코드에서 correctCount 변수는 맞힌 문제 수를 저장하는 변수입니다.

이 변수는 각 문제마다 사용자가 선택한 답안과 해당 문제의 정답을 비교하면서, 맞힌 문제 수를 증가시킵니다.

 

마지막으로, 전체 문제 수와 맞힌 문제 수를 이용하여 점수를 계산하고, 점수 결과를 표시하는 요소에 점수를 출력합니다.

초의 단위가 한 자리 수가 되면 앞에 0 붙이기

//시간 표시
const displayTime = () => {
    if(questionTimeRemain <= 0){
        return "0분 00초";
    } else {
        let minutes = Math.floor(questionTimeRemain / 60);
        let seconds = questionTimeRemain % 60;

        return minutes + "분" + seconds + "초";

        //초의 단위가 한 자리 수가 되면 앞에 0을 붙여주기
        const displayTime = () => {
            if(questionTimeRemain <= 0){
                return "0분 00초";
            } else {
                let minutes = Math.floor(questionTimeRemain / 60);
                let seconds = questionTimeRemain % 60;
                seconds = seconds < 10 ? "0" + seconds : seconds;

                return minutes + "분" + seconds + "초";
            }
        }
    }
}

위 코드에서는 seconds 변수의 값이 10보다 작을 경우, seconds 앞에 0을 붙이도록 하는 삼항 연산자를 사용했습니다.

 

이렇게 수정하면 출력되는 초 값이 한 자리 수일 때도 항상 두 자리 수로 표시됩니다.

이름 입력하기

//이름
const nameInput = document.querySelector("#name-input");
const nameSubmitButton = document.querySelector("#name-submit-button");
const nameDisplay = document.querySelector(".cbt__name");
let name = "";

nameSubmitButton.addEventListener("click", () => {
name = nameInput.value;
nameDisplay.textContent = name;
});

입력한 이름을 저장하기 위해서는 자바스크립트에서 변수를 사용하여 입력된 값을 저장할 수 있습니다.

 

이름을 입력받을 <input> 요소와 이름을 저장하기 위한 변수를 준비합니다.

위 코드에서는 let 키워드를 사용하여 이름을 저장할 변수 name을 선언합니다.

 

이 변수는 전역 스코프에서 선언되므로 다른 함수에서도 사용할 수 있습니다.

또한 click 이벤트 핸들러에서 nameInput.value 값을 name 변수에 할당하여 입력된 이름을 저장합니다.

 

이제 name 변수에 저장된 이름을 다른 함수에서 사용할 수 있습니다.