Javascript Quiz

[webmannw]

Hi All,

I am trying to put togther a javascript quiz for a website and need some advice.

Basically there are a series of video clips over several pages and each clip has several multiple choice questions (radio buttons) and a text area to enter an opinion about the clip just seen.

I need to keep track of all the question answers and the text entered for each video clip then at the end of the 'quiz' produce a summary of answeres for the user.

Serverside scripting isnt an option so I guess I need to use js but not sure how to go about it.

Can anyone point me in the right direction?

Thanks in advance.

[adni18]

For each page, you will want to have hidden fields that store the value of the previous question in it using a kind of ("hi.html?q1=ans&q2=ans") kind of approach to transfer the variables. If you need more help with this, just give a shout.

[StupidScript]

Another approach is to use a framed document with a tiny frame whose sole purpose is to store a Javascript array for updating during the quiz. To try this, make four pages, named and with content as shown below, then open "quiz.html" in your browser.

"quiz.html":

<frameset rows="1,*" border=0>
<frame src="javascript.html" id="script">
<frame src="quiz_page_1.html" id="quiz">
</frameset>

"javascript.html":

<script>
// initialize incrementing variable
var i = 0;
// initialize answers array
var quiz_items = new Array();
// answer is passed to function as argument
function updateQuiz(val) {
// add entry to array with answer
quiz_items[i]=val;
// increment for next answer/array entry
i++;
}
</script>

"quiz_page_1.html":

<form>
<input type="radio" name="quiz_item_1" value="Yes" onclick="parent.frames[0].updateQuiz(this.value)"> Yes
<input type="radio" name="quiz_item_1" value="No" onclick="parent.frames[0].updateQuiz(this.value)"> No
<input type="button" value="Next" onclick="location.href='quiz_page_2.html'">
</form>

( The "Next" button just moves to the next page ... )

"quiz_page_2.html":

<form>
<input type="radio" name="quiz_item_2" value="Maybe" onclick="parent.frames[0].updateQuiz(this.value)"> Maybe
<input type="radio" name="quiz_item_2" value="Other" onclick="parent.frames[0].updateQuiz(this.value)"> Other
<input type="button" value="Next" onclick="location.href='quiz_result.html'">
</form>

"quiz_result.html":

Here are your answers:<br />
<script>
document.write("Question 1: "+parent.frames[0].quiz_items[0]+"<br />");
document.write("Question 2: "+parent.frames[0].quiz_items[1]+"<br />");
</script>

Each radio button selection adds a new value to the "quiz_items" array, and on the result page, you grab the results from the array and put them in context.

Just a thought. :)

[StupidScript]

(Sorry ... )

For the text comments you mentioned, you can pass those to another array when the "Next" button is clicked:

<input type="button" value="Next" onclick="parent.frames[0].updateText(this.form.textComment.value)">

where "javascript.html" also contains another, similar function and another, similar array to hold the answers. On the results page, add similar code to pull the text answers from the array.

[edited by: StupidScript at 9:46 pm (utc) on Nov. 4, 2004]

[StupidScript]

Here's the whole package:

quiz.html:

<frameset rows="1,*" border=0>
<frame src="javascript.html">
<frame src="quiz_page_1.html">
</frameset>

javascript.html:

<script>
var quiz_items = new Array();
var quiz_text = new Array();
var i = 0;
function updateQuiz(val) {
quiz_items[i]=val;
}
function updateText(val) {
quiz_text[i]=val;
i++;
}
</script>

quiz_page_1.html:

<form>
<input type="radio" name="quiz_item" value="Yes" onclick="parent.frames[0].updateQuiz(this.value)"> Yes
<input type="radio" name="quiz_item" value="No" onclick="parent.frames[0].updateQuiz(this.value)"> No
<input type="text" name="textComment">
<input type="button" value="Next" onclick="parent.frames[0].updateText(this.form.textComment.value);location.href='quiz_page_2.html'">
</form>

quiz_page_2.html:

<form>
<input type="radio" name="quiz_item" value="Maybe" onclick="parent.frames[0].updateQuiz(this.value)"> Maybe
<input type="radio" name="quiz_item" value="Other" onclick="parent.frames[0].updateQuiz(this.value)"> Other
<input type="text" name="textComment">
<input type="button" value="Next" onclick="parent.frames[0].updateText(this.form.textComment.value);location.href='quiz_result.html'">
</form>

quiz_result.html:

Here are your answers:<br />
<script>
document.write("Question 1: "+parent.frames[0].quiz_items[0]+"<br />");
document.write("Text 1: "+parent.frames[0].quiz_text[0]+"<br />");
document.write("Question 2: "+parent.frames[0].quiz_items[1]+"<br />");
document.write("Text 2: "+parent.frames[0].quiz_text[1]+"<br />");
</script>

Hope you find it useful! :)

[webmannw]

Thanks guys..I really appreciare the input!

I will have a go at both and see which fits best.

Cheers!