퀴즈 만들기 (6) 객관식 슬라이드 유형

⭐️ 객관식 다수 문항 (정답 갯수 / 합격 여부 확인) ⭐️

01. 만드는 순서

1) 출력할 내용이 들어있는 요소 선택하기
2) 질문과 정답 내용, 필요한 값 입력하기
3) 질문 내용 출력하기
4) 정답 내용 숨겨놓기
5) 정답 확인 및 결과값 설정하기
6) 정답 버튼의 동작 설정하기

02. < script > 에 작성하기

    // 문제 정보
 
const quizInfo = [
    {
        answerType: "웹 디자인 기능사 (2014년 01회)",
        answerNum: "1",
        answerAsk: "다음의 디자인 원리 중 리듬에 해당되지 않는 것은?",
        answerChoice: [
            "점이",
            "강조",
            "균일",
            "점증",
        ],
        answerResult: "균일",
        answerEx: "균일 // '리듬(율동)'은 각 부분 사이에 시각적인 강한 힘과 약한 힘이 규칙적으로 연속될 때 생기는 디자인의 원리를 말합니다. '균일'은 부피, 증량 등 물리적 구조와 색채에서 시각적인 안정감을 이루는 것이며, 리듬에 해당되지 않습니다.",  // 정답 해설
    },
    {
        answerType: "웹 디자인 기능사 (2014년 01회)",
        answerNum: "2",
        answerAsk: "해안에 있는 조약돌은 자연의 힘에 의해 필연적으로 만들어진 형태라는 자연의 법칙이 만든 자연의 형태를 주장한 사람은?",
        answerChoice: [
            "르 코르뷔지에",
            "파파넥",
            "아른하임",
            "모홀로나기",
        ],
        answerResult: "모홀로나기",
        answerEx: "모홀로나기 // 모홀로나기의 사상에서 질문내용에 대한 정보를 도저히 못찾겠습니다. '해안에 있는 무인도에서 홀로나기'라고 '모홀로나기'를 기억해주세요 :) ",
    },
 
        // ...(생략)...이어서 계속 작성합니다.
 
 
        // 문제 정보 (선택자)
        const quizType = document.querySelector(".quiz__type");     // 문제 유형
        const quizQuestion = document.querySelector(".quiz__question");     // 문제 번호, 질문
        const querySelects = document.querySelector(".quiz__selects");     // 객관식 보기
        const quizResult = document.querySelector(".quiz__answer .result");     // 해설
        const quizConfirm = document.querySelector(".quiz__answer .confirm");     // 정답 확인 버튼
        const quizView = document.querySelector(".quiz__view");     // 정답 확인 버튼
 
        // 변수 설정
        let quizCount = 0;  //  총 문제 갯수
        let quizScore = 0;  //  맞춘 문제 갯수
 
        // 문제 출력
        const updateQuiz = (index) => {
            const questionTag = `
                <span class="number">${quizInfo[index].answerNum}. </span>
                <div class="ask">${quizInfo[index].answerAsk}</div>
            `;
            const choiceTag = `
                <label for="select1">
                    <input type="radio" id="select1" class="select" name="select" value="1">
                    <span class="choice">${quizInfo[index].answerChoice[0]}</span>
                </label>
                <label for="select2">
                    <input type="radio" id="select2" class="select" name="select" value="2">
                    <span class="choice">${quizInfo[index].answerChoice[1]}</span>
                </label>
                <label for="select3">
                    <input type="radio" id="select3" class="select" name="select" value="3">
                    <span class="choice">${quizInfo[index].answerChoice[2]}</span>
                </label>
                <label for="select4">
                    <input type="radio" id="select4" class="select" name="select" value="4">
                    <span class="choice">${quizInfo[index].answerChoice[3]}</span>
                </label>
            `;
 
            // 문제 출력
            quizType.innerHTML = quizInfo[index].answerType;   // 퀴즈 유형 출력
            quizQuestion.innerHTML = questionTag;   // 번호와 질문 출력
            querySelects.innerHTML = choiceTag;   // 객관식 보기 출력
            quizResult.innerHTML = quizInfo[index].answerEx;    // 해설 출력
 
            // 정답 확인 선택자 (위쪽에 적을 수 없어서 아래에 적어줌)
            const quizChoice = querySelects.querySelectorAll(".choice");
 
            for(let i=0; i<quizChoice.length; i++){
                quizChoice[i].setAttribute("onclick", "choiceSelected(this)")
            }
 
            // 문제 해설 숨기기
            quizResult.style.display = "none";
            quizConfirm.style.display = "none";
 
        }
        updateQuiz(quizCount);
 
        const choiceSelected = (answer) => {
            // alert(answer.textContent);   사용자가 클릭한 답을 창 메시지로 띄워줌
            let userAnswer = answer.textContent;    // 사용자가 체크한 정답
            let currentAnswer = quizInfo[quizCount].answerResult;   // 문제 정답
 
            if(userAnswer == currentAnswer){
                quizScore++;
                console.log("정답")
                quizView.classList.add("like")
                
            } else {
                console.log("오답")
                quizView.classList.add("dislike")
                quizResult.style.display = "block";
            }
            quizConfirm.style.display = "block";
 
 
        }
 
        // 정답 확인 버튼 (마지막 문제에 문제 갯수 출력)
        const answerQuiz = () => {
            if(quizInfo.length -1 == quizCount){
                quizConfirm.textContent = `총 ${quizInfo.length} 문제 중에 ${quizScore} 문제를 맞추고, ${quizInfo.length - quizScore} 문제를 틀렸습니다.  `
                if(quizScore >= 2){
                    quizConfirm.textContent += "🎀축하합니다. 합격🙃";
                } else {
                    quizConfirm.textContent += "🤏🏾조금만 더 힘내세요. 불합격😧";
                }
            }
 
 
            quizCount++;
            updateQuiz(quizCount);
            quizView.classList.remove("like","dislike")
        }
 
        quizConfirm.addEventListener("click", answerQuiz);

03. 결과보기

☛원본 사이트
새로운 창으로 열기

☛ 원본 소스 보기