您現在的位置是:電腦技術吧?>? 基礎知識 ??>??在線答題,在線答題系統??>??正文詳情

在線答題,在線答題系統

恭樂賢2019-11-18 07:50:34 人圍觀
簡介搜題庫在線有時我們需要在網頁上添加一個在線測試功能,比如在線調查、在線測試各種知識等應用程序,這需要很多前后臺的技巧。今天,我將共享一個基于jQuery HTML的前端應百度答題

有時在網頁中要加入一個在線測試功能,例如在線調查,在線測試各類知識等應用,這類應用需要用到很多前后端技能。

今天我給大家分享一個基于jQuery的前端應用測試答題功能。

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

  復制代碼  代碼如下:  然后在需要放置測試題的位置加入div#quiz-container。

  復制代碼  代碼如下:  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提供的插件方法,然后打開頁面是不是可以看到已經在頁面上生成了一個在線測試項目。

  復制代碼  代碼如下:  $(function(){  $('#quiz-container').jquizzy({  questions: init.questions  });  });  那么,要修改定制測試題樣式布局,可以到quiz.js和styles.css兩文件中做適當修改。

  疑問  到這里,細心的朋友就會發現,問題來了:  1、直接將題目的正確答案標記在js代碼中,是不是不安全?正規的測試項目答案是不是應該在后臺判斷,以免有人查看源代碼直接獲取正確答案。

  2、如何與后臺交互?比如測試答題前先驗證身份,答題完后將結果發送給后臺。

  我想說的是,這是一個前端代碼演示項目,真正的應用答案是不會出現在前端代碼中的;quiz.js其實已經有與后臺ajax交互的接口,我們會在后面的文章中做詳細介紹

版權聲明:本文由 恭樂賢 整理編輯。

原標題:在線題庫,搜題在線使用

