Quiz Effect05 - 객관식 여러문제

const quizWrap = document.querySelector(".quiz__wrap");                         //퀴즈

//문제정보
const quizInfo = [
    {
        answerType : "HTML", 
        answerNum : 1, 
        answerAsk : "정답은 HTML 입니다.",
        answerChoice : {
            1: "html",
            2: "css",
            3: "javasript",
            4: "react"
        },
        answerResult : "1",
        answerEx : "정답은 HTML 입니다."
    },

    {
        answerType : "CSS",
        answerNum : 2,
        answerAsk : "정답은 CSS 입니다.",
        answerChoice : {
            1: "html",
            2: "css",
            3: "javasript",
            4: "react"
        },
        answerResult : "2",
        answerEx : "정답은 CSS 입니다."
    },
    {
        answerType : "javasript",
        answerNum : 3,
        answerAsk : "정답은 javasript 입니다.",
        answerChoice : {
            1: "html",
            2: "css",
            3: "javasript",
            4: "react"
        },
        answerResult : "3",
        answerEx : "정답은 javasript 입니다."
    }
];

//문제 출력
function updataQuiz(){
    const html = [];

    quizInfo.forEach((question, number) => {
        html.push(`
            <div class="quiz">
                <h2 class="quiz__type">${question.answerType}</h2>
                <h3 class="quiz__question">
                    <span class="quiz__number">${question.answerNum}</span>
                    <span class="quiz__ask">${question.answerAsk}</span>
                </h3>
                <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 class="select" type="radio" id="select1${number}" name="select${number}" value="1">
                            <span class="choice">${question.answerChoice[1]}</span>
                        </label>
                        <label for="select2${number}">
                            <input class="select" type="radio" id="select2${number}" name="select${number}" value="2">
                            <span class="choice">${question.answerChoice[2]}</span>
                        </label>
                        <label for="select3${number}">
                            <input class="select" type="radio" id="select3${number}" name="select${number}" value="3">
                            <span class="choice">${question.answerChoice[3]}</span>
                        </label>
                        <label for="select4${number}">
                            <input class="select" type="radio" id="select4${number}" name="select${number}" value="4">
                            <span class="choice">${question.answerChoice[4]}</span>
                        </label>
                    </div>
                </div>
            </div>
        `)
    })

    html.push(`
        <div class="quiz__btn">
            <button class="quiz__confirm">정답 확인하기</button>
            <div class="quiz__result"></div>
        </div>
    `);

    // console.log(html);

    quizWrap.innerHTML = html.join('');
}
updataQuiz();

function answerQuiz(){
    const quizSelects = document.querySelectorAll(".quiz__selects");   //보기 선택 박스
    const quizView = document.querySelectorAll(".quiz__view");   //보기 선택 박스
    const quizResult = document.querySelector(".quiz__result");   //보기 선택 박스

    let scoreCurrent = 0;

    quizInfo.forEach((question, number) => {
        const quizSelectsWrap = quizSelects[number];                                  //전체 보기 박스 
        const userSelector = `input[name=select${number}]:checked`;                   //사용자가 클릭한것
        const userAnswer = (quizSelectsWrap.querySelector(userSelector) || {}).value  //클릭한 값의 속성 값을 가져옮

        if(userAnswer == question.answerResult){
            //console.log("정답입니다.")
            quizView[number].classList.add("like");
            scoreCurrent++;
        } else {
            //console.log("오답입니다.")
            quizView[number].classList.add("dislike");
            const div = document.createElement("div");
            quizSelectsWrap.appendChild(div).innerHTML = `<p class="quiz__ex">${question.answerEx}</p>`;
        }
    });
    quizResult.innerHTML = `${quizInfo.length} 문제 중에 ${scoreCurrent} 문제를 맞추었습니다.`;
}

document.querySelector(".quiz__confirm").addEventListener("click", answerQuiz);

• js로 css 제어하기
• Node.textContent
• add()/remove()
• forEach()
• for
• if
• join()
• length