퀴즈 만들기 - 객관식(여러문제)유형

퀴즈 효과

객관식(여러문제 유형)

오늘은 화면에 여러문제를 표현한뒤 마지막에 결과확인 버튼을 누르면 점수가 나오는 유형을 만들어보겠습니다. 또한 quizScore라는 변수를 0으로 설정하고 맞을때마다 quizScore++를 사용해 마지막 정답버튼을 눌렀을 때 총 맞은 개수가 나오게 출력하였습니다.

---

결과

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

---

HTML 작성

기존에 body태그에 있던 코드들은 script로 넣어줄것이므로 quiz__wrap만 빼고 전부 지워줍니다.

<main id="main">
    <div class="quiz__wrap">
    </div>
</main>            

CSS 작성

기존과 딱히 변화 없습니다.

JS 작성

퀴즈 번호와 문제, 보기는 공통이므로 (``)템플릿 리터럴을 사용해 넣어줍니다. question(element)값을 입력해서 배열의 순서대로 값이 출력되게 만들었습니다.

펼쳐 보기

const quizInfo = [
{
    answerType: "웹디자인기능사 2010년 02회",
    answerNum: "1",
    answerAsk: "통일성을 주는 방법과 거리가 먼 것은?",
    answerChoice: {
        1: "각 요소들을 근접시킨다.",
        2: "각 요소들을 반복시킨다.",
        3: "각 요소들을 연속시킨다.",
        4: "각 요소들을 분리시킨다."
    },
    answerResult: "4",
    answerEx: "통일감을 갖기 위해서는 각 요소들이 근접, 반복, 연속되어야하므로 답은 4번입니다."
},
{
    answerType: "웹디자인기능사 2010년 02회",
    answerNum: "2",
    answerAsk: "디자인의 원리 중 율동(Rhythm)의 요소와 거리가 먼 것은?",
    answerChoice: {
        1: "대칭",
        2: "점증",
        3: "반복",
        4: "변칙"
    },
    answerResult: "1",
    answerEx: "율동에는 반복, 교차, 방사, 점이(점증)=그라데이션 등이 있으므로 답은 1번입니다."
},...
]
const quiz__wrap = document.querySelector(".quiz__wrap");
let quizScore = 0;

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>
        `)
    quiz__wrap.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");
            quizScore++;

        } else {
            console.log("오답")
            quizView[number].classList.add("dislike");
            const divBox = document.createElement("div");
            quizSelectsWrap.appendChild(divBox).innerHTML = `<p class="result">${question.answerEx}</p>`
        }
        
    });
    // 전체 문제수
    console.log(quizInfo.length) 
    // 내가 맞힌 수
    console.log(quizScore)


    document.querySelector(".quiz__confirm .ex").innerHTML = `${quizScore} / ${quizInfo.length} 맞았습니다 공부좀 하세요..`;

}

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