{{ extends 'global/Page.html' }}
{{ block title }}Your choice{{ endblock }}

{{ block content }}

<p><b>Instructions</b></p>

<p>This is a game with 2 players.</p> 
<p>1. To start the game  player A and B each receive 10 points.</p> 
<p>2. Player A can send some or all of his 10 points to player B.</p> 
<p>3. Before B receives these points they will be tripled.</p> 
<p>4. Once B receives the tripled points he can decide to send some or all of it back to A.</p>

<p><b>You are Player B. You shall make a choice for each first move of A.</b></p>
<p>The system will automatically calculate and display the points that each participant will receive based on the points you choose to send back.</p>
<p><b>How many points would you return to A for each points sent?</b></p>

<table class="table">
  <tr>
    <th>Player A</th>
    <th>Player B</th>
    <th>Send back...</th>
    <th>A gets...</th>
    <th>You get...</th>
  </tr>
  <tr>
    <td>A sent you 1 point.</td>
    <td>You receive 3 points.</td>
    <td><input type="number" name="input_1" id="input_1" onchange="calculatePoints(1)" />{{ formfield_errors 'input_1' }}</td>
    <td id="aPoints1"></td>
    <td id="bPoints1"></td>
  </tr>
  <tr>
    <td>A sent you 2 points.</td>
    <td>You receive 6 points.</td>
    <td><input type="number" name="input_2" id="input_2" onchange="calculatePoints(2)" />{{ formfield_errors 'input_2' }}</td>
    <td id="aPoints2"></td>
    <td id="bPoints2"></td>
  </tr>
  <tr>
    <td>A sent you 3 points.</td>
    <td>You receive 9 points.</td>
    <td><input type="number" name="input_3" id="input_3" onchange="calculatePoints(3)" />{{ formfield_errors 'input_3' }}</td>
    <td id="aPoints3"></td>
    <td id="bPoints3"></td>
  </tr>
  <tr>
    <td>A sent you 4 points.</td>
    <td>You receive 12 points.</td>
    <td><input type="number" name="input_4" id="input_4" onchange="calculatePoints(4)" />{{ formfield_errors 'input_4' }}</td>
    <td id="aPoints4"></td>
    <td id="bPoints4"></td>
  </tr>
  <tr>
    <td>A sent you 5 points.</td>
    <td>You receive 15 points.</td>
    <td><input type="number" name="input_5" id="input_5" onchange="calculatePoints(5)" />{{ formfield_errors 'input_5' }}</td>
    <td id="aPoints5"></td>
    <td id="bPoints5"></td>
  </tr>
  <tr>
    <td>A sent you 6 points.</td>
    <td>You receive 18 points.</td>
    <td><input type="number" name="input_6" id="input_6" onchange="calculatePoints(6)" />{{ formfield_errors 'input_6' }}</td>
    <td id="aPoints6"></td>
    <td id="bPoints6"></td>
  </tr>
  <tr>
    <td>A sent you 7 points.</td>
    <td>You receive 21 points.</td>
    <td><input type="number" name="input_7" id="input_7" onchange="calculatePoints(7)" />{{ formfield_errors 'input_7' }}</td>
    <td id="aPoints7"></td>
    <td id="bPoints7"></td>
  </tr>
  <tr>
    <td>A sent you 8 points.</td>
    <td>You receive 24 points.</td>
    <td><input type="number" name="input_8" id="input_8" onchange="calculatePoints(8)" />{{ formfield_errors 'input_8' }}</td>
    <td id="aPoints8"></td>
    <td id="bPoints8"></td>
  </tr>
  <tr>
    <td>A sent you 9 points.</td>
    <td>You receive 27 points.</td>
    <td><input type="number" name="input_9" id="input_9" onchange="calculatePoints(9)" />{{ formfield_errors 'input_9' }}</td>
    <td id="aPoints9"></td>
    <td id="bPoints9"></td>
  </tr>
  <tr>
    <td>A sent you 10 points.</td>
    <td>You receive 30 points.</td>
    <td><input type="number" name="input_10" id="input_10" onchange="calculatePoints(10)" />{{ formfield_errors 'input_10' }}</td>
    <td id="aPoints10"></td>
    <td id="bPoints10"></td>
  </tr>
</table>

<script>
  function calculatePoints(row) {
    var xValues = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
    var yValues = [3, 6, 9, 12, 15, 18, 21, 24, 27, 30];
    var a = 10;
    var b = 10;
    
    var input = document.getElementById("input_" + row);
    var q = parseInt(input.value);
    
    var x = xValues[row - 1];
    var y = yValues[row - 1];
    
    var aPoints = a - x + q;
    var bPoints = b + y - q;
    
    document.getElementById("aPoints" + row).textContent = aPoints;
    document.getElementById("bPoints" + row).textContent = bPoints;
  }
</script>


{{ next_button }}

{{ endblock }}