소스보기
제목

// 선택자
const quizWrap = document.querySelector(".quiz_wrap");
const quizHeader = quizWrap.querySelector(".quiz_header");
const quizQuestion = quizWrap.querySelector(".quiz_question");
const quizAnswer = quizWrap.querySelector(".quiz_answer");
const quizDesc = quizWrap.querySelector(".quiz_desc");
const quizConfirm = quizWrap.querySelector(".quiz_confirm");
const quizChoice = quizWrap.querySelectorAll(".quiz_choice span");
const quizSelect = quizWrap.querySelectorAll(".quiz_choice input");

// 문제정보
const quizInfo = [
    {
        infoDate: "2021년 10월",
        infoType: "정보처리 기능사",
        infoNum: "1",
        infoQuestion: "다음 중 디자인의 기본 요소들로 옳은 것은?",
        infoChoice: ["선, 색채, 공간, 수량", "점, 선, 면, 질감", "시간, 수량, 구조, 공간", "면, 구조, 수량"],
        infoAnswer: 2,
        infoDesc: "디자인의 기본 요소는 점, 선, 면, 질감이 있습니다."
    }
];

// 문제출력
quizHeader.innerHTML = quizInfo[0].infoDate + " " + quizInfo[0].infoType;
quizQuestion.innerHTML = quizInfo[0].infoNum + ". " + quizInfo[0].infoQuestion;
quizAnswer.innerText = quizInfo[0].infoAnswer;
quizDesc.innerText = quizInfo[0].infoDesc;
for (let i = 0; i < quizChoice.length; i++) {
    quizChoice[i].innerText = quizInfo[0].infoChoice[i];
};

// 정답 확인
quizConfirm.addEventListener("click", () => {
    let seletedChoice = null;
    for (let i = 0; i < quizSelect.length; i++) {
        if (quizSelect[i].checked) {
            seletedChoice = quizSelect[i].value;
            break;
        }
    }
    if (seletedChoice !== null) {
        if (seletedChoice == quizInfo[0].infoAnswer) {
            alert("정답입니다.");
            quizDesc.classList.remove("none");
        } else {
            alert("오답입니다.");
            quizAnswer.classList.remove("none");
            quizDesc.classList.remove("none");
        }
    } else {
        alert("보기를 선택하세요! 😂");
    }
});