Shulou(Shulou.com)06/01 Report--

Editor to share with you how to use CSS+jQuery to achieve online answer function, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

HTML

First load the jquery library file and quiz.js, as well as the required CSS style file styles.css.

The code is as follows:

Then add div#quiz-container where you need to place the test questions.

The code is as follows:

JQuery

First, we define the question and answer options. Question is the question, answers is the answer option, and correctAnswer is the correct answer. You can see that the defined init is an json data format.

The code is as follows:

Var init= {'questions': [{' what is question':'jQuery?' , 'answers': [' JavaScript library', 'CSS library', 'PHP framework', 'none of the above'], 'correctAnswer':1}, {' question':' found a different category?', 'answers': [' desk', 'sofa','TV', 'tablecloth'], 'correctAnswer':3}, {' question':' the largest countries are:', 'answers': [' United States', 'China', 'Russia' 'Canada'], 'correctAnswer':3}, {' question':' how far is the moon from the earth?' , 'answers': [' 180000 km', '380000 km','1 million km', '1.8 million km'], 'correctAnswer':2}]}

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

The code is as follows:

$(function () {)

('# quiz-container') .jquizzy ({

Questions: init.questions

});

});

Then, to modify the custom test question style layout, you can make appropriate changes in the quiz.js and styles.css files.

The above is all the contents of the article "how to use CSS+jQuery to achieve online answer function". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.