The online answer function realized by css+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.

Copy Code

The code is as follows:

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

Copy Code

The code is as follows:

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

The code is 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 ', ' sofa ', ' TV ', ' Tablecloth '], ' correctanswer ': 3},{' question ': ' The largest country is: ', ' answers ': [' The United States ', ' 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.

Copy Code

The code is as follows:

$ (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.

Questions

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 unsafe? The formal 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, such as testing the test before the identity, after the answer to send the results to the background.

What I want to say is that this is a front-end code demo project, the real application answer is not in the front-end code; Quiz.js actually already has the interface that interacts with the backstage Ajax, we will do the detailed introduction in the later article