{{ extends 'global/Page.html' }}
{{ block title }}Audio 1 von 2{{ endblock }}

{{ block content }}

<input type="hidden" name="ms_spent_audio_1" id="ms_spent_audio_1" />

<p>
    Bitte hören Sie sich die erste Audiodatei an und beantworten Sie im Anschluss die Frage.
</p>

<div class="audiowrapper">
    <audio controls>
        <source src="{{ media_url }}" type="audio/mp3">
        Ihr Browser unterstützt leider kein HTML5 Audio.
    </audio>
</div>

{{ formfield 'audio_to_video_1' }}

<button class='otree-btn-next btn btn-primary' id='next' onclick='nextPage()' disabled>Weiter</button>

<script>
    var loadTime = 0;

    window.onload = function () { // page loaded including media
        loadTime = Date.now();

        const media = document.querySelector('audio');
        media.addEventListener('ended', (event) => {
            const button = document.getElementById('next');
            button.disabled = false;
        });
    };

    function nextPage() {
        document.getElementById('ms_spent_audio_1').value = Date.now() - loadTime;
    };
</script>

{{ endblock }}