JQuery implements the online Q & A function and jquery implements Q &.

JQuery implements the online Q & A function and jquery implements Q &.

Sometimes you need to add an online test function to a webpage, such as online surveys and online testing of various knowledge applications. Such applications require a lot of front-end and back-end skills. Today I will share with you a jQuery-based front-end application-test the answer function.

HTML

First download the jquerydatabase file and quiz.js to the required CSS sample file styles.css.
 

<script src="jquery.js"></script> <script src="quiz.js"></script> <link rel="stylesheet" href="styles.css" /> 

Add div # quiz-container to the location where you want to place the test questions.

Copy codeThe Code is as follows:
<Div id = "quiz-container"> </div>

JQuery

First, we define the question and Answer options. question is the question, answers is the answer option, and correctAnswer is the correct answer. The init is a json data format.

Copy codeThe Code is as follows:
Var init = {'questions': [{'question': 'What is jQuery? ', 'Answers': ['javascript database', 'css database', 'php framework', 'none of the above'], 'correctanswer': 1 }, {'Question ':' To find an item of different classes? ', 'Answers': ['desk', 'sofa ',' TV ', 'tablecloth'], 'correctanswer': 3}, {'Question ': 'country with the largest land area is: ', 'answers': ['u.s.', 'China', 'Russia ', 'Canada'], 'correctanswer': 3 }, {'Question ': 'How far is the moon from the earth? ', 'Answers': ['000000', '000000', '000000', '000000'], 'correctanswer': 2}]};

Next, we directly call the plug-in method provided by quiz. js, and open the page to see if an online test project has been created on the page.

$(function(){   $('#quiz-container').jquizzy({     questions: init.questions   }); }); 

To modify the template layout, you can modify it in the quiz.js and styles.css files.
Question
Here, careful friends will find the problem:
1. Is it unsafe to Directly mark the correct answer to the question in the js Code? The answer to a formal test project should be determined in the background, so that no one can directly obtain the correct answer from the source code.
2. How to interact with the background? For example, verify the identity before testing the answer, and then send the result to the background.
I would like to say that this is a front-end code Demo project. The real application answer is that it will not appear in the front-end code; quiz. js actually has an interface for interacting with ajax in the background. We will introduce it in detail in the following article. I have already thought about the title of this article: please pay attention to how to use jQuery + PHP + MySQL to implement an online test project.

View demo download source code

The above is all the content of this article. I hope you will like it.