퀴즈 에펙트03

01. 다음 중 디자인의 기본 요소들로 옳은 것은?

선, 색채, 공간, 수량 점, 선, 면, 질감 시간, 수량, 구조, 공간 면, 구조, 공간, 수량

디자인의 기본 요소에는 점, 선, 면, 질감이 있습니다.

소스 보기

quizEffect02

{
    // 선택자
        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 : "디자인의 기본 요소에는 점, 선, 면, 질감이 있습니다."
            }
        ];
        // 문제출력
        for(let i=0; i< quizInfo.length; i++){
            quizHeader.innerHTML = quizInfo[i].infoDate + " " + quizInfo[i].infoType;
            quizQuestion.innerHTML = quizInfo[i].infoNum + ". " + quizInfo[i].infoQuestion;
            quizAnswer.innerText = quizInfo[i].infoAnswer;
            quizDesc.innerText = quizInfo[i].infoDesc;

            for(let j=0; j< quizChoice.length; j++){
                quizChoice[j].innerText = quizInfo[i].infoChoice[j];
            }
        }
        // 정답 확인
        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("보기를 선택하세요!😂");
            }
        });
    }