자바스크립트 퀴즈 효과 : 주관식(여러 문제) 유형

자바스크립트 : 퀴즈 효과

자바스크립트의 다양한 효과들 중, 퀴즈를 맞힐 수 있는 퀴즈 효과입니다. 그 중에서도, 여러 개의 문제에 주관식 정답을 입력할 수 있는 퀴즈 유형을 작업해 보도록 하겠습니다.

---

주관식(여러 문제) 유형

예시는 웹디자인기능사의 필기 시험 문제입니다. 각 문제의 정답을 맞히면 문구가 나타나며 강아지 애니메이션이 기뻐하고, 정답을 맞히지 못하면 슬퍼하는 애니메이션으로 입력값에 따라 다른 결과가 나타납니다.

// 선택자
const quizType = document.querySelectorAll(".quiz__type"); // 퀴즈 종류
const quizNumber = document.querySelectorAll(".quiz__question .number"); // 퀴즈 번호
const quizAsk = document.querySelectorAll(".quiz__question .ask"); // 퀴즈 질문
const quizConfirm = document.querySelectorAll(".quiz__answer .confirm"); // 정답 확인 버튼
const quizResult = document.querySelectorAll(".quiz__answer .result"); // 정답 결과
const quizInput = document.querySelectorAll(".quiz__answer .input"); // 사용자 입력값
const quizView = document.querySelectorAll(".quiz__view"); // 강아지

// 문제 정보 : 상수로 선언된 quizInfo 내에 배열로 각 문제의 정보를 저장
const quizInfo = [
    {
        answerType: "웹디자인기능사 2016년 1회",
        answerNum: "1",
        answerAsk: "미적 대상을 구상하는 부분과 부분의 사이에 질적으로나 양적으로 모순되는 일 없이 질서가 잡혀 어울리는 것은?",
        answerResult: "조화"
    },
    {
        answerType: "웹디자인기능사 2016년 1회",
        answerNum: "2",
        answerAsk: "디자인 원리 중 동질의 부분이 조합될 때 이루어지는 것은?",
        answerResult: "유사"
    },
    {
        answerType: "웹디자인기능사 2016년 1회",
        answerNum: "3",
        answerAsk: " 색광의 혼합에서 색을 혼합하면 할수록 높아지는 색의 속성은?",
        answerResult: "명도"
    },
    {
        answerType: "웹디자인기능사 2016년 1회",
        answerNum: "4",
        answerAsk: "색채를 과학적으로 정리하여 스펙트럼을 7색으로 분리한 사람은?",
        answerResult: "뉴턴"
    }
]


// 문제 출력 : 01. 일일이 출력
{
    // 출제 시기
    quizType[0].textContent = quizInfo[0].answerType
    quizType[1].textContent = quizInfo[1].answerType
    quizType[2].textContent = quizInfo[2].answerType
    quizType[3].textContent = quizInfo[3].answerType

    // 문제 번호
    quizNumber[0].textContent = quizInfo[0].answerNum + "."
    quizNumber[1].textContent = quizInfo[1].answerNum + "."
    quizNumber[2].textContent = quizInfo[2].answerNum + "."
    quizNumber[3].textContent = quizInfo[3].answerNum + "."

    // 질문
    quizAsk[0].textContent = quizInfo[0].answerAsk
    quizAsk[1].textContent = quizInfo[1].answerAsk
    quizAsk[2].textContent = quizInfo[2].answerAsk
    quizAsk[3].textContent = quizInfo[3].answerAsk

    // 정답
    quizResult[0].textContent = quizInfo[0].answerResult
    quizResult[1].textContent = quizInfo[1].answerResult
    quizResult[2].textContent = quizInfo[2].answerResult
    quizResult[3].textContent = quizInfo[3].answerResult
}

// 문제 출력 : 02. for문으로 출력
for(let i=0; i<quizInfo.length; i++){
    quizType[i].textContent = quizInfo[i].answerType     // 출제 시기
    quizNumber[i].textContent = quizInfo[i].answerNum + "."     // 문제 번호
    quizAsk[i].textContent = quizInfo[i].answerAsk     //질문
    quizResult[i].textContent = quizInfo[i].answerResult     //정답
}

// 문제 출력 : 03. forEach문으로 출력
quizInfo.forEach(function(e, i){
    quizType[i].textContent = quizInfo[i].answerType     // 출제 시기
    quizNumber[i].textContent = quizInfo[i].answerNum + "."     // 문제 번호
    quizAsk[i].textContent = quizInfo[i].answerAsk     //질문
    quizResult[i].textContent = quizInfo[i].answerResult     //정답
})


// 정답 숨기기 : 01. 일일이 숨기기
quizResult[0].style.display = "none";
quizResult[1].style.display = "none";
quizResult[2].style.display = "none";
quizResult[3].style.display = "none";

// 정답 숨기기 : 02. for문으로 숨기기
for(let i=0; i<quizInfo.length; i++){
    quizResult[i].style.display = "none";
}

// 정답 숨기기 : 03. forEach문으로 숨기기
quizInfo.forEach(function(e, i){
    quizResult[i].style.display = "none";
})
        

// 정답 확인하기
// 버튼이 여러 개 있으므로, 알려주기 위해 for문 혹은 forEach문을 사용해야 함
// 아래처럼 alert을 사용하여 작업 전 오류가 없는지 점검하는 것이 좋음
quizConfirm.addEventListener("click", () => {
    alert("add")
});

// forEach문을 사용
quizConfirm.forEach((btn, num) => {
    btn.addEventListener("click", () => {

        // 사용자 입력값
        const userWord = quizInput[num].value.toLowerCase().trim();

        // 사용자 입력값과 정답 비교하기
        if(userWord == quizInfo[num].answerResult){
            // 정답일 경우
            quizView[num].classList.add("like");     // 강아지
            quizConfirm[num].style.display = "none"; // 입력창 사라지게 하기
            quizInput[num].style.display = "none";   // 버튼 사라지게 하기
            quizResult[num].style.display = "block"; // 정답 보이게 하기
        } else {
            // 오답일 경우
            quizView[num].classList.add("dislike");
            quizConfirm[num].style.display = "none";
            quizInput[num].style.display = "none";
            quizResult[num].style.display = "block";
        }
    })
})

원본 소스 보기