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

{% block title %}
    Sonuçlar.
{% 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>
        {{ Constants.numquestions }} sorudan {{ player.questions_correct }} soruyu doğru cevapladınız
        
    </p>

    <p>
        Bu aşamadan kazancınız: {{ player.payoff }} 
        
    </p>

    <table class="table">
        <tr>
            <th>Soru</th>
            <th>Cevabınız</th>
            <th>Doğru cevap</th>
            <th>Cevabınız doğru mu?</th>
        </tr>
        
            <tr>
                <td> {{ Constants.question_1  }} </td>
                <td>{{ player.q1 }}</td>
                <td style="color:red;">{{ Constants.s1 }}</td>
                <td>{{ player.q1_dogru }}</td>
            </tr>
            <tr>
                <td> {{ Constants.question_2  }} </td>
                <td>{{ player.q2 }}</td>
                <td style="color:red;">{{ Constants.s2 }}</td>
                <td>{{ player.q2_dogru }}</td>
            </tr>
            <tr>
                <td> {{ Constants.question_3  }} </td>
                <td>{{ player.q3 }}</td>
                <td style="color:red;">{{ Constants.s3 }}</td>
                <td>{{ player.q3_dogru }}</td>
            </tr>
            <tr>
                <td> {{ Constants.question_4  }} </td>
                <td>{{ player.q4 }}</td>
                <td style="color:red;" > {{ Constants.s4 }} </td>
                <td>{{ player.q4_dogru }}</td>
            </tr>
            <tr>
                <td> {{ Constants.question_5  }} </td>
                <td>{{ player.q5 }}</td>
                <td style="color:red;" > İşveren {{Constants.probability_unbiased}} ihtimalle 1.Tip,
                    {{Constants.probability_biased}} ihtimalle 2. Tip çalışanla
                     eşleşecektir.</td>
                <td>{{ player.q5_dogru }}</td>
            </tr>
        
    </table>
    
    <script>
        window.onload = function(){
          setTimeout(loadAfterTime, 120000);
          setTimeout(disappearAfterTime, 120000);
        };
   
        function loadAfterTime() {
           $(".otree-btn-next").css("display", "block");
        }
        function disappearAfterTime() {
           $("#msg").hide();
        }
    </script>
        
        <br>
        {% next_button %}
        <p id="msg">
           Lütfen Quiz sorularını ve doğru cevapları inceleyin. İlerle butonu 2 dakika sonra aktif olacaktır.
        </p>
    
        {% include Constants.instructions_template %}
{% endblock %}