溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
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。
<div id="quiz-container"></div>
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兩文件中做適當修改。
codego.net 代碼摘抄
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
