Quiz 02 - 주관식 유형

퀴즈 이펙트 02

웹디자인기능사 필기 퀴즈 - 문제를 보고 정답을 입력하면 정답/오답을 알려줍니다.

결과

원본 소스 보기

JavaScript

클릭 이벤트, 함수 등 JS로 나타냈습니다.

//선택자
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 quizView = document.querySelector(".quiz__view"); //퀴즈 정답, 오답 표시
const quizInput = document.querySelector(".quiz__answer .input"); //사용자 정답


//문제 정보(데이터저장)
const answerType = "웹디자인기능사";
const answerNum = "2";
const answerAsk = "기업의 새로운 이념 구축 이미지와 커뮤니케이션 시스템을 의도적, 계획적으로 만들어내는 기업이미지통합 전략은 무엇인가요?";
let answerResult = "CIP"; //const 값변경 안되기때문에 let 사용 

//문제 출력 
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();  //answerResult에 소문자 변환, 여백 제거 메서드 대입
    console.log(userWord); //입력확인 
    console.log(answerResult); //정답확인 

    
    //사용자 정답 == 문제 정답 
    if(userWord == answerResult){ 
        //정답 일 때, 웃으면서 정답입니다 출력 
        quizView.classList.add("like");
        alert("정답입니다.");
    } else {
        //오답 일 때, 울면서 틀렸습니다 출력 
        quizView.classList.add("dislike");
        alert("오답입니다.");
    }
}); 

---