퀴즈 만들기02/ 주관식 유형

퀴즈 만들기_주관식 유형

이번에도 자바 스크립트를 이용해서 퀴즈를 만들어 보겠습니다.
저번시간과는 다르게 스크립트를 이용해 문제를 입력 후, 정답확인을 눌렀을 때
1. 정답 확인하기 버튼을 숨기고 정답을 출력하며
2. 정답일 경우 "정답입니다"출력, 오답일 경우 "오답입니다"를 출력
합니다.

원본 소스 보기

Javascript

영문의 경우에는 대소문자에 따라 맞는 정답도 오답이 될 수 있으므로 정답과 입력된정답값을 소문자로 변환시키는 toLowerCase()를 활용하고 공백을 제거하기 위해 trim()을 활용합니다.

// 선택자            // querySelector를 이용해 각 class이름에 연결시킴
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";       //소·대문자로 인해 변해야하는 변수이므로 'let'으로 선언합니다.

// 문제 출력
quizType.innerText = answerType;                //"웹디자인기능사"를 quizType에 텍스트형식으로 입력합니다.
quizNumber.innerText = answerNum + ". ";
quizAsk.innerText = answerAsk;
quizResult.innerText = "정답은 [ " + answerResult + " ] 입니다.";

// 정답 숨기기
quizResult.style.display = "none";

// 정답 확인
quizconfirm.addEventListener("click", () => {           //화살표함수 활용
    quizInput.style.display = "none";                        //정답입력칸 숨김
    quizResult.style.display = "block";                      //숨겨져 있던 정답 표시
    quizconfirm.style.display = "none";                     //정답확인칸 숨김

    // 사용자가 입력한 정답 가져옴   // tolowercase() -> 소문자 변환 // trim->여백제거
    const userWord = quizInput.value.toLowerCase().trim();      //입력한 정답을 소문자 변환 + 공백제거 후 userWord라는 변수로 가져옴
    answerResult = answerResult.toLowerCase().trim();            //정답을 소문자변환 + 공백제거 함

    if (userWord == answerResult) {                     // 사용자 정답 vs 문제 정답 비교
        quizView.classList.add("like");                    // 정답일 경우 .quiz__view에 like라는 클래스 이름 추가
    } else {
        quizView.classList.add("dislike");                // 오답일 경우 .quiz__view에 dislike라는 클래스 이름 추가
    }
});