@extends('cultural.examen1stJuniors.plantilla1stJuniors')
@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/1stJuniors-Pregunta2.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;">
            <strong>Reporter </strong> Hello Aisha. Can I ask you some questions for the school magazine? <br>
            <strong>Aisha </strong> Of course! <br>
            <strong>Reporter </strong> Have you got any brothers and sisters?<br>
            <strong>Aisha </strong> No, I haven't. I'm an only child.<br>
            <strong>Reporter </strong> 6.<select name="6_6" id="6_6" 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>
        </select> <br>
            <strong>Aisha </strong> Yes, we live in a small house.<br>
            <strong>Reporter </strong> 7.<select name="6_7" id="6_7" 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>
        </select> <br>
            <strong>Aisha </strong> My mum works in a supermarket and my dad is a mechanic<br>
            <strong>Reporter </strong> 8.<select name="6_8" id="6_8" 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>
        </select> <br>
            <strong>Aisha </strong> The piano and I can sing very well, too! <br>
            <strong>Reporter </strong> 9.<select name="6_9" id="6_9" 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>
        </select> <br>
            <strong>Aisha </strong> We are practicing for the next concert. <br>
            <strong>Reporter </strong> 10.<select name="6_10" id="6_10" 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>
        </select> <br>
            <strong>Aisha </strong> Yes! I love swimming. <br>
            
        </p>
    </form>
</div>
<div class="col-sm-6">
    <h4 style="color: #8B0000;">Aisha is being interviewed for the school magazine. Match the questions (1 - 5) with the answers (A – E)</h4>

    <p><strong>A. </strong>Do you live with your parents? </p>

    <p><strong>B. </strong>Do you like sports?  </p>

    <p><strong>C. </strong>Where do your parents work?  </p>

    <p><strong>D. </strong>Which musical instrument can you play?  </p>

    <p><strong>E. </strong>What are you doing now?  </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="/examen1stjunior/pregunta1/{{$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/pregunta3/{{$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/pregunta1/{{$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/pregunta3/{{$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) {
            
            }
        });
    }