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

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

Related Article

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.