API tools faq
paste
Advertisement
fdiazb

Untitled

fdiazb
Jul 26th, 2017
68
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.56 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6.  
  7. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  8.  
  9.  
  10. <!-- Latest compiled and minified CSS -->
  11. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
  12. integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  13.  
  14. <!-- Optional theme -->
  15. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
  16. integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
  17.  
  18. <style>
  19. .interactive-component {
  20. padding: 30px;
  21. margin: 10px;
  22. color: inherit;
  23. background-color: rgba(105, 213, 252, 0.29);
  24. border: 2px solid rgb(51, 175, 218);
  25. border-radius: 10px;
  26. }
  27.  
  28. .warning {
  29. background-color: rgba(255, 152, 0, 0.5);
  30. border: 2px solid rgb(218, 92, 0);
  31.  
  32. }
  33.  
  34.  
  35. </style>
  36.  
  37. <!-- Latest compiled and minified JavaScript -->
  38. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
  39. integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
  40. crossorigin="anonymous"></script>
  41.  
  42. <script src="handler.js"></script>
  43.  
  44. <script>
  45. $(document).ready(function () {
  46. window.API = new PlayerWrapper();
  47. window.API.init();
  48. });
  49. </script>
  50.  
  51.  
  52. </head>
  53. <body>
  54.  
  55.  
  56. <div class="container">
  57. <div class="row">
  58. <h2>Demo</h2>
  59.  
  60. <!-- Multiple choice -->
  61. <section>
  62. <div class="row">
  63. <div id="01203001" data-type="container-content" data-component="interactive" class="col-sm-12 interactive-component">
  64. <section data-type="component-multipleChoice">
  65. <h4 class="question">Question: Multiple choice</h4>
  66. <div class="answers">
  67. <label class="btn btn-info">
  68. <input type="radio" name="question1" data-type="component-single-choice" >
  69. Option 1</label><br/>
  70. <label class="btn btn-info">
  71. <input type="radio" name="question1" data-type="component-single-choice" >
  72. Option 2</label><br/>
  73. <label class="btn btn-info">
  74. <input type="radio" name="question1" data-type="component-single-choice" >
  75. Option 3</label><br/>
  76. <label class="btn btn-info">
  77. <input type="radio" name="question1" data-type="component-single-choice" >
  78. Option
  79. 4</label>
  80. </div>
  81. </section>
  82. </div>
  83. </div>
  84. </section>
  85.  
  86.  
  87. <!-- Multiple choice -->
  88. <section>
  89. <div class="row">
  90. <div id="01203999" data-type="container-content" data-component="interactive" class="col-sm-12 interactive-component">
  91. <section data-type="component-trueOrFalse">
  92. <h4 class="question">Question: True or False</h4>
  93. <div class="answers">
  94. <label class="btn btn-info">
  95. <input type="radio" name="questiontf" data-type="component-single-choice" >
  96. True</label><br/>
  97. <label class="btn btn-info">
  98. <input type="radio" name="questiontf" data-type="component-single-choice" >
  99. False</label>
  100. </div>
  101. </section>
  102. </div>
  103. </div>
  104. </section>
  105.  
  106.  
  107. <!-- Multiple choice -->
  108. <section>
  109. <div class="row">
  110. <div id="01203002" data-type="container-content" data-component="interactive" class="col-sm-12 interactive-component">
  111. <section data-type="component-multipleChoice">
  112. <h4 class="question">Question: Multiple choice</h4>
  113. <div class="answers">
  114. <label class="btn btn-info">
  115. <input type="radio" name="question2" data-type="component-single-choice" >
  116. Option 1</label><br/>
  117. <label class="btn btn-info">
  118. <input type="radio" name="question2" data-type="component-single-choice" >
  119. Option 2</label><br/>
  120. <label class="btn btn-info">
  121. <input type="radio" name="question2" data-type="component-single-choice" >
  122. Option 3</label><br/>
  123. <label class="btn btn-info">
  124. <input type="radio" name="question2" data-type="component-single-choice" >
  125. Option
  126. 4</label>
  127. <label class="btn btn-info">
  128. <input type="radio" name="question2" data-type="component-single-choice" >
  129. Option 5</label><br/>
  130. <label class="btn btn-info">
  131. <input type="radio" name="question2" data-type="component-single-choice" >
  132. Option 6</label><br/>
  133. <label class="btn btn-info">
  134. <input type="radio" name="question2" data-type="component-single-choice" >
  135. Option 7</label><br/>
  136. <label class="btn btn-info">
  137. <input type="radio" name="question2" data-type="component-single-choice" >
  138. Option
  139. 8</label>
  140. </div>
  141. </section>
  142. </div>
  143. </div>
  144. </section>
  145.  
  146.  
  147. <!-- Multiple answer -->
  148. <section>
  149. <div class="row">
  150. <div id="012031023" data-type="container-content" data-component="interactive" class=" col-sm-12 interactive-component">
  151. <section data-type="component-multipleAnswer">
  152. <h4 class="question">Question: Multiple answers</h4>
  153. <div class="answers">
  154. <label class="btn btn-info">
  155. <input type="checkbox" name="c_n_0" data-type="component-multiple-choice" />
  156. Option 1</label><br/>
  157. <label class="btn btn-info">
  158. <input type="checkbox" name="c_n_1" data-type="component-multiple-choice" />
  159. Option 2</label><br/>
  160. <label class="btn btn-info">
  161. <input type="checkbox" name="c_n_2" data-type="component-multiple-choice" />
  162. Option 3</label><br/>
  163.  
  164. </div>
  165. </section>
  166. </div>
  167. </div>
  168. </section>
  169.  
  170.  
  171. <!-- Multiple answer -->
  172. <section>
  173. <div class="row">
  174. <div id="012031024" data-type="container-content" data-component="interactive" class="col-sm-12 interactive-component">
  175. <section data-type="component-multipleAnswer">
  176. <h4 class="question">Question: Multiple answers</h4>
  177. <div class="answers">
  178. <label class="btn btn-info">
  179. <input type="checkbox" name="c_n_0" data-type="component-multiple-choice" />
  180. Option 1</label><br/>
  181. <label class="btn btn-info">
  182. <input type="checkbox" name="c_n_1" data-type="component-multiple-choice" />
  183. Option 2</label><br/>
  184. <label class="btn btn-info">
  185. <input type="checkbox" name="c_n_2" data-type="component-multiple-choice" />
  186. Option 3</label><br/>
  187. <label class="btn btn-info">
  188. <input type="checkbox" name="c_n_3" data-type="component-multiple-choice" />
  189. Option 4</label><br/>
  190. <label class="btn btn-info">
  191. <input type="checkbox" name="c_n_4" data-type="component-multiple-choice" />
  192. Option 5</label><br/>
  193. <label class="btn btn-info">
  194. <input type="checkbox" name="c_n_5" data-type="component-multiple-choice" />
  195. Option 6</label><br/>
  196. </div>
  197. </section>
  198. </div>
  199. </div>
  200. </section>
  201.  
  202. <div class="btn btn-lg btn-info" id="submit()" onclick="API.commit()">SEND NOW!</div>
  203.  
  204. </div>
  205.  
  206. </div>
  207.  
  208.  
  209. </body>
  210. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!