Results 1 to 6 of 6

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

  1. #1
    Join Date
    Feb 2016
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default 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>&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>
    Last edited by james438; 02-03-2016 at 07:01 AM. Reason: format

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    You could look into using innerHTML and then write the answer output to a div - example: http://www.tizag.com/javascriptT/jav...-innerHTML.php
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  3. #3
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    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>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  4. #4
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,881
    Thanks
    49
    Thanked 266 Times in 258 Posts
    Blog Entries
    56

    Default

    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>

  5. #5
    Join Date
    Feb 2016
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default 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.
    Last edited by jscheuer1; 04-28-2016 at 02:56 AM. Reason: excessive quoting

  6. #6
    Join Date
    Feb 2016
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default 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>&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>
    Last edited by jscheuer1; 04-28-2016 at 02:57 AM. Reason: format code

Similar Threads

  1. One simple (or not) question about "Text and Image Crawler v1.53"
    By Alchelor in forum Dynamic Drive scripts help
    Replies: 6
    Last Post: 02-05-2014, 07:33 PM
  2. Flip Book "Images"... does NOT show up, on "newly" hosted Web Site
    By ggmoss in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 01-10-2013, 01:06 AM
  3. "Single Instance" Works; "Multiple" do not
    By MickeyNotD in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 01-27-2012, 03:47 AM
  4. Refill "File" form field with stored image data
    By pelaej in forum MySQL and other databases
    Replies: 3
    Last Post: 10-22-2010, 07:28 PM
  5. Rich Text Editor script - how to show contents on "back"
    By skink in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 01-18-2006, 09:14 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
  •