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


{% block content %}

<link rel="stylesheet" href="{% static 'global/Bootstrap/css/bootstrap.min.css' %}"/>
<link rel="stylesheet" href="{% static 'global/MusicPage.css' %}" />
<link rel="stylesheet" href="{% static 'global/instructions.css' %}"/>
<div class="instructions">
    <p>
        Please listen to the following two songs. After you are done listening, move the slider to show your relative preference. The closer you slide it to one of the two songs, the stronger is your expressed preference for this song over the other.
    </p>
</div>

<div class='container-fluid'>
    <div class='row'>
        <div class='col-md-4'>
            <audio controls controlsList="nodownload">
            <source
            src = "{% static 'global/BSong2.mp3' %}"
            type = "audio/mpeg" >
            </audio>
        </div>
        <div class='col-md-4'>
        	{{form.level2}}
        </div>
        <div class='col-md-4'>
	        <audio controls controlsList="nodownload">
	        <source
	            src = "{% static 'global/ESong2.mp3' %}"
	            type = "audio/mpeg" >
	        </audio>
        </div>
    </div>
</div>
<div class='container-fluid'>
	<div class='row'>
		<div class='col-md text-center'>
			{% next_button %}
		</div>
	</div>
</div>


{% endblock %}