Quiz Effect - 객관식 : 여러문제 정답 확인하기

 

설명

여러 문제를 각각 사용자가 입력한 값과 정답의 값을 비교해서 정답과 오답을 출력합니다.
이번에는 모든 문제를 javascript로 출력 하였습니다.

<script>
    const quizWrap = document.querySelector(".quiz__wrap")
        
    //문제 정보
    const quizInfo = [
        {
            answerType : "javascript",
            answerNum : 1,
            answerAsk : "객체 기반의 스크립트 프로그래밍 언어는 무엇입니까?",
            answerChoice : {
                1: "html",
                2: "css",
                3: "javascript",
                4: "jquery"
            },
            answerResult : "3",
            answerEx : "객체 기반의 스크립트 프로그래밍 언어는 자바스크립트입니다."
        },
        {
            answerType : "html",
            answerNum : 2,
            answerAsk : "웹 페이지를 표현하기 위한 마크업 언어는 무엇입니까?",
            answerChoice : {
                1: "html",
                2: "css",
                3: "javascript",
                4: "jquery"
            },
            answerResult : "1",
            answerEx : "웹 페이지를 표현하기 위한 마크업 언어는 HTML입니다."
        },
        {
            answerType : "css",
            answerNum : 3,
            answerAsk : "웹 페이지를 꾸미기 위해서 사용하는 언어는 무엇입니까?",
            answerChoice : {
                1: "html",
                2: "css",
                3: "javascript",
                4: "jquery"
            },
            answerResult : "2",
            answerEx : "웹 페이지를 꾸미기 위해서 사용하는 언어는 CSS입니다."
        }
    ];

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

        quizInfo.forEach((question, number) => {                        //html로 작업 하던것을 javascript로 출력
            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>
        
        `)

        quizWrap.innerHTML = html.join('');                             //push메서드를 이용해서 중간에 , 있는것을 join메서드로 지워줌
    }
    updateQuiz();

    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){                                        //사용자가 클릭한 것과 정답이 맞는지 비교
                quizView[number].classList.add("like");                                     
                scoreCurrent++;
            } else {
                quizView[number].classList.add("dislike");
                const div = document.createElement("div");                                  //틀릴경우 div박스를 만들어 줌
                quizSelectsWrap.appendChild(div).innerHTML = `<p class="quiz__ex">${question.answerEx}</p>` //새로 만든 div박스에 설명을 출력
            }
        });
        quizResult.innerHTML = `${quizInfo.length} 문제 중에 ${scoreCurrent} 문제를 맞추었습니다.`  //점수 출력
    };

    document.querySelector(".quiz__confirm").addEventListener("click", answerQuiz)
</script>