有時(shí)在網(wǎng)頁(yè)中要加入一個(gè)在線測(cè)試功能，例如在線調(diào)查，在線測(cè)試各類知識(shí)等應(yīng)用，這類應(yīng)用需要用到很多前后端技能。今天我給大家分享一個(gè)基于jQuery的前端應(yīng)用——測(cè)試答題功能。

HTML

首先載入jquery庫(kù)文件和quiz.js以及所需的CSS樣式文件styles.css。
 

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

然后在需要放置測(cè)試題的位置加入div#quiz-container。

jQuery

首先，我們定義題目和答案選項(xiàng)，question是題目，answers是答案選項(xiàng)，correctAnswer是正確答案?？梢钥闯龆x的init是一個(gè)json數(shù)據(jù)格式。

接下來(lái)，我們直接調(diào)用quiz.js提供的插件方法，然后打開(kāi)頁(yè)面是不是可以看到已經(jīng)在頁(yè)面上生成了一個(gè)在線測(cè)試項(xiàng)目。

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

那么，要修改定制測(cè)試題樣式布局，可以到quiz.js和styles.css兩文件中做適當(dāng)修改。
疑問(wèn)
到這里，細(xì)心的朋友就會(huì)發(fā)現(xiàn)，問(wèn)題來(lái)了：
1、直接將題目的正確答案標(biāo)記在js代碼中，是不是不安全？正規(guī)的測(cè)試項(xiàng)目答案是不是應(yīng)該在后臺(tái)判斷，以免有人查看源代碼直接獲取正確答案。
2、如何與后臺(tái)交互？比如測(cè)試答題前先驗(yàn)證身份，答題完后將結(jié)果發(fā)送給后臺(tái)。
我想說(shuō)的是，這是一個(gè)前端代碼演示項(xiàng)目，真正的應(yīng)用答案是不會(huì)出現(xiàn)在前端代碼中的；quiz.js其實(shí)已經(jīng)有與后臺(tái)ajax交互的接口，我們會(huì)在后面的文章中做詳細(xì)介紹，文章標(biāo)題我已經(jīng)想好了：如何使用jQuery+PHP+MySQL來(lái)實(shí)現(xiàn)一個(gè)在線測(cè)試項(xiàng)目，敬請(qǐng)關(guān)注。

查看演示 下載源碼

以上所述就是本文的全部?jī)?nèi)容了，希望大家能喜歡。