퀴즈 만들기 - 객관식(한문제) 유형

퀴즈 효과

객관식(한문제) 유형

---

결과

원본 사이트 보기

---

body

퀴즈 보기쪽은 input type을 버튼타입으로, 각각 id 값을 select(..)로 설정하였으며 class값과 name에 select, 벨류값을(..)해서 설정하였습니다.

<div class="quiz__answer">
    <div class="quiz__selects">
        <label for="select1">
            <input type="radio" id="select1" class="select" name="select" value="1">
            <span class="choice"></span>
        </label>
        <label for="select2">
            <input type="radio" id="select2" class="select" name="select" value="2">
            <span class="choice"></span>
        </label>
        <label for="select3">
            <input type="radio" id="select3" class="select" name="select" value="3">
            <span class="choice"></span>
        </label>
        <label for="select4">
            <input type="radio" id="select4" class="select" name="select" value="4">
            <span class="choice"></span>
        </label>                    
    </div>

    <button class="confirm">정답 확인하기</button>
    <div class="result"></div>
</div>

Javascript

선택자는 이전예시와 같으며 객관식 보기를 추가하였습니다. 문제출력은 직접작성하고 보기출력은 for문을 이용해 출력했기에 두개를 updateQuiz라는 함수로 묶어 한번에 출력하였습니다. 정답 확인쪽은 사용자가 선택한 정답과 문제 정답이 맞는지, 그다음에 그 체크된 번호와 문제 번호가 같은지를 확인하기위해 if문 안에 if문을 사용해 표시했습니다.

//선택자
    const quizType = document.querySelector(".quiz__type");                //퀴즈 종류
    const quizNumber = document.querySelector(".quiz__question .number");  //퀴즈 번호
    const quizAsk = document.querySelector(".quiz__question .ask");        //퀴즈 질문
    const quizConfirm = document.querySelector(".quiz__answer .confirm");  //정답 확인 버튼
    const quizResult = document.querySelector(".quiz__answer .result");    //정답 결과
    const quizView = document.querySelector(".quiz__view");                //강아지
    const quizSelects = document.querySelector(".quiz__selects");          //객관식 보기
    const quizChoice = quizSelects.querySelectorAll(".choice");            //객관식 보기 (보기가4개이므로 querySelectorAll 사용)
    const quizSelect = quizSelects.querySelectorAll(".select");            //객관식 보기

    //문제정보
    const quizInfo = [
        {
            answerType : "웹디자인기능사 2015년 04회",
            answerNum : "1",
            answerAsk : "애니메이션에서 사용되는 정지화면 하나하나를 무엇이라 하는가요?",
            answerChoice : ["Frame", "Key Frame", "Tweening", "Onion Skin"],
            answerResult : "1",
            answerEx : "애니메이션에서 사용되는 정지화면은 Frame 입니다."
        }
    ]

    // 문제출력(문제출력과 보기출력을 함수로 묶었다.)
    function updateQuiz(){
        //문제 출력
        quizType.textContent = quizInfo[0].answerType;
        quizNumber.textContent = quizInfo[0].answerNum + ". ";
        quizAsk.textContent = quizInfo[0].answerAsk;
        quizResult.textContent = quizInfo[0].answerEx;

        //보기 출력
        for(let i = 0; i<quizSelect.length; i++){
            quizChoice[i].textContent = quizInfo[0].answerChoice[i];
        }

        //해설 숨기기
        quizResult.style.display = "none"
    }
    
    updateQuiz();



    //정답 확인
    function answerQuiz(){
        //사용자가 선택한 정답 == 문제 정답
        //사용자가 클릭한 input --> checked

        for(let i = 0; i<quizSelect.length; i++){
            if(quizSelect[i].checked == true){  //보기에 체크가 된 상태
                //체크된 번호랑 ==문제 번호
                if(quizSelect[i].value == quizInfo[0].answerResult){
                    // alert("정답");
                    quizView.classList.add("like");
                } else {
                    // alert("오답");
                    quizView.classList.add("dislike");
                    quizResult.style.display = "block";            //틀렸을때 정답 보여주기
                    quizConfirm.style.display = "none";            //정답버튼 숨기기
                }
            }
        }
    }

    //정답 클릭
    quizConfirm.addEventListener("click", answerQuiz);             //quizConfirm(정답확인 버튼)을 클릭했을 때 answerQuiz함수 실행