QUIZ | 문제 만들기 | 방법 05 | 점수 확인

QUIZ를 만들어보자 !

QUIZ의 여러 형태 중 객관식(여러문항); 점수확인 형식으로 만들어봅시다.

원본 소스 보기

---

script를 살펴봅시다 !

<script>
    //문제정보
    const quizInfo = [
        {
            answerType : "웹디자인기능사 2011년 02회",
            answerNum : "1",
            answerAsk : "검은 종이 위에 노랑과 파랑을 나열하고 일정한 거리에서 보면 노랑이 파랑보다 가깝게 보인다. 이때의 노랑색을 무엇이라 하는가?",
            answerChoice : {
                1: "후퇴색",
                2: "팽창색",
                3: "진출색",
                4: "수축색"
            },
            answerResult : "3",
            answerEx : "후퇴색(멀어져 보이는 색), 팽창색(확대되어 보이는 색), 진출색(가깝게 보이는 색), 수축색(줄어들게 보이는 색)"
        },
        {
            answerType : "웹디자인기능사 2011년 02회",
            answerNum : "2",
            answerAsk : "다음 중 시각 디자인에 속하지 않는 것은?",
            answerChoice : {
                1: "텍스트타일 디자인",
                2: "패키지 디자인",
                3: "POP 디자인",
                4: "타이포그래피"
            },
            answerResult : "1",
            answerEx : "텍스트타일 디자인은 제품디자인에 속합니다."
        },
        {
            answerType : "웹디자인기능사 2011년 02회",
            answerNum : "3",
            answerAsk : "디자인 형태의 분류 중 이념적 형태에 속하는 것은?",
            answerChoice : {
                1: "인위 형태",
                2: "추상 형태",
                3: "자연 형태",
                4: "실제 형태"
            },
            answerResult : "2",
            answerEx : "이념적 형태는 점, 선, 면, 입체와 같은 기하학적인 요소를 가지고 있는 것을 말합니다."
        },
        ...
    ];
    ...

+ 스크립트에 문제 정보를 추가

    const quizWrap = 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>
            `);
    
        quizWrap.innerHTML = exam.join('');
    }
    updateQuiz();

+ push( )를 통해 문제 레이아웃을 추가

+ join( )을 통해 , 표시 제거

    //정답 확인
    const answerQuiz = () => {
        const quizSelects = document.querySelectorAll(".quiz__selects");    //객관식 보기
        const quizConfirm = document.querySelector(".quiz__confirm .check");    //정답 보기

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

        });

        quizConfirm.textContent = `${quizScore < 36 ? "총 " + quizInfo.length + "문제 중에 " + quizScore + "문제를 맞추었습니다. 결과는 탈락입니다!" :  "총 " + quizInfo.length + "문제 중에" + quizScore + " 문제를 맞추었습니다. 결과는 합격입니다!"}`;

        

        //전체 문제수
        // console.log(quizInfo.length)

        //내가 맞힌 수
        // console.log(quizScore)
    }

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

const divBox = document.createElement("div");
quizSelectsWrap.appendChild(divBox).innerHTML = `<p class="result">${question.answerEx}</p>`;
+ 오답일 경우 div 박스를 만들고 quizSelectsWrap의 자식요소로 넣어 해설이 뜨도록 설정

quizConfirm.textContent = `${quizScore < 36 ? "총 " + quizInfo.length + "문제 중에 " + quizScore + "문제를 맞추었습니다. 결과는 탈락입니다!" : "총 " + quizInfo.length + "문제 중에" + quizScore + " 문제를 맞추었습니다. 결과는 합격입니다!"}`;
+ 최종 몇문제를 맞췄고 합격인지 불합격인지를 삼항연산자를 통해 설정