Tips and Suggestion on how to create a quiz using php and jQuery
I do want to create a Quiz like on this site
Quiz
How can I done this using php and jQuery? or is there other way to 开发者_如何学Pythondo this not using flash
I do got a idea from this and my problem is how to implement the timer with this
Creating a Quiz with jQuery
answer and made by @Fatih
Apparently I don't know my router bits; however, making a quiz can be really easy to build (hard-coded) or really hard to build (database-driven). The first is difficult to change later on while the second is quite easy.
It really depends what you want to do, both are quite doable with php and jQuery.
- I would setup a database of questions, answers, and user-responses.
- Then I'd createa a few php pages, one for the user to view /quiz.php and one for my jQuery to post data to /ajaxhelp.php (accessed by
$.post()) - ajaxhelp.php would return JSON data based on the post paramaters. Mabye a question + 4 answers for "nextQuestion" then the jQuery would generate the form with a few radio boxes for each answer
- The user picks their answer, and then you
$.post()it back; ahaxhelp.php checks the database to see if that was marked as the correct answer, and returns the result. - jQuery gets the "nextQuestion" and makes a new form
- Display summary of results
edit
After your comment about static data, this simple html page should get you started:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
var q1wa =
{
Question: 'Question One Text',
Answers:
[
{ AText: 'Answer1 Text', RightAnswer: true },
{ AText: 'Answer2 Text', RightAnswer: false },
{ AText: 'Answer3 Text', RightAnswer: false }
]
};
$(document).ready(function () {
$('#question').html(q1wa.Question);
for(var i = 0; i < q1wa.Answers.length; i++) {
$('#answers').append(q1wa.Answers[i].AText + "<br />");
}
});
</script>
</head>
<body>
<div id="question"></div>
<div id="answers"></div>
</body>
</html>
It should be noted, that with this method, your "correct" answer is visible to anyone who cares to do a View Source, but this is a good starting point. It would also not be hard to incorporate a php portion to keep the answer secret by doing answer validation server-side instead of client-side.
加载中,请稍侯......
精彩评论