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

{% block title %}
    Round {{ subsession.round_number }}, Stage 1

{% endblock %}

{% block content %}
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

{% if player.subgroup == 1 %}
<p><b>FOR THIS ENTIRE ROUND,</b></p>
<p>You are in the subgroup with <b>DIFFERENT</b> cost coefficients of both participants.</p>
{% if player.marginal_cost == 1 %}
<p>Your cost coefficient is <b>1</b>, and therefore total cost function is \(x^2 \).<br>
The other participant in you subgroup has cost coefficient <b>3</b>, and therefore cost function \(3x^2 \). <br>
{% endif %}
{% if player.marginal_cost == 3 %}
<p>Your cost coefficient is <b>3</b>, and therefore total cost function is \(3x^2 \).<br>
The other participant in you subgroup has cost coefficient <b>1</b>, and therefore cost function \(x^2 \). <br>
{% endif %}
<p></p>
<p>The participants in the other subgroup both have <b>SAME</b> cost coefficient, and therefore the same cost function.<br>
In particular, both participants in the other subgroup have cost coefficient <b>1</b>, and therefore cost function \(x^2 \).</p>
{% endif %}

{% if player.subgroup == 2 %}
<p><b>FOR THIS ENTIRE ROUND,</b></p>
<p>You are in the subgroup with <b>SAME</b> cost coefficient of both participants.</p>
<p>Your cost coefficient is <b>1</b>, hence the total cost for your effort level \(x \) is calculated as \(x^2 \).<br>
The other participant in your subgroup also has cost coefficient <b>1</b>, and exactly the same total cost function as you.</p>
<p></p>
<p>The participants in the other subgroup both have <b>DIFFERENT</b> cost coefficients, and therefore different cost functions.<br>
In particular,<br>
One participant has cost coefficient <b>1</b>, and therefore cost function \(x^2 \);<br>
One participant has cost coefficient <b>3</b>, and therefore cost function \(3x^2 \);<br>
</p>
{% endif %}

<!--{% formfield player.effort label="In this stage, what is your effort level? <b>[0-100]</b>" %}-->
<p>
    In this stage, what is your effort level?  <b>[0-100]</b>
</p>
{{form.effort.errors}}
Your effort \(x \) = <input type="number" name="effort" id="effort"  min="0" max="100" /><b></b>

<p>
    <br>
</p>
<button onclick="calculates(effort)" class="btn btn-info btn-large" type = "button">Calculate your cost for this stage</button>  = {{player.marginal_cost}} \(\times\) (<span id="effort_print" value="\"> </span>)\(^2\)   =
{% if player.marginal_cost == 1 %} <input type="text" id="result1"   readonly size = 6> {% endif %} 
{% if player.marginal_cost == 3 %} <input type="text" id="result2"   readonly size = 6> {% endif %} 



<p>
    <br>
</p>
<button class="btn btn-primary btn-large">
    Submit your effort
</button>
<script>
function calculates(a) {
	$("#result1").attr("value",parseInt(a.value)*parseInt(a.value));
	$("#result2").attr("value",3*parseInt(a.value)*parseInt(a.value));
    document.getElementById("effort_print").innerHTML=a.value;
};
</script>
{% endblock %}