GOOCODE - Find your code/scripts

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.