HTML
首先載入jquery庫(kù)文件和quiz.js以及所需的CSS樣式文件styles.css。
jQuery
首先,我們定義題目和答案選項(xiàng),question是題目,answers是答案選項(xiàng),correctAnswer是正確答案。可以看出定義的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è)在線(xiàn)測(cè)試項(xiàng)目。
那么,要修改定制測(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è)在線(xiàn)測(cè)試項(xiàng)目,敬請(qǐng)關(guān)注。查看演示 下載源碼
以上所述就是本文的全部?jī)?nèi)容了,希望大家能喜歡。
聲明:本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí),若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系,我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com