자바스크립트 퀴즈 효과 : 주관식 유형

자바스크립트 : 퀴즈 효과

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

---

주관식 유형

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

// 선택자
const quizType = document.querySelector(".quiz__type");                     // 퀴즈 종류
const quizNumber = document.querySelector(".quiz__question .number");       // 퀴즈 번호
const quizAsk = document.querySelector(".quiz__question .ask");             // 퀴즈 질문
const quizConfirm = document.querySelector(".quiz__answer .confirm");       // 정답 확인 버튼
const quizResult = document.querySelector(".quiz__answer .result");         // 정답 결과
const quizInput = document.querySelector(".quiz__answer .input");           // 사용자 입력값
const quizView = document.querySelector(".quiz__view");                     // 강아지
    
// 문제 정보
const answerType = "웹디자인기능사";
const answerNum = "2";
const answerAsk = "기업의 새로운 이념 구축에 필요한 이미지와 커뮤니케이션 시스템을 의도적, 계획적으로 만들어내는 기업 이미지 통합 전략은 무엇인가?";
let answerResult = "CIP";       // 아래에서 값을 변경하기 때문에 const가 아닌 let으로 선언
    
// 문제 출력
quizType.innerText = answerType;
quizNumber.innerText = answerNum + ". ";
quizAsk.innerText = answerAsk;
quizResult.innerText = "정답은 " + answerResult.toLowerCase() + "입니다.";
    
// 정답 숨기기
quizResult.style.display = "none";
    
// 정답 확인
quizConfirm.addEventListener("click", () => {       // 정답 버튼을 클릭했을 때
    quizInput.style.display = "none";
    quizResult.style.display = "block";             // 정답이 나타나게 함
    quizConfirm.style.display = "none";
    
    // 사용자 입력값
    const userWord = quizInput.value.toLowerCase().trim();       // 소문자 전환, 여백
    answerResult = answerResult.toLowerCase().trim();
    console.log(userWord)
    console.log(quizResult)
    
    // 사용자 입력값 == 문제의 정답
    if (userWord == answerResult) {
        // 정답일 경우 "like" class를 추가
        quizView.classList.add("like");     
    } else {
        // 오답일 경우 "dislike" class를 추가
        quizView.classList.add("dislike");     
    }
});

원본 소스 보기