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

{% block title %}
<style>
.center {

  padding: 200px 0;

}



</style>
<div class="card bg-light instructions">
<div class="card-body">
<div class="center">
    {{title | safe}}

</div>
</div>
</div>
{% endblock %}

{% block content %}
            <div align="right"><input type="submit" onclick="return submitForm();" class="btn btn-primary btn-large" value="{{confirm | safe}}"></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_intro_title_part1" name="tab_intro_title_part1" value="0">
<input type="hidden" id="focus_intro_title_part1" name="focus_intro_title_part1" value="0">
<input type="hidden" id="totaltime_intro_title_part1" name="totaltime_intro_title_part1" value="0">
<script>
    function submitForm() {
        if($tabswitches == 0){
            $time_total = (Date.now() - $start)/1000;
            $time_focus = $time_total;
        }

        document.getElementById("tab_intro_title_part1").setAttribute('value', $tabswitches);
        document.getElementById("focus_intro_title_part1").setAttribute('value', $time_focus);
        document.getElementById("totaltime_intro_title_part1").setAttribute('value', $time_total);

        return true;
    }
</script>

    {% endblock %}