내 mcq 웹 사이트에서 선택한 사람이 선택한 정답 수와 선택 순간의 정답과 오답을 어떻게 표시 할 수 있습니까?

Nov 15 2020

MCQ 웹 사이트의 코드를 받았습니다. 하지만 사용자가 옵션을 선택하면 선택 순간에 정답과 오답을 보여주고 싶습니다. (즉, 사용자가 올바른 옵션을 선택하면 옵션이 강조 표시되지만 사용자가 잘못된 옵션을 선택하면 그것이 틀렸다는 것을 보여주고 싶고 정답과 함께 표시되었습니다). 또한 사용자가 이미 정답을 보여준 옵션을 선택할 수있는 두 번째 기회도 없습니다. (이 경우 사용자는 표시된 정답을 선택할 수 있으며 "정답으로 계산"됩니다.) 코드는 다음과 같습니다.

<!DOCTYPE html>
<html>
  <head>
      <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
      <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">    
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
  
  </head>
  <body>
      <h3>1. how many charecters in the word "lion" </h3>
  <p>Choose 1 answer</p>
  <hr/>
  <div id='block-11' style='padding: 10px;'>
    <label for='option-11' style=' padding: 5px; font-size: 1.0rem;'>
      <input type='radio' name='option'  id='option-11' onclick='displayAnswer1()' style='transform: scale(1.6); margin-right: 10px; vertical-align: middle; margin-top: -2px;' />
      A)  4</label>
    <span id='result-11'></span>
  </div>
  <hr />
  
  <div id='block-12' style='padding: 10px;'>
    <label for='option-12' style=' padding: 5px; font-size: 1.0rem;'>
      <input type='radio' name='option'  id='option-12' onclick='displayAnswer1()' style='transform: scale(1.6); margin-right: 10px; vertical-align: middle; margin-top: -2px;' />
      B) 3</label>
    <span id='result-12'></span>
  </div>
  <hr />
  
  <div id='block-13' style='padding: 10px;'>
    <label for='option-13' style=' padding: 5px; font-size: 1.0rem;'>
      <input type='radio' name='option'  id='option-13' onclick='displayAnswer1()' style='transform: scale(1.6); margin-right: 10px; vertical-align: middle; margin-top: -2px;' />
     C) 1</label>
    <span id='result-13'></span>
  </div>
  <hr />
  
  <div id='block-14' style='padding: 10px;'>
    <label for='option-14' style=' padding: 5px; font-size: 1.0rem;'>
      <input type='radio' name='option'  id='option-14' onclick='displayAnswer1()' style='transform: scale(1.6); margin-right: 10px; vertical-align: middle; margin-top: -2px;' />
      D) 2</label>
    <span id='result-14'></span>
  </div>
  <hr />
  <script type="text/javascript">
      var correct_answers = 0;
    function displayAnswer1() {
    if (document.getElementById('option-11').checked) {
      displayAnswer11()
    }
    if (document.getElementById('option-12').checked) {
      document.getElementById('block-12').style.border = '3px solid red'
      document.getElementById('result-12').style.color = 'red'
      document.getElementById('result-12').innerHTML = 'Incorrect!'
    }
    if (document.getElementById('option-13').checked) {
      document.getElementById('block-13').style.border = '3px solid red'
      document.getElementById('result-13').style.color = 'red'
      document.getElementById('result-13').innerHTML = 'Incorrect!'
    }
    if (document.getElementById('option-14').checked) {
      document.getElementById('block-14').style.border = '3px solid red'
      document.getElementById('result-14').style.color = 'red'
      document.getElementById('result-14').innerHTML = 'Incorrect!'
    }
  }
  
  
  function displayAnswer11() {
      document.getElementById('block-11').style.border = '3px solid limegreen'
      document.getElementById('result-11').style.color = 'limegreen'
      document.getElementById('result-11').innerHTML = 'Correct!'
      document.getElementById('correct_answers').innerHTML = "";
      document.getElementById('correct_answers').innerHTML = correct_answers+=1;
    }
  
  
    
  </script>
  <br><br>
  
  <div style=' position: relative; '>
  <h3>2. how many letter inthe word "me"</h3>
  <p>Choose 1 answer</p>
  <hr />
  
  <div id='block-21' style='padding: 10px;'>
    <label for='option-21' style=' padding: 5px; font-size: 1.0rem;'>
      <input type='radio' name='option'  id='option-21' onclick='displayAnswer2()'  style='transform: scale(1.6); margin-right: 10px; vertical-align: middle; margin-top: -2px;' />
      A) 1</label>
    <span id='result-21'></span>
  </div>
  <hr />
  
  <div id='block-22' style='padding: 10px;'>
    <label for='option-22' style=' padding: 5px; font-size: 1.0rem;'>
      <input type='radio' name='option'  id='option-22' onclick='displayAnswer2()' style='transform: scale(1.6); margin-right: 10px; vertical-align: middle; margin-top: -2px;' />
      B) 2</label>
    <span id='result-22'></span>
  </div>
  <hr />
  
  <div id='block-23' style='padding: 10px;'>
    <label for='option-23' style=' padding: 5px; font-size: 1.0rem;'>
      <input type='radio' name='option'  id='option-23' onclick='displayAnswer2()' style='transform: scale(1.6); margin-right: 10px; vertical-align: middle; margin-top: -2px;' />
      C) 3</label>
    <span id='result-23'></span>
  </div>
  <hr />
  
  <div id='block-24' style='padding: 10px;'>
    <label for='option-24' style=' padding: 5px; font-size: 1.0rem;'>
      <input type='radio' name='option'  id='option-24' onclick='displayAnswer2()' style='transform: scale(1.6); margin-right: 10px; vertical-align: middle; margin-top: -2px;' />
      D) 4</label>
    <span id='result-24'></span>
  </div>
  <hr />
  </div>
  <script>
  //    The function evaluates the answer and displays result
  function displayAnswer2() {
    
    if (document.getElementById('option-21').checked) {
      document.getElementById('block-21').style.border = '3px solid red'
      document.getElementById('result-21').style.color = 'red'
      document.getElementById('result-21').innerHTML = 'Incorrect!'
    }
    if (document.getElementById('option-22').checked) {
      displayAnswer22()
    }
    if (document.getElementById('option-23').checked) {
      document.getElementById('block-23').style.border = '3px solid red'
      document.getElementById('result-23').style.color = 'red'
      document.getElementById('result-23').innerHTML = 'Incorrect!'
    }
    if (document.getElementById('option-24').checked) {
      document.getElementById('block-24').style.border = '3px solid red'
      document.getElementById('result-24').style.color = 'red'
      document.getElementById('result-24').innerHTML = 'Incorrect!'
    }
  }
  function displayAnswer22() {
      document.getElementById('block-22').style.border = '3px solid limegreen'
      document.getElementById('result-22').style.color = 'limegreen'
      document.getElementById('result-22').innerHTML = 'Correct!'
      document.getElementById('correct_answers').innerHTML = "";
      document.getElementById('correct_answers').innerHTML += correct_answers+=1;
    }
  
  
  </script>
  
  
  
  <br><br>
  
  
  <div style=' position: relative; '>
  <h3>3. which is actually a name </h3>
  <p>Choose 1 answer</p>
  <hr />
  
  <div id='block-31' style='padding: 5px;'>
    <label for='option-31' style=' padding: 5px; font-size: 1.0rem;'>
      <input type='radio' name='option'  id='option-31' onclick='displayAnswer3()' style='transform: scale(1.6); margin-right: 10px; vertical-align: middle; margin-top: -2px;' />
      A) 3nh r</label>
    <span id='result-31'></span>
  </div>
  <hr />
  
  <div id='block-32' style='padding: 5px;'>
    <label for='option-32' style=' padding: 5px; font-size: 1.0rem;'>
      <input type='radio' name='option'  id='option-32' onclick='displayAnswer3()' style='transform: scale(1.6); margin-right: 10px; vertical-align: middle; margin-top: -2px;' />
      B) jack</label>
    <span id='result-32'></span>
  </div>
  <hr />
  
  <div id='block-33' style='padding: 5px;'>
    <label for='option-33' style=' padding: 5px; font-size: 1.0rem;'>
      <input type='radio' name='option'  id='option-33' onclick='displayAnswer3()' style='transform: scale(1.6); margin-right: 10px; vertical-align: middle; margin-top: -2px;' />
      C) kdikduf</label>
    <span id='result-33'></span>
  </div>
  <hr />
  
  <div id='block-34' style='padding: 5px;'>
    <label for='option-34' style=' padding: 5px; font-size: 1.0rem;'>
      <input type='radio' name='option' value='1/6' id='option-34' onclick='displayAnswer3()' style='transform: scale(1.6); margin-right: 10px; vertical-align: middle; margin-top: -2px;' />
      D) lkjhh</label>
    <span id='result-34'></span>
  </div>
  <hr />
  </div>
  <script>
  //    The function evaluates the answer and displays result
  function displayAnswer3() {
    
    if (document.getElementById('option-31').checked) {
      document.getElementById('block-31').style.border = '3px solid red'
      document.getElementById('result-31').style.color = 'red'
      document.getElementById('result-31').innerHTML = 'Incorrect!'
    }
    if (document.getElementById('option-32').checked) {
      displayAnswer33()
    }
    if (document.getElementById('option-33').checked) {
      document.getElementById('block-33').style.border = '3px solid red'
      document.getElementById('result-33').style.color = 'red'
      document.getElementById('result-33').innerHTML = 'Incorrect!'
    }
    if (document.getElementById('option-34').checked) {
      document.getElementById('block-34').style.border = '3px solid red'
      document.getElementById('result-34').style.color = 'red'
      document.getElementById('result-34').innerHTML = 'Incorrect!'
    }
  }
  
  function displayAnswer33() {
      document.getElementById('block-32').style.border = '3px solid limegreen'
      document.getElementById('result-32').style.color = 'limegreen'
      document.getElementById('result-32').innerHTML = 'Correct!'
      document.getElementById('correct_answers').innerHTML = "";
      document.getElementById('correct_answers').innerHTML += correct_answers+=1;
    }
  </script>
  <p id="correct_answers"></p>
  </body>
</html>

답변

1 54ka Nov 16 2020 at 05:12

jQuery의 1 개 버전을 사용 중입니다 ... 3.5.1로 업데이트

다음 줄을 바꿉니다.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>

이것으로 :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

"나는 그것이 틀렸다는 것을 보여주고 싶고 그 정답과 함께 보여졌습니다)."

이를 위해 오답을 담당하는 각 함수의 끝에 정답을위한 함수를 호출해야합니다.

인수가 추가 된 함수를 호출합니다. 인수가 "true"이면 displayAnswer11(true)결과에 값을 추가합니다. 인수가 "false" displayAnswer11(false)이면 정답을 표시하지만 결과에 값을 추가하지 않습니다.