QuizEffect05

객관식(여러문제) 확인하기 : 점수

스크립트를 통해서 객관식문제의 전체문제 중에 몇 문제를 맞았는지 확인해봅시다.

원본 소스 보기

원본 사이트

---

html

javascript를 통해 소스를 넣어주기 위해서, quiz__wrap안에 내용이 있었으나 지워줍니다.

코드 확인

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

문제 정보

여러개의 문제를 배열 속에 객체에 저장하여 활용합니다. 객관식 문제는 객체에 저장

코드 확인

//문제 정보
const quizInfo = [
    {
        answerType: "웹디자인기능사 2011년 1회",
        answerNum: "1",
        answerAsk: "건강 이미지의 웹사이트를 구성하려고 한다. 가장 적합한 컬러는?",
        answerChoice: {
            1: "빨강색",
            2: "노랑색",
            3: "검정색",
            4: "녹색",
        },
        answerResult: "4",
        answerEx: "초록은 싱그러움과 맑음 등을 상징하기에 적합합니다."
    },
    .
    .
    .
];

html => js

html 소스를 js를 이용해서 넣어서 반복작업을 줄입니다. push를 이용해서 내용을 넣었습니다.

코드 확인

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

//문제 출력
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>
    `);          //push를 이용해서 내용을 넣는다. 

    });

    exam.push(`
        <div class="quiz__confirm">
            <button class="check">정답 확인하기</button>
            <div class="ex">
            </div>
        </div>
    `)

    quizWrap.innerHTML = exam.join('');     //join으로 중간에 생기는 따옴표 지운다.
}
updateQuiz();

정답 확인

36개 이상의 문제를 맞는 경우에 합격, 그렇지 않은 경우에 불합격으로 표기합니다. 전체 문제의 수와 사용자가 맞은 수를 구합니다.

코드 확인

//정답 확인
const answerQuiz = () => {      //정답 확인 버튼 클릭시의 이벤트
    const quizSelects = document.querySelectorAll(".quiz__selects");        //객관식 보기
    // const quizEx = document.querySelector(".quiz__confirm .ex");     //체크한 보기 == 문제 정답 확인

    //사용자 체크한 보기 == 문제 정답
    quizInfo.forEach((question, number) => {
        const userSelector = `input[name=select${number}]:checked`; //사용자가 체크한 것
        const quizSelectsWrap = quizSelects[number];                //0은 첫번째 문제, 1은 두번째 문제... quizSelectsWrap으로 정해준 것
        const userAnswer = (quizSelectsWrap.querySelector(userSelector) || {}).value;           //quiz__selects[number] 체크 된 것을 찾는다. | {} 빈 문자열은 체크 하지 않을 경우의 출력
        const quizView = document.querySelectorAll(".quiz__view")       //강아지

        console.log(userAnswer)

        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)      //콘솔로그 응용

    //정답 수 / 합격여부 출력

    // quizEx.innerText = `전체 갯수 : ${quizInfo.length} 맞은 갯수 : ${quizScore}`;

    if (36 <= quizScore) {
        document.querySelector(".ex").textContent = "전체" + quizInfo.length + "개 중 " + quizScore + "개 정답으로, 합격."
    } else {
        document.querySelector(".ex").textContent = "전체" + quizInfo.length + "개 중 " + quizScore + "개 정답으로, 불합격."
    }

}

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