퀴즈 만들기 (5) 객관식 다수 문항

⭐️ 객관식 다수 문항 (정답 오답 확인) ⭐️

01. 만드는 순서

1) 출력할 내용이 들어있는 요소 선택하기
2) 질문과 정답 내용, 필요한 값 입력하기
3) 질문 내용 출력하기
4) 정답 내용 숨겨놓기
5) 정답 확인 및 결과값 설정하기
6) 정답 버튼의 동작 설정하기

02. < script > 에 작성하기

    // 문제 정보

    const quizInfo = [
        {
            answerType: "웹 디자인 기능사 (2014년 01회)",
            answerNum: "1",
            answerAsk: "다음의 디자인 원리 중 리듬에 해당되지 않는 것은?",
            answerChoice: {
                1: "점이",
                2: "강조",
                3: "균일",
                4: "점증",
            },
            answerResult: "3",
            answerEx: "3번 // '리듬(율동)'은 각 부분 사이에 시각적인 강한 힘과 약한 힘이 규칙적으로 연속될 때 생기는 디자인의 원리를 말합니다. '균일'은 부피, 증량 등 물리적 구조와 색채에서 시각적인 안정감을 이루는 것이며, 리듬에 해당되지 않습니다.",  // 정답 해설
        },
        {
            answerType: "웹 디자인 기능사 (2014년 01회)",
            answerNum: "2",
            answerAsk: "해안에 있는 조약돌은 자연의 힘에 의해 필연적으로 만들어진 형태라는 자연의 법칙이 만든 자연의 형태를 주장한 사람은?",
            answerChoice: {
                1: "르 코르뷔지에",
                2: "파파넥",
                3: "아른하임",
                4: "모홀로나기",
            },
            answerResult: "4",
            answerEx: "4번 // 모홀로나기의 사상에서 질문내용에 대한 정보를 도저히 못찾겠습니다. '해안에 있는 무인도에서 홀로나기'라고 '모홀로나기'를 기억해주세요 :) ",
        },

        // ...(생략)...이어서 계속 작성합니다.


    // 선택자
    const quizWrap = document.querySelector(".quiz__wrap");



    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();


     //정답 확인
     function answerQuiz(){
        const quizSelects = document.querySelectorAll(".quiz__selects");    //보기
        const quizView = document.querySelectorAll(".quiz__view");          //강아지
        //사용자가 체크한 라디오 박스  == 문제 정답
        quizInfo.forEach((question, number) => {
            const quizSelectsWrap = quizSelects[number];                    //전체 보기 박스
            const userSelector = `input[name=select${number}]:checked`;         //사용자가 클린한 라디오 박스
            const userAnswer = (quizSelectsWrap.querySelector(userSelector) || {}).value
            const quizView = document.querySelectorAll(".quiz__view");
            console.log(quizSelects)
            if(userAnswer == question.answerResult){
                console.log("정답")
                quizView[number].classList.add("like");
            } else {
                console.log("오답")
                quizView[number].classList.add("dislike");
                const div = document.createElement("div");
                quizSelectsWrap.appendChild(div).innerHTML = `<p class="result">${question.answerEx}</p>`;
            }
        });
    }
    document.querySelector(".quiz__confirm .check").addEventListener("click", answerQuiz);    // 맨 밑에 있어야 함.

03. 결과보기

☛원본 사이트
새로운 창으로 열기

☛ 원본 소스 보기