I got the code for my MCQ website. But when the user selects an option, I want to shows the correct and incorrect answer at the moment of selection (That is when the user selects the correct option, then the option will be highlighted. but when the user selects an incorrect option, I want to show that it is incorrect and along with that correct answer also showed). And also there is no second chance is given to the user for selecting the option which already showed the correct answer. (In such case the user can select the correct answer shown and it will be also “counted as the correct answer”). The code is below.
JavaScript
x
230
230
1
<!DOCTYPE html>2
<html>3
<head>4
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>5
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> 6
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>7
8
</head>9
<body>10
<h3>1. how many charecters in the word "lion" </h3>11
<p>Choose 1 answer</p>12
<hr/>13
<div id='block-11' style='padding: 10px;'>14
<label for='option-11' style=' padding: 5px; font-size: 1.0rem;'>15
<input type='radio' name='option' id='option-11' onclick='displayAnswer1()' style='transform: scale(1.6); margin-right: 10px; vertical-align: middle; margin-top: -2px;' />16
A) 4</label>17
<span id='result-11'></span>18
</div>19
<hr />20
21
<div id='block-12' style='padding: 10px;'>22
<label for='option-12' style=' padding: 5px; font-size: 1.0rem;'>23
<input type='radio' name='option' id='option-12' onclick='displayAnswer1()' style='transform: scale(1.6); margin-right: 10px; vertical-align: middle; margin-top: -2px;' />24
B) 3</label>25
<span id='result-12'></span>26
</div>27
<hr />28
29
<div id='block-13' style='padding: 10px;'>30
<label for='option-13' style=' padding: 5px; font-size: 1.0rem;'>31
<input type='radio' name='option' id='option-13' onclick='displayAnswer1()' style='transform: scale(1.6); margin-right: 10px; vertical-align: middle; margin-top: -2px;' />32
C) 1</label>33
<span id='result-13'></span>34
</div>35
<hr />36
37
<div id='block-14' style='padding: 10px;'>38
<label for='option-14' style=' padding: 5px; font-size: 1.0rem;'>39
<input type='radio' name='option' id='option-14' onclick='displayAnswer1()' style='transform: scale(1.6); margin-right: 10px; vertical-align: middle; margin-top: -2px;' />40
D) 2</label>41
<span id='result-14'></span>42
</div>43
<hr />44
<script type="text/javascript">45
var correct_answers = 0;46
function displayAnswer1() {47
if (document.getElementById('option-11').checked) {48
displayAnswer11()49
}50
if (document.getElementById('option-12').checked) {51
document.getElementById('block-12').style.border = '3px solid red'52
document.getElementById('result-12').style.color = 'red'53
document.getElementById('result-12').innerHTML = 'Incorrect!'54
}55
if (document.getElementById('option-13').checked) {56
document.getElementById('block-13').style.border = '3px solid red'57
document.getElementById('result-13').style.color = 'red'58
document.getElementById('result-13').innerHTML = 'Incorrect!'59
}60
if (document.getElementById('option-14').checked) {61
document.getElementById('block-14').style.border = '3px solid red'62
document.getElementById('result-14').style.color = 'red'63
document.getElementById('result-14').innerHTML = 'Incorrect!'64
}65
}66
67
68
function displayAnswer11() {69
document.getElementById('block-11').style.border = '3px solid limegreen'70
document.getElementById('result-11').style.color = 'limegreen'71
document.getElementById('result-11').innerHTML = 'Correct!'72
document.getElementById('correct_answers').innerHTML = "";73
document.getElementById('correct_answers').innerHTML = correct_answers+=1;74
}75
76
77
78
</script>79
<br><br>80
81
<div style=' position: relative; '>82
<h3>2. how many letter inthe word "me"</h3>83
<p>Choose 1 answer</p>84
<hr />85
86
<div id='block-21' style='padding: 10px;'>87
<label for='option-21' style=' padding: 5px; font-size: 1.0rem;'>88
<input type='radio' name='option' id='option-21' onclick='displayAnswer2()' style='transform: scale(1.6); margin-right: 10px; vertical-align: middle; margin-top: -2px;' />89
A) 1</label>90
<span id='result-21'></span>91
</div>92
<hr />93
94
<div id='block-22' style='padding: 10px;'>95
<label for='option-22' style=' padding: 5px; font-size: 1.0rem;'>96
<input type='radio' name='option' id='option-22' onclick='displayAnswer2()' style='transform: scale(1.6); margin-right: 10px; vertical-align: middle; margin-top: -2px;' />97
B) 2</label>98
<span id='result-22'></span>99
</div>100
<hr />101
102
<div id='block-23' style='padding: 10px;'>103
<label for='option-23' style=' padding: 5px; font-size: 1.0rem;'>104
<input type='radio' name='option' id='option-23' onclick='displayAnswer2()' style='transform: scale(1.6); margin-right: 10px; vertical-align: middle; margin-top: -2px;' />105
C) 3</label>106
<span id='result-23'></span>107
</div>108
<hr />109
110
<div id='block-24' style='padding: 10px;'>111
<label for='option-24' style=' padding: 5px; font-size: 1.0rem;'>112
<input type='radio' name='option' id='option-24' onclick='displayAnswer2()' style='transform: scale(1.6); margin-right: 10px; vertical-align: middle; margin-top: -2px;' />113
D) 4</label>114
<span id='result-24'></span>115
</div>116
<hr />117
</div>118
<script>119
// The function evaluates the answer and displays result120
function displayAnswer2() {121
122
if (document.getElementById('option-21').checked) {123
document.getElementById('block-21').style.border = '3px solid red'124
document.getElementById('result-21').style.color = 'red'125
document.getElementById('result-21').innerHTML = 'Incorrect!'126
}127
if (document.getElementById('option-22').checked) {128
displayAnswer22()129
}130
if (document.getElementById('option-23').checked) {131
document.getElementById('block-23').style.border = '3px solid red'132
document.getElementById('result-23').style.color = 'red'133
document.getElementById('result-23').innerHTML = 'Incorrect!'134
}135
if (document.getElementById('option-24').checked) {136
document.getElementById('block-24').style.border = '3px solid red'137
document.getElementById('result-24').style.color = 'red'138
document.getElementById('result-24').innerHTML = 'Incorrect!'139
}140
}141
function displayAnswer22() {142
document.getElementById('block-22').style.border = '3px solid limegreen'143
document.getElementById('result-22').style.color = 'limegreen'144
document.getElementById('result-22').innerHTML = 'Correct!'145
document.getElementById('correct_answers').innerHTML = "";146
document.getElementById('correct_answers').innerHTML += correct_answers+=1;147
}148
149
150
</script>151
152
153
154
<br><br>155
156
157
<div style=' position: relative; '>158
<h3>3. which is actually a name </h3>159
<p>Choose 1 answer</p>160
<hr />161
162
<div id='block-31' style='padding: 5px;'>163
<label for='option-31' style=' padding: 5px; font-size: 1.0rem;'>164
<input type='radio' name='option' id='option-31' onclick='displayAnswer3()' style='transform: scale(1.6); margin-right: 10px; vertical-align: middle; margin-top: -2px;' />165
A) 3nh r</label>166
<span id='result-31'></span>167
</div>168
<hr />169
170
<div id='block-32' style='padding: 5px;'>171
<label for='option-32' style=' padding: 5px; font-size: 1.0rem;'>172
<input type='radio' name='option' id='option-32' onclick='displayAnswer3()' style='transform: scale(1.6); margin-right: 10px; vertical-align: middle; margin-top: -2px;' />173
B) jack</label>174
<span id='result-32'></span>175
</div>176
<hr />177
178
<div id='block-33' style='padding: 5px;'>179
<label for='option-33' style=' padding: 5px; font-size: 1.0rem;'>180
<input type='radio' name='option' id='option-33' onclick='displayAnswer3()' style='transform: scale(1.6); margin-right: 10px; vertical-align: middle; margin-top: -2px;' />181
C) kdikduf</label>182
<span id='result-33'></span>183
</div>184
<hr />185
186
<div id='block-34' style='padding: 5px;'>187
<label for='option-34' style=' padding: 5px; font-size: 1.0rem;'>188
<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;' />189
D) lkjhh</label>190
<span id='result-34'></span>191
</div>192
<hr />193
</div>194
<script>195
// The function evaluates the answer and displays result196
function displayAnswer3() {197
198
if (document.getElementById('option-31').checked) {199
document.getElementById('block-31').style.border = '3px solid red'200
document.getElementById('result-31').style.color = 'red'201
document.getElementById('result-31').innerHTML = 'Incorrect!'202
}203
if (document.getElementById('option-32').checked) {204
displayAnswer33()205
}206
if (document.getElementById('option-33').checked) {207
document.getElementById('block-33').style.border = '3px solid red'208
document.getElementById('result-33').style.color = 'red'209
document.getElementById('result-33').innerHTML = 'Incorrect!'210
}211
if (document.getElementById('option-34').checked) {212
document.getElementById('block-34').style.border = '3px solid red'213
document.getElementById('result-34').style.color = 'red'214
document.getElementById('result-34').innerHTML = 'Incorrect!'215
}216
}217
218
function displayAnswer33() {219
document.getElementById('block-32').style.border = '3px solid limegreen'220
document.getElementById('result-32').style.color = 'limegreen'221
document.getElementById('result-32').innerHTML = 'Correct!'222
document.getElementById('correct_answers').innerHTML = "";223
document.getElementById('correct_answers').innerHTML += correct_answers+=1;224
}225
</script>226
<p id="correct_answers"></p>227
</body>228
</html>229
230
Advertisement
Answer
You are using 1 version of jQuery… update to 3.5.1
Replace this line:
JavaScript
1
2
1
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>2
with this one:
JavaScript
1
2
1
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>2
“I want to show that it is incorrect and along with that correct answer also showed).”
For this it is necessary at the end of each function that is responsible for incorrect answers to call the function for correct answer.
We call the function with added argument. If the argument is “true” displayAnswer11(true), it add value to the result. If the argument is “false” displayAnswer11(false) it marks the correct answer but does not add value to the result.
Example:
JavaScript
1
261
261
1
<!DOCTYPE html>2
<html>3
4
<head>5
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>6
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">7
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>8
</head>9
10
<body>11
<h3>1. how many charecters in the word "lion" </h3>12
<p>Choose 1 answer</p>13
<hr />14
<div id='block-11' style='padding: 10px;'>15
<label for='option-11' style=' padding: 5px; font-size: 1.0rem;'>16
<input type='radio' name='option' id='option-11' onclick='displayAnswer1()'17
style='transform: scale(1.6); margin-right: 10px; vertical-align: middle; margin-top: -2px;' />18
A) 4</label>19
<span id='result-11'></span>20
</div>21
<hr />22
23
<div id='block-12' style='padding: 10px;'>24
<label for='option-12' style=' padding: 5px; font-size: 1.0rem;'>25
<input type='radio' name='option' id='option-12' onclick='displayAnswer1()'26
style='transform: scale(1.6); margin-right: 10px; vertical-align: middle; margin-top: -2px;' />27
B) 3</label>28
<span id='result-12'></span>29
</div>30
<hr />31
32
<div id='block-13' style='padding: 10px;'>33
<label for='option-13' style=' padding: 5px; font-size: 1.0rem;'>34
<input type='radio' name='option' id='option-13' onclick='displayAnswer1()'35
style='transform: scale(1.6); margin-right: 10px; vertical-align: middle; margin-top: -2px;' />36
C) 1</label>37
<span id='result-13'></span>38
</div>39
<hr />40
41
<div id='block-14' style='padding: 10px;'>42
<label for='option-14' style=' padding: 5px; font-size: 1.0rem;'>43
<input type='radio' name='option' id='option-14' onclick='displayAnswer1()'44
style='transform: scale(1.6); margin-right: 10px; vertical-align: middle; margin-top: -2px;' />45
D) 2</label>46
<span id='result-14'></span>47
</div>48
<hr />49
50
<script type="text/javascript">51
var correct_answers = 0;52
function displayAnswer1() {53
if (document.getElementById('option-11').checked) {54
displayAnswer11(true)55
}56
if (document.getElementById('option-12').checked) {57
document.getElementById('block-12').style.border = '3px solid red'58
document.getElementById('result-12').style.color = 'red'59
document.getElementById('result-12').innerHTML = 'Incorrect!'60
}61
if (document.getElementById('option-13').checked) {62
document.getElementById('block-13').style.border = '3px solid red'63
document.getElementById('result-13').style.color = 'red'64
document.getElementById('result-13').innerHTML = 'Incorrect!'65
}66
if (document.getElementById('option-14').checked) {67
document.getElementById('block-14').style.border = '3px solid red'68
document.getElementById('result-14').style.color = 'red'69
document.getElementById('result-14').innerHTML = 'Incorrect!'70
}71
72
displayAnswer11(false);73
}74
75
76
function displayAnswer11(x) {77
document.getElementById('block-11').style.border = '3px solid limegreen'78
document.getElementById('result-11').style.color = 'limegreen'79
document.getElementById('result-11').innerHTML = 'Correct!'80
if (x) {81
document.getElementById('correct_answers').innerHTML = '';82
document.getElementById('correct_answers').innerHTML += correct_answers += 1;83
} else {84
document.getElementById('option-11').disabled = true; 85
}86
}87
88
89
90
</script>91
<br><br>92
93
<div style=' position: relative; '>94
<h3>2. how many letter inthe word "me"</h3>95
<p>Choose 1 answer</p>96
<hr />97
98
<div id='block-21' style='padding: 10px;'>99
<label for='option-21' style=' padding: 5px; font-size: 1.0rem;'>100
<input type='radio' name='option' id='option-21' onclick='displayAnswer2()'101
style='transform: scale(1.6); margin-right: 10px; vertical-align: middle; margin-top: -2px;' />102
A) 1</label>103
<span id='result-21'></span>104
</div>105
<hr />106
107
<div id='block-22' style='padding: 10px;'>108
<label for='option-22' style=' padding: 5px; font-size: 1.0rem;'>109
<input type='radio' name='option' id='option-22' onclick='displayAnswer2()'110
style='transform: scale(1.6); margin-right: 10px; vertical-align: middle; margin-top: -2px;' />111
B) 2</label>112
<span id='result-22'></span>113
</div>114
<hr />115
116
<div id='block-23' style='padding: 10px;'>117
<label for='option-23' style=' padding: 5px; font-size: 1.0rem;'>118
<input type='radio' name='option' id='option-23' onclick='displayAnswer2()'119
style='transform: scale(1.6); margin-right: 10px; vertical-align: middle; margin-top: -2px;' />120
C) 3</label>121
<span id='result-23'></span>122
</div>123
<hr />124
125
<div id='block-24' style='padding: 10px;'>126
<label for='option-24' style=' padding: 5px; font-size: 1.0rem;'>127
<input type='radio' name='option' id='option-24' onclick='displayAnswer2()'128
style='transform: scale(1.6); margin-right: 10px; vertical-align: middle; margin-top: -2px;' />129
D) 4</label>130
<span id='result-24'></span>131
</div>132
<hr />133
</div>134
<script>135
136
// The function evaluates the answer and displays result137
function displayAnswer2() {138
139
if (document.getElementById('option-21').checked) {140
document.getElementById('block-21').style.border = '3px solid red'141
document.getElementById('result-21').style.color = 'red'142
document.getElementById('result-21').innerHTML = 'Incorrect!'143
}144
if (document.getElementById('option-22').checked) {145
displayAnswer22(true)146
}147
if (document.getElementById('option-23').checked) {148
document.getElementById('block-23').style.border = '3px solid red'149
document.getElementById('result-23').style.color = 'red'150
document.getElementById('result-23').innerHTML = 'Incorrect!'151
}152
if (document.getElementById('option-24').checked) {153
document.getElementById('block-24').style.border = '3px solid red'154
document.getElementById('result-24').style.color = 'red'155
document.getElementById('result-24').innerHTML = 'Incorrect!'156
}157
158
displayAnswer22(false);159
}160
function displayAnswer22(x) {161
document.getElementById('block-22').style.border = '3px solid limegreen'162
document.getElementById('result-22').style.color = 'limegreen'163
document.getElementById('result-22').innerHTML = 'Correct!'164
if (x) {165
document.getElementById('correct_answers').innerHTML = '';166
document.getElementById('correct_answers').innerHTML += correct_answers += 1;167
} else {168
document.getElementById('option-22').disabled = true; 169
}170
}171
172
173
</script>174
175
176
177
<br><br>178
179
180
<div style=' position: relative; '>181
<h3>3. which is actually a name </h3>182
<p>Choose 1 answer</p>183
<hr />184
185
<div id='block-31' style='padding: 5px;'>186
<label for='option-31' style=' padding: 5px; font-size: 1.0rem;'>187
<input type='radio' name='option' id='option-31' onclick='displayAnswer3()'188
style='transform: scale(1.6); margin-right: 10px; vertical-align: middle; margin-top: -2px;' />189
A) 3nh r</label>190
<span id='result-31'></span>191
</div>192
<hr />193
194
<div id='block-32' style='padding: 5px;'>195
<label for='option-32' style=' padding: 5px; font-size: 1.0rem;'>196
<input type='radio' name='option' id='option-32' onclick='displayAnswer3()'197
style='transform: scale(1.6); margin-right: 10px; vertical-align: middle; margin-top: -2px;' />198
B) jack</label>199
<span id='result-32'></span>200
</div>201
<hr />202
203
<div id='block-33' style='padding: 5px;'>204
<label for='option-33' style=' padding: 5px; font-size: 1.0rem;'>205
<input type='radio' name='option' id='option-33' onclick='displayAnswer3()'206
style='transform: scale(1.6); margin-right: 10px; vertical-align: middle; margin-top: -2px;' />207
C) kdikduf</label>208
<span id='result-33'></span>209
</div>210
<hr />211
212
<div id='block-34' style='padding: 5px;'>213
<label for='option-34' style=' padding: 5px; font-size: 1.0rem;'>214
<input type='radio' name='option' value='1/6' id='option-34' onclick='displayAnswer3()'215
style='transform: scale(1.6); margin-right: 10px; vertical-align: middle; margin-top: -2px;' />216
D) lkjhh</label>217
<span id='result-34'></span>218
</div>219
<hr />220
</div>221
<script>222
// The function evaluates the answer and displays result223
function displayAnswer3() {224
225
if (document.getElementById('option-31').checked) {226
document.getElementById('block-31').style.border = '3px solid red'227
document.getElementById('result-31').style.color = 'red'228
document.getElementById('result-31').innerHTML = 'Incorrect!'229
}230
if (document.getElementById('option-32').checked) {231
displayAnswer33(true)232
}233
if (document.getElementById('option-33').checked) {234
document.getElementById('block-33').style.border = '3px solid red'235
document.getElementById('result-33').style.color = 'red'236
document.getElementById('result-33').innerHTML = 'Incorrect!'237
}238
if (document.getElementById('option-34').checked) {239
document.getElementById('block-34').style.border = '3px solid red'240
document.getElementById('result-34').style.color = 'red'241
document.getElementById('result-34').innerHTML = 'Incorrect!'242
}243
244
displayAnswer33(false);245
}246
247
function displayAnswer33(x) {248
document.getElementById('block-32').style.border = '3px solid limegreen'249
document.getElementById('result-32').style.color = 'limegreen'250
document.getElementById('result-32').innerHTML = 'Correct!'251
if (x) {252
document.getElementById('correct_answers').innerHTML = '';253
document.getElementById('correct_answers').innerHTML += correct_answers += 1;254
} else {255
document.getElementById('option-32').disabled = true; 256
}257
}258
</script>259
<p id="correct_answers"></p>260
</body>261
</html>