문제 02

주관식 퀴즈

웹디자인기능사 대비 퀴즈 프로그램을 만들어 풀어보려 합니다.
querySelector를 통해 저장된 값들을 불러오며, addEventListener 함수로 클릭 했을때 정답을 출력하도록 합니다.
여기에 if함수를 더해 정답과 오답에 대한 결과를 나눕니다.

---

문제02

정답을 맞출 경우 강아지가 웃으며 정답입니다 문구가 나옵니다.
오답의 경우 강아지가 울며 틀렸습니다 문구가 나옵니다.

원본 소스 보기

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

        quizConfirm.addEventListener("click", function(){
        })
        //정답 숨기기
        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){
                //정답
                quizView.classList.add("like");
                // alert("정답입니다.")
            } else {
                //오답
                quizView.classList.add("dislike");
                // alert("오답입니다.")

            }
        });
}