퀴즈 유형 06

06. 퀴즈 유형

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

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

        const quizQuestion = document.querySelector(".quiz_question")           //문제 번호와 질문 
      const quizSelects = document.querySelector(".quiz_selects")             //객관식 보기
      const quizType = document.querySelector(".quiz_type")                   //문제타입
      const quizResult = document.querySelector(".quiz_answer .result")       //해설
      const quizConfirm = document.querySelector(".quiz_answer .confirm")     //정답확인버튼
      const quizView = document.querySelector(".quiz_view")     // 강아지
  
  
      let quizCount = 0;
      let quizScore = "";
  
      //문제 출력
      const updateQuiz = (index) => {
          // const typeTag = `<span class="quiz_type">${quizInfo[0].answerType}</span>`
  
          const questionTag = `
              <span class="number">${quizInfo[index].answerNum}</span>
              <div class="ask">${quizInfo[index].answerAsk}</div>`
  
          const choiceTag  = `
              <label for="select1">
                  <input type="radio" id="select1" class = "select" name="select" value="1">
                  <span class="choice">${quizInfo[index].answerChoice[0]}</span>
              </label>
              <label for="select2">
                  <input type="radio" id="select2" class = "select" name="select" value="2">
                  <span class="choice">${quizInfo[index].answerChoice[1]}</span>
              </label>
              <label for="select3">
                  <input type="radio" id="select3" class = "select" name="select" value="3">
                  <span class="choice">${quizInfo[index].answerChoice[2]}</span>
              </label>
              <label for="select4">
                  <input type="radio" id="select4" class = "select" name="select" value="4">
                  <span class="choice">${quizInfo[index].answerChoice[3]}</span>
              </label>
  
          //문제 출력
          quizQuestion.innerHTML = questionTag;  
          quizSelects.innerHTML = choiceTag;  
          // document.querySelector(".quiz_type").innerHTML = ${quizInfo[0].answerType}
          quizType.innerHTML = quizInfo[index].answerType 
          quizResult.innerHTML = quizInfo[index].answerEx 
          
          const quizChoice = quizSelects.querySelectorAll(".choice");
  
          for(let i=0; i<quizChoice.length; i++){
              quizChoice[i].setAttribute("onclick" , "choiceSelected(this)")
          }
  
          // 문제, 해설 숨기기
          quizResult.style.display = "none";
          quizConfirm.style.display = "none";
  
      }
      updateQuiz(quizCount);
  
      const choiceSelected = (answer) => {
          let userAnswer = answer.textContent;
          let currentAnswer = quizInfo[quizCount].answerResult; 
  
          if(userAnswer == currentAnswer){
              console.log("정답")
              quizView.classList.add("like")
              quizScore++
          }else {
              console.log("오답")
              quizView.classList.add("dislike")
              quizResult.style.display = "block";
          }
          quizConfirm.style.display = "block";
      }
  
      // if(100/quizInfo.length*quizScore >= 60){
      //     quizConfirm.textContent = `합격입니다.`
      // }else{
      //     quizConfirm.textContent = `불합격입니다.`
      // }
  
      //정답 확인 버튼
      const answerQuiz = () => {
          //마지막 문제
          if(quizInfo.length -1 == quizCount ){
              if(100/quizInfo.length*quizScore >= 60){
                  quizConfirm.textContent = `총 ${quizInfo.length}문제 중에 ${quizScore}문제를 맞췄습니다. 총 ${Math.floor(100/quizInfo.length*quizScore)}점 합격입니다.`
              }else{
                  quizConfirm.textContent = `총 ${quizInfo.length}문제 중에 ${quizScore}문제를 맞췄습니다. 총 ${Math.floor(100/quizInfo.length*quizScore)}점 불합격입니다.`
              }
          };
  
          quizCount++
          updateQuiz(quizCount);
          quizView.classList.remove("like","dislike")
      
      }
  
      quizConfirm.addEventListener("click",answerQuiz); 

원본 소스 보여주기