초짜코딩의 잡동사니

quizeffect04 - 객관식 정답 확인 본문

Script Sample/quiz effect

quizeffect04 - 객관식 정답 확인

초짜코딩 2022. 2. 22. 17:56

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)