Quiz03

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
소스 보기
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("보기를 선택하세요!🤗");
}
});