{{ block title }}Instructions de la tâche 2{{ endblock }}
{{ block content }}

<style>
    .otree-body {
        max-width:1280px;
         font-size: 23px;
    }
</style>

    <div class="info_box">
        <div class="header">
            <p class="formatting_header">

            </p>
        </div>
        <div class="content">
            <p class="formatting_content">
                Dans la deuxième partie de cette étude, vous déciderez comment répartir 20 boules entre deux seaux.
            Votre tâche consiste à placer chaque boule, une à une, dans l'un des deux seaux : le seau bleu
            ou le seau jaune. Les boules apparaîtront au centre de votre écran et vous pourrez les déplacer
            en cliquant et en les faisant glisser dans le seau de votre choix. Pour chaque boule que vous mettez
            dans le seau bleu, vous recevrez 0.05 €, et pour chaque boule que vous mettez dans le seau jaune,
            vous recevrez 0.10 €.
            </p>
            <p style="text-align: center; margin: 40px">
                <b> La règle de l'expérience est de mettre les boules dans le seau bleu. </b>
            </p>
            <p class="formatting_content">
                <b>Votre paiement</b> pour cette tâche sera basé sur vos décisions, et il est la somme
                des paiements des seaux bleus et jaunes. Une fois que vous avez terminé la tâche, un bouton "Suivant" sera affiché en bas de la page.

            </p>
        </div>
    </div>

    <div class="task_box">
        <div style="text-align: center; font-size:25px; margin-top: 10px">
           Balles restantes: <span id = "Value"> 20 </span>
        </div>
        <div style="margin-top: 25px; overflow: auto;">
            <div id="pos_money_bucket" style="width: 50%;">
                <div style="text-align: center; font-size:30px">
                    <p><b><span>&#8364;</span>0.10 </b></p>
                </div>
                <div>
                    <div class = "money_bucket_border">
                        <div class="bucket_background">
                            <div class="money_bucket_background">
                                <div id="money_ball_1" class="ball" style="display: none; position:absolute; bottom: 0px; left: 0px;"></div>
                                <div id="money_ball_2" class="ball" style="display: none; position:absolute; bottom: 0px; left: 50px;"></div>
                                <div id="money_ball_3" class="ball" style="display: none; position:absolute; bottom: 0px; left: 100px;"></div>
                                <div id="money_ball_4" class="ball" style="display: none; position:absolute; bottom: 0px; left: 150px;"></div>
                                <div id="money_ball_5" class="ball" style="display: none; position:absolute; bottom: 0px; left: 200px;"></div>
                                <div id="money_ball_6" class="ball" style="display: none; position:absolute; bottom: 50px; left: 0px;"></div>
                                <div id="money_ball_7" class="ball" style="display: none; position:absolute; bottom: 50px; left: 50px;"></div>
                                <div id="money_ball_8" class="ball" style="display: none; position:absolute; bottom: 50px; left: 100px;"></div>
                                <div id="money_ball_9" class="ball" style="display: none; position:absolute; bottom: 50px; left: 150px;"></div>
                                <div id="money_ball_10" class="ball" style="display: none; position:absolute; bottom: 50px; left: 200px;"></div>
                                <div id="money_ball_11" class="ball" style="display: none; position:absolute; bottom: 100px; left: 0px;"></div>
                                <div id="money_ball_12" class="ball" style="display: none; position:absolute; bottom: 100px; left: 50px;"></div>
                                <div id="money_ball_13" class="ball" style="display: none; position:absolute; bottom: 100px; left: 100px;"></div>
                                <div id="money_ball_14" class="ball" style="display: none; position:absolute; bottom: 100px; left: 150px;"></div>
                                <div id="money_ball_15" class="ball" style="display: none; position:absolute; bottom: 100px; left: 200px;"></div>
                                <div id="money_ball_16" class="ball" style="display: none; position:absolute; bottom: 150px; left: 0px;"></div>
                                <div id="money_ball_17" class="ball" style="display: none; position:absolute; bottom: 150px; left: 50px;"></div>
                                <div id="money_ball_18" class="ball" style="display: none; position:absolute; bottom: 150px; left: 100px;"></div>
                                <div id="money_ball_19" class="ball" style="display: none; position:absolute; bottom: 150px; left: 150px;"></div>
                                <div id="money_ball_20" class="ball" style="display: none; position:absolute; bottom: 150px; left: 200px;"></div>
                                <div id="money_bucket" class="bucket" ondrop="drag_drop(event)" ondragover="return false"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="pos_norm_bucket" style="width: 50%;">
                <div style="text-align: center; font-size:30px">
                    <p><b><span>&#8364;</span>0.05 </b></p>
                </div>
                <div>
                    <div class = "norm_bucket_border">
                        <div class="bucket_background">
                            <div class="norm_bucket_background">
                                <div id="norm_ball_1" class="ball" style="display: none; position:absolute; bottom: 0px; left: 0px;"></div>
                                <div id="norm_ball_2" class="ball" style="display: none; position:absolute; bottom: 0px; left: 50px;"></div>
                                <div id="norm_ball_3" class="ball" style="display: none; position:absolute; bottom: 0px; left: 100px;"></div>
                                <div id="norm_ball_4" class="ball" style="display: none; position:absolute; bottom: 0px; left: 150px;"></div>
                                <div id="norm_ball_5" class="ball" style="display: none; position:absolute; bottom: 0px; left: 200px;"></div>
                                <div id="norm_ball_6" class="ball" style="display: none; position:absolute; bottom: 50px; left: 0px;"></div>
                                <div id="norm_ball_7" class="ball" style="display: none; position:absolute; bottom: 50px; left: 50px;"></div>
                                <div id="norm_ball_8" class="ball" style="display: none; position:absolute; bottom: 50px; left: 100px;"></div>
                                <div id="norm_ball_9" class="ball" style="display: none; position:absolute; bottom: 50px; left: 150px;"></div>
                                <div id="norm_ball_10" class="ball" style="display: none; position:absolute; bottom: 50px; left: 200px;"></div>
                                <div id="norm_ball_11" class="ball" style="display: none; position:absolute; bottom: 100px; left: 0px;"></div>
                                <div id="norm_ball_12" class="ball" style="display: none; position:absolute; bottom: 100px; left: 50px;"></div>
                                <div id="norm_ball_13" class="ball" style="display: none; position:absolute; bottom: 100px; left: 100px;"></div>
                                <div id="norm_ball_14" class="ball" style="display: none; position:absolute; bottom: 100px; left: 150px;"></div>
                                <div id="norm_ball_15" class="ball" style="display: none; position:absolute; bottom: 100px; left: 200px;"></div>
                                <div id="norm_ball_16" class="ball" style="display: none; position:absolute; bottom: 150px; left: 0;"></div>
                                <div id="norm_ball_17" class="ball" style="display: none; position:absolute; bottom: 150px; left: 50px;"></div>
                                <div id="norm_ball_18" class="ball" style="display: none; position:absolute; bottom: 150px; left: 100px;"></div>
                                <div id="norm_ball_19" class="ball" style="display: none; position:absolute; bottom: 150px; left: 150px;"></div>
                                <div id="norm_ball_20" class="ball" style="display: none; position:absolute; bottom: 150px; left: 200px;"></div>
                                <div id="norm_bucket" class="bucket" ondrop="drag_drop(event)" ondragover="return false"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div>
            <div class="ball_container">
                <div id="ball" class="ball" style="margin-top: 20px" draggable="true" ondragstart="drag_start(event)"></div>
            </div>
        </div>
     </div>

    <div id="leave_stage_box" class="button_box" style="display: none">
        <br>
        &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
        &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
        &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
        &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
        &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
        <input class="btn btn-primary" type="submit" value="Suivant"/>
        <br><br>
    </div>

    <div style ="display:none;">
        <input type="number" name="RFT_balls_in_yellow" id="otree_RFT_balls_in_yellow" class="form-control">
        <input type="number" name="RFT_balls_in_blue" id="otree_RFT_balls_in_blue" class="form-control">
    </div>
{% endblock %}

