[Quiz Effect] 퀴즈 이펙트 05 - 2013년 4회 웹디자인기능사 기출문제 풀어보기

퀴즈 만들기 05 : 2013년 4회 웹디자인기능사

이번 시간에는 그 동안 배웠던 JavaScript를 이용하여 퀴즈를 만들어보도록 하겠습니다.
이번 학습 내용을 잘 활용하여 웹디자인기능사 시험 공부 열심히 해 봅시다!
변수(let)와 상수(const)에 쿼리 셀렉터 값을 저장시키고, 그 동안 배운 스크립트를 통해 문제 정보를 HTML 태그에 출력시키고, 정답을 숨겼다가 버튼을 눌러 보이게 하는 등의 다양한 효과들을 구현시켜봅시다!

---

JS 소스

다섯번째 객관식(여러 문제) 유형의 자바스크립트 소스와 부연 설명(주석 처리됨)이다.
기존 문제 풀이 기능에 총 문제수와 정답 개수, 총 점수, 합격 여부 등을 표시하는 기능을 추가하자.
HTML과 CSS 소스를 함께 보고 싶다면 맨 아래의 '원본 소스 보기' 버튼을 누를 것.

<script>
    //선택자
    //문제 정보는 길어서 생략^^
    const quizInfo = [
            {
                answerType: "2013년 4회 웹디자인기능사 - 디자인일반",
                answerNum: "1",
                answerAsk: "웹 디자인에 관한 설명으로 거리가 먼 것은?",
                answerChoice: {
                    1: "가. 웹 페이지를 디자인하고 제작하는 것을 의미한다.",
                    2: "나. 웹 디자인은 개인용 홈페이지 외 기업용, 상업용 등 매우 다양하다.",
                    3: "다. 웹 디자인은 웹과 디자인이라는 두 가지 개념이 결합된 것이다.",
                    4: "라. 기업, 단체, 행사의 특징과 성격에 맞는 시각적 상징물을 말한다.",
                }, 
                answerResult: "4",
                answerEx: "정답 : 4 
기업, 단체, 행사의 특징과 성격에 맞는 시각적 상징물은 캐릭터에 관한 설명이다."
            }, ...
    ];

    const quizWrap = document.querySelector(".quiz__wrap");
    let quizScore = 0;      // 맞은개수
    let quizScore2 = 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 class="resultInfo">
                    <div class="quizInfoNum">총 문제수 : <p class="num">0</p></div>
                    <div class="quizResultNum">정답 개수 : <p class="num">0</p></div>
                    <div class="quizScoreNum">총 점수 : <p class="num">0</p></div>
                    <div class="passValue">합격 여부 : <p class="value"></p></div>
                </div>
            </div>
        `);
        
        quizWrap.innerHTML = exam.join('');
    };
    updateQuiz();

    // 전체 문제 수
    // console.log(quizInfo.length);
    const quizInfoNum = document.querySelector(".quizInfoNum .num")
    quizInfoNum.textContent = quizInfo.length;

    // 맞힌 수
    // console.log(quizScore);
    const quizResultNum = document.querySelector(".quizResultNum .num")
    quizResultNum.textContent = quizScore;

    // 총 점수
    const quizScoreNum = document.querySelector(".quizScoreNum .num");

    // 합격 불합격 여부
    const passValue = document.querySelector(".passValue .value");

    // 정답 확인
    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;
            const quizView = document.querySelectorAll(".quiz__view");      // 강아지 (60마리나 되니까 All 붙일것)


            if(userAnswer == question.answerResult) {
                // console.log("정답");
                quizView[number].classList.add("like"); //강아지 웃음
                quizScore++;    // 정답이면 맞은 개수에 1씩 추가
                quizScore2 += 1.6;    // 정답이면 점수 1.6씩 추가
            } else {
                // console.log("오답");
                quizView[number].classList.add("dislike"); //강아지 울음
                const divBox = document.createElement("div");
                quizSelectsWrap.appendChild(divBox).innerHTML = `
${question.answerEx}
`;
            }
            quizResultNum.textContent = quizScore;      // 맞은 개수 출력
            quizScoreNum.textContent = quizScore2;      // 총 점수 출력

            // 합격 불합격 여부 알림
            if(quizScore >= 40) {
                passValue.textContent = "합격입니다! 🎉";
            } else {
                passValue.textContent = "불합격입니다… 😰";
            }
        });
    };

    // 정답 확인 클릭
    document.querySelector(".quiz__confirm .check").addEventListener("click", answerQuiz);
</script>

HTML 영역에 적혀있어야 할 것들은 quizInfo.forEach((question, number) => ) { exam.push(``)... }안에 넣는다.

결과

2013년 4회 웹디자인기능사 기출문제들을 풀 수 있도록 했습니다. 열심히 공부해서 우리 모두 무사히 합격합시다~! 🥰
'원본 사이트 보기'를 눌러 문제를 풀어보세요.

원본 사이트 바로가기

원본 소스 보기