QuizEffect02

quizEffect02

js를 이용한 주관식 기출문제를 만들어봤습니다.
2번 문제의 답을 확인하며 사용된 js코드를 해석해봅니다.

---

원본 소스 보기

자바스크립트

이벤트 메서드를 통해 클릭했을 때 저장된 코드를 실행하게 합니다.
또한, if{}else{}문을 통하여 정답과 오답의 강아지 애니메이션을 각각 다르게 출력합니다.

//선택자
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;
quizNumber.innerText = answerNum + ".";
quizAsk.innerText = answerAsk;
quizResult.innerText = "정답은 : " + answerResult + "입니다.";

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

//정답 확인
quizConfirm.addEventListener("click", () => {       //정답 버튼을 클릭 했을 때
    quizInput.style.display = "none";       //정답 입력창을 제거
    quizConfirm.style.display = "none";     //정답 확인하기 창을 제거
    quizResult.style.display = "block";

    //사용자 정답
    const userWord = quizInput.value.toLowerCase().trim();     //toLowerCase() : 소문자 / trim() : 여백 제거
    answerResult = answerResult.toLowerCase().trim();       //우변을 좌변으로 대입하여 변경

    console.log(userWord);
    console.log(answerResult);

    //사용자 정답 == 문제 정답
    if (userWord == answerResult) {
        //정답
        quizView.classList.add("like");
        // alert("정답입니다.")
    } else {
        //오답
        quizView.classList.add("dislike");
        // alert("오답입니다.")
    }
});