퀴즈 만들기 (4) 객관식 단일 문항

⭐️ 객관식 단일 문항 (정답 오답 확인) ⭐️

01. 만드는 순서

1) 출력할 내용이 들어있는 요소 선택하기
2) 질문과 정답 내용, 필요한 값 입력하기
3) 질문 내용 출력하기
4) 정답 내용 숨겨놓기
5) 정답 확인 및 결과값 설정하기
6) 정답 버튼의 동작 설정하기

02. < script > 에 작성하기

// 01. 출력할 내용이 들어있는 요소 선택하기  (여러개의 출력값이 나오는 부분에만 끝에 All을 붙여줌.)

    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 quizSelcets = document.querySelector(".quiz__selects");         // 객관식 보기 지문
    const quizChoice = quizSelcets.querySelectorAll(".choice");
                // quizSelcets 안에서 찾으라고 querySelectorAll 앞의 이름 변경, 조금 더 빠르게 찾음
    const quizSelect = quizSelcets.querySelectorAll(".select");
                // quizChoice -> 보기 내용이 들어감   quizSelect -> 표시 동그라미



    // 02. 질문과 정답 내용, 출력에 필요한 값 입력하기 (다수의 값, 객체로 표현)

    const quizInfo = [
        {
            answerType: "웹 디자인 기능사 (2016년 7월)",
            answerNum: "1",
            answerAsk: "유사조화에 대한 설명으로 옳지 않은 것은?",
            answerChoice: ["온화함을 얻을 수 있다.", "때때로 단조로워 질 수 있으므로 반복에 의한 리듬감을 이끌어 낸다.", "동일하지 않더라도 서로 닮은 형태의 모양, 종류, 의미, 기능끼리 연합하여 한조를 만들 수 있다.", "수평과 수직, 직선과 곡선 등 대립된 모양이나 종류에서 나타난다."],
            answerResult: "4",        // 사용자의 답과 일치하는지 확인할 때 필요하므로 입력해줌.
            answerEx: "유사조화 : 색상이 서로 잘 어울리는 조화를 말하며, 색상이나 성격이 비슷한 색상의 배색에서 얻어집니다. 친근감과 부드러움을 주는 효과가 있지만 단조로움을 줄 수도 있습니다.",  // 정답 해설
        }
    ];



    // 03. 질문 내용 출력하기 : for문이 질문 내용 출력과 정답 확인 설정에 2번 쓰이므로, 함수로 감싸서 혹시 모를 충돌을 방지함

    function updateQuiz(){
        quizType.textContent = quizInfo[0].answerType;
        quizNumber.textContent = quizInfo[0].answerNum + ". ";
        quizAsk.textContent = quizInfo[0].answerAsk;
        quizResult.textContent = quizInfo[0].answerEx;      // 정답 내용에 해설을 출력

        for( i=0; i<4; i++){ 

            quizChoice[i].textContent = quizInfo[0].answerChoice[i]; 
        }        // 보기 출력 : quizChoice 의 i번째 값 = quizInfo[0] 안에 있는 answerChoice i번째 값을 출력

        // 04. '정답 확인 버튼' 밑으로 보이는 '정답 내용의 해설' 숨겨놓기
        quizResult.style.display = "none";
    }
    updateQuiz();       // 함수의 값 출력



    // 05. 정답 확인 및 결과값 설정하기 : 사용자가 선택한 정답 == 문제 정답이 일치하는지 확인하기 위해서는,
    // 사용자가 클릭한 버튼 input --> checked 표시된 것을 확인해야 한다.
    // 첫번째, 두번째, 세번째, 네번쨰 버튼에 체크가 됐는지 각각 확인해야 하므로 for 문을 사용하자.
    // 문제 출력의 경우와 마찬가지로 함수로 감싸서 혹시 모를 충돌을 방지함

    function answerQuiz(){

        for( i=0; i<quizSelect.length; i++){
            if(quizSelect[i].checked == true){    // 보기의 동그라미에 체크가 된 상태라면,
                  // 체크된 번호 == 정답 번호가 일치하는지 확인 후에
                  if(quizSelect[i].value == quizInfo[0].answerResult){  
                                // value 는 보기의 이름 값을 의미. 여기서는 div value 에 입력한 숫자 1,2,3,4
                    // alert("정답")   임시로 결과 확인
                    quizView.classList.add("like");       // 강아지의 웃는 표정을 출력하고
                  } else {                                // 일치하지 않으면
                    // alert("오답")
                    quizView.classList.add("dislike");     // 강아지의 우는 표정을 출력해라
                    quizResult.style.display = "block";
                    quizConfirm.style.display = "none";
                  }
            } else {

            }
        }
    }



    // 06. 정답 버튼의 동작 설정하기
    quizConfirm.addEventListener("click", answerQuiz);      // 정답 버튼을 클릭하면, 답변 결과를 나타내라

03. 결과보기

☛ 원본 소스 보기