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

{% block title %}
White and black balls
{% endblock %}

{% block content %}
<div class="row my-3 bg-light px-3 py-3 rounded border">
<div class="col">
    <div class="row">
        <div class="col">    
            <p>
                <strong>
                Your first task will be to instruct the computer about  
                how to take a single risk repeatedly by "decoloring a ball triangle."
                </strong> 
                Your decoloring options –
                white and black balls – instruct the computer
                as follows:
            </p>

            <ul>
                <li>
                    If a <strong>white ball</strong> (like 
                    <button type="button" class="ball" 
                        style="
                            flex : 1;
                            width: 15px;
                            height: 15px;
                            border-radius: 50%;
                            border: 0.5px solid black;
                            background-color: white;
                            display: inline-block;
                            color: transparent;
                        " disabled
                    ></button >) 
                    is reached, the computer continues risk-taking.
                </li>
                <li> 
                    If a <strong>black ball</strong> (like 
                    <button type="button" class="ball" 
                        style="
                            flex : 1;
                            width: 15px;
                            height: 15px;
                            border-radius: 50%;
                            border: 0.5px solid black;
                            background-color: black;
                            display: inline-block;
                            color: transparent;
                        " disabled
                    ></button >) 
                    is reached, the computer stops risk-taking. 
                </li>
            </ul>
            
            <p>
                Your bonus for the decoloring task equals the accumulated earnings 
                at the ball at which risk-taking (following your instructions) stops, plus an endowment.
                The endowment ensures 
                that your bonus is always positive 
                (but your accumulated earnings can be negative).
            </p>
            <p>
                <strong>
                Please resolve the single risks below.
                </strong>
            </p>
        </div>
    </div>

    <!-- REACT component loaded here -->
    <div class="component-container"></div>

    <div class="row" style="margin-top:10px;">
        <div class="col">
            <button id="next_page_btn" class="btn btn-primary px-3 d-none">
                How do I instruct the computer to stop or continue risk-taking?
            </button>
        </div>
    </div>

</div>
</div>   

{% if testing %}
    <button id="skipBtn" class="btn btn-secondary px-3">
    Skip for testing</button>
{% endif %}

<!--Load Components-->
<script type="text/babel" src="{% static 'js/basicStopExplain.js' %}"></script>
<script type="text/babel" src="{% static 'js/ballTriangle.js' %}"></script>

<script type="text/babel">
    ReactDOM.render(<BasicStopExplain
        simulationCompleted = {() => {simulationCompleted()}}
    />, document.querySelector('.component-container'))

    function simulationCompleted() {
        setTimeout(() => {
            document.getElementById("next_page_btn").classList.remove("d-none")
            document.getElementById("next_page_btn").removeAttribute("disabled")
        }, 500)
    }
</script>

<img src="{% static 'img/IndividualRisk.png' %}" style="display:none;"/> <!--Needs to be loaded to be included-->


{% endblock %}