questionsEdit.html 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  6. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  7. <title>题库编辑</title>
  8. <link rel="stylesheet" href="../../assets/libs/layui/css/layui.css"/>
  9. <link rel="stylesheet" href="../../assets/module/admin.css?v=315"/>
  10. <link rel="stylesheet" href="../../assets/module/formSelects/formSelects-v4.css"/>
  11. <!-- <link rel="stylesheet" href="../../assets/libs/wangEditor/wangEditor.css"/>-->
  12. <!--[if lt IE 9]>
  13. <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  14. <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  15. <![endif]-->
  16. <style>
  17. [lay-filter="formQA"] .layui-form-item, .layui-inline {
  18. margin-bottom: 0;
  19. margin-top: 20px;
  20. }
  21. .qa-xx-item {
  22. padding-left: 25px;
  23. margin-bottom: 20px;
  24. }
  25. .qa-xx-item-title {
  26. position: absolute;
  27. left: 0;
  28. line-height: 38px;
  29. }
  30. </style>
  31. </head>
  32. <body>
  33. <!-- 加载动画 -->
  34. <div class="page-loading">
  35. <div class="ball-loader">
  36. <span></span><span></span><span></span><span></span>
  37. </div>
  38. </div>
  39. <!-- 正文开始 -->
  40. <div class="layui-fluid">
  41. <div class="layui-card">
  42. <div class="layui-card-header">
  43. 修改试题
  44. <div class="layui-inline pull-right" style="margin: 0px;">
  45. <button onclick="history.back()" class="layui-btn layui-btn-sm layui-btn-radius layui-btn-normal"><i
  46. class="layui-icon">&#xe65c;</i>返回
  47. </button>
  48. </div>
  49. </div>
  50. <div class="layui-card-body">
  51. <form class="layui-form" lay-filter="formQA" style="max-width: 960px;">
  52. <input type="hidden" name="id" id="id" value=""/>
  53. <div class="layui-form-item">
  54. <label class="layui-form-label">试题类型:</label>
  55. <div class="layui-input-block">
  56. <input type="radio" lay-filter="raQT" id="questionsType1" name="questionsType" value="1"
  57. title="单选题" checked>
  58. <input type="radio" lay-filter="raQT" id="questionsType2" name="questionsType" value="2"
  59. title="多选题">
  60. <input type="radio" lay-filter="raQT" id="questionsType3" name="questionsType" value="3"
  61. title="判断题">
  62. <input type="radio" lay-filter="raQT" id="questionsType4" name="questionsType" value="4"
  63. title="问答题">
  64. </div>
  65. </div>
  66. <div class="layui-form-item">
  67. <label class="layui-form-label">试题内容:</label>
  68. <div class="layui-input-block">
  69. <div name="questionsName" id="qaContent"></div>
  70. <!-- <textarea name="questionsName" id="qaContent"></textarea>-->
  71. </div>
  72. <div class="layui-form-item layui-form-text" id="xxGroup">
  73. </div>
  74. <div class="layui-form-item layui-form-text">
  75. <label class="layui-form-label">正确答案:</label>
  76. <div id="qaRIGroup" class="layui-input-block">
  77. </div>
  78. </div>
  79. <div class="layui-form-item">
  80. <div class="layui-input-block text-center">
  81. <button ew-event="back" type="button" class="layui-btn layui-btn-primary">&emsp;关闭&emsp;
  82. </button>
  83. <button class="layui-btn" lay-filter="formSubmitAQ" lay-submit>&emsp;提交&emsp;</button>
  84. </div>
  85. </div>
  86. </form>
  87. </div>
  88. </div>
  89. </div>
  90. <!-- 不同类型题目的正确答案选项 -->
  91. <script type="text/html" id="qaRI1">
  92. <!-- 单选题 -->
  93. <div style="max-width: 160px;">
  94. <select name="answer" id="answer" lay-verType="tips" lay-verify="required" required>
  95. <option value="A">A</option>
  96. <option value="B">B</option>
  97. <option value="C">C</option>
  98. <option value="D">D</option>
  99. </select>
  100. </div>
  101. </script>
  102. <script type="text/html" id="qaRI2">
  103. <!-- 多选题 -->
  104. <div class="xm-select-nri" style="max-width: 220px;">
  105. <select name="answer" id="answer2" xm-select="qaRIMore" lay-verType="tips" lay-verify="required" required>
  106. <option value="A">A</option>
  107. <option value="B">B</option>
  108. <option value="C">C</option>
  109. <option value="D">D</option>
  110. <option value="E">E</option>
  111. </select>
  112. </div>
  113. </script>
  114. <script type="text/html" id="qaRI3">
  115. <!-- 判断题 -->
  116. <div style="max-width: 160px;">
  117. <select name="answer" id="qaRI3Answer" lay-verType="tips" lay-verify="required" required>
  118. <option value="T">正确</option>
  119. <option value="F">错误</option>
  120. </select>
  121. </div>
  122. </script>
  123. <script type="text/html" id="qaRI4">
  124. <!-- 问答题 -->
  125. <!-- <textarea name="answer" id="wdContent"></textarea>-->
  126. <div name="answer" id="wdContent"></div>
  127. </script>
  128. <script type="text/html" id="xxHtml">
  129. <label class="layui-form-label">试题选项:</label>
  130. <div class="layui-input-block">
  131. <div class="qa-xx-item">
  132. <span class="qa-xx-item-title">A:</span>
  133. <input type="text" name="A" id="A" placeholder="请输入选项内容" class="layui-input"
  134. autocomplete="off" lay-verType="tips" lay-verify="required" required/>
  135. </div>
  136. <div class="qa-xx-item">
  137. <span class="qa-xx-item-title">B:</span>
  138. <input type="text" name="B" id="B" placeholder="请输入选项内容" class="layui-input"
  139. autocomplete="off" lay-verType="tips" lay-verify="required" required/>
  140. </div>
  141. <div class="qa-xx-item">
  142. <span class="qa-xx-item-title">C:</span>
  143. <input type="text" name="C" id="C" placeholder="请输入选项内容" class="layui-input"
  144. autocomplete="off" lay-verType="tips" lay-verify="required" required/>
  145. </div>
  146. <div class="qa-xx-item">
  147. <span class="qa-xx-item-title">D:</span>
  148. <input type="text" name="D" id="D" placeholder="请输入选项内容" class="layui-input" autocomplete="off"
  149. lay-verify="required" required/>
  150. </div>
  151. <div class="qa-xx-item" id="questionSelect">
  152. <span class="qa-xx-item-title">E:</span>
  153. <input type="text" name="E" id="E" placeholder="请输入选项内容" class="layui-input" autocomplete="off"/>
  154. </div>
  155. </div>
  156. </script>
  157. <!-- js部分 -->
  158. <script type="text/javascript" src="../../assets/libs/layui/layui.js"></script>
  159. <script type="text/javascript" src="../../assets/js/common.js?v=315"></script>
  160. <script type="text/javascript" src="../../assets/libs/wangEditor/wangEditor.js"></script>
  161. <script>
  162. layui.use(['layer', 'form', 'table', 'admin', 'formSelects', 'uParas'], function () {
  163. var $ = layui.jquery;
  164. var layer = layui.layer;
  165. var form = layui.form;
  166. var formSelects = layui.formSelects;
  167. var table = layui.table;
  168. var uParas = layui.uParas;
  169. var admin = layui.admin;
  170. var editIndex = uParas.initWangEditor("qaContent");
  171. editIndex.create();
  172. var wdContent;
  173. var id = uParas.getUrlParam("id");
  174. var url = uParas.baseUrl + '/ol/questions/queryId';
  175. $.getJSON(url, {id: id}, function (resp) {
  176. $("#questionsType" + resp.data.questionsType).attr("checked", true);
  177. $("#id").val(resp.data.id);
  178. form.val('formQA', resp.data);
  179. editIndex.txt.html(resp.data.questionsName)
  180. changeQT(resp.data.questionsType, resp.data.answer);
  181. $("#qaRI3Answer").find("option[value ='" + resp.data.answer + "']").attr("selected", "selected");
  182. if (resp.data.questionsType == 1) {
  183. $("#answer").find("option[value ='" + resp.data.answer + "']").attr("selected", "selected");
  184. }
  185. if (resp.data.questionsType == 2) {
  186. $("#answer2").find("option[value ='" + resp.data.answer + "']").attr("selected", "selected");
  187. }
  188. if (resp.data.questionsType != 4) {
  189. var answerContent = $.parseJSON(resp.data.answerContent);
  190. setTimeout(function () {
  191. $("#A").val(answerContent.A);
  192. $("#B").val(answerContent.B);
  193. $("#C").val(answerContent.C);
  194. $("#D").val(answerContent.D);
  195. if (resp.data.questionsType == 2) {
  196. $("#E").val(answerContent.E);
  197. }
  198. }, 50);
  199. } else {
  200. wdContent.txt.html(resp.data.answerContent);
  201. }
  202. form.render();
  203. });
  204. // 表单提交事件
  205. form.on('submit(formSubmitAQ)', function (data) {
  206. var url = uParas.baseUrl + '/ol/questions/update';
  207. var idArray = new Object();
  208. var flag = true;
  209. idArray.A = data.field.A;
  210. idArray.B = data.field.B;
  211. idArray.C = data.field.C;
  212. idArray.D = data.field.D;
  213. //多选
  214. if (data.field.questionsType == 2) {
  215. var eVal = data.field.E;
  216. if (eVal == null || eVal == "") {
  217. flag = false;
  218. layer.msg("请输入选项E内容");
  219. } else {
  220. idArray.E = eVal;
  221. }
  222. }
  223. data.field.answerContent = JSON.stringify(idArray);
  224. data.field.questionsName = editIndex.txt.text();
  225. if (data.field.questionsName == null || data.field.questionsName == "") {
  226. layer.msg("题目名称不能为空");
  227. flag = false;
  228. return false;
  229. }
  230. //问答题获取富文本编辑器的内容
  231. if (data.field.questionsType == 4) {
  232. data.field.answerContent = wdContent.txt.text();
  233. if (data.field.answerContent == null || data.field.answerContent == "") {
  234. layer.msg("题目答案不能为空");
  235. flag = false;
  236. return false;
  237. }
  238. }
  239. if (flag) {
  240. admin.req(url, data.field, function (res) {
  241. layer.closeAll('loading');
  242. if (res.code == 1) {
  243. layer.msg(res.msg, {
  244. time: 1000,
  245. end: function () {
  246. location.href = "./questionsIndex.html";
  247. }
  248. });
  249. } else {
  250. layer.msg(res.msg);
  251. }
  252. }, 'POST');
  253. }
  254. return false;
  255. });
  256. // 试题类型切换事件
  257. form.on('radio(raQT)', function (data) {
  258. changeQT(data.value);
  259. });
  260. function changeQT(value, sel) {
  261. if (value == 1) {
  262. $('#qaRIGroup').html($('#qaRI1').html());
  263. form.render('select');
  264. $('#xxGroup').html($('#xxHtml').html());
  265. $("#questionSelect").hide();
  266. } else if (value == 2) {
  267. $('#qaRIGroup').html($('#qaRI2').html());
  268. if (sel) {
  269. formSelects.render('qaRIMore', {init: sel.split(',')});
  270. } else {
  271. formSelects.render('qaRIMore');
  272. }
  273. formSelects.btns('qaRIMore', ['select', 'remove', 'reverse'], {space: '13px'});
  274. $('#xxGroup').html($('#xxHtml').html());
  275. $("#questionSelect").show();
  276. } else if (value == 3) {
  277. $('#qaRIGroup').html($('#qaRI3').html());
  278. form.render('select');
  279. $('#xxGroup').html('');
  280. } else if (value == 4) {
  281. $('#qaRIGroup').html($('#qaRI4').html());
  282. form.render('select');
  283. $('#xxGroup').html('');
  284. wdContent = uParas.initWangEditor("wdContent");
  285. wdContent.create();
  286. // wdContent = layEdit.build('wdContent'); // 建立编辑器
  287. }
  288. }
  289. });
  290. </script>
  291. </body>
  292. </html>