728x90
퀴즈 효과04
웹디자인기능사 필기 기출문제를 이용한 객관식(한 문제) 유형입니다. 객관식 보기와 해설도 함께 볼 수 있습니다.
자바스크립트
퀴즈를 만들기 위한 자바스크립트 작성법입니다. 자세한 설명은 아래에 있습니다.
//01. 선택자
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 quizSelects = document.querySelector(".quiz__selects"); //객관식 보기
const quizChoice = quizSelects.querySelectorAll(".choice"); //객관식 보기 - 문제가 많아지면 보기가 많아져 찾는데 오래 걸리 수 있으므로 quizSelects 안에 있다는 것을 알려주기 위해 document대신 사용
const quizselect = quizSelects.querySelectorAll(".select"); //객관식 보기
//02. 문제 정보 : 배열 속의 객체에 문제 정보 데이터를 저장
const quizInfo = [
{
answerType : "웹디자인기능사 2016년 04회", //문제 타입
answerNum : "1", //문제 번호
answerAsk : "다음의 HTML 태그 중 종료 태그가 없는 것은?", //질문
answerChoice : ["<HTML>", "<BODY>", "<HR>", "<DIV>"], //보기
answerResult : "3", //정답 번호
answerEx : "<HR>태그는 종료 태그가 없습니다." //문제 해설
}
];
//03. 문제출력 + 보기출력 : 문제가 많아지면 서로 충돌될 수 있으므로 함수를 사용
function updateQuiz(){
//문제 출력
quizType.textContent = quizInfo[0].answerType;
quizNumber.textContent = quizInfo[0].answerNum + ". ";
quizAsk.textContent = quizInfo[0].answerAsk;
quizResult.textContent = quizInfo[0].answerEx;
//보기 출력
for(let i=0; i<quizselect.length; i++){
quizChoice[i].textContent = quizInfo[0].answerChoice[i];
}
//해설 숨기기
quizResult.style.display = "none";
}
updateQuiz(); //문제출력 함수 실행문
//04. 정답 확인 : 함수 + 반복문 + 중첩if문 사용
function answerQuiz(){
//사용자 선택한 정답 == 문제 정답(비교)
//사용자가 클릭한 input --> checked
for(let i=0; i<quizselect.length; i++){
if(quizselect[i].checked == true){ //보기에 체크가 된 상태인지 확인
//체크된 번호 == 문제 정답 번호
if(quizselect[i].value == quizInfo[0].answerResult){ //체크된 번호와 문제 정답 번호가 같으면
//alert("정답")
quizView.classList.add("like"); //강아지가 웃는 반응
} else{ //체크된 번호와 문제 정답 번호가 같지 않으면
//alert("오답")
quizView.classList.add("dislike"); //강아지가 우는 반응
quizResult.style.display = "block"; //해설 나타나기
quizConfirm.style.display = "none"; //정답 확인하기 버튼 숨기기
}
}
}
}
//05. 정답 클릭
quizConfirm.addEventListener("click", answerQuiz); //정답 확인에서 선언한 함수 불러오기
728x90
반응형
'JAVASCRIPT Effect' 카테고리의 다른 글
| SEARCH Effect 02 (3) | 2022.08.17 |
|---|---|
| SEARCH Effect 01 (3) | 2022.08.16 |
| QUIZ Effect 03 (11) | 2022.08.05 |
| QUIZ Effect 02 (9) | 2022.08.04 |
| QUIZ Effect 01 (9) | 2022.08.04 |
댓글