resolution.html 8.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>exam</title>
  6. <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
  7. <meta name="apple-mobile-web-app-capable" content="yes">
  8. <meta name="apple-mobile-web-app-status-bar-style" content="black">
  9. <link rel="stylesheet" href="../css/iconfont.css">
  10. <link rel="stylesheet" href="../css/mui.min.css">
  11. <script src="../js/mui.min.js"></script>
  12. <script src="../js/app.js"></script>
  13. <script src="../js/service.js"></script>
  14. <style>
  15. html,
  16. body {
  17. background-color: #efeff4;
  18. }
  19. .my-shouceng-pos {
  20. margin-right: 15px !important;
  21. }
  22. .my-biji-pos {
  23. margin-right: 30px !important;
  24. }
  25. .my-table-cell-jiexi:after {
  26. content: "" !important;
  27. background-color: white !important;
  28. }
  29. .my-table-cell-jiexi21:before {
  30. position: absolute;
  31. right: 0;
  32. top: 0;
  33. left: 15px;
  34. height: 1px;
  35. content: '';
  36. background-color: #c8c7cc !important;
  37. }
  38. </style>
  39. </head>
  40. <body>
  41. <header class="mui-bar mui-bar-nav">
  42. <a id="back" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
  43. <a id="shoucang" data-section-id="" data-name="收藏本" data-href="" class="my-shouceng-pos mui-pull-right">
  44. <i class="mui-icon icon iconfont icon-shoucang2"></i>
  45. </a>
  46. <a id="biji" data-section-id="" data-name="笔记" data-href="" class="my-biji-pos mui-pull-right">
  47. <span class="mui-icon mui-icon-compose"></span>
  48. </a>
  49. <h1 id="title" class="mui-title">试题解析</h1>
  50. </header>
  51. <footer class="mui-bar mui-bar-footer">
  52. <ul class="mui-pager" style="margin-top: 5px;">
  53. <li id="pre-id" class="mui-disabled">
  54. <a> &nbsp;&nbsp;上&nbsp;&nbsp;一&nbsp;&nbsp;题&nbsp;&nbsp; </a>
  55. </li>
  56. <li id="next-id" style="margin-left: 50px;">
  57. <a> &nbsp;&nbsp;下&nbsp;&nbsp;一&nbsp;&nbsp;题&nbsp;&nbsp; </a>
  58. </li>
  59. </ul>
  60. </footer>
  61. <div class="mui-content">
  62. <div class="my-pagination" style="margin-top: 20px;margin-bottom: 20px;" id="list">
  63. </div>
  64. </div>
  65. <script type="text/html" id="template-question-id">
  66. <li class="mui-table-view-cell">
  67. <b style="color: blue;">{indexed}/{pageSize}({type})</b>: {name}
  68. </li>
  69. </script>
  70. <script type="text/html" id="template-option-id">
  71. <li class="mui-table-view-cell mui-{inputType} mui-left">
  72. <input class="question" name="{inputName}" type="{inputType}" disabled data-checked="false" {checked} data-label="{label}">{label}:{name}
  73. </li>
  74. </script>
  75. <script type="text/html" id="template-resolution-id">
  76. <li class="mui-table-view-cell my-table-cell-jiexi">解析:</li>
  77. <li class="mui-table-view-cell">{name}</li>
  78. </script>
  79. <script type="text/html" id="template-correct-id">
  80. <li class="mui-table-view-cell" style="color: {isOkStyle};">你的答案:{userAnswer},正确答案:{questionAnswer}</li>
  81. </script>
  82. <script type="text/html" id="template-material-id">
  83. <li class="mui-table-view-cell">{name}</li>
  84. </script>
  85. <script type="text/html" id="template-fanyi-id">
  86. <li class="mui-table-view-cell">{fanyi}</li>
  87. </script>
  88. <script>
  89. function preAndNextEvent() {
  90. var preDom = document.getElementById("pre-id");
  91. preDom.addEventListener('tap', function() {
  92. prev();
  93. });
  94. var nextDom = document.getElementById("next-id");
  95. nextDom.addEventListener('tap', function() {
  96. next();
  97. });
  98. }
  99. var childPagination = null;
  100. function hideAll() {
  101. for (var i = 0; i < childPagination.length; i++) {
  102. var child = childPagination[i];
  103. child.style.display = 'none';
  104. }
  105. }
  106. function showFirst() {
  107. childPagination[0].style.display = 'block';
  108. }
  109. window.currentNo = 0;
  110. function show(idx) {
  111. hideAll();
  112. window.currentNo = idx;
  113. for (var i = 0; i < childPagination.length; i++) {
  114. if (i == idx) {
  115. var child = childPagination[i];
  116. child.style.display = 'block';
  117. }
  118. }
  119. if (window.currentNo == 0) {
  120. document.getElementById("pre-id").classList.add('mui-disabled');
  121. } else {
  122. document.getElementById("pre-id").classList.remove('mui-disabled');
  123. }
  124. if (window.currentNo == (childPagination.length - 1)) {
  125. document.getElementById("next-id").classList.add('mui-disabled');
  126. } else {
  127. document.getElementById("next-id").classList.remove('mui-disabled');
  128. }
  129. }
  130. function preBtnEffect() {
  131. if (window.currentNo <= 1) {
  132. document.getElementById("pre-id").classList.add('mui-disabled');
  133. }
  134. if (window.currentNo < childPagination.length) {
  135. document.getElementById("next-id").classList.remove('mui-disabled');
  136. }
  137. }
  138. function nextBtnEffect() {
  139. if (window.currentNo >= 0) {
  140. document.getElementById("pre-id").classList.remove('mui-disabled');
  141. }
  142. if (window.currentNo >= (childPagination.length - 2)) {
  143. document.getElementById("next-id").classList.add('mui-disabled');
  144. }
  145. }
  146. function prev() {
  147. preBtnEffect();
  148. if (window.currentNo) {
  149. window.currentNo = window.currentNo - 1;
  150. show(window.currentNo);
  151. var _self = childPagination[currentNo]
  152. var _questionId = _self.getAttribute("data-id");
  153. var questionAll = window.serviceObj.getQuestion(_questionId);
  154. updateBookmarkIco(questionAll);
  155. updateNoteIco(questionAll);
  156. }
  157. }
  158. function next() {
  159. nextBtnEffect();
  160. if (window.currentNo < (childPagination.length - 1)) {
  161. window.currentNo = window.currentNo + 1;
  162. show(window.currentNo);
  163. var _self2 = childPagination[currentNo]
  164. var _questionId2 = _self2.getAttribute("data-id");
  165. var questionAll = window.serviceObj.getQuestion(_questionId2);
  166. updateBookmarkIco(questionAll);
  167. updateNoteIco(questionAll);
  168. return false;
  169. } else {
  170. return true;
  171. }
  172. }
  173. window.addEventListener("swiperight", prev);
  174. window.addEventListener("swipeleft", next);
  175. //更新收藏图标,显示当前题是否被收藏
  176. function updateBookmarkIco(questionAll) {
  177. var questionId = questionAll.question.id;
  178. var hasCollect = questionAll.hasCollect;
  179. var shoucangDom = document.getElementById("shoucang");
  180. shoucangDom.setAttribute("data-question-id", questionId);
  181. if (hasCollect) {
  182. shoucangDom.style.color = "red";
  183. } else {
  184. shoucangDom.style.color = "white";
  185. }
  186. }
  187. function updateNoteIco(questionAll){
  188. var questionId = questionAll.question.id;
  189. var bijiDom = document.getElementById("biji");
  190. bijiDom.setAttribute('data-question-id',questionId);
  191. }
  192. //点击收藏,收藏此试题
  193. function collectEvent() {
  194. document.getElementById('shoucang').addEventListener('tap', function() {
  195. var _questionId = this.getAttribute('data-question-id');
  196. var questionAll = window.serviceObj.getQuestion(_questionId);
  197. if (questionAll.hasCollect) {
  198. mui.toast('已取消收藏');
  199. } else {
  200. mui.toast('已添加收藏');
  201. }
  202. window.serviceObj.updateBookMark(questionAll);
  203. updateBookmarkIco(questionAll);
  204. });
  205. }
  206. /**
  207. * 元数据配置
  208. */
  209. var questionMetadata = {
  210. '单选题': ["materialName", "question", "answer", "option", "resolution", "materialFanyi"],
  211. '填空题': ["materialName", "question", "answer", "option", "resolution", "materialFanyi"],
  212. '英译汉': ["question", "resolution"],
  213. '作文': ["question", "materialName"]
  214. };
  215. mui.plusReady(function() {
  216. var self = plus.webview.currentWebview();
  217. window.sectionId = self.sectionId;
  218. window.isFromLoginPage = self.isFromLoginPage;
  219. window.serviceObj = minix(self.serviceObj);
  220. if (window.serviceObj.questionList.length <= 1) {
  221. var footer = document.getElementsByTagName("footer")[0];
  222. footer.parentElement.removeChild(footer);
  223. }
  224. initDom();
  225. eventBiji();
  226. collectEvent();
  227. updateBookmarkIco(window.serviceObj.questionList[0]);
  228. updateNoteIco(window.serviceObj.questionList[0]);
  229. childPagination = document.getElementsByClassName("my-pagination")[0].children;
  230. hideAll();
  231. showFirst();
  232. var indexed = self.indexed; //点击解析上的具体哪个试题获取到的试题的题号
  233. if (indexed) {
  234. show(indexed - 1);
  235. }
  236. preAndNextEvent();
  237. });
  238. var old_back = mui.back;
  239. mui.back = function() {
  240. if (window.isFromLoginPage) {
  241. var wv = plus.webview;
  242. var sectionId = window.sectionId;
  243. console.log(sectionId);
  244. wv.close('login-win-' + sectionId);
  245. wv.close('resolution-win-' + sectionId);
  246. wv.show('submit-win-' + sectionId);
  247. } else {
  248. old_back();
  249. }
  250. };
  251. /**
  252. * 给收藏按钮添加事件
  253. */
  254. function eventBiji(){
  255. document.getElementById("biji").addEventListener('tap',function(evt){
  256. var questionId = this.getAttribute('data-question-id');
  257. mui.openWindow({
  258. id: 'biji-win-' + questionId,
  259. url: 'note.html',
  260. waiting: {
  261. autoShow: false
  262. },
  263. extras: {
  264. questionId:questionId
  265. }
  266. });
  267. });
  268. }
  269. </script>
  270. </body>
  271. </html>