Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Javascript questionnaire

    Hi,

    I am trying to create a javascript/jQuery quiz/questionnaire. I've seen a few of these around but none are quite what I am after.

    What I'd like to do is pull a number of questions from a database using php. Each question would have a yes/no answer which takes them to the next question. Only one question is shown at any time (most of the quizzes i've seen display all the questions with a submit button at the end). I also want to be able to record the answers to save them to the database at the end.

    I can do this all in php but then I have to go back to the database for each question/answer which takes time. I am hoping I can do it in javascript/jQuery so that it's faster only my javascript knowledge is not up to scratch.

    Can anyone give me some pointers/show me any examples that might help?

    Thanks
    c_h_r_i_s

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,091
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb

    Provide a short list of the type of questions you want to display.
    Multiple-Choice, T/F, Fill-in-blank, Likert scale, Rating, etc.

    Example below is an outline of what you might do.
    Needs additional information, like <form> tag to send upon submit actions
    and some additional formatting.

    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <title> Untitled </title>
    <script type="text/javascript">
    // For: http://www.codingforums.com/showthread.php?t=237427
    
    var itemNumber = 0;
    var questions = [
      ['Question for 1st in sequence'],
      ['Question for 2nd in sequence'],
      ['Question for 3rd in sequence'],
      ['Question for 4th in sequence'],
      ['Question for 5th in sequence'],
    ];
    function NextQuestion(direction) {
      itemNumber += direction;
      if (itemNumber >= questions.length) {
        alert('End of questions');
        document.getElementById('SendIt').style.display = 'block';
        return;
      }
      if (itemNumber < 0) { itemNumber = 0; }
      if (itemNumber > questions.length-1) { itemNumber = questions.length-1; }
      document.getElementById('quiz').innerHTML = questions[itemNumber];
    }
    window.onload = function() { NextQuestion(0); }
    </script>
    
    </head>
    <body>
    <h1> Quick Quiz </h1>
    <div id="quiz"></div>
    <hr>
    <button onclick="NextQuestion(-1)">Back</button>
    <button onclick="NextQuestion(+1)">Next</button>
    <hr>
    <input id="SendIt" style="display:none" type="submit" value="submit">
    </body>
    </html>
    Last edited by jmrker; 09-08-2011 at 03:46 PM.

  • Users who have thanked jmrker for this post:

    Cammy (09-09-2011)

  • #3
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This is perfect, thanks!

    Only thing I need to do now is get the questions from the database to javascript.

    Quote Originally Posted by jmrker View Post
    Provide a short list of the type of questions you want to display.
    Multiple-Choice, T/F, Fill-in-blank, Likert scale, Rating, etc.

    Example below is an outline of what you might do.
    Needs additional information, like <form> tag to send upon submit actions
    and some additional formatting.

    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <title> Untitled </title>
    <script type="text/javascript">
    // For: http://www.codingforums.com/showthread.php?t=237427
    
    var itemNumber = 0;
    var questions = [
      ['Question for 1st in sequence'],
      ['Question for 2nd in sequence'],
      ['Question for 3rd in sequence'],
      ['Question for 4th in sequence'],
      ['Question for 5th in sequence'],
    ];
    function NextQuestion(direction) {
      itemNumber += direction;
      if (itemNumber >= questions.length) {
        alert('End of questions');
        document.getElementById('SendIt').style.display = 'block';
        return;
      }
      if (itemNumber < 0) { itemNumber = 0; }
      if (itemNumber > questions.length-1) { itemNumber = questions.length-1; }
      document.getElementById('quiz').innerHTML = questions[itemNumber];
    }
    window.onload = function() { NextQuestion(0); }
    </script>
    
    </head>
    <body>
    <h1> Quick Quiz </h1>
    <div id="quiz"></div>
    <hr>
    <button onclick="NextQuestion(-1)">Back</button>
    <button onclick="NextQuestion(+1)">Next</button>
    <hr>
    <input id="SendIt" style="display:none" type="submit" value="submit">
    </body>
    </html>

  • #4
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,091
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Thumbs up

    Quote Originally Posted by c_h_r_i_s View Post
    This is perfect, thanks!

    Only thing I need to do now is get the questions from the database to javascript.
    You're most welcome.
    Happy to help.
    Good Luck!


    PS: Additional thoughts
    Questions could be located in an external JS file and read from there instead of a database.
    OR:
    Questions could be an external text file read with an ajax function from the server.

    BTW: Change thread to 'resolved' if you are happy with the answer.

  • #5
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    would this be a good project to practice XML usage on Jmrker? Ive never used it and I'd liek to start playing around with XML

  • #6
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,091
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Thumbs up

    Quote Originally Posted by DanInMa View Post
    would this be a good project to practice XML usage on Jmrker? Ive never used it and I'd liek to start playing around with XML
    You might get a better response on this topic from other, more knowledgeable, forum members because I have only limited exposure to XML coding.

    My personal belief would be to go for it. Might give an excellent opportunity to try something new.

    Start a new thread and keep us abreast of your progress!

  • #7
    New Coder
    Join Date
    Aug 2011
    Location
    Gold Coast, Australia
    Posts
    16
    Thanks
    1
    Thanked 1 Time in 1 Post
    Thanks, that helped me with a current project I am working on.

  • #8
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,091
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Thumbs up

    Quote Originally Posted by Cammy View Post
    Thanks, that helped me with a current project I am working on.
    Glad I could be of assistance twice!
    Good Luck!

  • #9
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,091
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb

    I didn't like the way the last question display did not back up (reverse) the count right,
    so I changed script to this and added a progress bar for the user to get an idea about
    how far they are toward completion of the questionnaire. Just adds a bit of pizzazze
    before the "submit" (change type of command actions to write to form) button display.

    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <title> Untitled </title>
    <style type="text/css">
      #ProgressBar { height:20px; width:250px; border:1px solid black; position:relative; }
      #ProgBar { width:0px; background-Color:red; position:absolute; }
    </style>
    
    <script type="text/javascript">
    // For: http://www.codingforums.com/showthread.php?t=237427
    
    var itemNumber = 0;
    var questions = [
      ['Question for 1st in sequence'],
      ['Question for 2nd in sequence'],
      ['Question for 3rd in sequence'],
      ['Question for 4th in sequence'],
      ['Question for 5th in sequence'],
    ];
    
    function NextQuestion(direction) {
      itemNumber += direction;
      if (itemNumber < 0) { itemNumber = 0; }
      if (itemNumber > (questions.length-1)) {
        itemNumber = questions.length-1;
        alert('End of questions');
        document.getElementById('ProgressBar').style.display = 'none';
        document.getElementById('SendIt').style.display = 'block';
      } else {
        document.getElementById('SendIt').style.display = 'none';
        document.getElementById('ProgressBar').style.display = 'block';
      }
      amt = itemNumber;
      setProgressBar();
      document.getElementById('quiz').innerHTML = questions[itemNumber];
    }
    
    var amt = questions.length-1;
    var maxAmt = amt;
    
    function setProgressBar() {
      var maxWide = 250;  				// should be same as CSS setting for 'ProgressBar'
      var sel = document.getElementById('ProgBar');
    //  var pct = Math.floor((amt / maxAmt) * maxWide);  sel.style.width = pct+'px';
      var pct = parseInt(amt/maxAmt*100);  sel.style.width = pct+'%';
      document.getElementById('ProgBar').innerHTML = pct+'%';
    }
    
    window.onload = function() { NextQuestion(0); }
    </script>
    
    </head>
    <body>
    <h1> Quick Quiz </h1>
    <div id="quiz"></div>
    <hr>
    
    <button onclick="NextQuestion(-1)">Back</button>
    <button onclick="NextQuestion(+1)">Next</button>
    <hr>
    <div id="ProgressBar"><div id="ProgBar">&nbsp;</div></div>
    <input id="SendIt" style="display:none;" type="submit" value="submit">
    
    </body>
    </html>
    Still needs a <form> tag with action to save results to a server.
    Last edited by jmrker; 09-09-2011 at 04:40 AM.

  • #10
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks jmrker, great stuff.

    One more question though. It's simple enough to store the answers in a hidden html input but how do I get javascript to automatically call the <form> once the quiz has finished?

    Thanks.

  • #11
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,091
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Arrow

    Quote Originally Posted by c_h_r_i_s View Post
    Thanks jmrker, great stuff.

    One more question though. It's simple enough to store the answers in a hidden html input but how do I get javascript to automatically call the <form> once the quiz has finished?

    Thanks.
    Depends on what you have on your server.
    You could have the <form> tag use "formmail.cgi" to save the information to a text file or mail the results to you.
    You might be able to save the information with a dB like mySQL or possibly some PHP code.


  •  

    Tags for this Thread

    Posting Permissions

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