QuizEffect02 - 주관식 유형

QuizEffect02

QuizEffect02 문제를 html, css, javascript로 만들어서 풀어봅니다.

원본 소스 보기

---

자바스크립트

문제정보와 문제출력 정답을 숨기고 확인하는 것을 자바스크립트를 통해 나타냈습니다.

//선택자 
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";

//문제 출력
quizType.textContent = answerType;
quizNumber.textContent = answerNum + ". ";
quizAsk.textContent = answerAsk;
quizResult.textContent = "정답은 : " + answerResult + " 입니다.";

//정답 숨기기
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(answerResult)

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