퀴즈 유형 05 - 점수

05. 퀴즈 유형

객관식 문제로 답을 선택하고 정답을 확인했을 때에 여러 문제 중 정답을 맞춘 갯수가 무엇인지, 또한 정답의 갯수가 합격점인지 확인해보았습니다.

자바스크립트입니다. 확인 버튼을 누르고 정답을 확인하면서 몇 문제가 정답인지 또 36문제 이상을 맞춰서 합격인지 아닌지 스크립트를 짜보았습니다.

        //선택자
       const quizWrap = document.querySelector(".quiz_wrap") ;
       let quizScore = "";
   
       //문제 출력
       const updateQuiz = () => {
           const exam = [];
           
           quizInfo.forEach((question,number)=>{
               exam.push(`
                       <div class="quiz">
           <span class="quiz_type">${question.answerType}</span>
           <h2 class="quiz_question">
               <span class="number">${question.answerNum}</span>
               <div class="ask">${question.answerAsk}</div>
           </h2>
           <div class="quiz_view">
               <div class="true">정답입니다.</div>
               <div class="false">틀렸습니다.</div>
               <div class="dog">
                   <div class="head">
                       <div class="ears"></div>
                       <div class="face"></div>
                       <div class="eyes">
                           <div class="teardrop"></div>
                       </div>
                       <div class="nose"></div>
                       <div class="mouth">
                           <div class="tongue"></div>
                       </div>
                       <div class="chin"></div>
                   </div>
                   <div class="body">
                       <div class="tail"></div>
                       <div class="legs"></div>
                   </div>
               </div>
           </div>
           <div class="quiz_answer">
              <div class="quiz_selects">
               <label for="select1${number}">
                   <input type="radio" id="select1${number}" class = "select" name="select${number}" value="1">
                   <span class="choice">${question.answerChoice[1]}</span>
               </label>
               <label for="select2${number}">
                   <input type="radio" id="select2${number}" class = "select" name="select${number}" value="2">
                   <span class="choice">${question.answerChoice[2]}</span>
               </label>
               <label for="select3${number}">
                   <input type="radio" id="select3${number}" class = "select" name="select${number}" value="3">
                   <span class="choice">${question.answerChoice[3]}</span>
               </label>
               <label for="select4${number}">
                   <input type="radio" id="select4${number}" class = "select" name="select${number}" value="4">
                   <span class="choice">${question.answerChoice[4]}</span>
               </label>
              </div>
           </div>
                   
       </div>
               `)
           });
   
           exam.push(`
           <div class = "quiz_confirm">
               <button class="check">정답 확인하기</button>
               <div class="ex"></div>
           </div>
               `);
   
           quizWrap.innerHTML = exam.join('');
       }  
       updateQuiz();
   
       //정답 확인
       const answerQuiz = () => {
       const quizSelects = document.querySelectorAll(".quiz_selects"); //객관식 보기
           
   
           //사용자가 체크한 보기 == 문제 정답
           quizInfo.forEach((question,number) => {
               const userSelector = `input[name=select${number}]:checked` //사용자가 체크한 것
               const quizSelectsWrap = quizSelects[number];
               const userAnswer = (quizSelectsWrap.querySelector(userSelector) || {}).value 
               const quizView = document.querySelectorAll(".quiz_view");          //강아지

               if(userAnswer == question.answerResult){
                   console.log("정답")
                   quizView[number].classList.add("like");
                   quizScore++
               }else{
                   console.log("오답")
                   quizView[number].classList.add("dislike");
                   const divBox = document.createElement("div") 
                   quizSelectsWrap.appendChild(divBox).innerHTML = `<p class = "result">${question.answerEx}</p>`;
               }
           });
   
           //전체 문제수
           console.log(quizInfo.length) 
   
           //내가 맞힌 수
           console.log(quizScore)  
           document.querySelector(".ex").innerHTML = `${quizInfo.length} 문제 중 ${quizScore}문제가 맞았습니다.`
   
           if(quizScore == 36){
               alert("합격입니다.")
           }else
               alert("불합격입니다.")
       }
       
       //정답 확인 클릭
       document.querySelector(".quiz_confirm .check").addEventListener("click" , answerQuiz) 

원본 소스 보여주기