"퀴즈이펙트" Quiz 05 : 객관식 60문제 유형

Quiz 05.

자바스크립트를 활용하여 웹디자인기능사 필기 2013년도 5회차 문제를 통해 객관식(여러문제) 확인하기를 점수까지 나오도록 만들어봅시다!
몇 문제 중에 몇 개가 정답인지와 점수, 합격여부를 알려주는 기능을 만들었습니다.
✽ 참고 : 100점을 60문제로 나누면 1.666・・・・이 나오는데 깔끔하게 소수점을 버리는 Math.floor()라는 메서드를 사용해보았습니다.

퀴즈 확인하기 원본 소스보기

코드 참고

//문제 정보 (밑 문제 처럼 60개 만들어야 함. 나머지는 생략함)
const quizInfo = [
    {
        answerType: "웹디자인 기능사 2013년 05회",
        answerNum: "1",
        answerAsk: "디자인 형태의 개념에서 조화(harmony)를 이루는 법칙과 거리가 먼 것은?",
        answerChoice: {
            1: "균형",
            2: "대비",
            3: "통일",
            4: "색상"
        },
        answerResult: "4",
        answerEx: "조화를 이루는 법칙은 균형, 대비, 통일, 유사, 균일, 강약, 변화가 있습니다."
    },
];
const quizWrap = document.querySelector(".quiz_wrap");
let quizScore = 0;
// 문제 출력 //배열 exam 안에 push메서드를 통해 퀴즈 내용 추가해주기!
function updateQuiz(){
    const exam = [];
    quizInfo.forEach((question, number) => {
        exam.push(`
        <div class="quiz">
        <span class="quiz_type">${question.answerType}</span>
        <h2 class="quiz_question">
            <span class="number">${question.answerNum}. </span>
            <div class="ask">${question.answerAsk}</div>
        </h2>
        <div class="quiz_view">
            <div class="true">정답입니다!</div>
            <div class="false">틀렸습니다!!</div>
            <div class="dog">
                <div class="head">
                    <div class="ears"></div>
                    <div class="face"></div>
                    <div class="eyes">
                        <div class="teardrop"></div>
                    </div>
                    <div class="nose"></div>
                    <div class="mouth">
                        <div class="tongue"></div>
                    </div>
                    <div class="chin"></div>
                </div>
                <div class="body">
                    <div class="tail"></div>
                    <div class="legs"></div>
                </div>
            </div>
        </div>
        <div class="quiz_answer">
            <div class="quiz_selects">
                <label for="select1${number}">
                    <input type="radio" id="select1${number}" class="select" name="select${number}" value="1">
                    <span class="choice">${question.answerChoice[1]}</span>
                </label>
                <label for="select2${number}">
                    <input type="radio" id="select2${number}" class="select" name="select${number}" value="2">
                    <span class="choice">${question.answerChoice[2]}</span>
                </label>
                <label for="select3${number}">
                    <input type="radio" id="select3${number}" class="select" name="select${number}" value="3">
                    <span class="choice">${question.answerChoice[3]}</span>
                </label>
                <label for="select4${number}">
                    <input type="radio" id="select4${number}" class="select" name="select${number}" value="4">
                    <span class="choice">${question.answerChoice[4]}</span>
                </label>
            </div>
        </div>
    </div>
        `);
    });
    exam.push(`
        <div class="quiz_confirm">
            <button class="check">정답 확인하기</button>
            <div class="ex"></div>
        </div>
    `);
    quizWrap.innerHTML = exam.join(''); //베열에 생기는 ,없애줌
}
updateQuiz();

// 정답 확인
const answerQuiz = () => {
    const quizSelects = document.querySelectorAll(".quiz_selects");   //객관식 보기
    //사용자가 체크한 보기 == 문제 정답
    quizInfo.forEach((question, number) => {
        const userSelector = `input[name=select${number}]:checked`;//사용자가 체크한 것
        const quizSelectsWrap = quizSelects[number];
        const userAnswer = (quizSelectsWrap.querySelector(userSelector) || {}).value;
        const quizView = document.querySelectorAll(".quiz_view");
        if(userAnswer == question.answerResult){
            //console.log("정답");
            quizView[number].classList.add("like")
            quizScore++;
        } else {
            //console.log("오답");
            quizView[number].classList.add("dislike")
            const divBox = document.createElement("div");//자바스크립트로 태그 추가하는 법
            quizSelectsWrap.appendChild(divBox).innerHTML = `<p class="result">${question.answerEx}</p>`
        }
    });
    //맞힌 갯수 / 전체 갯수 / 점수 / 합or불합
    let totalScore = quizScore * 1.66666667;  

    if(quizScore >= 40){
        document.querySelector(".check").innerHTML = "결과" + quizInfo.length + "문제 중 " + quizScore + "개 정답. 점수: " + Math.floor(totalScore) + "점" + " 합격입니다.🙆🏻‍♀️"
    } else {
        document.querySelector(".check").innerHTML = "결과" +  quizInfo.length + "문제 중 " + quizScore + "개 정답. 점수: " + Math.floor(totalScore) + "점" + " 불합격입니다.🙅🏻‍♀️"
          
    }
}
// 정답 클릭
document.querySelector(".quiz_confirm .check").addEventListener("click", answerQuiz);