CSS+jQuery如何實(shí)現(xiàn)的在線答題功能

小編給大家分享一下CSS+jQuery如何實(shí)現(xiàn)的在線答題功能，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

效果圖：

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。

代碼如下:

<div id="quiz-container"></div>

jQuery

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

代碼如下:

var init={'questions':[{'question':'jQuery是什么？','answers':['JavaScript庫(kù)','CSS庫(kù)','PHP框架','以上都不是'],'correctAnswer':1},{'question':'找出不同類的一項(xiàng)?','answers':['寫字臺(tái)','沙發(fā)','電視','桌布'],'correctAnswer':3},{'question':'國(guó)土面積最大的國(guó)家是：','answers':['美國(guó)','中國(guó)','俄羅斯','加拿大'],'correctAnswer':3},{'question':'月亮距離地球多遠(yuǎn)？','answers':['18萬公里','38萬公里','100萬公里','180萬公里'],'correctAnswer':2}]};

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

代碼如下:

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

那么，要修改定制測(cè)試題樣式布局，可以到quiz.js和styles.css兩文件中做適當(dāng)修改。

疑問

到這里，細(xì)心的朋友就會(huì)發(fā)現(xiàn)，問題來了：

1、直接將題目的正確答案標(biāo)記在js代碼中，是不是不安全？正規(guī)的測(cè)試項(xiàng)目答案是不是應(yīng)該在后臺(tái)判斷，以免有人查看源代碼直接獲取正確答案。

2、如何與后臺(tái)交互？比如測(cè)試答題前先驗(yàn)證身份，答題完后將結(jié)果發(fā)送給后臺(tái)。

以上是“CSS+jQuery如何實(shí)現(xiàn)的在線答題功能”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！