QuizEffect - 05

스크립트를 이용한 퀴즈 만들기 05(객관식 - 여러문제)

스크립트를 이용하여 객관식에 관한 문제를 만들 수 있으며, 이때 label태그를 활용 합니다.

원본 소스 보기

사이트보기

---

Script

//문제정보
const quizInfo = [
    {
        answerType: "웹디자인기능사 2010년 05회",
        answerNum: "1",
        answerAsk: "먼셀의 색상에서 이 표준 빨강이면 1R은?",
        answerChoice: {
            1: "연지",
            2: "다홍",
            3: "주황",
            4: "보라",
        },
        answerResult: "1",
        answerEx: "먼셀의 색상에 이 표준이 빨강이면 여기서 R은 빨강을 뜻하므로 1명도의 빨강인 연지가 답입니다."
    },
    {
        answerType: "웹디자인기능사 2010년 05회",
        answerNum: "2",
        answerAsk: "빛의 파장에 따른 굴절 각도를 이용하여 프리즘에 의한 가시스펙트럼 색을 얻을 수 있었는데, 이것은 빛이 단색이 아니라 여러 가지 색의 혼합색이라는 것을 말한다고 정의한 사람은?",
        answerChoice: {
            1: "헤리",
            2: "헬름홀츠",
            3: "돈서스",
            4: "뉴턴",
        },
        answerResult: "4",
        answerEx: "프리즘을 이용해 빛을 스펙트럼으로 분리해서 최초로 발견한 사람은 뉴턴입니다. 가시광선은 눈에 보이는 영역을 의미하며 이것은 여러가지 혼합색으로 이루어져 있습니다."
    }
];
let Ex = document.querySelector(".quiz__confirm .ex");
const quizCofirm = document.querySelector(".quiz__confirm .check");

Ex.style.display = "none";
        
//정답 확인
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");

        if(userAnswer == question.answerResult) {
            uizView[number].classList.add("like");
            quizScore++;
        } else {
            quizView[number].classList.add("dislike");
            const divBox = document.createElement("div");
            quizSelectsWrap.appendChild(divBox).innerHTML = `<p class=result>${question.answerEx}
`;   //appendChild - 자식으로 넣어줌
                     
        }
    });

            
    //전체 문제수
    //내가 맞힌 수
            
    Ex.style.display = "block";
    quizCofirm.style.display = "none";
    Ex.innerHTML += quizInfo.length + "문제 중 에서" + " " + quizScore + " 문제를 맞추셨습니다.";

    if (quizScore >= 40) {
        Ex.innerHTML += "축하합니다. 합격입니다❤️";
    } else {
        Ex.innerHTML += "안타깝네요. 열심히 노력하세요✏️";
    }
 }

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

(quizSelectsWrap.querySelector(userSelector) || {}).value

빈문자열로 같이 확인을 하기위해서 ||(또는)을 넣어줍니다.

HTML

html을 스크립트로 작성하여 만들 수 있습니다.

function 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();       //먼저 생성된 다음에 답안 작업을 해야함

exam.push(`
    <div class="quiz">
    .....
`)

push() 메서드를 이용하여 배열을 추가 합니다.

quizwrap.innerHTML = exam.join('');

join() 메서드를 이용하여, join()으로 반환한 배열을 문자열로 변환시켜 줍니다.