@extends('cultural.examen1stJuniorsStarter.plantilla1stjuniorsStarter')
@section('breadcrumb')

@endsection
@section('titulo', "$examen->nombre")
@section('contenido')
@section('scripts')
<script>
    globalId = '0';
    </script>
@endsection
<div class="col-sm-7">
    <h2 style="font-size: 25px;">COMPLETE THE DIALOGUE (10 MARKS)</h2>
    <audio src="/cultural/audio/1stJuniorsStarter-Pregunta4.mp3" autoplay controls></audio
    <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>
 
    <p><strong>Fran:</strong> What's your favourite thing?</p>
    <p><strong>Alex(25):</strong>
        <select name="11_25" id="11_25" onchange="guardarRespuesta();">
            <option value="A">A</option>
            <option value="B">B</option>
            <option value="C">C</option>
            <option value="D">D</option>
            <option value="E">E</option>
            <option value="F">F</option>
        </select></p>
    <p><strong>Fran:</strong> Is it new?</p>
    <p><strong>Alex(26):</strong>
        <select name="11_26" id="11_26" onchange="guardarRespuesta();">
            <option value="A">A</option>
            <option value="B">B</option>
            <option value="C">C</option>
            <option value="D">D</option>
            <option value="E">E</option>
            <option value="F">F</option>
        </select></p>
    <p><strong>Fran:</strong> What colour is it? </p>
    <p><strong>Alex(27):</strong>
        <select name="11_27" id="11_27" onchange="guardarRespuesta();">
            <option value="A">A</option>
            <option value="B">B</option>
            <option value="C">C</option>
            <option value="D">D</option>
            <option value="E">E</option>
            <option value="F">F</option>
        </select></p>
    <p><strong>Fran:</strong> Has it got a camera?</p>
    <p><strong>Alex(28):</strong>
        <select name="11_28" id="11_28" onchange="guardarRespuesta();">
            <option value="A">A</option>
            <option value="B">B</option>
            <option value="C">C</option>
            <option value="D">D</option>
            <option value="E">E</option>
            <option value="F">F</option>
        </select></p>
    <p><strong>Fran:</strong> Can you listen to music?</p>
    <p><strong>Alex(29):</strong>
        <select name="11_29" id="11_29" onchange="guardarRespuesta();">
            <option value="A">A</option>
            <option value="B">B</option> 
            <option value="C">C</option>
            <option value="D">D</option>
            <option value="E">E</option>
            <option value="F">F</option>
        </select></p>
    <p><strong>Fran:</strong> Is it expensive?</p>
    <p><strong>Alex(30):</strong>
        <select name="11_30" id="11_30" onchange="guardarRespuesta();">
            <option value="A">A</option>
            <option value="B">B</option> 
            <option value="C">C</option>
            <option value="D">D</option>
            <option value="E">E</option>
            <option value="F">F</option>
        </select></p>
    </form>
</div>
<div class="col-sm-5 py-5 mt-5" id="pregunta4junstar">
   
   <ul>
       <li><strong>(A): </strong>  No, it hasn't. </li>
       <li><strong>(B):</strong>  No, it's old</li>
       <li><strong>(C):</strong>  Yes, I can.</li>
       <li><strong>(D):</strong>  My cellphone.</li>
       <li><strong>(E):</strong>  White. </li>
       <li><strong>(F):</strong>  No, it isn't. </li>
   </ul>


</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="/examen1stjunior-starter/pregunta3/{{$examen->idexamen}}/{{$cliente->id}}" class="actividad"><i class="fas fa-arrow-left"></i>  Actividad anterior</a>
        </div>
        <div class="col-6 pl-2 text-right">
            <a href="/examen1stjunior-starter/pregunta5/{{$examen->idexamen}}/{{$cliente->id}}" class="btn btn-cultural"> SIGUIENTE</a>
        </div>
    </div>
    @else
    <div class="row">
        <div class="col-6 text-left">
            <a href="/examen1stjunior-starter/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="/examen1stjunior-starter/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 fAbrirModalTiempo(){
      $('#modalTiempo').modal({backdrop: 'static', keyboard: false});
      $.ajax({
            type: "GET",
            url: "/examen/finalizado",
            data: {
                idexamen: globalId
            },
            async: true,
            dataType: "json",
            success: function(data) {
            
            }
        });
    }