Quiz

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
소스 보기
선택자
문제 정보
정답 나타나기 
// 선택자
const quizWrap = document.querySelector(".quiz__wrap");
const quizHeader = document.querySelector(".quiz__header");
const quizQuestion = quizWrap.querySelector(".quiz__question");
const quizChoice = quizWrap.querySelectorAll(".quiz__choice span");
const quizSelect = quizWrap.querySelectorAll(".quiz__choice input");

const quizAnswer = quizWrap.querySelector(".quiz__answer");
const quizDesc = quizWrap.querySelector(".quiz__desc");
const quizConfirm = quizWrap.querySelector(".quiz__confirm");

// 문제 정보
const quizInfo = [
    {
        infoDate: "2004년 10월",
        infoType: "웹디자인기능사",
        infoNum: "01",
        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 selectedChoick = null;

        for(let i=0; i
97.eugene.s@gmail.com