퀴즈 이펙트 만들기 02

퀴즈 만들기

자바스크립트 함수를 활용하여 퀴즈 만들기입니다.

퀴즈를 만들기 위한 3가지 요소에 대해 퀴즈 만들기01에 좀 더 자세히 적었습니다.

---

퀴즈 만들기 02

이번 퀴즈는 주관식 유형으로 사용자가 답안을 입력이 정답과 매치해 결과를 보여주는 방식입니다.

주관식 유형은 사용자가 답안을 적기 위한 input과 정답을 매칭하기 위한 방법이 필요합니다.

○ 스크립트 코드

//선택자
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 = "02";
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();       //이런식으로 사용자 정답을 가져올 수 있다 //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("오답입니다.")
    }
});

이번 유형에선 사용자의 답안을 매칭하기 위한 input의 선택자가 추가되었습니다. 이로 인해 사용자의 답안을 가져오기 위해서 'quizInput.value'를 넣었으며, 대문자와 소문자 구분 없이 답안을 작성하도록 'toLowerCase'가 추가되었습니다.

사용자의 답안과 정답을 매칭하고 결과를 출력해주기 위해 if문을 사용하여 변수에 저장된 결과값과 같을 시 출력값과 다를 시 출력값을 넣어 사용자에게 정답의 결과를 보여주도록 하였습니다.

원본 소스 보기