移动端在线做题组件，现只支持单选，多选，判

移动端在线做题组件，现只支持单选，多选，判断题类型。

<!-- Load Mexam CSS && JS --> <link rel="stylesheet" type="text/css" href="css/Mexam.css"/> <script type="text/javascript" src="js/zepto.min.js"></script> <script type="text/javascript" src="js/Mexam.js"></script> <!-- 用于显示组件的容器 --> <div class="overlay" id="overlay"></div> <!-- 初始化 --> <script type="text/javascript"> var data = [ { id: "i88bac6k8yra-9bwr-04fq", title: "单选题题目", type: 1, content: [ "选项A", "选项B", "选项C", "选项D", ] }, { id: "i88bac6k8yra-9bwr-04fq", title: "多选题题目", type: 2, content: [ "选项A", "选项B", "选项C", "选项D", "选项E", "选项F", "选项G", "选项H", "选项J", ] }, { id: "i88bac6k8yra-9bwr-04fq", title: "判断题题目", type: 4, content: [ "选项A", "选项B", "选项C", "选项D", ] }, ]; Mexam({ title: 'Mexam 移动端在线做题', data: data, wrap: '#overlay', }); </script> API

Mexam({options}); options 说明

//题目类型数据格式 [ { id: "i88bac6k8yra-9bwr-04fq", //题目ID title: "单选题题目", //题目标题 type: 1, //题目类型 1 单选，2 多选，4 判断 content: [ //ABCD选项，按数组排序，一一对应。 "选项A", //数组第一位为 A，第二位为B，以此类推 "选项B", "选项C", "选项D", ] } ] //提交答题卡所返回的数据 //返回所有答题的ID，存于数组中 [ { id: "i88bac6k8yra-9bwr-04fq" }, //未答题则不返回 answer { id: "i88bac6k8yra-9bwr-04fq", answer: "A"}, //单选，判断类型 返回的答案 { id: "i88bac6ko5re9dzjeinwjg", answer: ['A', 'B', 'D', 'E'] } // 多选返回的答案，按字母排序 { id: "i88bac6ko5re9dzjeinwjg", answer: "" } //题目已答过，最后取消了回答案 ] 销毁组件

var Mex = Mexam({ title: 'Mexam 移动端在线做题', data: data, wrap: '#overlay', }); //销毁 Mex.destroy(); 代码演示

var data = [ { id: "i88bac6k8yra-9bwr-04fq", title: "单选题题目", type: 1, content: [ "选项A", "选项B", "选项C", "选项D", ] } ]; Mexam({ title: 'Mexam 移动端在线做题', data: data, init: function() { window.console && console.log('init'); }, close: function() { window.console && console.log('close'); }, send: function(data, time) { // 如果为 Ajax 提交 则默认设置 返回 false // 执行成功在手动销毁组件 this.destroy(); // 以下代码演示 var _this = this, conf = confirm('确认提交答题卡？'); if (conf) { $.each(data, function(i, val) { if ($.isArray(val.answer)) { data[i].answer = val.answer.join('；'); } }); $.post(url, {data: JSON.stringify(data), time: time}, function(data) { console.log(data); _this.destroy(); }); } return false; } }); 目录说明

Mexam/ ├── css/ │ ├── normalize.css (重置样式) │ └── Mexam.css (插件所需样式) ├── fonts/ (插件所需的字体图标) │ ├── Mexam.eot │ ├── Mexam.svg │ ├── Mexam.ttf │ └── Mexam.woff ├── js/ │ ├── zepto.min.js (已包含组件所需的模块) │ ├── MMexam.js (组件未压缩源码) │ └── Mexam.min.js (组件压缩源码) ├── gulpfile.js (gulp 打包文件) └── index.html (Demo展示) 联系作者

Blog：http://webjyh.com

Weibo：http://weibo.com/webjyh/