퀴즈 이펙트03

소스 보기

Javascript

HTML

 // 선택자
    const quizWrap = document.querySelector(".quiz__wrap");
    const quizHeader = quizWrap.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 : "2016년 4회",
            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 selectedChoice = null;                      //selectedChoice라는 변수의 초기값을 null로 설정

        for(i=0; i<quizSelect.length; i++){             //quizSelect(input)의 갯수만큼 반복 했을때,
            if(quizSelect[i].checked){                  //만약 input이 checked되면
                selectedChoice = quizSelect[i].value;   //사용자가 체크한(선택한) 항목을 확인하고, 체크된 항목의 값을 selectedChoice에 할당합니다.
                break;                                  //사용자가 선택한 답을 찾으면 루프를 종료합니다.
            }
        }

        // selectedChoice가 null이 아닌지 확인하여 사용자가 선택지를 선택했는지를 검증합니다. 
        // 선택을 하지 않았으면 "보기를 선택하세요!"라는 경고(alert) 메시지가 표시됩니다.

        if(selectedChoice !== null){                        //01-if : 만약 selectedChoice(값이 없다면)가 null이 아닐때(값이 생기면)

            // 사용자가 선택한 답(selectedChoice)와 정답(quizInfo[0].infoAnswer)을 비교하여 정답 여부를 판단합니다. 
            if(selectedChoice == quizInfo[0].infoAnswer){   //01-1-if : selectedChoice(값이 생긴 것)와 정답값이 같다면,
                alert("정답입니다.");                        //정답입니다 확인창 표시
                quizDesc.classList.remove("none");          //정답 설명란 표시
            } else {                                        //01-1-else : 그게 아니라면(selectedChoice(값이 생긴 것)와 정답값이 다르다면)
                alert("오답입니다.");                        //오답입니다 확인창 표시
                quizAnswer.classList.remove("none");        //정답란 표시
                quizDesc.classList.remove("none");          //설명란 표시
            }

        } else {                                            //01-else : selectedChoice(값이 없다면)가 null일때(값이 여전히 없으면)
            alert("보기를 선택하세요!😂");                   //보기를 선택하세요 확인창 표시
        }
    });

<div class="quiz__wrap">
    <div class="quiz">
        <div class="quiz__header"></div>
        <div class="quiz__main">
            <div class="quiz__question"></div>
            <div class="quiz__choice">
                <label for="choice1">
                    <input type="radio" id="choice1" name="choice" value="1">
                    <span></span>
                </label>
                <label for="choice2">
                    <input type="radio" id="choice2" name="choice" value="2">
                    <span></span>
                </label>
                <label for="choice3">
                    <input type="radio" id="choice3" name="choice" value="3">
                    <span></span>
                </label>
                <label for="choice4">
                    <input type="radio" id="choice4" name="choice" value="4">
                    <span></span>
                </label>
            </div>
            <div class="quiz__answer none"></div>
            <div class="quiz__desc none"></div>
        </div>
        <div class="quiz__footer">
            <button class="quiz__confirm">정답 확인하기</button>
        </div>
    </div>
</div>