jQuery實作的線上答題功能_jquery

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

HTML

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

<script src="jquery.js"></script>
<script src="quiz.js"></script>
<link rel="stylesheet" href="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交互的接口，我們會在後面的文章中做詳細介紹，文章標題我已經想好了：如何使用jQuery PHP MySQL來實作一個線上測試項目，敬請關注。

查看示範 下載原始碼

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