{% extends "global/Page.html" %}
{% load otree static %}

{% block styles %}
    <link href="{% static 'global/empty.css' %}" rel="stylesheet">
{% endblock %}

{% block title %}
    Part 1 - Question
{% endblock %}

{% block content %}

<style>
    .otree-timer {
        display: none;
    }
    p.time {
      background-color: white;
      color: grey;
      text-align: right;
    }
</style>

<script>
    $(function () {
        $('.otree-timer__time-left').on('update.countdown', function (event) {
            if (event.offset.totalSeconds === 25) {
                $('.otree-timer').show();
            }
        });
    });
</script>

    <p class="time">
        Time: {{ time }} seconds. 
    </p>


<p>
    In the following audio clip, you can hear a human voice pronouncing a word.
    This is an auditory illusion, and people do not agree on what they hear. 
    You can hear one thing or another based on many variables.<br>
    <br>
    Please, press the play button and listen to the audio clip. <br>
    <br>
    <audio controls>
        <source src="{% static 'YannyLaurel.mp3' %}" type="audio/mpeg">
      Your browser does not support the audio element. Chose the first option in the question below. 
      </audio>
    
      {% if player.w_audio == 1 %}
            {%  formfield player.audio1 label = "Which word do you think is more likely pronounced?"  %} <br>
      {% else %}
            {%  formfield player.audio2 label = "Which word do you think is more likely pronounced?"  %} <br>
      {% endif %}      

</p>

<p>
    Please click "Next" to continue.
</p>
    {% next_button %}

{% endblock %}