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

創(chuàng)新互聯(lián)是一家以網(wǎng)站設(shè)計建設(shè)，成都微信小程序、網(wǎng)站開發(fā)設(shè)計，網(wǎng)絡(luò)軟件產(chǎn)品開發(fā)，企業(yè)互聯(lián)網(wǎng)推廣服務(wù)為主的民營科技公司。主要業(yè)務(wù)涵蓋:為客戶提供網(wǎng)站策劃、網(wǎng)站設(shè)計、網(wǎng)站開發(fā)、域名注冊、網(wǎng)站優(yōu)化排名、買鏈接等服務(wù)領(lǐng)域。憑借建站老客戶口碑做市場，建設(shè)網(wǎng)站時，根據(jù)市場搜索規(guī)律和搜索引擎的排名收錄規(guī)律編程，全力為建站客戶設(shè)計制作排名好的網(wǎng)站，深受老客戶認(rèn)可和贊譽(yù)。

HTML

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

代碼如下:

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

代碼如下:

jQuery

首先，我們定義題目和答案選項，question是題目，answers是答案選項，correctAnswer是正確答案。可以看出定義的init是一個json數(shù)據(jù)格式。
 

代碼如下:

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

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

代碼如下:

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

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

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