퀴즈 에펙트03

소스 보기
Javascript
// 선택자 
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 quizChoice = quizWrap.querySelectorAll(".quiz__choice span");
const quizSelect = quizWrap.querySelectorAll(".quiz__choice input");

const quizConfirm = quizWrap.querySelector(".quiz__confirm");

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


// 문제 출력
// quizDate[0].textContent = quizInfo[0].infoDate;
// quizType[0].textContent = quizInfo[0].infoType;
// quizNum[0].textContent = quizInfo[0].infoNum;
// quizQuestion[0].textContent = quizInfo[0].infoQuestion;
// quizAnswer[0].textContent = quizInfo[0].infoAnswer;
// quizDesc[0].textContent = quizInfo[0].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 selectedChoice = null;

    for(let i=0; i<quizSelect.length; i++){
        if(quizSelect[i].checked){
            selectedChoice = quizSelect[i].value;
            break;
        }
    }

    if(selectedChoice !== null){
        if(selectedChoice == quizInfo[0].infoAnswer){
            alert("정답입니다.");
            quizDesc.classList.remove("none");
        } else {
            alert("오답입니다.");
            quizAnswer.classList.remove("none");
            quizDesc.classList.remove("none");
        }
    } else {
        alert("보기를 선택하세요!😃");
    }
});