quizEffect04 - JS로 문제 내기

HTML 구성

<h2 class="quiz__type"></h2>
    <h3 class="quiz__question">
        <span class="quiz__number"></span>
        <span class="quiz__ask"></span>
    </h3>
    <div class="quiz__view">
        <div class="true">정답입니다!</div>
        <div class="false">틀렸습니다!</div>
    </div>
    
    <div class="quiz__answer">
        <div class="quiz__selects">
            <label for="select1">
                <input class="select" type="radio" name="select" id="select1" value="1">
                <span class="choice"></span>
            </label>
            <label for="select2">
                <input class="select" type="radio" name="select" id="select2" value="2">
                <span class="choice"></span>
            </label>
            <label for="select3">
                <input class="select" type="radio" name="select" id="select3" value="3">
                <span class="choice"></span>
            </label>
            <label for="select4">
                <input class="select" type="radio" name="select" id="select4" value="4">
                <span class="choice"></span>
            </label>
        </div>
        <button class="quiz__confirm">정답 확인하기</button>
        <div class="quiz__result"></div>
    </div>

JS 구성

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", "react"],
        answerResult : "1",
        answerEx : "객체 기반의 스크립트 프로그래밍 언어는 자바스크립트입니다."
    }
];

//문제 출력
function updateQuiz() {
    //타입, 문제, 정답, 보기 채워주기
    for(i in quizInfo){
        quizType.textContent = quizInfo[i].answerType;
        quizNumber.textContent = quizInfo[i].answerNum;
        quizAsk.textContent = quizInfo[i].answerAsk;
        quizResult.textContent = quizInfo[i].answerEx;

        for (let j = 0; j < 4; j ++){
            quizChoice[j].textContent = quizInfo[0].answerChoice[j];
        }
    }
    //해설 감추기
    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");
        } else {
            //오답
            quizView.classList.add("dislike");
    		quizResult.style.display = "block";
        }
	    quizConfirm.style.display = "none";
	}
}

quizConfirm.addEventListener("click", answerQuiz);

 

링크 https://sungilryuu.github.io/webs_class/javascript/effect/quizEffect04.html