티스토리 뷰
{
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 : "객체 기반의 스크립트 프로그래밍 언어는 자바스크립트입니다."
}
];
//문제출력
function updataQuiz() {
// 문제, 문제번호, 문제질문, 문제 정답을 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")
quizConfirm.style.display="none"
}else {
quizView.classList.add("dislike")
quizConfirm.style.display="none"
quizResult.style.display="block"
}
}
}
}
quizConfirm.addEventListener("click", answerQuiz)
}
'Script Sample > QuizEffect' 카테고리의 다른 글
Quiz Effect 05 - 객관식 : 여러 문제 정답 확인하기 (0) | 2022.02.22 |
---|---|
Quiz Effect 2 - 주관식 : 사용자 정답 확인 (0) | 2022.02.22 |
Quiz Effect 01 - 주관식 : 정답확인 (0) | 2022.02.22 |
댓글
© 2018 webstoryboy