Multiple choice question "alertText" show up in text field instead of pop-up.
I have been able to get the following script for a simple multiple choice (and multiple answer) to work for what I need, except instead of "alertText" and a pop-up showing up, I would like the alertText to show up on the html page (e.g. in a text box next to "Check Answer"). Any help would be greatly appreciated.
Code:
<script type="text/javascript">
function gradeTest() {
var totalQuestions = 1;
var correctAnswers = 0;
var alertText;
var i;
var a4 = document.getElementsByName('q4');
var a4answers = new Array();
var a4right = new Array('A','C');
var a4bool = true;
for(i = 0; i < a4.length; i++) {
if(a4[i].checked) {
a4answers.push(a4[i].value);
}
}
a4answers.sort();
a4right.sort();
if(a4answers.length == a4right.length) {
for(i = 0; i < a4answers.length; i++) {
if(a4answers[i] != a4right[i]) {
a4bool = false;
break;
}
}
}
else {
a4bool = false;
}
if(a4bool == true) {
correctAnswers++;
}
if(correctAnswers == totalQuestions) {
alertText = "Correct!";
}
else {
alertText = "Sorry, try again!";
}
alert(alertText);
}
</script>
<h1> </h1>
<form id="test">
Which of the following are colors?<br />
<br />
<input name="q4" type="checkbox" id="q4" value="A" />
A) Red?<br />
<input name="q4" type="checkbox" id="q4" value="B" />
B) Car?<br />
<input name="q4" type="checkbox" id="q4" value="C" />
C)
Blue?<br />
<input name="q4" type="checkbox" id="q4" value="D" />
D) Bike? <br />
<br>
<input name="submit" type="button" onclick="gradeTest()" value="Check Answer">
</form>
Thanks -- that worked well -- but how to duplicate questions?
Thanks so much. That is exactly what I was looking for. Just one question: I need to have 3 to 4 questions on each page. I spent about four hours trying to change the code on a second question but the two questions would still interact with each other. I re-named the var's, input names, id's but could not get them both to work. If you have any suggestions I would very much appreciate it. Thanks again for your help with the first question, it was spot on.
SOLVED! -- two java questions on same html page
Just wanted to let you know I figured it out. Here is the code for TWO questions on the same html page. Thanks again for all your help.
Code:
<script type="text/javascript">
function gradeTest1() {
var totalQuestions = 1;
var correctAnswers = 0;
var alertText;
var i;
var a4 = document.getElementsByName('q4');
var a4answers = new Array();
var a4right = new Array('A','C');
var a4bool = true;
for(i = 0; i < a4.length; i++) {
if(a4[i].checked) {
a4answers.push(a4[i].value);
}
}
a4answers.sort();
a4right.sort();
if(a4answers.length == a4right.length) {
for(i = 0; i < a4answers.length; i++) {
if(a4answers[i] != a4right[i]) {
a4bool = false;
break;
}
}
}
else {
a4bool = false;
}
if(a4bool == true) {
correctAnswers++;
}
var r=document.getElementsByName('q4Result');
if (r&&r[0]){
if(correctAnswers == totalQuestions) {
r[0].value = "Correct!";
}
else {
r[0].value = "Sorry, try again!";
}
}
}
</script>
<h1> </h1>
<form id="test1">
Which of the following are colors?<br />
<br />
<input name="q4" type="checkbox" id="q4" value="A" />
A) Red?<br />
<input name="q4" type="checkbox" id="q4" value="B" />
B) Car?<br />
<input name="q4" type="checkbox" id="q4" value="C" />
C)
Blue?<br />
<input name="q4" type="checkbox" id="q4" value="D" />
D) Bike? <br />
<br>
<input name="submit" type="button" onclick="gradeTest1()" value="Check Answer"><input name="q4Result" />
</form>
<script type="text/javascript">
function gradeTest2() {
var totalQuestions = 1;
var correctAnswers = 0;
var alertText;
var i;
var a2 = document.getElementsByName('q2');
var a2answers = new Array();
var a2right = new Array('A2','B2');
var a2bool = true;
for(i = 0; i < a2.length; i++) {
if(a2[i].checked) {
a2answers.push(a2[i].value);
}
}
a2answers.sort();
a2right.sort();
if(a2answers.length == a2right.length) {
for(i = 0; i < a2answers.length; i++) {
if(a2answers[i] != a2right[i]) {
a2bool = false;
break;
}
}
}
else {
a2bool = false;
}
if(a2bool == true) {
correctAnswers++;
}
var r=document.getElementsByName('q2Result');
if (r&&r[0]){
if(correctAnswers == totalQuestions) {
r[0].value = "Correct!";
}
else {
r[0].value = "Sorry, try again!";
}
}
}
</script>
<h1> </h1>
<form id="test2">
Which of the following are colors?<br />
<br />
<input name="q2" type="checkbox" id="q2" value="A2" />
A) Red?<br />
<input name="q2" type="checkbox" id="q2" value="B2" />
B) Car?<br />
<input name="q2" type="checkbox" id="q2" value="C2" />
C)
Blue?<br />
<input name="q2" type="checkbox" id="q2" value="D2" />
D) Bike? <br />
<br>
<input name="submit" type="button" onclick="gradeTest2()" value="Check Answer"><input name="q2Result" />
</form>
