퀴즈 만들기 - 주관식 유형

 

퀴즈 효과

정답 확인하기 유형

---

결과

원본 사이트 보기

---

JavaScript

정답버튼을 클릭했을 때 사용자 정답과 정답확인버튼이 사라지고 정답결과가 보이게 만들었으며, 사용자 정답을 소문자 대문자 상관없이 정답이 허용되게 하고, 여백을 없앴습니다. if문을 사용해 정답일 때 quizView에 like를 추가해 강아지가 웃게, 오답일 때 dislike를 추가해 강아지가 슬프게 만들었습니다.

//선택자
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;
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){
        //정답일 때
        quizView.classList.add("like");
        // alert("정답입니다.")
    } else {
        //오답일 때
        quizView.classList.add("dislike");
        // alere("오답입니다.")
    }
});