Show different image depending on result check

[jposttib]

I have a script to make multiple choice questions. When pressing the "CHECK" button it writes "Perfect job! When ......" if the answer is correct, and "Think again! When....." I also want to have a picture shown "Correct.gif" or "Incorrect.gif" when the button is pressed. I am an absolute newbie in javascript and start to slowly understand. I was thinking about adding document.write('<INPUT TYPE="image" NAME="resultpic">');
and in the function check after if (x==correctAnswer) { input.resultpic.value = "<IMG SRC="correct.gif">"; And the same for the ELSE but with the incorrect.gif

But this doesn't work and it even stops showing the question.

<SCRIPT LANGUAGE="JavaScript">
<!-- Hide script from old browsers

var question1 = '<strong>Who</strong>.................?';
var choice1 = 'Mr. Johnson.';
var choice2 = 'In 1875.';
var choice3 = '78 years old.';
var choice4 = 'In 1949.';
var correctAnswer = 1;   // Indicate the best answer with this variable.

function check(input,x) {
	if (x==0) {
	alert("Please make a choice.");
	} else {
	if (x==correctAnswer) {
	   	input.result.value = "Excellent! When the question starts with `WHO` your answer should be a name or describe someone.";
		} else {
		input.result.value = "This answer is incorrect. The answer on a 'WHO' question can't be a time expression or age.";
		}
}
}

function cleartext(input) {
		input.result.value = ''; // Clear text field.
}

// Initialize answer to 0 to trap no selection.
answer=0;

// Generate the HTML code for the top of the web page.
document.write('<HR>');
document.write(question1);

// Generate the HTML code for the radio button choices.

document.write('<FORM NAME="questn1">');
document.write('<OL>');
document.write('<LI><input type="radio" name="answera" onClick="answer=1">',choice1);
document.write('<LI><input type="radio" name="answera" onClick="answer=2">',choice2);
document.write('<LI><input type="radio" name="answera" onClick="answer=3">',choice3);
document.write('<LI><input type="radio" name="answera" onClick="answer=4">',choice4);
document.write('</OL>');

// Generate the HTML code for the buttons and response text area.
document.write('<HR>');
document.write('<INPUT TYPE="button" VALUE="Check Answer" onClick="check(this.form,answer)"> ');
document.write('<INPUT TYPE="reset" VALUE="  Clear  " onClick="answer=0"> <br/> ');
document.write('<INPUT TYPE="text" NAME="result" SIZE="100" class="style55" > <br/> ');
document.write('</FORM>');


cleartext(document.questn1);     // Clear text field on reload.

// End of script.
// End of hide script comment. -->
</SCRIPT>

[bernie1227]

try:

var question1 = '<strong>Who</strong>.................?';
var choice1 = 'Mr. Johnson.';
var choice2 = 'In 1875.';
var choice3 = '78 years old.';
var choice4 = 'In 1949.';
var correctAnswer = 1;   // Indicate the best answer with this variable.

function check(input,x) {
	if (x==0) {
	alert("Please make a choice.");
	} else {
	if (x==correctAnswer) {
	   	input.result.value = "Excellent! When the question starts with `WHO` your answer should be a name or describe someone.";
                document.getElementById('img').src = 'correct.gif';
		} else {
		input.result.value = "This answer is incorrect. The answer on a 'WHO' question can't be a time expression or age.";
                document.getElementById('img').src = 'incorrect.gif';
		}
}
}

function cleartext(input) {
		input.result.value = ''; // Clear text field.
}

// Initialize answer to 0 to trap no selection.
answer=0;

// Generate the HTML code for the top of the web page.
document.write('<HR>');
document.write(question1);

// Generate the HTML code for the radio button choices.

document.write('<FORM NAME="questn1" id="form_questions">');
document.write('<OL">');
document.write('<LI><input type="radio" name="answera" onClick="answer=1">',choice1);
document.write('<LI><input type="radio" name="answera" onClick="answer=2">',choice2);
document.write('<LI><input type="radio" name="answera" onClick="answer=3">',choice3);
document.write('<LI><input type="radio" name="answera" onClick="answer=4">',choice4);
document.write('</OL>');

// Generate the HTML code for the buttons and response text area.
document.write('<HR>');
document.write('<INPUT TYPE="button" VALUE="Check Answer" onClick="check(this.form,answer)"> ');
document.write('<INPUT TYPE="reset" VALUE="  Clear  " onClick="answer=0"> <br/> ');
document.write('<INPUT TYPE="text" NAME="result" SIZE="100" class="style55" > <br/> ');
document.write('</FORM>');

document.write('<img src="blank" id="img" />');

cleartext(document.questn1);     // Clear text field on reload.

You can't write images to an input, so that's why your method wasn't functioning.

[jposttib]

Thanks Bernie. This works perfectly.
Thanks also for the explanation.

[bernie1227]

If this thread is finished, please set it to resolved.
You can do this by editing the first post within the thread - Pressing go advanced - Then where it says no prefix, selecting resolved then save.

[jposttib]

One last question:
I want the image to be changed to an empty.gif.
I tried doing this by adding the document.getElementById('img').src to the cleartext function.
Now it cleans the text but doens't change the image, although it looks logical to me doing it this way.

var question1 = '<strong>Who</strong>.................?';
var choice1 = 'Mr. Johnson.';
var choice2 = 'In 1875.';
var choice3 = '78 years old.';
var choice4 = 'In 1949.';
var correctAnswer = 1;   // Indicate the best answer with this variable.

function check(input,x) {
	if (x==0) {
	alert("Please make a choice.");
	} else {
	if (x==correctAnswer) {
	   	input.result.value = "Excellent! When the question starts with `WHO` your answer should be a name or describe someone.";
        document.getElementById('img').src = 'correct.gif';
		} else {
		input.result.value = "This answer is incorrect. The answer on a 'WHO' question can't be a time expression or age.";
        document.getElementById('img').src = 'incorrect.gif';
		}
}
}

function cleartext(input) {
		input.result.value = ''; // Clear text field.
		document.getElementById('img').src = 'empty.gif';
}

// Initialize answer to 0 to trap no selection.
answer=0;

// Generate the HTML code for the top of the web page.
document.write('<HR>');
document.write(question1);

// Generate the HTML code for the radio button choices.

document.write('<FORM NAME="questn1" id="form_questions">');
document.write('<OL">');
document.write('<LI><input type="radio" name="answera" onClick="answer=1">',choice1);
document.write('<LI><input type="radio" name="answera" onClick="answer=2">',choice2);
document.write('<LI><input type="radio" name="answera" onClick="answer=3">',choice3);
document.write('<LI><input type="radio" name="answera" onClick="answer=4">',choice4);
document.write('</OL>');

// Generate the HTML code for the buttons and response text area.
document.write('<HR>');
document.write('<INPUT TYPE="button" VALUE="Check Answer" onClick="check(this.form,answer)"> ');
document.write('<INPUT TYPE="reset" VALUE="  Clear  " onClick="cleartext(input)"> ');
document.write('<img src="empty.gif" id="img" /> <br/> ');
document.write('<INPUT TYPE="text" NAME="result" SIZE="100" class="style55" > <br/> ');
document.write('</FORM>');


cleartext(document.questn1);     // Clear text field on reload.

[jposttib]

Furthermore to the "clear" option question, is there a reason why you put an ID to the form? Taking the ID away doesn't change anything.