퀴즈 이펙트 - 주관식

QUIZ 이펙트 만들기

퀴즈 이펙트로 웹디자인기능사 시험 문제 퀴즈를 만들어보았습니다. 열심히 공부하세요!

주관식 유형(여러문제)

원본 소스 보기

자바스크립트

1. 선택자를 설정합니다.
2. 문제 정보 데이터를 저장합니다.
3. 문제 데이터를 출력합니다.
  (※innerText는 문자만을 인식하고 innerHTML은 태그까지 인식합니다.)
4. 답을 입력할 때 소문자와 대문자가 상관이 없게 소문자 치환을 해주고 여백도 없애줍니다. ->toLowerCase().trim()
5. 사용자가 정답을 입력하면 정답을 입력하는 칸을 없애고 정답을 보여줍니다.
6. 클래스 like를 추가하여 정답을 확인하면 강아지가 웃는 모습이 보이게 합니다. -> quizDog.classList.add("like");
7. 정답/오답에 따라 강아지 옆에 정답인지 오답인지를 알려줍니다.

//선택자
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"; //const를 사용하면 데이터를 변경할 수 없다.

//문제 출력
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 {
        //오답일 때
        quizView.classList.add("dislike");
        // alert("오답입니다.")

        
    }
});    //정답버튼을 클릭했을 때