View Full Version : Want to do a picture quiz page, how?

03-17-2010, 11:07 AM
i would like to have 10 pictures, a true or false answer to the picture and then show there score out of 10.
Also an option to see whick answers were right and wrong.
Any ideas?

03-17-2010, 03:48 PM
I'm sure this could be done with some simple PHP and javascript action.

03-17-2010, 03:54 PM
PHP/mySql, is that what you're asking?

03-18-2010, 04:07 PM
You dont need to create a database, have a dynamic webserver (ala PHP mySQL) for simple app like this. Avoid 10 round trips to the server. Do it all on the client!

Javascript today is more powerful than you think. You could use json cookies which would look something like this:

'{"qNo": "1", "q" : "path/to/image.jpg", "correctA": "true"}'

or if you are targetting modern browsers read up on local storage and session storage. The you wont need 10 cookies but just one local storage

03-18-2010, 07:20 PM
Unless you want to store the answers, right?

03-19-2010, 02:12 AM
got a link to a good resource ranjan? i wouldn't mind a good tutorial or two

03-19-2010, 05:02 PM
I have used an XML db before for a couple of projects


quite powerful

03-20-2010, 10:06 AM
1. json
2. cookies
3. localstorage

google them

just as a proof of concept, the script below uses json for a quiz

<!doctype html>
<title>json quiz</title>
<div id="page-wrap">
<h1>Json Quiz</h1>
<dl id="quiz">
<dt class="question_1"></dt>
<dd class="answers">
<input type="radio" name="userAnswer_1" id="userAnswer_1_1" value="true"><label for="userAnswer_1_1">True</label>
<input type="radio" name="userAnswer_1" id="userAnswer_1_2" value="false"><label for="userAnswer_1_2">False</label>
<span class="result_1"></span>
<dt class="question_2"></dt>
<dd class="answers">
<input type="radio" name="userAnswer_2" id="userAnswer_2_1" value="true"><label for="userAnswer_2_1">True</label>
<input type="radio" name="userAnswer_2" id="userAnswer_2_2" value="false"><label for="userAnswer_2_2">False</label>
<span class="result_2"></span>
<dt class="question_3"></dt>
<dd class="answers">
<input type="radio" name="userAnswer_3" id="userAnswer_3_1" value="true"><label for="userAnswer_3_1">True</label>
<input type="radio" name="userAnswer_3" id="userAnswer_3_2" value="false"><label for="userAnswer_3_2">False</label>
<span class="result_3"></span>
<dt class="question_4"></dt>
<dd class="answers">
<input type="radio" name="userAnswer_4" id="userAnswer_4_1" value="true"><label for="userAnswer_4_1">True</label>
<input type="radio" name="userAnswer_4" id="userAnswer_4_2" value="false"><label for="userAnswer_4_2">False</label>
<span class="result_4"></span>
<dt class="question_5"></dt>
<dd class="answers">
<input type="radio" name="userAnswer_5" id="userAnswer_5_1" value="true"><label for="userAnswer_5_1">True</label>
<input type="radio" name="userAnswer_5" id="userAnswer_5_2" value="false"><label for="userAnswer_5_2">False</label>
<span class="result_5"></span>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$.getJSON('quiz.json', function(j){
for(var i=0, l=j.quiz.length; i<l; i++) {
$('dl#quiz > dt.question_'+(i+1)).html(j.quiz[i].question).attr('rel', j.quiz[i].answer);
$('dl#quiz > dd.answers input#userAnswer_'+(i+1)+'_1, dl#quiz > dd.answers input#userAnswer_'+(i+1)+'_2').bind('click',functi on(){
var userAnswer = $(this).val();
var quizAnswer = $(this).parent().prev().attr('rel');
var result = (userAnswer == quizAnswer) ? 'correct' : 'wrong';



And the json used as quiz.json

"quiz": [
"question": "question 1",
"answer": "true"
"question": "question 2",
"answer": "true"
"question": "question 3",
"answer": "false"
"question": "question 4",
"answer": "true"
"question": "question 5",
"answer": "false"

2 reasons to avoid xml in cases such as this:

1. xml is always heavier (download size) than json
2. json parsing is always easier since they are native javascript objects

03-20-2010, 10:12 AM
cookies and local databases are storage too :)
that too without the overhead of relationships to a user table, the browser where it is stored already identifies the user :)

03-20-2010, 08:24 PM
But as soon as the cookies are gone, the data is gone, right?
I don't have any hands on experience yet with sessions/cookies.

03-21-2010, 05:42 AM
<quote>But as soon as the cookies are gone, the data is gone, right?</quote>

Yes for cookies.

But local storage not so. Client has to explicitly delete the storage.

and upcoming is local database you can use sql to interact with client data stored in browsers. (this is how gmail offline on iphone and android works)

04-13-2010, 08:00 AM

Do you mean this kind of quiz?


Why not use some software to help you? It is much easier. You just need to insert images and set the right answer. Feedbacks in form of images, audio files, links, etc can be added. If you are interested, try quiz maker (http://www.quiz-creator.com#176)here.