Handling Quiz Data (Add Questions/Answers/Results)

Flash-matic

I am starting to develop a quiz website that allows its' users to create What/How quizzes for fun. Basically the user adds Results, Questions, Answers to those questions and what result the answer applies to.
Ex.
Quiz - How will you die?
Question 1 - Self description?
Q1-Answer 1 - [Check box/radio button choose]Outgoing ([Drop down result choose]adds +1 to result of choice)
Q1-Answer 2 - Lazy (adds +1 to result of choice)
Q1-Answer 3 - Other (adds +1 to result of choice)

Something very similar to www.Quizilla.com

My question is what would be the best way to handle this? I need the user to be able to add a new question without leaving the page (like quizilla).

I was thinking they probably have the add buttons just POST all the current info back to the same page so no other info on the page is lost but then it would have to be all in the same form, correct? Anyway tips on achieving this effect would be greatly appreciated.

Thanks,
Flash-matic

PS: If explained poorly just tell me and I will try and re-word this post.

I posted this on another forum and someone asked why not leave the page.

My reply:

The same page can be reloaded, just I need them to be able to add a question, then add answers, then add another questions and answers but still be able to edit and manage the question/answers that were added previously on the same page.

www.quizilla.com is a perfect example.

I was thinking maybe javascript would be most efficient since I would not have to reload the page at all but I am not very familiar with javascript.

aksival

JavaScript would work quite well, you would have an effect similar to that of Gmails 'Add Another Attachment', where the form elements are created on-the-fly without ever leaving the page. If you're not a huge JavaScript buff, I don't recommend attempting to do this.

Of course, reloading the same page each time the user wants to add a question would work (using HTML form arrays and POST vars to save the data, obviously). The two drawbacks here are 1) it's slower and 2) it can be a usability nightmare if you don't do it right.

To alleviate one major usability issue, you could use a snippet of JavaScript to bring the scrollbars back down to where the user left off so they won't be confused. You might also focus on the new field they just created so they can start typing without having to look for it. That would make the reload, more or less, seamless for the user.

Flash-matic

How would I go about POSTing all of the info when I need an delete button next all of the questions/answers/results? Also an update button at least for each section, like quizilla, would be needed.

Even if I could just duplicate the update button it would update all fields even if the user just wanted to update/add one question.

I can handle the it all being controlled by one update button at the bottom, but like you said that would be a usability nightmare.

Thanks,
Flash-matic

Roger_Ramjet

If you can't handle AJAX (javascript) then how about frames or iframes? You don't have to do a full page load when they are entering questions, just submit the iframe and reload it blank form again. Have another frame or iframe that reloads with the updated questions. It can be made to look seemless if you hide the borders or style them nicely. Everyone seems to have forgotten how usefull and efficient frames are since ajax can along.

Flash-matic

But if I do that how can I have the submit gather all of the info from each frame and enter it into the DB?

bradgrafelman

Store data in a session until they've entered all of the data.