Online question answering function implemented by jQuery_jquery

Sometimes it is necessary to add an online testing function to the web page, such as online surveys, online testing of various knowledge and other applications. Such applications require the use of many front-end and back-end skills. Today I will share with you a front-end application based on jQuery-testing the question answering function.

HTML

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

<script src="jquery.js"></script> 
<script src="quiz.js"></script> 
<link rel="stylesheet" href="styles.css" /> 

Then add div#quiz-container where the test questions need to be placed.

Copy code The code is as follows:

jQuery

First, we define the question and answer options. question is the question, answers are the answer options, and correctAnswer is the correct answer. It can be seen that the defined 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 framework','None of the above'],'correctAnswer':1},{'question':'Find an item of different categories? ','answers':['writing desk','sofa','TV','tablecloth'],'correctAnswer':3},{'question':'The country with the largest land area is:','answers': ['United States','China','Russia','Canada'],'correctAnswer':3},{'question':'How far is the moon from the earth? ','answers':['180,000 kilometers','380,000 kilometers','1 million kilometers','1.8 million kilometers'],'correctAnswer':2}]};

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

$(function(){ 
  $('#quiz-container').jquizzy({ 
    questions: init.questions 
  }); 
}); 

So, if you want to modify the custom test question style layout, you can make appropriate modifications in the quiz.js and styles.css files.
Questions
At this point, careful friends will find that the problem is coming:
1. Is it unsafe to directly mark the correct answer to the question in the js code? Whether the answer to a formal test project should be determined in the background to prevent someone from looking at the source code to directly obtain the correct answer.
2. How to interact with the background? For example, verify the identity before answering the test questions, and send the results to the backend after answering the questions.
What I want to say is that this is a front-end code demonstration project. The real application answers will not appear in the front-end code; quiz.js actually already has an interface for interacting with background ajax. We will do more in the following articles. Introduction, I have already thought of the title of the article: How to use jQuery PHP MySQL to implement an online testing project, so stay tuned.

View demo Download source code

The above is the entire content of this article, I hope you all like it.