@extends('cultural.examen4thJuniors.plantilla4thJuniors')
@section('breadcrumb')

@endsection
@section('titulo', "$examen->nombre")
@section('contenido')
@section('scripts')
<script>
globalId = '0';
    </script>
@endsection
<div class="col-sm-6">
    <h2 style="font-size: 25px;">COMPLETE THE DIALOGUE (5 MARKS)</h2>
    <audio src="/cultural/audio/4th Juniors - Pregunta 5.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 style="text-align: justify; font-size: 15px; line-height: 30px;">
        <strong>Tony </strong> I want to buy a guitar. <br>
        <strong>Shop Assistant </strong>How much money can you spend? <br>
        <strong>Tony </strong> I've got $ 300<br>
        <strong>Shop Assistant </strong> 
        21. <select id="16_21" name="16_21" onchange="guardarRespuesta();">
        <option value selected></option>
        <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="E">F</option>
        </select>
        <br>
        <strong>Tony </strong> Great idea! What do you think of these two? <br>
        <strong>Shop Assistant </strong> 
        22. <select id="16_22" name="16_22" onchange="guardarRespuesta();">
        <option value selected></option>
        <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="E">F</option>
        </select><br>
        <strong>Tony </strong> All kinds of music. What should I do? <br>
        <strong>Shop Assistant </strong> 
        23. <select id="16_23" name="16_23" onchange="guardarRespuesta();">
        <option value selected></option>
        <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="E">F</option>
        </select><br>
        <strong>Tony </strong> Is it expensive? <br>
        <strong>Shop Assistant </strong> 
        24. <select id="16_24" name="16_24" onchange="guardarRespuesta();">
        <option value selected></option>
        <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="E">F</option>
        </select><br>
        <strong>Tony </strong> Good idea! Yes, I'll do that. Thanks <br>
        <strong>Shop Assistant </strong> 
        25. <select id="16_25" name="16_25" onchange="guardarRespuesta();">
        <option value selected></option>
        <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="E">F</option>
        </select> <br>

    </p>
    </form>
</div>
<div class="col-sm-6">
    <h4 style="color: #8B0000;">Match the questions (1 -5) with the answers <br>
        (A – F). There is one extra letter which you do not need to use.</h4><br>

    <p><strong>A. </strong>They both look fine. What kind of music would you like to play? </p>

    <p><strong>B. </strong>No problem. </p>

    <p><strong>C. </strong> I think you should get an electric guitar.</p>

    <p><strong>D. </strong>You should buy a second – hand guitar. </p>

    <p><strong>E. </strong>Yes, it's more expensive but you could join a band.</p>

    <p><strong>F. </strong>Do you like pop music? </p>

</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="/examen4thjunior/pregunta4/{{$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="/examen4thjunior/pregunta6/{{$examen->idexamen}}/{{$cliente->id}}" class="btn btn-cultural"> SIGUIENTE</a>
        </div>
    </div>
@else
    <div class="row">
        <div class="col-6 text-left">
            <a href="/examen4thjunior/pregunta4/{{$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="/examen4thjunior/pregunta6/{{$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) {
            
            }
        });
    }