{% block styles %}
    <style>

        /* Visualization Buckets */

        .money_bucket_border {
            margin: auto;
            width: 300px;
            height: 300px;
            background: #ffd724;
            border-radius: 0 0 15px 15px;
        }

        .norm_bucket_border {
            margin: auto;
            width: 300px;
            height: 300px;
            background: #5022ff;
            border-radius: 0 0 15px 15px;
        }

        .bucket_background {
            position: relative;
            margin: auto auto 0px auto;
            width:250px;
            height:280px;
            background: #ececec;
            border-radius: 0 0 15px 15px;
        }

        .money_bucket_background {
            background: rgba(255, 215, 36, 0.11);
        }

        .norm_bucket_background {
            background: rgba(18, 0, 219, 0.11);
        }

        .bucket {
            position: relative;
            width:250px;
            height:280px;
            border-radius: 0 0 15px 15px;
        }

        /*Visualization Balls*/

         .ball {
            background: #27001f;
            border-radius: 50%;
            height: 50px;
            width: 50px;
            margin: auto;
         }

         .ball_container {
            margin: 25px auto;
         }

    </style>
{% endblock %}

{% block scripts %}
   <script>

        /* Define Variables*/

        let balls_left = 20;
        let balls_in_norm_bucket = 0;
        let balls_in_money_bucket = 0;

        function onLoadFunctions() {
                document.getElementById('pos_money_bucket').style.float = 'left';
                document.getElementById('pos_norm_bucket').style.float = 'right';
            }

        window.onload = onLoadFunctions;

        /* Drag & Drop */

        function drag_start(event) {
            event.dataTransfer.setData('ball', event.target.getAttribute('id'));
        }

        function drag_drop(event) {
            let bucket_id = event.target.getAttribute('id');

            if (bucket_id === 'norm_bucket') {
                balls_in_norm_bucket += 1;
                document.getElementById('norm_ball_'.concat(balls_in_norm_bucket)).style.display = 'block';
            }

            if (bucket_id === 'money_bucket') {
                balls_in_money_bucket += 1;
                document.getElementById('money_ball_'.concat(balls_in_money_bucket)).style.display = 'block';
            }

            balls_left -= 1;

            document.getElementById('Value').innerHTML = balls_left;

            if (balls_left === 0) {
                document.getElementById('ball').parentNode.removeChild(document.getElementById('ball'));
                document.getElementById('leave_stage_box').style.display='block';
                document.getElementById('otree_RFT_balls_in_yellow').value = balls_in_money_bucket;
                document.getElementById('otree_RFT_balls_in_blue').value = balls_in_norm_bucket;
            }
        }
    </script>
{% endblock %}