Quiz

  • 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 : "2021년 4월",
            infoType : "웹디자인 기능사",
            infoNum : "1",
            infoQuestion : "RGB 컬러 모드는 어떤 혼합 방식으로 색상을 표현하는가?",
            infoChoice : ["가산 혼합" ,"병치 혼합", "컬러 혼합", "색상 혼합"],
            infoAnswer : "1",
            infoDesc : "합목적성=목표성, 디자인의 가장 중요한 조건 디자인이 대상과 용도, 목적에 맞게 이루어져 있는것 기능성과 실용성이 모두 갖추어진 것"
        }
    ];

    // 문제 출력
    // innerHtml은 html의 태그도 인식해줌
    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("보기를 선택하세요!🤔")

        }
    });

    // 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;

    // for(let i=0; i<quizInfo[0].infoChoice.length; i++){
    //     quizChoice.textContent = quizInfo.infoChoice[i];
    // }
tmddnrla1@naver.com