Script effect/quiz effect
javascript - quiz effect04 : 객관식 : 정답 확인하기
개발자가되고싶은자
2022. 2. 22. 18:53
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 quizInput = document.querySelector(".quiz__input"); //사용자 정답
const quizSelects = document.querySelector(".quiz__selects"); //객관식 보기 //사용자 정답
const quizChoice = document.querySelectorAll(".choice"); //객관식 보기 //사용자 정답
const quizSelect = document.querySelectorAll(".select"); //객관식 보기 //사용자 정답
const quizInfo = [{
answerType: "Javascript",
answerNum: 1,
answerAsk: "객체 기반의 스크립트 프로그래밍 언어는 무엇입니까?",
answerChoice: ["javscript", "html", "css", "jquery"],
answerResult: "1",
answerEx: "객체 기반의 스크립트 프로그래밍 언어는 자바스크립트 입니다."
}
];
//문제 출력
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