Multiple choice question "alertText" show up in text field instead of pop-up.

**bluenew** · 02-02-2016, 11:18 PM

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>&nbsp;</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>

**Beverleyh** · 02-03-2016, 10:05 AM

You could look into using innerHTML and then write the answer output to a div - example: http://www.tizag.com/javascriptT/jav...-innerHTML.php

**vwphillips** · 02-03-2016, 02:51 PM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
</head>

<body>
<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++;
}
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>&nbsp;</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"><input name="q4Result" />
</form></body>

</html>

**molendijk** · 02-03-2016, 03:16 PM

Something like this?

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);
document.getElementById('answers').innerHTML=alertText;
}
</script>
<h1>&nbsp;</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(); if(document.getElementById('answers').innerHTML.length==0){document.getElementById('answers').style.display='none'} else {document.getElementById('answers').style.display='inline-block'}" value="Check Answer"> 
<div id="answers" style="border: 1px solid black; padding: 5px; display: none"></div>
<input type="button" value="Reset" onclick="document.getElementById('test').reset(); document.getElementById('answers').style.display='none'"></input>
</form>

**bluenew** · 02-04-2016, 12:55 AM

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.

**bluenew** · 02-04-2016, 02:40 AM

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>&nbsp;</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>&nbsp;</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>