Reac front end for psicometric app

nueva-prueba.php 11KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199
  1. <head>
  2. <meta charset="utf-8">
  3. <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  4. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  5. <title>PruebasPsico - Crear prueba</title>
  6. <link rel="stylesheet" href="css/all.css">
  7. <script src="js/jquery.min.js"></script>
  8. <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.18/datatables.min.css"/>
  9. <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.18/datatables.min.js"></script>
  10. </head>
  11. <script type="text/javascript">
  12. $(document).ready(function () {
  13. $(".list-unstyled").find('li').removeClass("active");
  14. $("#pruebas").addClass("active");
  15. $("#crearprueba").addClass("active");
  16. });
  17. </script>
  18. <?php include('sidebar.php') ?>
  19. <section id="content">
  20. <?php include('header.php') ?>
  21. <div class="content-section">
  22. <div class="main">
  23. <h1>Crear pruebas</h1>
  24. <div class="asignar_usuario">
  25. <div class="row">
  26. <div class="col-md-4">
  27. <div class="datos_candidato">
  28. <label>Tipo de prueba</label>
  29. <select>
  30. <option selected disabled>Selecciona el tipo de prueba que deseas añadir</option>
  31. <option>Comportamiento</option>
  32. <option>Personalidad</option>
  33. <option>Inteligencia</option>
  34. </select>
  35. </div>
  36. </div>
  37. <div class="col-md-4">
  38. <div class="datos_candidato">
  39. <label>Nombre</label>
  40. <input type="text" name="nombre" placeholder="Nombre de la prueba">
  41. </div>
  42. </div>
  43. <div class="col-md-4">
  44. <div class="datos_candidato">
  45. <label>Duración de prueba</label>
  46. <select>
  47. <option selected disabled>Selecciona el tiempo de duración de la prueba</option>
  48. <option>10</option>
  49. <option>15</option>
  50. <option>30</option>
  51. <option>45</option>
  52. <option>60</option>
  53. <option>90</option>
  54. </select>
  55. </div>
  56. </div>
  57. </div>
  58. </div>
  59. <div class="body_preguntas">
  60. <div class="botones_preguntas">
  61. <label>Tipo de pregunta</label>
  62. <div class="row">
  63. <div class="col-md-6">
  64. <div class="datos_candidato">
  65. <select>
  66. <option selected disabled>Selecciona el tipo de pregunta que deseas añadir</option>
  67. <option>Selección múltiple</option>
  68. <option>Falso y verdadero</option>
  69. <option>Preguntas directas</option>
  70. <option>Relaciones de conceptos</option>
  71. </select>
  72. </div>
  73. </div>
  74. <div class="col-md-6">
  75. <button class="btn_agregar_pregunta">Añadir pregunta</button>
  76. </div>
  77. </div>
  78. </div>
  79. </div>
  80. <div class="body_prueba_nueva">
  81. <div class="contenedor_pruebas">
  82. <?php include('header-pruebas.php')?>
  83. <h1>Preguntas</h1>
  84. <div class="body_preg_indi">
  85. <div class="titulo_pregunta">
  86. <span>Pregunta 1</span><input type="text" name="pregunta" placeholder="Escribe tu pregunta directa aquí" class="input_pregunta">
  87. </div>
  88. <div class="respuesta_pregunta">
  89. <input type="text" name="respuesta" placeholder="Escribe tu respuesta aquí">
  90. </div>
  91. </div>
  92. <div class="body_preg_indi">
  93. <div class="titulo_pregunta">
  94. <span>Pregunta 2</span><input type="text" name="pregunta" placeholder="Escribe tu pregunta verdadero y falso" class="input_pregunta">
  95. </div>
  96. <div class="respuesta_pregunta">
  97. <div class="radio">
  98. <form>
  99. <input id="true" type="radio" name="gender" value="true" checked="checked">
  100. <label for="true">Verdadero</label>
  101. <input id="false" type="radio" name="gender" value="false">
  102. <label for="false">Falso</label>
  103. </form>
  104. </div>
  105. </div>
  106. </div>
  107. <div class="body_preg_indi">
  108. <div class="titulo_pregunta">
  109. <span>Pregunta 3</span><input type="text" name="pregunta" placeholder="Escribe tu pregunta selección múltiple" class="input_pregunta">
  110. </div>
  111. <div class="respuesta_pregunta">
  112. <div class="radio">
  113. <form>
  114. <input id="opcion1" type="radio" name="gender" value="opcion1">
  115. <label for="opcion1">Opción 1</label>
  116. <input id="opcion2" type="radio" name="gender" value="opcion2" checked="checked">
  117. <label for="opcion2">Opción 2</label>
  118. <input id="opcion3" type="radio" name="gender" value="opcion3">
  119. <label for="opcion3">Opción 3</label>
  120. <input id="opcion4" type="radio" name="gender" value="opcion4">
  121. <label for="opcion4">Opción 4</label>
  122. <input id="opcion5" type="radio" name="gender" value="opcion5">
  123. <label for="opcion5">Opción 5</label>
  124. </form>
  125. </div>
  126. </div>
  127. </div>
  128. <div class="body_preg_indi">
  129. <div class="titulo_pregunta">
  130. <span>Pregunta 4</span><input type="text" name="pregunta" placeholder="Ve la siguiente imagen y encuentra la faltante" class="input_pregunta">
  131. <div class="button_subir_foto_pregunta">
  132. <form action="">
  133. <div class="form-group">
  134. <label for="upload" class="btn d-inline-block btn-info">Subir imagen</label>
  135. <input type="file" name="" id="upload" />
  136. </div>
  137. </form>
  138. </div>
  139. <div class="img_relaciones">
  140. <img src="images/prueba.png">
  141. </div>
  142. </div>
  143. <div class="respuesta_pregunta">
  144. <div class="button_subir_foto_pregunta">
  145. <form action="">
  146. <div class="form-group">
  147. <label for="upload" class="btn d-inline-block btn-info">Añadir respuesta</label>
  148. <input type="file" name="" id="upload" />
  149. </div>
  150. </form>
  151. </div>
  152. <form>
  153. <div id="sites">
  154. <input type="radio" name="site" id="option1" value="option1" />A.<label for="option1"><img src="images/respuesta.png" alt="Opción 1" /></label>
  155. <input type="radio" name="site" id="option2" value="option2" />B.<label for="option2"><img src="images/respuesta2.png" alt="Opción 2" /></label>
  156. <input type="radio" name="site" id="option3" value="option3" />C.<label for="option3"><img src="images/respuesta3.png" alt="Opción 3" /></label>
  157. <input type="radio" name="site" id="option1" value="option1" />D.<label for="option1"><img src="images/respuesta.png" alt="Opción 1" /></label>
  158. <input type="radio" name="site" id="option2" value="option2" />E.<label for="option2"><img src="images/respuesta2.png" alt="Opción 2" /></label>
  159. <input type="radio" name="site" id="option3" value="option3" />F.<label for="option3"><img src="images/respuesta3.png" alt="Opción 3" /></label>
  160. </div>
  161. </form>
  162. </div>
  163. <div class="form-group-guardar-prueba">
  164. <input type="button" class="btn d-inline-block btn-info" value="Guardar prueba">
  165. </div>
  166. </div>
  167. </div>
  168. <?php include('footer-pruebas.php')?>
  169. </div>
  170. </div>
  171. <?php include('footer.php') ?>
  172. </div>
  173. </section>
  174. <div class="modal fade" id="ayudaAsignar" role="dialog">
  175. <div class="modal-dialog">
  176. <!-- Modal content-->
  177. <div class="modal-content">
  178. <div class="modal-header">
  179. <button type="button" class="close" data-dismiss="modal">&times;</button>
  180. <h4 class="modal-title">Asistencia</h4>
  181. </div>
  182. <div class="modal-body">
  183. <div class="data_notification">
  184. <p>En el menú Pruebas encontrarás la opción Asignar , utilízala para seleccionar las pruebas que le serán aplicadas al candidato. Selecciona el código del candidato y marca las pruebas, una vez marcadas presiona el botón Asignar para comenzar la aplicación de las mismas.</p>
  185. </div>
  186. </div>
  187. </div>
  188. </div>
  189. <script>
  190. $('#sites input:radio').addClass('input_hidden');
  191. $('#sites label').click(function() {
  192. $(this).addClass('selected').siblings().removeClass('selected');
  193. });
  194. </script>