QUIZ | 문제 만들기 | 방법 02

QUIZ를 만들어보자 !

QUIZ의 여러 형태 중 주관식 답변 형식으로 만들어봅시다.

원본 소스 보기

script를 살펴봅시다 !

<script>
    //선택자
    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;      //innerText, textContent 같은 기능
    quizNumber.textContent = answerNum;
    quizAsk.textContent = answerAsk;
    quizResult.textContent = "정답 : " + 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();       //answerResult const로 하면 상수라 변경 불가능, let으로 바꾸고 진행

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

        //사용자 정답 == 문제 정답 비교
        if(userWord == answerResult) {
            //정답일 경우
            //alert("정답입니다.")
            quizView.classList.add("like");
        } else {
            //오답일 경우
            //alert("오답입니다.")
            quizView.classList.add("dislike");
        }
    })
</script>

속성값	의미
textContent	innerText와 같은 기능으로 쓰이지만 띄어쓰기를 포함해 텍스트를 있는 그대로 읽는다는 점이 다릅니다.
toLowerCase()	해당 문자열을 소문자로 변환시키는 속성입니다.
trim()	문자열에 있는 공백을 없애주는 속성입니다.