자바스크립트 퀴즈 효과 : 객관식(여러 문제 유형) : 슬라이드 형식

자바스크립트 : 퀴즈 효과 : 슬라이드 형식

자바스크립트의 다양한 효과들 중, 퀴즈를 맞힐 수 있는 퀴즈 효과입니다. 그 중에서도, 객관식 정답을 선택하고, '다음 문제' 버튼을 누르면 다음 문제로 이동하는 슬라이드 형식으로 퀴즈를 작업했습니다.

---

객관식(여러 문제) 유형 : 슬라이드 형식

예시는 웹디자인기능사의 필기 시험 문제입니다. 문제의 정답을 맞히면 문구가 나타나며 강아지 애니메이션이 기뻐하고, 정답을 맞히지 못하면 슬퍼하는 애니메이션으로 입력값에 따라 다른 결과가 나타납니다. 문제를 다 푼 뒤 '정답 확인하기' 버튼을 클릭하면 맞힌 문제의 갯수와 점수, 합/불합격 여부가 나타납니다.

// 문제 정보
const quizInfo = [
    {
        answerType: "웹디자인기능사 2013년 01회",
        answerNum: "6",
        answerAsk: "서로 다른 색끼리의 영향으로 인하여 밝은 색은 더 밝게 어두운 색은 더 어둡게 보이는 대비는?",
        answerChoice: [
            "색상대비",
            "명도대비",
            "채도대비",
            "계시대비"
        ],
        answerResult: "명도대비",
        answerEx: "어둡고 밝다라는 언급은 명도를 의심하셔야 됩니다."
    },
    {
        answerType: "웹디자인기능사 2013년 01회",
        answerNum: "7",
        answerAsk: "디자인 원리 중 율동(Rhythm)에 해당하지 않는 것은?",
        answerChoice: [
            "비례",
            "반복",
            "강조",
            "점이"
        ],
        answerResult: "비례",
        answerEx: "율동의 효과는 강한 힘과 약한 힘이 '규칙적'으로 생겨나는 '움직임' 입니다. 비례랑은 상관없습니다."
    },
    {
        answerType: "웹디자인기능사 2013년 01회",
        answerNum: "8",
        answerAsk: "어둠이 시작될 때 물체의 상이 흐리게 나타나는 현상과 가장 관계가 깊은 것은?",
        answerChoice: [
            "색순응",
            "푸르킨예 현상",
            "박명시",
            "조건등색"
        ],
        answerResult: "박명시",
        answerEx: "명순응은 어두운 -> 밝은곳 갈 때 눈의 적응 암순응은 밝은 -> 어두운 곳 갈 때 눈의 적응입니다. 박명시란 그 중간에 눈의 적응입니다. 그 상태에선 물체가 흐리게 보여요"
    },
    {
        answerType: "웹디자인 기능사 2013년 01회",
        answerNum: 11,
        answerAsk: "스파트(spot) 광고에 대한 설명이 옳은 것은?",
        answerChoice: [
            "전국 방송망으로 방송국에서 전국에 실시하는 광고",
            "일정시간을 정해 30초 CM 10개를 계속 방송하는 형태",
            "지역 방송국에 제한되어 방송하는 것",
            "프로그램과 프로그램 사이에 광고를 삽입하는 것",
        ],
        answerResult: "프로그램과 프로그램 사이에 광고를 삽입하는 것",
        answerEx: "기억해주세요 spot 광고란 '라디오나 텔레비전 방송에서, 프로그램 사이 또는 프로그램 진행 중에 아주 짧게 나가는 광고' 입니다.",
    },
    {
        answerType: "웹디자인 기능사 2013년 01회",
        answerNum: 15,
        answerAsk: "다음 중 굿 디자인(Good Design)의 조건이 아닌 것은?",
        answerChoice: [
            "심미성",
            "독창성",
            "대중성",
            "경제성",
        ],
        answerResult: "대중성",
        answerEx: "굿디자인 4가지 외우세요 : 심미성, 독창성, 합목적성, 경제성 입니다.",
    }
]

const quizType = document.querySelector(".quiz__type")  // 퀴즈 유형
const quizQuestion = document.querySelector(".quiz__question");  // 문제 번호, 질문
const quizSelects = 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 quizTag = `
        <div>${quizInfo[index].answerType}</div>
    `;
    const questionTag = `
        <span class="number">${quizInfo[index].answerNum}. </span>
        <div class="ask">${quizInfo[index].answerAsk}</div>
    `;
    const choiceTag = `
        <label for="select1">
            <input type="radio" class="select" id="select1" name="select" value="1">
            <span class="choice">${quizInfo[index].answerChoice[0]}</span>
        </label>
        <label for="select2">
            <input type="radio" class="select" id="select2" name="select" value="2">
            <span class="choice">${quizInfo[index].answerChoice[1]}</span>
        </label>
        <label for="select3">
            <input type="radio" class="select" id="select3" name="select" value="3">
            <span class="choice">${quizInfo[index].answerChoice[2]}</span>
        </label>
        <label for="select4">
            <input type="radio" class="select" id="select4" name="select" value="4">
            <span class="choice">${quizInfo[index].answerChoice[3]}</span>
        </label>
    `;

    // 문제 출력
    quizType.innerHTML = quizInfo[index].answerType;  // 퀴즈 유형
    quizQuestion.innerHTML = questionTag;  // 번호, 질문
    quizSelects.innerHTML = choiceTag;  // 보기
    quizResult.innerHTML = quizInfo[index].answerEx;  // 퀴즈 해설

    const quizChoice = quizSelects.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) => {
    let userAnswer = answer.textContent;  // 사용자가 체크한 정답
    let currentAnswer = quizInfo[quizCount].answerResult;  // 문제의 정답
    if(userAnswer == currentAnswer){
        quizView.classList.add("like");
        quizScore++;
    } else {
        quizView.classList.add("dislike");
        quizResult.style.display = "block";
    }
    quizConfirm.style.display = "block";
}

// 정답 확인 버튼
const answerQuiz = () => {
    totalScore = quizScore * 100 / quizInfo.length;  // 점수 계산하기
    if(quizInfo.length -1 == quizCount){
        if(totalScore >= 60){
            quizConfirm.textContent = `총 ${quizInfo.length}문제 중에 ${quizScore}문제를 맞혔습니다. ${totalScore}점입니다. 합격입니다!`
        } else {
            quizConfirm.textContent = `총 ${quizInfo.length}문제 중에 ${quizScore}문제를 맞혔습니다. ${totalScore}점입니다. 불합격입니다.`
        }
    }
    
    quizCount++;
    updateQuiz(quizCount);
    quizView.classList.remove("like", "dislike");
    // 마지막 문제
}

quizConfirm.addEventListener("click", answerQuiz);

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