CSS+jQuery實現的線上答題功能

 　　有時在網頁中要加入一個線上測試功能，例如線上調查，線上測試各類知識等應用，這類應用需要用到很多前後端技能。今天我給大家分享一個基於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互動的介面，我們會在後面的文章中做詳細介紹