templates/student/makeEvaluation.html.twig line 1

Open in your IDE?
  1. {% extends 'student/base.html.twig' %}
  2. {% block title %}Evaluations{% endblock %}
  3. {% block stylesheets %}
  4.     {{ parent() }}
  5.     <link href="{{ asset('libraries/css/questions.css?v=25') }}" rel="stylesheet" type="text/css">
  6. {% endblock %}
  7. {% block body %}
  8.     <div class="row">
  9.         <div class='col-sm-12'>
  10.             <h2>PRAXIS SCHOOL</h2>
  11.         </div>
  12.         <div class='col-sm-12'>
  13.             <h5> Hola {{ myStudent.names }} {{ myStudent.lastname }} </h5>
  14.         </div>
  15.     </div>
  16.     {#incluir el contenido de las preguntas#}
  17.     <div class="row">
  18.         <div id="content-questions" class='col-sm-12'></div>
  19.     </div>
  20. {% endblock body %}
  21. {% block add2body %}
  22.     <div id="testTempo">00:00:00</div>
  23.     <div id="preloaderView">
  24.         <div style="position: absolute; top: 18%; left: 0; width: 100%; text-align: center; ">
  25.             <img src="/libraries/images/logo-1.png" style="">
  26.         </div>
  27.         <div class="spinner-border text-primary" style="position: fixed; top: 40%; left: 48%;"></div>
  28.         <div id="message" class="center" style="position: absolute; top: 55%; width: 100%;">Loading questions...</div>
  29.     </div>
  30.     <div id="instructionsEvaluation" class="modal" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false">
  31.         <div class="modal-dialog" role="document">
  32.             <div class="modal-content">
  33.                 <div class="modal-header">
  34.                     <h5 class="center modal-title wdFull">Instrucciones del examen</h5>
  35.                     <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  36.                         <span aria-hidden="true">&times;</span>
  37.                     </button>
  38.                 </div>
  39.                 <div class="modal-body">
  40.                     {% set lang = 'Inglés' %}
  41.                     {% if myModule.level.course.abreviature == 'EN' %}
  42.                         <p class="center" style="font-size: 1.2rem;">
  43.                             This test is intended to evaluate the Four skills of the English language: Reading, Writing, Listening and Speaking.
  44.                             <br>This test will last <span class="popup-time bold"></span> minutes
  45.                         </p>
  46.                     {% elseif myModule.level.course.abreviature == 'FR' %}
  47.                         {% set lang = 'Francés' %}
  48.                         <p class="center" style="font-size: 1.2rem;">
  49.                             Ce test est destiné à évaluer les quatre compétences de la langue Française: lecture, écriture, écoute et expression orale.
  50.                             <br>Cette épreuve durera <span class="popup-time bold"></span> minutes
  51.                         </p>
  52.                     {% endif %}
  53.                     <p class="center" style="font-size: 0.9rem;">
  54.                         Esta prueba está destinada a evaluar las cuatro habilidades del idioma {{ lang }}: Lectura, Escritura, Comprención Auditiva y Expresión oral
  55.                         <br>Esta prueba tiene una duración de <span class="popup-time bold"></span> minutos
  56.                     </p>
  57.                     <p class="center" style="font-size: 1rem;">
  58.                         <i class="fa fa-smile-o"></i>
  59.                         Good Luck / Buena suerte
  60.                     </p>
  61.                 </div>
  62.                 <div class="modal-footer">
  63.                     <button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-play"></i> Iniciar</button>
  64.                 </div>
  65.             </div>
  66.         </div>
  67.     </div>
  68.     <div id="modalNotAvailable" class="modal" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false">
  69.         <div class="modal-dialog" role="document">
  70.             <div class="modal-content">
  71.                 <div class="modal-header">
  72.                     <h5 class="center modal-title wdFull">Atention</h5>
  73.                     <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  74.                         <span aria-hidden="true">&times;</span>
  75.                     </button>
  76.                 </div>
  77.                 <div class="modal-body">
  78.                     <p class="center" style="font-size: 15pt;">No tienes acceso para realizar esta evaluación</p>
  79.                     <p class="center" style="font-size: 15pt;">You do not have access to take this assessment</p>
  80.                 </div>
  81.                 <div class="modal-footer">
  82.                     <button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-hand-o-right"></i> Close</button>
  83.                 </div>
  84.             </div>
  85.         </div>
  86.     </div>
  87.     <div id="closeEvaluation" class="modal" tabindex="-1" role="dialog">
  88.         <div class="modal-dialog" role="document">
  89.             <div class="modal-content">
  90.                 <div class="modal-header">
  91.                     <h5 class="center modal-title wdFull">Sending answers</h5>
  92.                     <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  93.                         <span aria-hidden="true">&times;</span>
  94.                     </button>
  95.                 </div>
  96.                 <div class="modal-body">
  97.                     <p class="center" style="font-size: 1.4rem;">
  98.                         We have sent your answers to be validated.<br>We will notify you of the results.
  99.                     </p>
  100.                     <p class="center" style="font-size: 1.2rem;">
  101.                         Hemos enviado tus respuestas para ser validadas.<br>Te estaremos notificando los resultados.
  102.                     </p>
  103.                 </div>
  104.                 <div class="modal-footer">
  105.                     <button type="button" class="btn btn-primary" data-dismiss="modal">Aceptar</button>
  106.                 </div>
  107.             </div>
  108.         </div>
  109.     </div>
  110.     {# modal para mensajes de ayuda #}
  111.     <div id="modalToHelp" class="modal" tabindex="-1" role="dialog">
  112.         <div class="modal-dialog" role="document">
  113.             <div class="modal-content">
  114.                 <div class="modal-header">
  115.                     <h5 class="center modal-title wdFull">&nbsp;</h5>
  116.                     <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  117.                         <span aria-hidden="true">&times;</span>
  118.                     </button>
  119.                 </div>
  120.                 <div class="modal-body">
  121.                     <p class="center modaltext" style="font-size: 1.2rem; margin: auto 12%; width: 75%;"></p>
  122.                     <p class="modalimage center"></p>
  123.                 </div>
  124.                 <div class="modal-footer">
  125.                     <button type="button" class="btn btn-primary" data-dismiss="modal">Aceptar</button>
  126.                 </div>
  127.             </div>
  128.         </div>
  129.     </div>
  130.     
  131.     <div id="msntimeoff" class="hide">
  132.         <div class="row">
  133.             <div class="col-12">Restan menos de <b id="timeless">10 minutos</b> para terminar tu evaluación</div>
  134.             <div class="col-12">En caso que tu tiempo termine las respuestas se almacenarán automáticamente</div>
  135.         </div>
  136.     </div>
  137. {% endblock add2body %}
  138. {% block javascripts %}
  139.     {{ parent() }}
  140.     <script src="{{ asset('libraries/js/makeEvaluation.js?v=23') }}?v=1"></script>
  141.     <script src="{{ asset('libraries/audiorecorder/recorder.js') }}?v=1"></script>
  142.     <script src="{{ asset('libraries/js/jquery-ui-1.13.2.min.js') }}"></script>
  143.     <script src="{{ asset('libraries/js/jquery-ui-touch-punch.js') }}"></script>
  144.     <script>
  145.         var moduleId = {{ myModule.id }};
  146.         var studentId = {{ myStudent.id }};
  147.         var hasSaved = false;
  148.         document.onreadystatechange = function () {
  149.             var state = document.readyState
  150.             if (state == 'complete') {
  151.                 setTimeout(function(){
  152.                     $('#preloaderView').animate({opacity: 0}, 1000, function () {
  153.                         $('#preloaderView').hide();
  154.                         $('#preloaderView').css({opacity: 1});
  155.                     });
  156.                 }, 2000);
  157.             }
  158.         };
  159.         $(document).ready(function () {
  160.             console.log('reading evaluation...');
  161.             if('{{ isAvailable }}' == 1) {
  162.                 let template1 = '{{ myModule.evaluationTemplate }}';
  163.                 let template2 = '{{ myModule.evaluationTemplate2 }}';
  164.                 let attemps = '{{ attemps }}';
  165.                 let template = template1;
  166.                 
  167.                 if(template2 && (attemps % 2) != 0) {
  168.                     template = template2 ;
  169.                 }
  170.                 myEvaluation.loadtemplate(template + '&x=12');
  171.             }
  172.             
  173.             myEvaluation.startTest('{{ isAvailable }}');
  174.             myEvaluation.redirectHomePage();
  175.             $(document).on('keyup', 'textarea', function() {
  176.                 let txt = $(this).val().trim();
  177.                 let arrTxt = txt.split(/\r?\n?\s/);
  178.                 let size = 0;
  179.                 arrTxt.forEach(function(i, o) {
  180.                     if(i.length > 0) {
  181.                         size++;
  182.                     }
  183.                 });
  184.                 $(this).closest('div').find('span.textarea-words').text(size + '');
  185.             });
  186.             
  187.             /* PLAY AUDIO INSTRUCTIONS */
  188.             $(document).on('click', 'i.examplayauido', function() {
  189.                 let iconplay = $(this);
  190.                 let playPause = $(this).data('playing');
  191.                 let parent = $(this).closest('div');
  192.                 let myAudio = $(parent).find("audio")[0];
  193.                 if(playPause == 0){
  194.                     $(this).data('playing', '1');
  195.                     myAudio.play();
  196.                     $(this).css('opacity', "0.6");
  197.                 }else{
  198.                     $(this).data('playing', '0');
  199.                     myAudio.pause();
  200.                     $(this).css('opacity', "1");
  201.                 }
  202.                 myAudio.addEventListener("ended", function(){
  203.                     myAudio.currentTime = 0;
  204.                     $(iconplay).css('opacity', "1");
  205.                     $(iconplay).data('playing', '0');
  206.                     console.log("ended");
  207.                 });
  208.             });
  209.             $(document).on('click', 'i.backwardaudio', function() {
  210.                 let parent = $(this).closest('div');
  211.                 let myAudio = $(parent).find("audio")[0];
  212.                 myAudio.pause();
  213.                 myAudio.currentTime -= 10;
  214.                 setTimeout(function(){myAudio.play();}, 500);
  215.             });
  216.             // al seleccionar una imagen se activa y se marca como respuesta
  217.             $(document).on('click', '.cont-answ-img', function() {
  218.                 let answerSelected = $(this).data('choosen');
  219.                 $(this).closest('div.row').find('div.active').removeClass('active');
  220.                 $(this).closest('div.contentAudioQ').find('div.answers > input').val(answerSelected);
  221.                 $(this).addClass('active');
  222.             });
  223.             $(document).on('click', '#send-anwers', function() {
  224.                 hasSaved = true;
  225.             });
  226.             $(document).on('click', '.btnHelp', function() {
  227.                 let text = $(this).data('text');
  228.                 let image = $(this).data('image');
  229.                 let imgtag = `<img src="/libraries/images/${image}" class="imghelp">`;
  230.                 $('#modalToHelp').find('.modaltext').html(text);
  231.                 $('#modalToHelp').find('.modalimage').html(imgtag);
  232.                 $('#modalToHelp').modal('show');
  233.             });
  234.         });
  235.         /*
  236.          * evitar cerrar la pagina por accidente
  237.          * @returns {Boolean}
  238.          */
  239.         $(window).bind("beforeunload", function(event) {
  240.             if(!hasSaved) {
  241.                 return "You have unsaved changes";
  242.             }
  243.         });
  244.         /* Evitar el click derecho sobre la pagina */
  245.         $(document).bind("contextmenu", function(e) {
  246.             return false;
  247.         });
  248.     </script>
  249. {% endblock javascripts %}