Notice
Recent Posts
Recent Comments
Link
초짜코딩의 잡동사니
quizeffect04 - 객관식 정답 확인 본문
const quizType = document.querySelector(".quiz__Type")//문제
const quizNumber = document.querySelector(".quiz__number") //문제 번호
const quizAsk = document.querySelector(".quiz__ask") //문제 질문
const quizConfirm = document.querySelector(".quiz__confirm") //문제 정답버튼
const quizResult = document.querySelector(".quiz__result"); //문제 정답
const quizView = document.querySelector(".quiz__view") //문제 화면
const quizSelects = document.querySelector(".quiz__selects") //객관식 보기
const quizChoice = quizSelects.querySelectorAll(".choice") //객관식 보기
const quizSelect = quizSelects.querySelectorAll(".select") //객관식 보기
//문제정보
const quizInfo = [
{
answerType: "javascript", //문제유형
answerNum: 1, //문제 번호
answerAsk: "객체 기반의 스크립트 프로그래밍 언어는 무엇입니까?", //문제질문
answerChoice : ["javascript", "html", "css", "jquery"], //문제보기
answerResult: "1", //문제정답
answerEx : "객체 기반의 스크립트 프로그래밍 언어는 javascript입니다." //문제설명
}
];
//문제출력
function updataQuiz() {
//타입,문제,정답,보기
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<4; i++){
quizChoice[i].textContent = quizInfo[0].answerChoice[i]
}
//설명 감추기
quizResult.style.display = "none";
}
updataQuiz();
//정답확인
function answerQuiz() {
//사용자가 클릭한 input --> checked : 사용자가 선택한 정답 == 객체 안에 정답
for(let i=0; i<quizSelect.length; i++){
if(quizSelect[i].checked ==true){ //문제보기에 체크되었을 때
if(quizSelect[i].value == quizInfo[0].answerResult){ //체크된것과 정답이 일치할 때
//정답
quizView.classList.add("like") //quizView에 class="like" 적용
quizResult.style.display="block" //문제정답 보이게
}else {
//오답
quizView.classList.add("dislike") //quizView에 class="dislike" 적용
quizResult.style.display = "block"; //문제정답 보이게
}
}
}
}
quizConfirm.addEventListener("click", answerQuiz)
'Script Sample > quiz effect' 카테고리의 다른 글
quizeffect05 - 객관식 : 여러문제 정답 확인하기 (0) | 2022.02.22 |
---|---|
quizeffect03 - 주관식 : 여러문제 정답 쓰고 사용자 정답 확인하기 (0) | 2022.02.22 |
quizeffect02 - 주관식 : 사용자 정답 확인하기 (0) | 2022.02.22 |
quizEffect01 - 주관식 : 정답 확인하기 (0) | 2022.02.22 |