@extends('cultural.examen1stGrade.plantilla1stGrade')
@section('breadcrumb')

@endsection
@section('titulo', "$examen->nombre")
@section('contenido')
@section('scripts')
<script>
globalId = '0';
    </script>
@endsection
<div class="col-sm-12">
    <h2 style="font-size: 25px;">MIRÁ EL DIBUJO. CONTÁ Y COMPLETA LAS PREGUNTAS CON LAS OPCIONES CORRECTAS <br> (4 MARKS)</h2>
    <audio src="/cultural/audio/1stGrade-Pregunta4.mp3" autoplay controls></audio>
    <div class="text-left mt-5">
    <img src="/cultural/images/casa_parte de abajo.png" width="100%">
    </div>
</div>
<div class="col-sm-12 mt-5" id="pregunta4grade">
<div class="opciones mb-5">
<ul class="mt-3">
<li>APPLES</li>
<li>TOMATOES</li>
<li>POTATOES</li>
<li>ONIONS</li>
</ul>
</div>
<form action="" method="POST" id="form">
<input type="hidden" name="_token" value="{{ csrf_token() }}"></input>
<input type="hidden" id="id" name="id" class="form-control" value="{{$globalId}}" required>

<ul>
    <li><strong>17.</strong> HOW MANY <input type="text" id="7_17" name="7_17" onchange="guardarRespuesta();" value="">
    ARE THERE IN THE KITCHEN? THERE ARE FOUR.</li>
    <li><strong>18.</strong> HOW MANY <input type="text" id="7_18" name="7_18" onchange="guardarRespuesta();" value="">
    ARE THERE IN THE LIVING ROOM? THERE ARE TWO. </li>
    <li><strong>19.</strong> HOW MANY <input type="text" id="7_19" name="7_19" onchange="guardarRespuesta();" value="">
    ARE THERE IN THE KITCHEN? THERE IS ONE.</li>
    <li><strong>20.</strong> HOW MANY <input type="text" id="7_20" name="7_20" onchange="guardarRespuesta();" value="">
    ARE THERE? THERE ARE THREE. </li>
   
    
</ul>
</form>
</div>
<div class="container pt-5">
@if(isset($docente) && $docente->fk_idusuario == Session::get('usuario_id'))
<div class="row">
   
        <div class="col-6 text-left">
            <a href="/examen1stgrade/pregunta3/{{$examen->idexamen}}/{{$alumno->idalumno}}" class="actividad"><i class="fas fa-arrow-left"></i>  Actividad anterior</a>
        </div>
        <div class="col-6 pl-2 text-right">
            <a href="/examen1stgrade/pregunta5/{{$examen->idexamen}}/{{$alumno->idalumno}}" class="btn btn-cultural"> SIGUIENTE</a>
        </div>
    </div>
@else
    <div class="row">
   
        <div class="col-6 text-left">
            <a href="/examen1stgrade/pregunta3/{{$examen->idexamen}}" class="actividad"><i class="fas fa-arrow-left"></i>  Actividad anterior</a>
        </div>
        <div class="col-6 pl-2 text-right">
            <a href="/examen1stgrade/pregunta5/{{$examen->idexamen}}" class="btn btn-cultural"> SIGUIENTE</a>
        </div>
    </div>
    @endif
  
</div>
<script>
        function guardarRespuesta() {
        formulario = $("form").serializeArray();
        $.ajax({
            type: "GET",
            dataType: 'json',
            url: "/examen/guardarRespuesta",
            data: {
                formulario: formulario,
                idexamen: globalId,
                _token: "{{ csrf_token() }}"
            },
        }).done(function(data) {

        });
    }
    function tiempoExamen(){
    var salida = document.getElementById("tiempo"),
    minutos = 0,
    segundos = 0,
    intervalo = setInterval(function(){
        if (--segundos < 0){
            segundos = 59;
            minutos--;
        }
        salida.innerHTML = "Tiempo restante: "+(minutos < 10 ? "0" + minutos : minutos) + ":" + (segundos < 10 ? "0" + segundos : segundos);
        if (!minutos && !segundos && minutos > 0 && segundos > 0)
            clearInterval(intervalo);
         if (segundos == 0 && minutos == 0){
          fAbrirModalTiempo();
          setTimeout(window.location.href = "/logout", 100000);
         }
    }, 1000);
    }
    
    function fAbrirModalTiempo(){
      $('#modalTiempo').modal({backdrop: 'static', keyboard: false});
      $.ajax({
            type: "GET",
            url: "/examen/finalizado",
            data: {
                idexamen: globalId
            },
            async: true,
            dataType: "json",
            success: function(data) {
            
            }
        });

    }
    
</script>
@endsection