PDA

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


thedon
03-17-2010, 10:07 AM
Hi,
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?

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

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

ranjan
03-18-2010, 03: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

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

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

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

http://exist.sourceforge.net/

quite powerful

ranjan
03-20-2010, 09: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>
<html>
<head>
<title>json quiz</title>
</head>
<body>
<div id="page-wrap">
<h1>Json Quiz</h1>
<div>
<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>
</dd>
<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>
</dd>
<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>
</dd>
<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>
</dd>
<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>
</dd>
</dl>
</div>
</div>
<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';
$(this).parent().find('span').html(result);
});
}

});

</script>
</body>
</html>


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

ranjan
03-20-2010, 09:12 AM
@domedia
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 :)

domedia
03-20-2010, 07: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.

ranjan
03-21-2010, 04: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)

happyeric
04-13-2010, 07:00 AM
Hello,

Do you mean this kind of quiz?

http://photo2.bababian.com/upload1/20100413/EF189CF86F1F5D148DDA4D4CFC67A1B9_500.jpg



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.