文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >我正在创建一个与MCQ网站。我怎样才能显示正确答案的数目？

问我正在创建一个与MCQ网站。我怎样才能显示正确答案的数目？
EN

Stack Overflow用户
提问于 2020-11-15 08:18:53
回答 2查看 67关注 0票数 0

我和MCQ一起创建了一个网站。当用户选择一个选项时，它会在选择的时刻自动显示正确和不正确的答案。现在，我想显示用户在最后选择的“正确答案的数量”。怎么做，请帮帮我。下面的代码有三个问题

代码语言：javascript
复制
<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>
html
css
javascript
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-11-15 11:36:48

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

代码语言：javascript
复制
<!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>
票数 0
EN

Stack Overflow用户

发布于 2020-11-16 00:48:00

我只选择了第一个问题，并对您的标记做了一些调整，以简化过程。

  • I向每个包含label和input标记
  • 的div添加了一个block类，我还向每个保存结果输出的span标记添加了一个result类。H 210H 111，最后，我向使用onclick属性调用的displayAnswer1()函数添加了一个参数。这使得它更容易用于任何问题，而不仅仅是第一个问题。您可以在函数中指定正确答案的id，并执行rest

。

这种修改是为了简化javascript中的过程。

请参阅下面附有注释的代码。

​

代码语言：javascript
复制
function displayAnswer1(correctOptId){
    // get all option blocks in the document
    var blocks = document.querySelectorAll(".block");
    
    // run through each block
    blocks.forEach(function(currBlock){
        // get the radio input in the current block
        var option = currBlock.querySelector("input[name=option]");
        // get the result span element in the current block
        var result = currBlock.querySelector("span.result");
        
        // check if the id of the current option is the same as
        // that of the accepted option, if yes style as correct
        if(option.id == correctOptId){
            currBlock.style.border = '3px solid limegreen';
            result.style.color = 'limegreen';
            result.innerHTML = "Correct";
        }
        else{
            // style the other options as wrong
            currBlock.style.border = '3px solid red';
            result.style.color = 'red';
            result.innerHTML = "Incorrect";
        }
    })
};
代码语言：javascript
复制
<h3>1. how many charecters in the word "lion" </h3>
<p>Choose 1 answer</p>
<hr />
<div class="block" 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("option-11")' style='transform: scale(1.6); margin-right: 10px; vertical-align: middle; margin-top: -2px;' />
        A) 4</label>
  <span class="result" id='result-11'></span>
</div>
<hr />

<div class="block" 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("option-11")' style='transform: scale(1.6); margin-right: 10px; vertical-align: middle; margin-top: -2px;' />
        B) 3</label>
  <span class="result" id='result-12'></span>
</div>
<hr />

<div class="block" 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("option-11")' style='transform: scale(1.6); margin-right: 10px; vertical-align: middle; margin-top: -2px;' />
        C) 1</label>
  <span class="result" id='result-13'></span>
</div>
<hr />

<div class="block" 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("option-11")' style='transform: scale(1.6); margin-right: 10px; vertical-align: middle; margin-top: -2px;' />
        D) 2</label>
  <span class="result" id='result-14'></span>
</div>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/64842418

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档