Tips and Suggestion on how to create a quiz using php and jQuery_问答_开发者

Tips and Suggestion on how to create a quiz using php and jQuery

开发者 https://www.devze.com 2023-03-23 18:45 出处：网络

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

相关专题：jquery php

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.