Results 1 to 6 of 6

Thread: Show different image depending on result check

  1. #1
    Join Date
    Jan 2011
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Show different image depending on result check

    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.

    Code:
    <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>

  2. #2
    Join Date
    May 2012
    Location
    Hitchhiking the Galaxy
    Posts
    1,013
    Thanks
    46
    Thanked 139 Times in 139 Posts
    Blog Entries
    1

    Default

    try:
    Code:
    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.
    "Most good programmers do programming not because they expect to get paid or get adulation by the public, but because it is fun to program." - Linus Torvalds
    Anime Views Forums
    Bernie

  3. The Following User Says Thank You to bernie1227 For This Useful Post:

    jposttib (01-05-2013)

  4. #3
    Join Date
    Jan 2011
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

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

  5. #4
    Join Date
    May 2012
    Location
    Hitchhiking the Galaxy
    Posts
    1,013
    Thanks
    46
    Thanked 139 Times in 139 Posts
    Blog Entries
    1

    Default

    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.
    "Most good programmers do programming not because they expect to get paid or get adulation by the public, but because it is fun to program." - Linus Torvalds
    Anime Views Forums
    Bernie

  6. #5
    Join Date
    Jan 2011
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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.

    Code:
    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.

  7. #6
    Join Date
    Jan 2011
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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.

Similar Threads

  1. Replies: 1
    Last Post: 02-24-2012, 03:59 AM
  2. Resolved Joining result of multiple selects to get final result?
    By gwmbox in forum JavaScript
    Replies: 2
    Last Post: 01-04-2011, 01:18 PM
  3. Replies: 0
    Last Post: 12-01-2010, 08:08 AM
  4. Replies: 4
    Last Post: 03-01-2010, 05:39 AM
  5. Replies: 4
    Last Post: 12-18-2007, 03:20 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •