时间戳

首页 > 解决方案 > 我正在使用 MCQ 创建一个网站。如何显示一个人选择的正确答案的数量？

javascript - 我正在使用 MCQ 创建一个网站。如何显示一个人选择的正确答案的数量？

问题描述

我用 MCQ 创建了一个网站。其中，当用户选择一个选项时，它会在选择时自动显示正确和错误的答案。现在我想显示用户最后选择的“正确答案的数量”。如何做到这一点，请帮助我。代码如下，三个问题

<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">

  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!'
    displayAnswer11()
  }
  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!'
    displayAnswer11()
  }
  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!'
    displayAnswer11()
  }
}


function displayAnswer11() {
    document.getElementById('block-11').style.border = '3px solid limegreen'
    document.getElementById('result-11').style.color = 'limegreen'
    document.getElementById('result-11').innerHTML = 'Correct!'
  }


  
</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!'
    displayAnswer22()
  }
  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!'
    displayAnswer22()
  }
  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!'
    displayAnswer22()
  }
}
function displayAnswer22() {
    document.getElementById('block-22').style.border = '3px solid limegreen'
    document.getElementById('result-22').style.color = 'limegreen'
    document.getElementById('result-22').innerHTML = 'Correct!'
  }


</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!'
    displayAnswer33()
  }
  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!'
    displayAnswer33()
  }
  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!'
    displayAnswer33()
  }
}

function displayAnswer33() {
    document.getElementById('block-32').style.border = '3px solid limegreen'
    document.getElementById('result-32').style.color = 'limegreen'
    document.getElementById('result-32').innerHTML = 'Correct!'
  }
</script>

标签： javascripthtmlcss

解决方案

这是你的解决方案，试试这个

<!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>

推荐阅读