QuizEffect01 - 정답 확인 유형

QuizEffect01

QuizEffect01 문제를 html, css, javascript로 만들어서 풀어봅니다.

---

원본 소스 보기

---

자바스크립트

문제정보와 문제출력 정답을 숨기고 확인하는 것을 자바스크립트를 통해 나타냈습니다.

//선택자 
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 quizDog = document.querySelector(".quiz__view .dog");              //강아지

//문제 정보
const answerType = "웹디자인기능사";
const answerNum = 1;
const answerAsk = "인접하는 두 색의 경계 부분에 색상, 명도, 채도의 대비가 더욱 강하게 일어나는 현상을 무엇이라고 하는가?";
const answerResult = "연변대비";

//문제 출력
quizType.innerText = answerType;
quizNumber.innerText = answerNum + ". ";
quizAsk.innerText = answerAsk;
quizResult.innerText = answerResult;

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

//정답 확인
//정답 버튼을 클릭하면 //확인버튼 안보인게... 숨겨진 정답은 보이게...
//정답을 확인하면 강아지가 웃고 있어야함 // 클래스 like 추가함
quizConfirm.addEventListener("click", function(){       //클릭시 함수 실행
    quizConfirm.style.display = "none";                 //정답확인을 숨기고
    quizResult.style.display = "block";                 //정답을 나타내고
    quizDog.classList.add("like");                      //강아지가 웃는
});