QuizEffect05

quizEffect05

2016년 04회차 웹디자인 기능사 시험 기출문제입니다.
열심히 풀어서 100점을 맞아봐요!

---

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

자바스크립트

문제 정보는 이전과 동일하므로 생략하고 선택자부터 넣었습니다.
퀴즈04번과 동일하게 빈배열인 exam 상수를 선언하고 내부에 forEach문, push(``(리터럴))을 사용하여 html 태그를 넣고 ${}표현식에 변수를 넣어 문제가 출력되도록 하였습니다.
추가적으로, 60개의 문제중 36개 정답을 기준으로 합격과 탈락이 출력되도록 삼항연산자를 사용하여 입력해주었습니다.

//선택자
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>
        `);
    });
    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");    //객관식 보기
    document.querySelector(".quiz__confirm .check").style.display = "none";     //한번 실행하고 정답 확인하기를 숨깁니다.

    //사용자가 체크한 보기 == 문제 정답
    quizInfo.forEach((question, number) => {
        const userSelector = `input[name=select${number}]:checked`;     //사용자가 체크한 것
        const quizSelectsWrap = quizSelects[number];
        const userAnswer = (quizSelectsWrap.querySelector(userSelector) || {}).value;
        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>`;
        }

        // 종합 점수
        document.querySelector(".quiz__confirm .ex").innerHTML =
            `${quizScore < 36 ? quizInfo.length + "/" + quizScore + " 탈락입니다!" : quizInfo.length + "/" + quizScore + " 합격입니다!"}`;
    });
    //전체 문제 수
    // console.log(quizInfo.length);

    //내가 맞힌 수
    // console.log(quizScore);
    
}
//정답 클릭
document.querySelector(".quiz__confirm .check").addEventListener("click", answerQuiz);