» » Use jQuery to realize quiz function

 

Use jQuery to realize quiz function

Author: bamboo06 on 15-05-2015, 04:09, views: 3739

6
Sometimes you want to join the page with an online test functions, such as online surveys, online testing various types of knowledge and other applications, such applications need to use a lot of front end skills. Today I have to share a jQuery-based front-end applications - Testing answer function.


HTML
First load jquery library files and CSS style quiz.js and the desired file styles.css.
<script src="jquery.js"></script> 
<script src="quiz.js"></script> 
<link rel="stylesheet" href="styles.css" /> 

Then place the test questions required position join div # quiz-container.
<div id="quiz-container"></div> 


jQuery
First, we define the topic and answer choices, question is subject, answers the answer options, correctAnswer is the correct answer. You can see the definition of init is a json data format.
<script>
var init={'questions':[{'question':'What is jQuery?','answers':['javascript lib','CSS lib','PHP lib','None of the above'],'correctAnswer':1},{'question':'Which one is different from others?','answers':['Computer','Road','TV','Radio'],'correctAnswer':2},{'question':'Whick one is the largest country in land area?','answers':['USA','China','Russia','Canada'],'correctAnswer':3},{'question':'Which language is the most popular in the world?','answers':['Chinese','English','Spanish','French'],'correctAnswer':2}]};
</script>

Next, we directly call the plugin method quiz.js provided, and then open the page is not to see has generated an online test item on the page.
$(function(){ 
    $('#quiz-container').jquizzy({ 
        questions: init.questions 
    }); 
}); 

So, to modify a custom layout style test questions can go to quiz.js and styles.css two documents make the appropriate changes.

Question
Here, attentive friends will find that the question arises:
1, directly to the correct answer marked js code, is not it safe? Formal testing program should be in the background, the answer is not to judge, lest anyone see the source code directly to obtain the correct answer.
2, how to interact with the background? For example, prior to testing to verify the identity of the answer, the answer after send the results to the background.
I want to say is that this is a front-end code demo project, the real answer is that the application does not appear in the front-end code; quiz.js actually has an interface to interact with back-ajax, we will detail in a later article introduction.

Category: Javascript / Plugins

Dear visitor, you are browsing our website as Guest.
We strongly recommend you to register and login to view hidden contents.
<
  • 0 Comments
  • 0 Articles
5 October 2017 05:31

james rock

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
helllllllllllllllllllllllllllllllllllllllllllllllllllllo[
url=http://www.google.com]google[/url]

<
  • 0 Comments
  • 0 Articles
19 November 2017 05:59

hafsa

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
I think for now this is the best executive resumes i have seen on a site like this so far, i would love to see you do more here on your part, thanks !!

<
  • 0 Comments
  • 0 Articles
6 December 2017 08:28

ali

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
Hmm… I interpret blogs on a analogous issue, however i never visited your blog. I added it to populars also i’ll be your faithful primer. Make Him Desire You

<
  • 0 Comments
  • 0 Articles
11 December 2017 10:13

ali

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
Nice information, valuable and excellent design, as share good stuff with good ideas and concepts, lots of great information and inspiration, both of which I need, thanks to offer such a helpful information here. Parsnips

<
  • 0 Comments
  • 0 Articles
20 December 2017 04:59

ali

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
Make the most of mainly premium substances - you will find him or her for: Darjeeling Tea Benefits

<
  • 0 Comments
  • 0 Articles
27 January 2018 04:31

khaneamem

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
The above painting is looking really awesome and before read this article i could not understand the value. I would like to say great thanks for sharing this good looking picture. Its lovely approach found here. I think that service can write your essay in nz fast and it's sound good for me to be part of this website.

Information
Comment on the news site is possible only within (days) days from the date of publication.