{{ block title }}Part 2: Comprehension Test (2/2){{ endblock }}
{{ block content }}

{{ if player.session.config.who == 'dictator' }}
<div id="avatarContainer">
  <div class="avatar-wrapper">
    <img src="" alt="Avatar" class="avatar-image" id="avatar-image1">
    <img class="topImage" src="" style="display: none;" height="35" width="75">
    <div class="caption">You (Participant A)</div>
  </div>
  <div class="avatar-wrapper">
    <img src="" alt="Avatar" class="avatar-image" id="avatar-image2">
    <img class="topImage" src="" style="display: none;" height="35" width="75">
    <div class="caption">Participant B</div>
  </div>
  <div class="avatar-wrapper">
    <img src="" alt="Avatar" class="avatar-image" id="avatar-image3">
    <img class="topImage" src="" style="display: none;" height="35" width="75">
    <div class="caption">Participant C</div>
  </div>
</div>
<p>
  The avatars of the players you matched with are shown above. Before the experiment can begin, you must complete the control questionnaire using the income calculations below.
  <b> You are participant A. </b>
</p>
{{ elif player.session.config.who == 'punisher' }}
<p>
  Before the experiment can begin, you must complete the control questionnaire using the income calculations below. <b> You are participant C. </b>

</p>
{{ elif player.session.config.who == 'receiver' }}

Before the experiment can begin, you must complete the control questionnaire using the income calculations below. <b> You are participant B. </b>
{{endif}}

<div class="card bg-light m-3">
     <div class="card-body">
<h5> Income calculations: </h5>
<p>
<b> Participant A :</b>  200 tokens (participant A's earning from puzzles)
  <br> &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp  &nbsp &nbsp   &nbsp &nbsp &nbsp &nbsp&nbsp minus number of token allocated to participant B by participant A
<br> &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp  &nbsp &nbsp &nbsp   &nbsp &nbsp &nbsp&nbsp  minus 3 times the number of deduction tokens transferred to participant A by participant C <br>
 <b> Participant B: </b> number of tokens Participant A allocated to participant B <br>
 <b> Participant C: </b> 100 (participant C's earning from puzzles) <br>  &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp   &nbsp &nbsp &nbsp &nbsp &nbsp&nbsp&nbsp minus number of deduction tokens participant C transfers to Participant A
</p>
       </div></div>
<p>
<p>
Question 2/2: Participant A allocates 50 tokens to participant B, while participant C transfer 30 deduction tokens to participant A. What is the income of each player?
</p>

{{ formfield 'quiz4' }}
{{ formfield 'quiz5' }}
{{ formfield 'quiz6' }}
{{ next_button }}

<script>
  function generateAvatar(avatarIndex, clothingType, clothingColor, topType,backgroundima) {
    var url = `https://avataaars.io/?avatarStyle=Transparent&skinColor=Yellow&topType=${topType}&clotheColor=${clothingColor}&clotheType=${clothingType}&graphicType=Resist`;
    var avatarImage = document.getElementById(`avatar-image${avatarIndex}`);
    avatarImage.src = url;

    var avatarWrapper = document.querySelector(`#avatarContainer .avatar-wrapper:nth-child(${avatarIndex})`);
    avatarWrapper.style.backgroundImage = `url('${backgroundima}')`;

    var topImage = document.querySelector(`#avatarContainer .avatar-wrapper:nth-child(${avatarIndex}) .topImage`);
    if ( clothingColor ==="Gray01" ) {
        topImage.src = "{{ static 'rainbow.png' }}";
        topImage.style.display = "block";
        topImage.height= 45;
        topImage.width= 110;
        topImage.style.bottom= '1px';
        topImage.style.left= '80px';
    }else if( clothingColor ==="Gray02") {
        topImage.src = "{{ static 'Peace.png' }}";
        topImage.style.display = "block";
        topImage.height= 80;
        topImage.width= 80;
        topImage.style.bottom= '-9px';
        topImage.style.left= '94px';
    }
    else {
        topImage.style.display = "none";
    }
  }

  var selectedOption1 = js_vars.topc;
  var clothingType1 = selectedOption1.split("-")[0];
  var clothingColor1 = selectedOption1.split("-")[1];
  var topType1 = js_vars.hair1;
  generateAvatar(1, clothingType1, clothingColor1, topType1,js_vars.backgroundim);

  var selectedOption2 = js_vars.thridpartyshirt;
  var clothingType2 = selectedOption2.split("-")[0];
  var clothingColor2 = selectedOption2.split("-")[1];
  var topType2 = js_vars.thrid_p_hair;
  generateAvatar(2, clothingType2, clothingColor2, topType2,"https://i.imgur.com/l5sL9Vr.jpg");

  var selectedOption3 = js_vars.receivershirt;
  var clothingType3 = selectedOption3.split("-")[0];
  var clothingColor3 = selectedOption3.split("-")[1];
  var topType3 = js_vars.receiver_hair;
  generateAvatar(3, clothingType3, clothingColor3, topType3,"https://i.imgur.com/l5sL9Vr.jpg");


</script>



<style>
  #avatarContainer {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding-bottom:50px;
  }

  .avatar-wrapper {
    position: relative;
    display: inline-block;
    width: 264px;
    height: 280px;
    background-size: cover;
    background-position: center;
      border-radius: 47%;
  }

  .avatar-image {
    width: 264px;
    height: 280px;
  }

  .topImage {
     position: absolute;
        bottom: 7px;
        left: 36%;
  }

  .caption {
  text-align: center;
  font-size: 20px;
}
</style>


{{ endblock }}