@extends('cultural.examen2ndGrade.plantilla2ndGrade')
@section('breadcrumb')

@endsection
@section('titulo', "$examen->nombre")
@section('contenido')
@section('scripts')
<script>
globalId = '0';
    </script>
@endsection
<div class="col-12">
    <h2 style="font-size: 25px;">MIRÁ EL DIBUJO. LEÉ LAS ORACIONES DEBAJO DEL DIBUJO Y ELEGÍ LA PALABRA CORRECTA <br>(5 PUNTOS)</h2>
    <audio src="/cultural/audio/2ndGrade-Pregunta1.mp3" autoplay controls></audio>
    <div class="text-center pt-4">
    <img src="/cultural/images/Ciudad (2) (1).png" width="100%">
    </div>
</div>
<div class="col-12 mt-5" id="pregunta1grade2nd">
<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>1.</strong> IT IS A 
            <select name="12_1" id="12_1">
            <option value selected> </option>
            <option value="1">SUNNY </option>
            <option value="2">CLOUDY </option>
            </select> DAY.</li>
    <li><strong>2.</strong> THERE IS A 
    <select name="12_2" id="12_2">
    <option value selected> </option>
            <option value="1">RED </option>
            <option value="2">BLUE</option>
            </select> BUS IN THE STREET.</li>
    <li><strong>3.</strong> THERE ARE
    <select name="12_3" id="12_3">
    <option value selected> </option>
            <option value="1">FIVE</option>
            <option value="2">TWO</option>
            </select>  BOYS IN THE PARK.</li>
    <li><strong>4.</strong> THERE IS A 
    <select name="12_4" id="12_4">
    <option value selected> </option>
            <option value="1">BANK  </option>
            <option value="2">SCHOOL </option>
            </select> IN TOWN.</li>
    <li><strong>5.</strong> THERE IS A
    <select name="12_5" id="12_5">
    <option value selected> </option>
            <option value="1">PARROT </option>
            <option value="2">FISH </option>
            </select> AT THE PET SHOP.</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-12 pl-2 text-right">
            <a href="/examen2ndgrade/pregunta2/{{$examen->idexamen}}/{{$alumno->idalumno}}" class="btn btn-cultural"> SIGUIENTE</a>  
        </div>

    </div>
    @else
    <div class="row">
        <div class="col-12 pl-2 text-right">
            <a href="/examen2ndgrade/pregunta2/{{$examen->idexamen}}" class="btn btn-cultural"> SIGUIENTE</a>  
        </div>

    </div>
    @endif
    <div class="row">
  
</div>

@endsection
<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 fAbrirModalTiempo(){
      $('#modalTiempo').modal({backdrop: 'static', keyboard: false});
      $.ajax({
            type: "GET",
            url: "/examen/finalizado",
            data: {
                idexamen: globalId
            },
            async: true,
            dataType: "json",
            success: 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);
    }
    
</script>