轉載注明出處:http://www.dn9ww09s.icu/basics/13436.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 怎樣截取音頻,截取音頻

    怎樣截取音頻,截取音頻 相關圖片視頻截取音頻說到鈴聲的制作,使用酷狗無疑是最簡單的方法。但是有很多軟件可以做到。例如,如果您的計算機上有完美的解碼,您還可以截取音頻文件以生成鈴聲。你怎么認為?錄...

  • 360瀏覽器的收藏夾路徑,360瀏覽器收藏夾默認路徑

    360瀏覽器的收藏夾路徑,360瀏覽器收藏夾默認路徑 相關圖片360瀏覽器收藏夾文件在哪里360瀏覽器是一種流行的網絡瀏覽器。你知道360瀏覽器收藏夾路徑在哪里嗎?接下來,超人軟件編輯還想介紹一下當360瀏覽器收藏夾丟失時該如何操作。讓我們...

  • 批處理命令,常用批處理命令

    批處理命令,常用批處理命令 相關圖片批處理命令打開程序這個例子向朋友展示了如何使用焰火的批處理命令快速制作縮略圖,希望能對他們有所幫助。批處理命令刪除文件...

  • 充電突然不支持此配件,充電出現不支持此配件啥原因

    充電突然不支持此配件,充電出現不支持此配件啥原因 相關圖片充電時候顯示不支持此配件不支持此附件充電的Android用戶不能觸摸它。這種情況發生在蘋果設備上。iPhone用戶群并不小。一定有很多用戶遇到這種情況。不支持對這個附件充電的原因是...

  • GBK編碼,編碼

    GBK編碼,編碼 相關圖片gb18030編碼GBK版本和UTF-8版本的通用建站程序功能相同,但編碼方式不同,GBK的字符編碼用雙字節表示,即中英文字符都用雙字節表示。為了區分漢字,UTF-8編碼的最高位unicode編碼...

  • autorun怎么刪除,autoruninf

    autorun怎么刪除,autoruninf 相關圖片inf文件怎么卸載Autorun.inf是一個經常出現在U盤上的文件。當你看到它時,通常意味著你的U盤被特洛伊病毒攻擊了。使用normal方法刪除autorun.inf后,發現它autorun刪不掉...

  • HTTP協議是,什么是HTTP協議

    HTTP協議是,什么是HTTP協議 相關圖片http基于什么協議似乎在互聯網上使用分塊代碼的網站并不多。除了那些使用gzip壓縮的網站,比如google.com,還有很多打開gzip壓縮的PHP論壇。根據我的理解,使用分塊編HTTP協議稱為...

  • 引導扇區easyboot,easyboot使用教程

    引導扇區easyboot,easyboot使用教程 相關圖片怎樣使用EasyBoot是一個集成的中國引導光盤制作工具。用戶通常使用EasyBoot創建引導光盤。EasyBoot是一個完全圖形化的界面,易于使用,即使是新手也很容易使用與滿足...

  • css語法例子,css的基本語法結構

    css語法例子,css的基本語法結構 相關圖片css selector 語法一。基本語法CSS的定義由三部分組成:selector、properties和value基本格式如下:selector{property:value}(selecss讓字一個一個出來...

  • win8應用商店在哪,win8應用商店不見了

    win8應用商店在哪,win8應用商店不見了 相關圖片win8應用商店下載蘋果系統關閉,這也使得蘋果專賣店給蘋果帶來了很多收入。作為PC端最大的操作系統,微軟的windows怎么能放過這頓飯呢?所以微軟也推出了自己的應用商店。但習慣于...

熱評文章

  • 完美解碼怎么用,完美解碼有什么用

    完美解碼怎么用,完美解碼有什么用 相關圖片專用播放器完美解碼是一款專業的高清播放器,由于其對高清電視的支持以及超越主流播放器的高清圖像質量而受到網民的青睞。完美的解碼可以使用默認模式獲得良好的播放效果,有...

  • 電腦沒有光盤怎么重裝系統,電腦無光驅怎么裝系統

    電腦沒有光盤怎么重裝系統,電腦無光驅怎么裝系統 相關圖片沒有光盤重裝系統在早期安裝系統時,我們都需要使用CD-ROM驅動器和安裝CD-ROM,但是現在很多計算機都沒有安裝CD-ROM驅動器,這樣的機器應該如何重新安裝系統呢?首先,使裝系統 無光...

  • 新人初體驗,初體驗

    新人初體驗,初體驗 相關圖片新人初體驗 magnet互動設計初始體驗系列是我在半年多的互動設計工作和自學中積累的一些思考和經驗,也是我在今年工作中成長和收獲的總結。適合初級交互設計師和對交互設計感興趣...

  • 下載安裝聲卡,電腦里聲卡驅動怎么下載

    下載安裝聲卡,電腦里聲卡驅動怎么下載 相關圖片win7插了耳機還是外放聲卡驅動程序是否正常是計算機播放音頻文件的重要鍵之一。如果您的計算機沒有安裝聲卡驅動程序,或者聲卡驅動程序中有錯誤,可以通過安裝聲卡驅動程序來解...

  • 動畫教程,an動畫教程

    動畫教程,an動畫教程 相關圖片補間動畫本教程介紹如何使用flash制作可愛有趣的吻豬動畫,如何使用簡單的繪圖工具繪制可愛風趣的吻豬并將其制作成吻豬動畫。這個flash示例簡單易懂。這個flash示例AE動畫教程...

  • 12306聯系人已滿,12306聯系人上限破解

    12306聯系人已滿,12306聯系人上限破解 相關圖片12306增加了限制我相信,在他們的日常生活中,有很多小伙伴遇到了需要幫助別人購買動車車票的情況。那么,12306個頻繁接觸的上限是多少?12306常用聯系人需要驗證多長時間?接下1...

  • 算王添加工程怎么添加不進來,算王怎么添加工程

    算王添加工程怎么添加不進來,算王怎么添加工程 相關圖片不能向工程中添加窗體的是一。打開Dreamweaver軟件。如果你的電腦上沒有Dreamweaver,2。單擊HTML 3。創建新項目4。把老鼠一分為二。(先準備圖片,然后在下面的站點頭文件怎么添加到工...

  • 回收站刪除的文件怎么恢復,如何找回刪除的文件內容

    回收站刪除的文件怎么恢復,如何找回刪除的文件內容 相關圖片直接刪除的文件怎么找回如果只是一個普通的文件錯誤刪除,你仍然可以在回收站找到它。但如果你欠了一段時間,即使是回收站也是空的。在這種情況下,如何檢索回收站中刪除的文...

  • 離為火詳解,明夷卦詳解

    離為火詳解,明夷卦詳解 相關圖片大有卦詳解Console.log(object[,object,…])在控制臺中輸出消息。如果有多個參數,則它們在輸出時用空格分隔。第一個參數可以是包含格式化占位符輸出的恒卦詳解...

  • 網易郵箱怎么設置電子名片,網易郵箱名片附件如何刪除

    網易郵箱怎么設置電子名片,網易郵箱名片附件如何刪除 相關圖片郵箱如何設置名片網易flash mail是一款編輯的電子郵件,其最大的特點是能夠兼容市面上所有的電子郵件,實現多個賬戶的同時管理。最近,很多用戶不知道如何設置網易flash m網易郵箱怎...

關注微信

变脸官网查询