show.new.html 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103
  1. <html lang="zh">
  2. <head>
  3. <title></title>
  4. <meta charset="utf-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  6. <script src="/static/vue.js"></script>
  7. <script src="/static/jquery.min.js"></script>
  8. <style>
  9. p {
  10. white-space: pre-line;
  11. }
  12. </style>
  13. </head>
  14. <body>
  15. <div id="app">
  16. <p v-show="msg!=''">{{msg}}</p>
  17. <div v-if="data!=null">
  18. <!--data-->
  19. <p id="tools"><input type="checkbox" v-model="showAnswer"/><span>显示答案</span><input type="button" @click="print" value="打印"/></p>
  20. <h1>{{data.title}}</h1>
  21. <div v-for="group in data.groups">
  22. <h2>{{group.title}}</h2>
  23. <p v-if="group.memo!=''" v-html="group.memo"></p>
  24. <div v-for="question,index in group.questions">
  25. <p style="font-weight:bold;" v-html="(index+1)+ '. ' + question.title"></p>
  26. <ul>
  27. <li v-for="option in question.options" v-html="option.value + '. '+option.text"></li>
  28. </ul>
  29. <p v-show="showAnswer" v-html="'<b>答案:</b>'+question.answer.join(';')"></p>
  30. <p v-if="question.explanation" v-show="showAnswer" v-html="'<b>题解:</b>'+question.explanation"></p>
  31. <hr>
  32. </div>
  33. </div>
  34. </div>
  35. </div>
  36. <script>
  37. var URL_PREFIX = "";
  38. var app = new Vue({
  39. el: '#app',
  40. data: {
  41. data: null,
  42. msg: "loading...",
  43. showAnswer: true,
  44. },
  45. methods: {
  46. getContentById() {
  47. var url = location.href.split('?')[0].split('/');
  48. var self = this;
  49. $.ajax({
  50. url: URL_PREFIX + "/get/question/content_object/" + url[url.length - 1],
  51. type: "GET",
  52. success: function(data) {
  53. if (data["success"]) {
  54. self.data = data["data"];
  55. if (document.title === "") {
  56. document.title = "百日题库-" + data["data"]["title"];
  57. }
  58. self.msg = "";
  59. }
  60. else {
  61. self.msg = "获取失败";
  62. }
  63. }
  64. });
  65. },
  66. print() {
  67. var tools = document.getElementById("tools");
  68. tools.style.display = "none";
  69. print();
  70. tools.style.display = "";
  71. }
  72. },
  73. mounted() {
  74. var search = location.search.substr(1).split('&');
  75. var courseName = "";
  76. var paperName = "";
  77. var index = "";
  78. for (var i = 0, j = search.length; i < j; i++) {
  79. var s = search[i].split('=');
  80. switch (s[0]) {
  81. case "course_name":
  82. courseName = s[1];
  83. break;
  84. case "paper_name":
  85. paperName = s[1];
  86. break;
  87. case "index":
  88. index = s[1];
  89. break;
  90. }
  91. }
  92. if (courseName !== "" && paperName !== "" && index !== "") {
  93. document.title = "百日题库-" + decodeURI(courseName) + "-" + index + "-" + decodeURI(paperName);
  94. }
  95. this.getContentById();
  96. }
  97. });
  98. </script>
  99. </body>
  100. </html>