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

{% block title %}
    {{ title | safe }}
{% endblock %}

{% block content %}
<div class="card bg-light instructions">
<div class="card-body">
            <p>{{ paragraph1 | safe }}</p>
            <p>{{ paragraph2 | safe }}</p>
            <p>{{ paragraph3 | safe }}</p>
            <p>{{ paragraph4 | safe }}</p>
            <p>{{ paragraph5 | safe }}</p>
</div>
</div>
<div align="right"><input type="submit" onclick="return submitForm();" class="btn btn-primary btn-large" value="Continue"></inputbutton></div>

<!-- tabswitches & focustime -->
<script src="{% static "Power/jquery-3.3.1.js" %}"></script>
<script src="{% static "Power/detect_tabswitch.js" %}"></script>
<input type="hidden" id="tab_general_part2" name="tab_general_part2" value="0">
<input type="hidden" id="focus_general_part2" name="focus_general_part2" value="0">
<input type="hidden" id="totaltime_general_part2" name="totaltime_general_part2" value="0">
<script>
    function submitForm() {
        if($tabswitches == 0){
            $time_total = (Date.now() - $start)/1000;
            $time_focus = $time_total;
        }

        document.getElementById("tab_general_part2").setAttribute('value', $tabswitches);
        document.getElementById("focus_general_part2").setAttribute('value', $time_focus);
        document.getElementById("totaltime_general_part2").setAttribute('value', $time_total);

        return true;
    }
</script>
{% endblock %}