logo-dw

Go Back   Dreamweaver Club Forums > Hand Coders Forum > Javascript and JS frameworks
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 03-17-2010, 10:07 AM   #1
thedon
 
Join Date: Aug 2009
Posts: 74
Default Want to do a picture quiz page, how?

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?
__________________
[Discover Thailand] [Thai forum] [ Ladyboy Test ]
thedon is offline   Reply With Quote
Old 03-17-2010, 02:48 PM   #2
Corrosive
Corrosive's Avatar
 
Join Date: Feb 2008
Location: Bristol, England
Posts: 7,103
Default

I'm sure this could be done with some simple PHP and javascript action.
Corrosive is offline   Reply With Quote
Old 03-17-2010, 02:54 PM   #3
domedia
Administrator
domedia's Avatar
 
Join Date: Dec 2003
Posts: 9,730
Default

PHP/mySql, is that what you're asking?
domedia is offline   Reply With Quote
Old 03-18-2010, 03:07 PM   #4
ranjan
 
Join Date: Dec 2004
Posts: 405
Default Whats wrong with 10 json cookies and javascript

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:

Code:
'{"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

Last edited by ranjan; 03-18-2010 at 03:08 PM.. Reason: path to image
ranjan is offline   Reply With Quote
Old 03-18-2010, 06:20 PM   #5
domedia
Administrator
domedia's Avatar
 
Join Date: Dec 2003
Posts: 9,730
Default

Unless you want to store the answers, right?
domedia is offline   Reply With Quote
Old 03-19-2010, 01:12 AM   #6
edbr
edbr's Avatar
 
Join Date: Aug 2005
Location: Bali
Posts: 11,164
Default

got a link to a good resource ranjan? i wouldn't mind a good tutorial or two
__________________
If you're happy and you know it shake your meds!
different style links examples

Flight / Hotel search
Free script download
Bali Villas
edbr is offline   Reply With Quote
Old 03-19-2010, 04:02 PM   #7
davidj
davidj's Avatar
 
Join Date: Sep 2005
Location: The Toon (newcastle upon Tyne)
Posts: 8,256
Default

I have used an XML db before for a couple of projects

http://exist.sourceforge.net/

quite powerful
__________________
Would you like to learn PHP from me? Check out -> www.codezenith.co.uk
davidj is offline   Reply With Quote
Old 03-20-2010, 09:06 AM   #8
ranjan
 
Join Date: Dec 2004
Posts: 405
Default Tutorial on what?

1. json
2. cookies
3. localstorage

google them

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

Code:
<!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',function(){
					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

Code:
{
	"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 is offline   Reply With Quote
Old 03-20-2010, 09:12 AM   #9
ranjan
 
Join Date: Dec 2004
Posts: 405
Default store the answer where?

@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
ranjan is offline   Reply With Quote
Old 03-20-2010, 07:24 PM   #10
domedia
Administrator
domedia's Avatar
 
Join Date: Dec 2003
Posts: 9,730
Default

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.
domedia is offline   Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 03:19 AM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com