Web Analytics Made Easy - StatCounter Javascript questionnaire - CodingForum

Announcement

Collapse
No announcement yet.

Javascript questionnaire

Collapse
X
Collapse
 
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
  • #1

    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
    Tags: javascript, jquery, questionnaire, quiz
  • #2
    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.codingforum.net/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; Sep 8, 2011, 10:46 AM.

    Comment

    • #3
      This is perfect, thanks!

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

      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.codingforum.net/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>

      Comment

      • #4
        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.

        Comment

        • #5
          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
          - Firebug is a web developers best friend! - Learn it, Love it, use it!
          - Validate your code! - JQ/JS troubleshooting
          - Using jQuery with Other Libraries - Jslint for Jquery/other JS library users

          Comment

          • #6
            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!

            Comment

            • #7
              Thanks, that helped me with a current project I am working on.

              Comment

              • #8
                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!

                Comment

                • #9
                  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.codingforum.net/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; Sep 8, 2011, 11:40 PM.

                  Comment

                  • #10
                    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.

                    Comment

                    • #11
                      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.

                      Comment

                      Previous template Next
                      Working...
                      X
                      😀
                      🥰
                      🤢
                      😎
                      😡
                      👍
                      👎