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

{% block title %}
<center>Understanding questions</center>
{% endblock %}

{% block styles %}

<style type="text/css">
table { font-size:22px; text-align:center; }
table th { background-color:#ccc; color:black; padding-top:10px; padding-bottom:10px; padding-left:4px; padding-right:4px;}
table td { background-color:#fff; color:black; padding-top:10px; padding-bottom:10px; padding-left:4px; padding-right:4px;}
</style>

{% endblock %}

{% block content %}
<p>
    Each cell of the table contains two numbers which correspond to the earnings of the two players.
</p>
<ul>
    <li>
        For player A, the earnings are the number on the left (shown in <span style='color: #0000ff;'>blue</span>).
    </li>
    <li>
         For player B, the earnings are the number on the right (shown in <span style='color: #ff0000;'>red</span>).
    </li>
</ul>

<p style="text-align:justify">
    Below there is an example of such a table to make you familiar with the format.
    All the scenarios described in the questions are purely hypothetical.
    Answering all questions correctly will make sure you fully understand the rules of the game and how points are earned.
</p>

<center>
    <p id="table"></p>
</center>

<div class="row">
    <div class="column">
        <ul>
            <li>
                The state is 1.<br>
                Player A send the message "The state is 1".<br>
                Player B chose action 2.<br>
                <p><b>What are the earnings of each player?</b></p>
                <form>
                    <input type="radio" name="s1m1a2" value="top_left"> Player A gets 10 and player B get 20<br>
                    <input type="radio" name="s1m1a2" value="top_right"> Player A gets 20 and player B get 10<br>
                    <input type="radio" name="s1m1a2" value="bottom_left"> Player A gets 30 and player B get 30<br>
                    <input type="radio" name="s1m1a2" value="bottom_right"> Player A gets 40 and player B get 40<br>
                </form>
            </li>
            <br>
            <li>
                The state is 1.<br>
                Player A send the message "The state is 2".<br>
                Player B chose action 2.<br>
                <p><b>What are the earnings of each player?</b></p>
                <form>
                    <input type="radio" name="s1m2a2" value="top_left"> Player A gets 10 and player B get 20<br>
                    <input type="radio" name="s1m2a2" value="top_right"> Player A gets 20 and player B get 10<br>
                    <input type="radio" name="s1m2a2" value="bottom_left"> Player A gets 30 and player B get 30<br>
                    <input type="radio" name="s1m2a2" value="bottom_right"> Player A gets 40 and player B get 40<br>
                </form>
            </li>
        </ul>
    </div>
    <div class="column">
        <ul>
            <li>
                The state is 2.<br>
                Player A send the message "The state is 2".<br>
                Player B chose action 2.<br>
                <p><b>What are the earnings of each player?</b></p>
                <form>
                    <input type="radio" name="s2m2a2" value="top_left"> Player A gets 10 and player B get 20<br>
                    <input type="radio" name="s2m2a2" value="top_right"> Player A gets 20 and player B get 10<br>
                    <input type="radio" name="s2m2a2" value="bottom_left"> Player A gets 30 and player B get 30<br>
                    <input type="radio" name="s2m2a2" value="bottom_right"> Player A gets 40 and player B get 40<br>
                </form>
            </li>
            <br>
            <li>
                The state is 2.<br>
                Player A send the message "The state is 1".<br>
                Player B chose action 2.<br>
                <p><b>What are the earnings of each player?</b></p>
                <form>
                    <input type="radio" name="s2m1a2" value="top_left"> Player A gets 10 and player B get 20<br>
                    <input type="radio" name="s2m1a2" value="top_right"> Player A gets 20 and player B get 10<br>
                    <input type="radio" name="s2m1a2" value="bottom_left"> Player A gets 30 and player B get 30<br>
                    <input type="radio" name="s2m1a2" value="bottom_right"> Player A gets 40 and player B get 40<br>
                </form>
            </li>
        </ul>
    </div>
</div>
<div class="row">
<ul>
    <li>
        When player A chooses the message to send to player B,  both players know the state.
        <p><b>Is this statement True or False?</b></p>
        <form>
            <input type="radio" name="state_know" value="True"> True<br>
            <input type="radio" name="state_know" value="False"> False<br>
        </form>
    </li>
    <br>
    <li>
        Player A can send the message "The state is 2" when the state is 1.
        <p><b>Is this statement True or False?</b></p>
        <form>
            <input type="radio" name="message_true" value="True"> True<br>
            <input type="radio" name="message_true" value="False"> False<br>
        </form>
    </li>
    <br>
    <li>
        Player A send the message "I don't want to send a message" when the state is 1.<br>
        Player B chose action 2.<br>
        <p><b>What are the earnings of each player?</b></p>
        <form>
            <input type="number" name="player_a"> points for player A<br>
            <input type="number" name="player_b"> points for player B<br>
        </form>
    </li>
</ul>
</div>

<p>
    Click the "Check" button below to check your answers.
    You can only proceed to the next page if all answers are correct.</p>
<center>

<button id="check" type="button" class="otree-btn-next btn btn-primary" onclick="Check()">Check</button>

<p id="message"></p>

<button id='next' class="otree-btn-next btn btn-primary" style="visibility:hidden" >Next</button>
</center>

{% endblock %}

{% block scripts %}

<script>
function Check() {
    var s1m1a2 = document.querySelector('input[name="s1m1a2"]:checked').value;
    var s1m2a2 = document.querySelector('input[name="s1m2a2"]:checked').value;
    var s2m2a2 = document.querySelector('input[name="s2m2a2"]:checked').value;
    var s2m1a2 = document.querySelector('input[name="s2m1a2"]:checked').value;
    var state_know = document.querySelector('input[name="state_know"]:checked').value;
    var message_true = document.querySelector('input[name="message_true"]:checked').value;
    var player_a = document.querySelector('input[name="player_a"]').value;
    var player_b = document.querySelector('input[name="player_b"]').value;

    if ((s1m1a2 != 'top_right') || (s1m2a2 != 'top_right') || (s2m2a2 != 'bottom_right') || (s2m1a2 != 'bottom_right') || (state_know != 'False') || (message_true != 'True') || (player_a != 20) || (player_b != 10))
        { text = 'At least one answer is wrong!'; }
    else {
        text = 'All answers are correct!';
    }

    if (text == 'All answers are correct!') {
        document.getElementById('next').style.visibility = 'visible'; }
    else {
        document.getElementById('next').style.visibility = 'hidden';
    }

    document.getElementById('message').innerHTML = text;
}
</script>

<script type="text/javascript">
  window.onload=function makeTable() {
  var sender_1 = [10, 20]
  var sender_2 = [30, 40]
  var sender_matrix = [];
  sender_matrix.push(sender_1, sender_2);
  var receiver_1 = [20, 10]
  var receiver_2 = [30, 40]
  var receiver_matrix = [];
  receiver_matrix.push(receiver_1, receiver_2);
  var result = "<table border=1>";
  result += "<tr><th></th>"
    for(var i=0; i<sender_matrix.length; i++){
            result += "<th>Action is "+(i+1)+"</th>";
        }
    result += "</tr>"
    for(var i=0; i<sender_matrix.length; i++) {
        result += "<tr><th> State is " + (i+1) +"</th>";
        for(var j=0; j<sender_matrix[i].length; j++){
            result +=
            " <td><span style=\"color:blue\">"
            + sender_matrix[i][j]
            + "</span> , <span style=\"color:red\", \"text-align:right\">"
            + receiver_matrix[i][j] +"</span></td>";
        }
        result += "</tr>";
    }
    result += "</table>";

  document.getElementById("table").innerHTML = result;
}
</script>
{% endblock %}