jQuery實現的在線答題功能_jquery

來源：懂視網責編：小采時間：2020-11-27 21:36:56

jQuery實現的在線答題功能_jquery

jQuery實現的在線答題功能_jquery:有時在網頁中要加入一個在線測試功能，例如在線調查，在線測試各類知識等應用，這類應用需要用到很多前后端技能。今天我給大家分享一個基于jQuery的前端應用——測試答題功能。 HTML 首先載入jquery庫文件和quiz.js以及所需的CSS樣式文件styles.c

推薦度：

點擊下載本文 文檔為doc格式

導讀jQuery實現的在線答題功能_jquery:有時在網頁中要加入一個在線測試功能，例如在線調查，在線測試各類知識等應用，這類應用需要用到很多前后端技能。今天我給大家分享一個基于jQuery的前端應用——測試答題功能。 HTML 首先載入jquery庫文件和quiz.js以及所需的CSS樣式文件styles.c

有時在網頁中要加入一個在線測試功能，例如在線調查，在線測試各類知識等應用，這類應用需要用到很多前后端技能。今天我給大家分享一個基于jQuery的前端應用——測試答題功能。

HTML

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

jQuery

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

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

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

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

查看演示下載源碼

以上所述就是本文的全部內容了，希望大家能喜歡。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com