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

{% block title %}
 
{% endblock %}

{% block scripts %}

<script src="{% static 'attention/js/prev_next_button.js' %}"></script>
<script>


       $.getJSON('https://api.ipify.org?format=jsonp&callback=?', function(data) {
        document.getElementById('ip').value = JSON.stringify(data, null, 2);
});
</script> 
{% endblock %}


{% block styles %}

<link href="{% static 'attention/css/custom.css' %}" rel="stylesheet">

{% endblock %}


{% block content %}

<div id="warning">
Please use another browser. Internet Explorer is not supported. 
</div>

<div id="mobile">
        Please use a non-mobile device.
</div>
        


<div id="instructions">
<!-- Tab navigation -->
<ul class="nav nav-tabs fixed-top navbar-light bg-light justify-content-center" id="myTab" role="tablist">


<li class="nav-item">
<a class="nav-link active" id="part1-tab" data-bs-toggle="tab" href="#part1" role="tab" aria-controls="part1" onclick="topFunction()"> Introduction
</a>
</li>
<li class="nav-item">
<a class="nav-link" id="part2-tab" data-bs-toggle="tab" href="#part2" role="tab" aria-controls="part2" onclick="topFunction()">The employee decides how many winning balls to buy</a>
</li>


<li class="nav-item">
<a class="nav-link" id="part3-tab" data-bs-toggle="tab" href="#part3" role="tab" aria-controls="part3" onclick="topFunction()">The supervisor decides the bonus for the employee</a>
</li>


<li class="nav-item">
<a class="nav-link" id="part5-tab" data-bs-toggle="tab" href="#part5" role="tab" aria-controls="part5" onclick="topFunction()">Payoff summary</a>
</li>

</ul>
<br>
<br>


<!-- Tab content -->
<div class="tab-content" id="myTabContent">

<div class="tab-pane show active" id="part1" role="tabpanel" aria-labelledby="part1-tab">


<div class="card-header bg-transparent mainheader" >
 <h3 class="card-title font-weight-bold mt-3 mb-3">Introduction
 </h3>
</div>
<p>Page 1</p>
<button onclick="topFunction()" type="button" class="nexttab btn-primary btn next">Next</button>
</div>

<div class="tab-pane" id="part2" role="tabpanel" aria-labelledby="part2-tab">


<div class="card-header bg-transparent mainheader" >
 <h3 class="card-title font-weight-bold mt-3 mb-3"> The employee decides how many winning balls to buy </h3>
</div>
<p>Page 2</p>

<button onclick="topFunction()" type="button" class="prevtab btn-primary btn back">Back</button>
<button onclick="topFunction()" type="button" class="nexttab btn-primary btn next">Next</button>
</div>





<div class="tab-pane" id="part3" role="tabpanel" aria-labelledby="part3-tab">
 

<div class="card-header bg-transparent mainheader" >
 <h3 class="card-title font-weight-bold mt-3 mb-3">The supervisor decides the bonus for the employee</h3>
</div>


<p>Page 3</p>
</br>

<button onclick="topFunction()" type="button" class="prevtab btn-primary btn back">Back</button>
<button onclick="topFunction()" type="button" class="nexttab btn-primary btn next">Next</button>

</div>







<div class="tab-pane" id="part5" role="tabpanel" aria-labelledby="part5-tab">
 

<div class="card-header bg-transparent mainheader" >
 <h3 class="card-title font-weight-bold mt-3 mb-3">The payoff summary</h3>
</div>
<p>Page 4</p>

<button onclick="topFunction()" type="button" class="prevtab btn-primary btn back">Back</button>
<button class="nexttab btn-primary btn next">Next</button>

</div>

</div>

</div>

</body>


{% endblock %}