multiple_choice_question.html 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>选择题</title>
  6. <meta name="format-detection" content="telephone=no" />
  7. <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
  8. <meta name="apple-mobile-web-app-capable" content="yes" />
  9. <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  10. <link rel="stylesheet" href="../../../common/iconfont/iconfont.css">
  11. <link rel="stylesheet" type="text/css" href="../../../css/mui.min.css"/>
  12. <link rel="stylesheet" type="text/css" href="../../../common/cross/css/cross.min.css"/>
  13. <link rel="stylesheet" type="text/css" href="../../../common/cross/css/cross.css">
  14. <link rel="stylesheet" type="text/css" href="../../../common/cross/css/cross.ui.css"/>
  15. <link rel="stylesheet" type="text/css" href="../css/base.css"/>
  16. </head>
  17. <body>
  18. <div class="h45">
  19. <div class="demo-comtop">
  20. <a class="mui-action-back"></a>
  21. <h1>选择题</h1>
  22. </div>
  23. </div>
  24. <div class="mt10 c-border-tb bgc-fff">
  25. <input class="title-input c-f16 c-323232" type="text" value="" placeholder="请输入题目标题">
  26. </div>
  27. <table class="c-table c-border-tb bgc-fff mt10">
  28. <tbody>
  29. <tr class="no-border">
  30. <td class="c-f16">选项</td>
  31. <td class="c-f16" width="50">填空</td>
  32. <td class="c-f16" width="50">必填</td>
  33. <td width="40"></td>
  34. </tr>
  35. <tr class="option" data-code="">
  36. <td class="pl10"><input type="text" class="gray-input c-f14 c-323232" placeholder="选项名称"></td>
  37. <td>
  38. <input class="icon-checkbox mr10 comment" type="checkbox">
  39. </td>
  40. <td>
  41. <input class="icon-checkbox mr10 isrequired" disabled type="checkbox">
  42. </td>
  43. <td>
  44. <img class="del_icon" src="../images/icon-shanchu-red.png" width="20">
  45. </td>
  46. </tr>
  47. <tr class="option" data-code="">
  48. <td class="pl10"><input type="text" class="gray-input c-f14 c-323232" placeholder="选项名称"></td>
  49. <td>
  50. <input class="icon-checkbox mr10 comment" type="checkbox">
  51. </td>
  52. <td>
  53. <input class="icon-checkbox mr10 isrequired" disabled type="checkbox">
  54. </td>
  55. <td>
  56. <img class="del_icon" src="../images/icon-shanchu-red.png" width="20">
  57. </td>
  58. </tr>
  59. <tr>
  60. <td colspan="3" id="new_option">
  61. <img src="../images/xinzeng_icon.png" width="20"><span class="c-f18 ml10">新增选项</span>
  62. </td>
  63. </tr>
  64. </tbody>
  65. </table>
  66. <div class="mt10 c-border-tb bgc-fff ui-grid ptb10 c-f18">
  67. <div class="ui-col-1 c-t-center">
  68. <input class="icon-checkbox mr10" type="radio" name="type" value="single" id="single"><label for="single">单选题</label>
  69. </div>
  70. <div class="ui-col-1 c-t-center">
  71. <input class="icon-checkbox mr10" type="radio" name="type" value="multiple" id="multiple"><label for="multiple">多选题</label>
  72. </div>
  73. </div>
  74. <ul class=" c-list mt10 c-border-tb">
  75. <li class="ptb10 c-list-cover">
  76. <div class="c-list-info c-f18">是否必答</div>
  77. <div class="c-list-key">
  78. <div class="fr mui-switch mui-switch-mini mui-active" id="require">
  79. <div class="mui-switch-handle"></div>
  80. </div>
  81. </div>
  82. </li>
  83. <li class="ptb2 c-list-cover" style="display: none;" id="min">
  84. <div class="c-list-info c-f18">最少选择</div>
  85. <div class="c-list-key input-group" style="width:70px">
  86. <select class="form-select width-100">
  87. <option value="0">不限</option>
  88. <option value="1">1</option>
  89. <option value="2">2</option>
  90. </select>
  91. <span class="form-select-arrow" style="right:2px;"></span>
  92. </div>
  93. </li>
  94. <li class="ptb2 c-list-cover" style="display: none;" id="max">
  95. <div class="c-list-info c-f18">最多选择</div>
  96. <div class="c-list-key input-group" style="width:70px">
  97. <select class="form-select width-100">
  98. <option value="0">不限</option>
  99. <option value="1">1</option>
  100. <option value="2">2</option>
  101. </select>
  102. <span class="form-select-arrow" style="right:2px;"></span>
  103. </div>
  104. </li>
  105. <li class="ptb2 c-list-cover" id="question_sort">
  106. <div class="c-list-info c-f18">题目顺序</div>
  107. <div class="c-list-key input-group" style="width:50px">
  108. <select class="form-select width-100">
  109. </select>
  110. <span class="form-select-arrow" style="right:2px;"></span>
  111. </div>
  112. </li>
  113. </ul>
  114. <div class="plr10 mb30 mt50">
  115. <a class="c-btn c-btn-full c-btn-17b3ec c-btn-radius" id="submit_btn">确认</a>
  116. </div>
  117. </body>
  118. <script src="../../../js/jquery/2.1.3/jquery.js"></script>
  119. <script src="../../../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
  120. <script src="../../../js/app.js" type="text/javascript" charset="utf-8"></script>
  121. <link rel="stylesheet" type="text/css" href="../../../widget/artDialog/6.0.5/css/ui-dialog.min.css"/>
  122. <script src="../../../widget/artDialog/6.0.5/js/dialog-plus.min.js" type="text/javascript" charset="utf-8"></script>
  123. <script src="../js/multiple_choice_question.js" type="text/javascript" charset="utf-8"></script>
  124. </html>