Quiz Effect - 객관식 : 정답 확인하기

설명

사용자가 보기를 선택한 값과 정답의 값을 비교해서 정답과 오답을 출력합니다.

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 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<4; i++){
    	quizChoice[i].textContent = quizInfo[0].answerChoice[i];
    }

	//설명 감추기
    quizResult.style.display = "none";
}
updateQuiz();

//정답 확인
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))