문제 05

퀴즈

이번 유형은 객관식(여러문제)이며 점수 확인이 가능합니다.

---

문제 05

count를 이용하여 문제를 세줍니다.
36문제 이상 "통과" / 미만 "불합격" 입니다.

원본 사이트 보기 원본 소스 보기

HTML 코드

{
    <main id="main">
    <div class="quiz__wrap">
        <!-- <div class="quiz">
            <span class="quiz__type"></span>
            <h2 class="quiz__question">
                <span class="number"></span>
                <div class="ask"></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">
                        <input type="radio" id="select1" class="select" name="select" value="1" >
                        <span class="choice"></span>
                    </label>
                    <label for="select2">
                        <input type="radio" id="select2" class="select" name="select" value="2" >
                        <span class="choice"></span>
                    </label>
                    <label for="select3">
                        <input type="radio" id="select3" class="select" name="select" value="3" >
                        <span class="choice"></span>
                    </label>    
                    <label for="select4">
                        <input type="radio" id="select4" class="select" name="select" value="4" >
                        <span class="choice"></span>
                    </label>
                </div>
                <button class="confirm">정답 확인하기</button>
                <div class="result"></div>
            </div>
        </div> -->
    </div>
</main>
}   

Javascript 코드

push를 이용해서 forEach안에 HTML요소를 넣어줍니다. 이렇게 하면 한번만 적어도 됩니다.
if와 count를 이용해서 36개 이상 맞은 사람만 합격처리 시켜줍니다.

{
    // 문제정보
    const quizInfo = [...];
    let count = 0;

        const quizWrap = document.querySelector(".quiz__wrap");

        const 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;
                //미선택도 일단 가져오기위해 or사용
                const quizView = document.querySelectorAll(".quiz__view");          //강아지

                if(userAnswer == question.answerResult){
                    console.log("정답")
                    quizView[number].classList.add("like");
                    count ++;
                    
                } else{
                    console.log("오답")
                    quizView[number].classList.add("dislike");
                    const divBox = document.createElement("div");
                    quizSelectsWrap.appendChild(divBox).innerHTML = `<p class=result>
                        ${question.answerEx}</p>`;
                }
                    if(count >= 36){
                            document.querySelector(".quiz__confirm .ex").innerHTML = count + "/" + quizInfo.length + " 합격";
                        } else {
                            document.querySelector(".quiz__confirm .ex").innerHTML = count + "/" + quizInfo.length + " 불합격";
                        }
            });
            // 정답 갯수
            // 전체 문제수
            console.log(quizInfo.length)
            // 맞춘 갯수
            console.log(count)

        };
        
        
        // 정답 확인 클릭
        document.querySelector(".quiz__confirm .check").addEventListener("click", answerQuiz);
}