小贝子编程

我如何在我的mcq网站上显示选择时的正确答案和错误答案，以及一个人选择的正确答案的数量



我得到了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>

您使用的是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>

"；我想证明这是不正确的，同时也表明了正确的答案(">

为此，有必要在每个导致错误答案的函数的末尾调用该函数以获得正确答案。

我们调用添加了参数的函数。如果自变量是"0"；真"；displayAnswer11(true)，它将值添加到结果中。如果自变量是"0"；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>

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium