...

View Full Version : Javascript questionnaire



c_h_r_i_s
09-08-2011, 03:54 PM
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

jmrker
09-08-2011, 04:25 PM
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.



<!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>

c_h_r_i_s
09-08-2011, 05:08 PM
This is perfect, thanks!

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


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.



<!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>

jmrker
09-08-2011, 11:44 PM
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.

DanInMa
09-09-2011, 12:40 AM
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

jmrker
09-09-2011, 02:09 AM
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. :o

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

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

Cammy
09-09-2011, 03:22 AM
Thanks, that helped me with a current project I am working on. :)

jmrker
09-09-2011, 03:58 AM
Thanks, that helped me with a current project I am working on. :)

Glad I could be of assistance twice!
Good Luck!
:thumbsup:

jmrker
09-09-2011, 05:37 AM
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.



<!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. :thumbsup:

c_h_r_i_s
09-11-2011, 04:44 PM
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.

jmrker
09-11-2011, 06:44 PM
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. :eek:
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.
:D



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum