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

{% block title %}
    Round {{ subsession.round_number }}, Stage 2
{% 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>
{% if player.marginal_cost == 1 %}
<p>Your cost coefficient is <b>{{ player.marginal_cost }}</b>, and therefore your cost function is \(x^2 \).</p>
{% else %}
<p>Your cost coefficient is <b>{{ player.marginal_cost }}</b>, and therefore your cost function is \({{ player.marginal_cost }}x^2 \).</p>
{% endif %}
{% if player.competitor_cost == 1 %}
<p>Your competitor's cost coefficient is <b>{{ player.competitor_cost }}</b>, and therefore his/her cost function is \(x^2 \). </p>
{% else %}
<p>Your competitor's cost coefficient is <b>{{ player.competitor_cost }}</b>, and therefore his/her cost function is \({{ player.competitor_cost }}x^2 \).</p>
{% endif %}

<p>Prize for the winner of this round is  <b>{{ award2 }}</b>。 </p>

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

<p>
    <br>
</p>
<button onclick="calculates(effort2)" class="btn btn-info btn-large" type = "button">Calculate your cost for this stage</button> = {{player.marginal_cost}} \(\times\) (<span id="effort2_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 %}
{% if player.marginal_cost == 6 %} <input type="text" id="result3"   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));
	$("#result3").attr("value",6*parseInt(a.value)*parseInt(a.value));
    document.getElementById("effort2_print").innerHTML=a.value;
};
</script>

{% endblock %}