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

{% block title %}
    Round {{ subsession.round_number }} 

{% 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>


<p><b>FOR THIS ROUND,</b></p>
<p>You are in the group 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 your group has cost coefficient <b>3</b>, and therefore cost function \(3x^2 \).<br>
</p>
{% 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 your group has cost coefficient <b>1</b>, and therefore cost function \(x^2 \).<br>
</p>
{% endif %}

<p>
    In this round, what is your effort level? <b>[0-100]</b>
</p>
{{ form.effort.errors }}
Your effort \(x \) = <input type="number" name="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 round</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 %}