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

{% block title %}
    <br>Soru 1'in Yanıtı
{% endblock %}
{% block styles %}

    <!-- define a style -->
    <style type="text/css">


        .otree-btn-next {
            display: none;
        }
        #msg{
            padding: 20px;
            background: #C0E6FF;
            color: red;
        }


    </style>

{% endblock %}

{% block content %}
    <p>
    "Bir turda, bir katılımcı Grup Hesabı’ndan bireysel X hesabına 1 puan aktarmak istiyorsa,
    karar ekranında “-1” puanı işaretlemelidir."
    </p>

    <p>
        <b>Cevabınız:</b>
        <br>{{ player.q1 }}
    </p>


    <p>
        <b>Cevabınız doğru mu?</b>
        <br>{{ player.q1_dogru }}
    </p>

    <p>
    <b>Doğru cevabı nasıl bulduk?</b>
    <br><br>Ekranınızda, bireysel X hesabınız ile Grup Hesabı arasında puan aktarım kararınız aşağıdaki gibi sorulacaktır:
                <p style="text-align:left;"><img src="{{ static 'HOM1_decision_page_ss_adjusted.png' }}" width="95%"/>
                <ul type="square">
                <li>X hesabınızdan Grup Hesabı’na puan aktarmak için, “1” ile “8” arasındaki puanlardan birini,</li>
                <li>Grup Hesabı’ndan bireysel X hesabınıza 1 puan aktarmak için “-1”’i,</li>
                <li>iki hesap arasında herhangi bir aktarım yapmamak için “0”ı </li>
                </ul>
                işaretlemeniz gerekmektedir.
    </p>

    <script>
        window.onload = function(){
          setTimeout(loadAfterTime, 60000);
          setTimeout(disappearAfterTime, 60000);
        };

        function loadAfterTime() {
           $(".otree-btn-next").css("display", "block");
        }
        function disappearAfterTime() {
           $("#msg").hide();
        }
    </script>

        <br>
        {% next_button %}
        <p id="msg">
           Lütfen soruyu ve doğru cevabı dikkatlice inceleyin. İlerle butonu 1 dakika sonra aktif olacaktır.
        </p>
{% endblock %}