jQuery在線問(wèn)卷答題系統(tǒng)代碼是一款實(shí)用的jQuery答題插件,點(diǎn)擊下一題切換帶有淡入淡出效果。 有時(shí)在網(wǎng)頁(yè)中要加入一個(gè)在線測(cè)試功能,例如在線調(diào)查,在線測(cè)試各類(lèi)知識(shí)等應(yīng)用,這類(lèi)應(yīng)用需要用到很多前后端技能。今天我給大家分享一個(gè)基于jQuery的前端應(yīng)用——測(cè)試答題功能。 HTML 首先載入jquery庫(kù)文件和quiz.js以及所需的CSS樣式文件styles.css。 然后在需要放置測(cè)試題的位置加入div#quiz-container。
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':'找出不同類(lèi)的一項(xiàng)?','answers':['寫(xiě)字臺(tái)','沙發(fā)','電視','桌布'],'correctAnswer':3},{'question':'國(guó)土面積最大的國(guó)家是:','answers':['美國(guó)','中國(guó)','俄羅斯','加拿大'],'correctAnswer':3},{'question':'月亮距離地球多遠(yuǎn)?','answers':['18萬(wàn)公里','38萬(wàn)公里','100萬(wàn)公里','180萬(wàn)公里'],'correctAnswer':2}]};
接下來(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)修改。
codego.net 代碼摘抄
成都創(chuàng)新互聯(lián) 是一家專(zhuān)業(yè)提供玉樹(shù)企業(yè)網(wǎng)站建設(shè) ,專(zhuān)注與網(wǎng)站建設(shè)、網(wǎng)站制作 、H5建站 、小程序制作等業(yè)務(wù)。10年已為玉樹(shù)眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專(zhuān)業(yè)的建站公司優(yōu)惠進(jìn)行中。
標(biāo)題名稱(chēng):jQuery在線問(wèn)卷答題系統(tǒng)代碼
網(wǎng)頁(yè)網(wǎng)址:
http://weahome.cn/article/ggocgs.html