The online answer function implemented by jquery

Source: Internet
Author: User
Tags jquery library

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.

 
1 2 3 <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.

The

code is as follows:


&lt;div id= "Quiz-container" &gt;&lt;/div&gt;

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.

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 ' , ' 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.

1 2 3 4 5 $ (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, careful friends 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 do I 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, this is a front-end code demo project, the real application of the answer is not to appear in the front-end code; Quiz.js in fact 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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.