templates/student/viewEvaluation.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}- Ver la Evaluación{% endblock %}
  5. {% block stylesheets %}
  6.     {{ parent() }}
  7.     <link href="{{ asset('libraries/css/questions.css?v=4') }}" rel="stylesheet" type="text/css">
  8. {% endblock %}
  10. {% block body %}
  12.     <div class="row">
  13.         <div id="myStudent" class='col-sm-9 mt-5' style="margin: auto; font-size: 1.5em;" data-studentid="{{ student.id }}">
  14.             Estudiante: <span style="color: #990000;"><b>{{ student }}</b></span>
  15.         </div>
  17.         <div class='col-sm-9' style="margin: auto;">
  18.             <hr>
  19.             <div class="row">
  20.                 <div class='col-sm-2 center'>
  21.                     Curso: <br> <b>{{ module.level.course }}</b>
  22.                 </div>
  23.                 <div id="myModule" class='col-sm-2 center' data-moduleid="{{ module.id }}">
  24.                     Nombre del Módulo: <br> <b>{{ module }}</b>
  25.                 </div>
  26.                 <div class='col-sm-2 center'>
  27.                     Nivel: <br> <b>{{ module.level.name }}</b>
  28.                 </div>
  29.                 <div class='col-sm-2 center'>
  30.                     Puntaje Mínimo: <br> <b>{{ module.scoreMinimun }}</b>
  31.                 </div>
  32.                 <div class='col-sm-2 center' id="myEvaluation" data-evaluationid="{{ evaluation.id }}">
  33.                     Puntaje Obtenido: <br> <b><span id="evaluationScore">{{ evaluation.score }}</span></b>
  34.                 </div>
  35.             </div>
  36.         </div>
  37.     </div>
  39.     <div class="row">
  40.         {# iterar las respuestas #}
  41.         <div id="content-questions" class='col-sm-9' style="margin: auto;">
  42.             <hr>
  43.             {% for answer in evaluationAnswer %}
  44.                 <div class="col-sm-12">
  45.                     <div class="pregresp" data-question="1" data-score="1">
  46.                         <div class="question mb-2">
  47.                             <div class="row">
  48.                                 <div class="col-5 col-sm-5 col-md-4 col-lg-3 col-xl-2">
  49.                                     <b>Pregunta: </b>
  50.                                 </div>
  51.                                 <div class="col-7 col-sm-8 col-md-8 col-lg-9 col-xl-10">
  52.                                     {{ answer.question|nl2br }}
  53.                                 </div>
  54.                             </div>
  55.                         </div>
  56.                         <div class="answers">
  57.                             <div class="row">
  59.                                 {% if answer.rightAnswer != 'text' and answer.rightAnswer != 'audio' %}
  60.                                     <div class="col-12 mb-2">
  61.                                         <div class="row">
  62.                                             <div class="col-5 col-sm-5 col-md-4 col-lg-3 col-xl-2">
  63.                                                 <span>Respuesta Correcta: </span>
  64.                                             </div>
  65.                                             <div class="col-7 col-sm-7 col-md-8 col-lg-9 col-xl-10">
  66.                                                 <span>{{ answer.rightAnswer }}</span>
  67.                                             </div>
  68.                                         </div>
  69.                                     </div>
  70.                                 {% endif %}
  72.                                 {# Validar que la pregunta se abierta #}
  75.                                 {% if answer.answerType == 'opened' %}
  76.                                     {% if answer.rightAnswer == 'audio' %}
  77.                                         
  78.                                         <div class="col-12">
  79.                                             <div class="row mt-2 mb-2">
  80.                                                 <div class="col-5 col-sm-5 col-md-4 col-lg-3 col-xl-2">
  81.                                                     <span>Puntaje máximo: </span>
  82.                                                 </div>
  83.                                                 <div class="col-7 col-sm-8 col-md-8 col-lg-9 col-xl-10">
  84.                                                     <span>{{ answer.points }}</span>
  85.                                                     <div class="tooltip">?<span class="tooltiptext">Esta pregunta vale <b>{{ answer.points }}</b> puntos</span></div>
  86.                                                 </div>
  87.                                             </div>
  88.                                         </div>
  89.                                         
  90.                                         {# si es una pregunta tipo AUDIO se exponen 5 campos para calificacion del docente #}
  91.                                         <div class="col-12 mb-2">
  92.                                             <div class="row postRevision" data-answer='{{ answer.id }}' data-maxpoint='{{ answer.points }}'>
  93.                                                 {% if answer.answerGiven %}
  94.                                                     <div class="col-12 center">
  95.                                                         <audio controls>
  96.                                                             <source src="{{ answer.answerGiven }}">
  97.                                                         </audio>
  98.                                                     </div>
  99.                                                 {% else %}
  100.                                                     <div class="col-12 bold center mt-3 mb-3">
  101.                                                         <span>No se encontró una respuesta</span>
  102.                                                     </div>
  103.                                                 {% endif %}
  104.                                                 {% if not answer.isChecked %}
  105.                                                     <div class="col-sm-12 center mb-2 text-primary">
  106.                                                         <b><i>Cada habilidad se califica con máximo 20%</i></b>
  107.                                                     </div>
  109.                                                     <div class="col-sm-3 col-md-2 form-group center">
  110.                                                         <label>Fluidez <i class="fa fa-spinner fa-spin fa-fw" style="display: none;"></i></label>
  111.                                                         <div class="tooltip">?<span class="tooltiptext">Cada habilidad se califica con máximo 20%</span></div>
  112.                                                         <input type="number" class="form-control center" step="1" min="0" max="20" data-revisionid='0' data-maxscore="20" data-observation='Fluidez' data-audio="1" value="0" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
  113.                                                         <div class="invalid-feedback validate">Max 20%</div>
  114.                                                     </div>
  115.                                                     <div class="col-sm-3 col-md-2 form-group center">
  116.                                                         <label>Estructura <i class="fa fa-spinner fa-spin fa-fw" style="display: none;"></i></label>
  117.                                                         <div class="tooltip">?<span class="tooltiptext">Cada habilidad se califica con máximo 20%</span></div>
  118.                                                         <input type="number" class="form-control center" step="1" min="0" max="20" data-revisionid='0' data-maxscore="20" data-observation='Estructura' data-audio="1" value="0">
  119.                                                         <div class="invalid-feedback validate">Max 20%</div>
  120.                                                     </div>
  121.                                                     <div class="col-sm-3 col-md-2 form-group center">
  122.                                                         <label>Coherencia <i class="fa fa-spinner fa-spin fa-fw" style="display: none;"></i></label>
  123.                                                         <div class="tooltip">?<span class="tooltiptext">Cada habilidad se califica con máximo 20%</span></div>
  124.                                                         <input type="number" class="form-control center" step="1" min="0" max="20" data-revisionid='0' data-maxscore="20" data-observation='Coherencia' data-audio="1" value="0">
  125.                                                         <div class="invalid-feedback validate">Max 20%</div>
  126.                                                     </div>
  127.                                                     <div class="col-sm-3 col-md-2 form-group center">
  128.                                                         <label>Vocabulario <i class="fa fa-spinner fa-spin fa-fw" style="display: none;"></i></label>
  129.                                                         <div class="tooltip">?<span class="tooltiptext">Cada habilidad se califica con máximo 20%</span></div>
  130.                                                         <input type="number" class="form-control center" step="1" min="0" max="20" data-revisionid='0' data-maxscore="20" data-observation='Vocabulario' data-audio="1" value="0">
  131.                                                         <div class="invalid-feedback validate">Max 20%</div>
  132.                                                     </div>
  133.                                                     <div class="col-sm-3 col-md-2 form-group center">
  134.                                                         <label>Pronunciación <i class="fa fa-spinner fa-spin fa-fw" style="display: none;"></i></label>
  135.                                                         <div class="tooltip">?<span class="tooltiptext">Cada habilidad se califica con máximo 20%</span></div>
  136.                                                         <input type="number" class="form-control center" step="1" min="0" max="20" data-revisionid='0' data-maxscore="20" data-observation='Pronunciación' data-audio="1" value="0">
  137.                                                         <div class="invalid-feedback validate">Max 20%</div>
  138.                                                     </div>
  139.                                                 {% endif %}
  140.                                             </div>
  141.                                         </div>
  142.                                     {% elseif answer.rightAnswer == 'text'  %}
  143.                                         
  144.                                         <div class="col-12 mb-2">
  145.                                             <div class="row">
  146.                                                 <div class="col-5 col-sm-5 col-md-4 col-lg-3 col-xl-2">
  147.                                                     <span>Puntaje máximo: </span>
  148.                                                 </div>
  149.                                                 <div class="col-7 col-sm-8 col-md-8 col-lg-9 col-xl-10">
  150.                                                     <span><b>{{ answer.points }}</b></span>
  151.                                                     <div class="tooltip">?<span class="tooltiptext">Esta pregunta vale <b>{{ answer.points }}</b> puntos</span></div>
  152.                                                 </div>
  153.                                             </div>
  154.                                         </div>
  155.                                         
  156.                                         <div class="col-12 mb-2">
  157.                                             <div class="row">
  158.                                                 <div class="col-5 col-sm-5 col-md-4 col-lg-3 col-xl-2">
  159.                                                     <span>Respuesta Dada: </span>
  160.                                                 </div>
  161.                                                 <div class="col-7 col-sm-7 col-md-8 col-lg-9 col-xl-10">
  162.                                                     <div class="answTextGiven">
  163.                                                         <span>{{ answer.answerGiven|nl2br }}</span>
  164.                                                     </div>
  165.                                                 </div>
  166.                                             </div>
  167.                                             {% if not answer.isChecked %}
  168.                                                 <div class="row postRevision" data-answer='{{ answer.id }}'>
  169.                                                     <div class="col-5 col-sm-5 col-md-4 col-lg-3 col-xl-2">
  170.                                                         <label>Calificación</label>
  171.                                                     </div>
  172.                                                     <div class="col-4 col-sm-3 col-md-2 form-group">
  173.                                                         {% set step = answer.isDecimals(answer.points)? 0.1 : 1 %}
  174.                                                         <input type="number" class="form-control center" step="{{ step }}" min="0" max="{{ answer.points }}" data-revisionid='0' data-maxscore="{{ answer.points }}" data-observation='Vocabulario' value="0">
  175.                                                         <div class="invalid-feedback validate center">La calificación no debe ser mayor a {{ answer.points }} pt</div>
  176.                                                     </div>
  177.                                                 </div>
  178.                                             {% endif  %}
  179.                                         </div>
  180.                                     {% endif  %}
  181.                                 {% else %}
  182.                                     <div class="col-12 mb-2">
  183.                                         <div class="row">
  184.                                             <div class="col-5 col-sm-5 col-md-4 col-lg-3 col-xl-2">
  185.                                                 <span>Respuesta Dada: </span>
  186.                                             </div>
  187.                                             <div class="col-7 col-sm-7 col-md-8 col-lg-9 col-xl-10">
  188.                                                 <span>{{ answer.answerGiven }}</span>
  189.                                             </div>
  190.                                         </div>
  191.                                     </div>
  192.                                 {% endif %}
  194.                                 <div class="col-12">
  195.                                     {% set redColor = '#00ec36' %}
  196.                                     {% if answer.score == 0 %}
  197.                                         {% set redColor = '#ffd8db' %}
  198.                                     {% endif %}
  199.                                     <div class="row">
  200.                                         <div class="col-5 col-sm-5 col-md-4 col-lg-3 col-xl-2">
  201.                                             <span>Puntaje Obtenido: </span>
  202.                                         </div>
  203.                                         <div class="col-7 col-sm-7 col-md-8 col-lg-9 col-xl-10">
  204.                                             <span class="answerScore" style="background-color: {{ redColor }}">{{ answer.score }}</span>
  205.                                         </div>
  206.                                     </div>
  207.                                 </div>
  208.                             </div>
  209.                         </div>
  210.                     </div>
  211.                 </div>
  212.             {% endfor %}
  213.         </div>
  215.     </div>
  217.     <div class="row">
  218.         <div class="col-12 center"  style="margin-bottom: 100px;">
  219.             <hr>
  220.             {% if evaluation.status == 'FINISHED' %}
  221.                 <button id="btnGoBack" class="btn btn-primary"><i class="fa fa-arrow-left" aria-hidden="true"></i> Go back</button>
  222.             {% elseif evaluation.status == 'IN_PROCESS' %}
  223.                 <button id="btnCloseEvaluation" class="btn btn-primary"><i class="fa fa-floppy-o" aria-hidden="true"></i> Submit grade</button>
  224.             {% endif %}
  225.         </div>
  226.     </div>
  228. {% endblock body %}
  231. {% block add2body %}
  232.     <div id="preloaderView">
  233.         <div style="position: absolute; top: 18%; left: 0%; width: 100%; text-align: center;">
  234.             <img src="/libraries/images/logo-1.png" style="">
  235.         </div>
  236.         <div class="spinner-border text-primary" style="position: fixed; top: 40%; left: 48%;"></div>
  237.         <div id="message" class="center" style="position: absolute; top: 55%; width: 100%;">Loading test...</div>
  238.     </div>
  240.     <div id="closeEvaluation" class="modal" tabindex="-1" role="dialog">
  241.         <div class="modal-dialog" role="document">
  242.             <div class="modal-content">
  243.                 <div class="modal-header">
  244.                     <h5 class="center modal-title wdFull">Saving Answers</h5>
  245.                     <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  246.                         <span aria-hidden="true">&times;</span>
  247.                     </button>
  248.                 </div>
  249.                 <div class="modal-body">
  250.                     <p class="center" style="font-size: 15pt;">
  251.                         We have saved the answers <br> Thanks Teacher!!!
  252.                     </p>
  253.                 </div>
  254.                 <div class="modal-footer">
  255.                     <button type="button" class="btn btn-primary" data-dismiss="modal">Aceptar</button>
  256.                 </div>
  257.             </div>
  258.         </div>
  259.     </div>
  260. {% endblock add2body %}
  263. {% block javascripts %}
  264.     {{ parent() }}
  266.     <script>
  268.         document.onreadystatechange = function () {
  269.             var state = document.readyState
  271.             if (state == 'complete') {
  272.                 setTimeout(function(){
  273.                     $('#preloaderView').animate({opacity: 0}, 1000, function () {
  274.                         $('#preloaderView').hide();
  275.                         $('#preloaderView').css({opacity: 1});
  276.                     });
  277.                 }, 800);
  278.             }
  279.         };
  281.         $(document).ready(function () {
  282.             $('.postRevision input').focusin(function () {
  283.                 $(this).select();
  284.             });
  286.             $('.postRevision input').change(function () {
  287.                 let myVal = $(this).val();
  288.                 
  289.                 // mostrar alerta si el valor ingresado el mayor al permitido
  290.                 if($(this).data('maxscore') < myVal) {
  291.                     $(this).val('0');
  292.                     $(this).closest('div').find('div.validate').show();
  293.                     return;
  294.                 }
  295.                 
  296.                 $(this).closest('div').find('div.validate').hide();
  297.                 
  298.                 let answerId = $(this).closest('div.postRevision').data('answer');
  299.                 let isAudio = $(this).data('audio');
  300.                 
  301.                 if(isAudio == 1) {
  302.                     let mxpoint = $(this).closest('div.postRevision').data('maxpoint');
  303.                     myVal = myVal * mxpoint / 100;
  304.                 }
  306.                 let data = {
  307.                     scoreVal: myVal,
  308.                     observation: $(this).data('observation'),
  309.                     maxscore: $(this).data('maxscore'),
  310.                     revisionid: $(this).data('revisionid'),
  311.                     answerId: answerId
  312.                 };
  314.                 savePostRevision(data, $(this));
  315.                 
  316.                 let arrInputs = $(this).closest('div.postRevision').find('input');
  318.                 let sumInputs = 0;
  319.                 arrInputs.each(function(i, o) {
  320.                     let inputVal = ($(o).val() * 1);
  321.                     if($(o).data('audio') == 1) {
  322.                         let mxpoint = $(o).closest('div.postRevision').data('maxpoint');
  323.                         inputVal = inputVal * mxpoint / 100;
  324.                     }
  325.                     sumInputs += inputVal;
  326.                 });
  327.                 
  328.                 let mycolor = '#ffd8db';
  329.                 if(sumInputs > 0) {
  330.                     mycolor = '#00ec36';
  331.                 }
  332.                 // mostrar el puntaje dado
  333.                 $(this).closest('.answers').find('span.answerScore').text(sumInputs).css('background-color', mycolor);
  334.             });
  336.             $('#btnGoBack').click(function() {
  337.                 history.back();
  338.             });
  341.             $('#btnCloseEvaluation').click(function() {
  342.                 
  343.                 $('#preloaderView #message').text('Sendig the grade...');
  344.                 $('#preloaderView').show();
  346.                 // cambiar de estado la evaluacion y calificar los ponderados por habilidad
  347.                 let data = {
  348.                     evaluationId: $('#myEvaluation').data('evaluationid'),
  349.                     studentId: $('#myStudent').data('studentid'),
  350.                     moduleId: $('#myModule').data('moduleid')
  351.                 };
  353.                 $.ajax({
  354.                     method: 'post', url: '{{ path('teacher_close_evaluation') }}', data: data,
  355.                     success: function (data) {
  356.                         // mostrar mensaje para cerrar la pagina
  357.                         $('#preloaderView #message').text('Data was sent. Thanks');
  358.                         setTimeout(function(){
  359.                             $('#preloaderView').animate({opacity: 0}, 1000, function() {
  360.                                 $('#closeEvaluation').modal('show');
  361.                                 $('#preloaderView').hide();
  362.                             });
  363.                         }, 2000);
  364.                     }
  365.                 });
  366.             });
  368.             $('#closeEvaluation').on('hide.bs.modal', function (e) {
  369.                 // redirigir a la pagina dashboard del estudiante
  370.                 var studentID = $('#myStudent').data('studentid');
  371.                 window.location.href = "/admin/student/modules/" + studentID;
  372.             });
  374.             function savePostRevision(data, objInput) {
  375.                 $(objInput).prop("disabled", true);
  376.                 let sibSpiner = $(objInput).closest('div').find('i.fa-spinner');
  377.                 $(sibSpiner).show();
  379.                 $.ajax({
  380.                     method: 'post', url: '{{ path('teacher_save_post_revision') }}', data: data,
  381.                     success: function (data) {
  382.                         $(objInput).data('revisionid', data.revisionid);
  383.                         $('#evaluationScore').text(data.evaluationScore);
  384.                         $(objInput).prop( "disabled", false);
  385.                         $(sibSpiner).hide();
  386.                     }
  387.                 });
  388.             }
  390.         });
  391.     </script>
  393. {% endblock javascripts %}