The online answer function of jquery implementation _jquery

Sometimes in Web pages to add an online test function, such as online survey, online testing of various types of knowledge and other applications, such applications need to use a lot of back and forth skills. Today I'm going to share a front-end application based on jquery-Test answer function.

Html

First load the jquery library files and quiz.js as well as the CSS style file styles.css you want.

<script src= "Jquery.js" ></script> 
<script src= "quiz.js" ></script> 
<link rel= " Stylesheet "href=" Styles.css "/> 

Then add Div#quiz-container to the location where you want to place the test questions.

Copy Code code as follows:

<div id= "Quiz-container" ></div>

Jquery

First, we define the question and answer options, question is the title, answers is the answer option, Correctanswer is the correct answer. You can see that the definition of INIT is a JSON data format.

Copy Code code as follows:

var init={' questions ': [{' Question ': ' What is jquery? ', ' answers ': [' JavaScript library ', ' CSS library ', ' PHP frame ', ' none '], ' correctanswer ': 1},{' question ': ' Find one of the different classes? ', ' Answers ': [' desk ' , ' couch ', ' TV ', ' Tablecloth '], ' correctanswer ': 3},{' question ': ' The largest country in the land area is: ', ' answers ': [' USA ', ' China ', ' Russia ', ' Canada '], ' Correctanswer ': 3},{' question ': ' How far is the Moon from Earth? ', ' answers ': [' 180,000 km ', ' 380,000 km ', ' 1 million km ', ' 1.8 million km '], ' Correctanswer ': 2}]};

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

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

Then, to modify the custom test title style layout, you can make appropriate changes to the Quiz.js and styles.css two files.
doubt
Here, a careful friend will find that the problem is:
1, directly the correct answer to the question mark in the JS code, is not safe? The regular test project answer is not to be judged in the background, lest someone view the source code directly to get the correct answer.
2, how to interact with the background? For example, test the answer before the identification, the answer to the results sent to the background.
What I want to say is that this is a front-end code demo project, the real application answer is not to appear in the front-end code; Quiz.js actually already has the interface which interacts with the backstage Ajax, we will do the detailed introduction in the later article, the article title I have thought well: how uses jquery+php+ MySQL to implement an online test project, stay tuned.

View Demo Download source code

The above mentioned is the entire content of this article, I hope you can enjoy.