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

{% block title %}
    Instructions
{% endblock %}

{% block content %}

<b>The following are screenshots of the software that administers the game</b>

<img src="{% static "minimum_effort_game/screenshot1.png" %}" style="border-style: solid; border-width: 4px;"/>
<img src="{% static "minimum_effort_game/screenshot2.png" %}" style="border-style: solid; border-width: 4px;"/>
<img src="{% static "minimum_effort_game/screenshot3.png" %}" style="border-style: solid; border-width: 4px;"/>
<img src="{% static "minimum_effort_game/screenshot4.png" %}" style="border-style: solid; border-width: 4px;"/>

<p></p>


<div id="next">
    {% next_button %}
</div>

<div style="display: none">
    {% formfield player.timeonpage_Instructions4 %}
</div>

<script>
start=new Date().getTime()
timebox=document.getElementById("id_timeonpage_Instructions4")

function getPageTime(){
    pagetime=(new Date().getTime() - start)/1000
    return pagetime;
}

function compute_page_vals(){
    timebox.value=getPageTime()
}

document.getElementById("next").addEventListener("click", compute_page_vals);
</script>


{% endblock %}