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

{% block title %}
    Quiz Feedback
{% endblock %}

{% block content %}

 <div class="boxed">
     
    
    <p class="trans">You answered <span style="color:red; font-weight:bold;"> {{ correct }} out of 4 </span> questions correctly. </p>

    {% if correct != 4 %}
        {% if strike == 0 %}
            <p class="trans"> You have one more try <span style="color:red; font-weight:bold;">to read the instructions</span> and re-do all the questions. </p>
            
            <p class="trans"> If you make even <span style="color:red; font-weight:bold;">one mistake</span> you will be <span style="color:red; font-weight:bold;">expelled</span> from the study. </p>
            
            <p class="trans"> Please click the Next button to <span style="color:red; font-weight:bold;">to read the instructions</span>. </p>
        {% else %}
            <p class="trans"> <span style="color:blue; font-weight:bold; font-size: 22px;">Since you made mistake again, you have been expelled from the study!</span></p>
        {% endif %}
    {% else %} 
    
        <p class="trans"> Please click the Next button to start the task. </p>
    
    {% endif %}

         
        
        
        
        
        <hr style="width:50%;">

    
     
    {% if correctly_answered.0 == 0 %}
        <div style="background:pink;">
            <p style="text-align: center; font-weight:bold; font-size: 24px;">Mistake</p>
    {% else %}
        <div style="background:lightgreen;">
        <p style="text-align: center; font-weight:bold; font-size: 24px;">Correct</p>
    {% endif %}
        <p class="trans" ><b>Question 1:</b> 
            Who is responsible for performing the emoji selection task?
            {% for ans in choices_1%}
                {% if correctly_answered.0 == 1 %}
                    {% if your_answers.0 == ans.0 %}
                        <ul>{{ans.1}} <span style="font-weight:bold; font-size: 24px;">&xlarr; Your answer</span></ul>
                    {% else %}   
                        <ul>{{ans.1}} </ul>                    
                    {% endif %}
                {% else %}
                    {% if your_answers.0 == ans.0 %}
                        <ul>{{ans.1}} <span style="font-weight:bold; font-size: 24px;">&xlarr; Your answer</span></ul>
                    {% else %}   
                        <ul>{{ans.1}} </ul>                    
                    {% endif %}
                 
                {% endif %}
            {% endfor %}

             
        </p>
    </div>
        
      <hr style="width:50%;">
      
    {% if correctly_answered.1 == 0 %}
        <div style="background:pink;">
            <p style="text-align: center; font-weight:bold; font-size: 24px;">Mistake</p>
    {% else %}
        <div style="background:lightgreen;">
        <p style="text-align: center; font-weight:bold; font-size: 24px;">Correct</p>
    {% endif %}
          
          <p class="trans"><b>Question 2:</b> 
          If 45 victory fingers were selected and 1 crossed fingers was selected, 
          what is the chances that Player A will win the game?
            {% for ans in choices_2%}
                {% if correctly_answered.1 == 1 %}
                    {% if your_answers.1 == ans.0 %}
                        <ul>{{ans.1}} <span style="font-weight:bold; font-size: 24px;">&xlarr; Your answer</span></ul>
                    {% else %}   
                        <ul>{{ans.1}} </ul>                    
                    {% endif %}
                {% else %}
                    {% if your_answers.1 == ans.0 %}
                        <ul>{{ans.1}} <span style="font-weight:bold; font-size: 24px;">&xlarr; Your answer</span></ul>
                    {% else %}   
                        <ul>{{ans.1}} </ul>                    
                    {% endif %}
                 
                {% endif %}
            {% endfor %}
          </p>
    </div>
      
      <hr style="width:50%;">
    {% if correctly_answered.2 == 0 %}
        <div style="background:pink;">
            <p style="text-align: center; font-weight:bold; font-size: 24px;">Mistake</p>
    {% else %}
        <div style="background:lightgreen;">
        <p style="text-align: center; font-weight:bold; font-size: 24px;">Correct</p>
    {% endif %}      
      
        <p class="trans"><b>Question 3:</b> 
            Who is responsible for allocating the money?
            {% for ans in choices_3%}
                {% if correctly_answered.2 == 1 %}
                    {% if your_answers.2 == ans.0 %}
                        <ul>{{ans.1}} <span style="font-weight:bold; font-size: 24px;">&xlarr; Your answer</span></ul>
                    {% else %}   
                        <ul>{{ans.1}} </ul>                    
                    {% endif %}
                {% else %}
                    {% if your_answers.2 == ans.0 %}
                        <ul>{{ans.1}} <span style="font-weight:bold; font-size: 24px;">&xlarr; Your answer</span></ul>
                    {% else %}   
                        <ul>{{ans.1}} </ul>                    
                    {% endif %}
                 
                {% endif %}
            {% endfor %}
        </p>
        
    </div>
        
      <hr style="width:50%;">
      
    {% if correctly_answered.3 == 0 %}
        <div style="background:pink;">
        <p style="text-align: center; font-weight:bold; font-size: 24px;">Mistake</p>
    {% else %}
        <div style="background:lightgreen;">
        <p style="text-align: center; font-weight:bold; font-size: 24px;">Correct</p>
    {% endif %}
      
      <p class="trans"><b>Question 4:</b> 
          If the final outcome for Player A is $X, 
          how much will you receive from Player A?
            {% for ans in choices_4%}
                {% if correctly_answered.3 == 1 %}
                    {% if your_answers.3 == ans.0 %}
                        <ul>{{ans.1}} <span style="font-weight:bold; font-size: 24px;">&xlarr; Your answer</span></ul>
                    {% else %}   
                        <ul>{{ans.1}} </ul>                    
                    {% endif %}
                {% else %}
                    {% if your_answers.3 == ans.0 %}
                        <ul>{{ans.1}} <span style="font-weight:bold; font-size: 24px;">&xlarr; Your answer</span></ul>
                    {% else %}   
                        <ul>{{ans.1}} </ul>                    
                    {% endif %}
                 
                {% endif %}
            {% endfor %}
      </p>
     
     </div>
            
       
          
        <hr style="width:50%;">
       
        
        
       


 
    
   
    
 {% next_button %}
    
</div>

{% endblock %}



{% block styles %}
    <style>
 
        
        p.trans{
            font-size: 18px; 
            text-align: justify;
                
                }
        
    </style>
{% endblock %}