我如何能显示正确和不正确的答案，在选择的时刻和正确答案的数目，一个人被选中在我的mcq网站？
我如何能显示正确和不正确的答案，在选择的时刻和正确答案的数目，一个人被选中在我的mcq网站？
提问于 2020-11-16 04:39:02
我拿到了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
Stack Overflow用户
回答已采纳
发布于 2020-11-16 05:12:12
你在使用1版本的jQuery.更新至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)，则标记正确的答案，但不会为结果添加值。
示例：
<!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 src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.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(true)
}
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!'
}
displayAnswer11(false);
}
function displayAnswer11(x) {
document.getElementById('block-11').style.border = '3px solid limegreen'
document.getElementById('result-11').style.color = 'limegreen'
document.getElementById('result-11').innerHTML = 'Correct!'
if (x) {
document.getElementById('correct_answers').innerHTML = '';
document.getElementById('correct_answers').innerHTML += correct_answers += 1;
} else {
document.getElementById('option-11').disabled = true;
}
}
</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(true)
}
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!'
}
displayAnswer22(false);
}
function displayAnswer22(x) {
document.getElementById('block-22').style.border = '3px solid limegreen'
document.getElementById('result-22').style.color = 'limegreen'
document.getElementById('result-22').innerHTML = 'Correct!'
if (x) {
document.getElementById('correct_answers').innerHTML = '';
document.getElementById('correct_answers').innerHTML += correct_answers += 1;
} else {
document.getElementById('option-22').disabled = true;
}
}
</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(true)
}
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!'
}
displayAnswer33(false);
}
function displayAnswer33(x) {
document.getElementById('block-32').style.border = '3px solid limegreen'
document.getElementById('result-32').style.color = 'limegreen'
document.getElementById('result-32').innerHTML = 'Correct!'
if (x) {
document.getElementById('correct_answers').innerHTML = '';
document.getElementById('correct_answers').innerHTML += correct_answers += 1;
} else {
document.getElementById('option-32').disabled = true;
}
}
</script>
<p id="correct_answers"></p>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64852769
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号