퀴즈 이펙트 2

퀴즈 이펙트

퀴즈를 풀 수 있는 페이지를 구성할 때에, 퀴즈의 유형에 맞는 다양한 이펙트를 사용하면 단조롭지 않은 생동감 넘치는 페이지를 만들 수 있습니다.

주관식 유형

주관식 답을 적으면 정답인지 오답인지 비교한 후, 정답/오답이라는 문구와 함께 정답을 보여주는 이펙트입니다.

원본 소스 보기

해당 이펙트의 자바스크립트는 다음과 같습니다. 먼저 선택자를 지정한 후, 각각의 선택자로 지정한 구역에 알맞은 정보를 대입하는 것은 정답 확인하기 유형과 같습니다. 주관식 유형은 입력받은 정보를 정답과 비교하여, 정답과 오답일 때에 각각의 상황에 맞는 실행문을 작동하도록 if문을 사용합니다.

//선택자
const quizType = document.querySelector(".quiz__type");                  //퀴즈 종류
const quizNumber = document.querySelector(".quiz__question .number");    //퀴즈 번호
const quizAsk = document.querySelector(".quiz__question .ask");          //퀴즈 질문
const quizConfilm = document.querySelector(".quiz__answer .confilm");    //정답 확인 버튼
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; //innerText는 인터넷익스플로러 환경에는 호환되지 않습니다.
quizAsk.textContent = answerAsk;
quizresult.textContent = "정답은 : " + answerResult + "입니다.";

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

//정답 확인
quizConfilm.addEventListener("click", () => { //정답을 클릭했을 때 함수를 실행. 함수는 화살표 함수로 쓸 수도 있습니다.
    quizInput.style.display = "none";
    quizresult.style.display = "block";
    quizConfilm.style.display = "none";

    //사용자 정답
    const userWord = quizInput.value.toLowerCase().trim(); //toLowerCase():소문자로 바꿔줍니다.
    answerResult = answerResult.toLowerCase().trim();   //trim()여백을 없애줍니다.

    //사용자 정답 == 문제 정답
    if(userWord == answerResult) {
        //정답일 때
        quizView.classList.add("like"); //클래스에 like를 추가합니다.
    } else {
        //오답일 때
        quizView.classList.add("dislike");  //클래스에 dislike를 추가합니다.
    }
});