{% extends "global/Page.html" %}
{% load otree static %}
{% block title %}
    結果の確認
{% endblock %}

{% block content %}
<p>
    あなたは初期保有額として<strong> {{ Constants.endowment }}</strong>を持っていました．<br>
    その中から<strong>{{ player.contribution }}</strong>を貢献しました．<br>
    あなたのグループでは全員で<strong>{{ group.total_contribution }}</strong>を貢献していました．<br>
    その結果，一人あたりには<strong>{{ group.individual_share }}</strong>が渡されました．<br>
</p>
<p>
    <strong>{{ Constants.endowment }}-{{ player.contribution }}+{{ group.individual_share }}={{ player.payoff }}</strong>
</p>
<p>
    したがって，あなたは<strong>{{ player.payoff }}</strong>を受け取りました．
</p>

<p>
  貢献度ランキングは以下のようになりました．
  あなたの被験者IDは
  <!-- 6人の場合は6人分if文を書き足す -->
  <strong>
    {% if player.id_in_group == 1 %}
    A
    {% elif player.id_in_group == 2 %}
    B
    {% elif player.id_in_group == 3 %}
    C
    {% elif player.id_in_group == 4 %}
    D
    {% elif player.id_in_group == 5 %}
    E
    {% elif player.id_in_group == 6 %}
    F 
    {% endif %}
  </strong>
  です．
    
</p>

<div align='center'>
<table class='table' align="center">
    <tr><th>順位</th> <th>被験者ID</th> <th>貢献度</th></tr>
    <tr><td><div id='lank'></div></td> <td><div id='lank_number'></div></td> <td><div id='cont'></div></td></tr>
  </table>
  </div>
      {% next_button %}
  {% endblock %}
  
  
  {% block scripts %}
  <script>
  
  function sort_object_down(dict){
    var items = Object.keys(dict).map(function(key) {
      return [key, dict[key]];
    });
    items.sort(function(first, second) {
      return second[1] - first[1];
    });
    return(items);
  }
  
  
  let lanking = document.getElementById('lanking');
  let lank = document.getElementById('lank');
  let lank_number = document.getElementById('lank_number');
  let cont = document.getElementById('cont');
  
  var lank_list = js_vars.lank_list;
  
  lank.innerHTML = '';
  lank_number.innerHTML = '';
  cont.innerHTML = '';
  var lanking_sort = sort_object_down(lank_list);
  for (i=0;i<lanking_sort.length;i++){
    lank.innerHTML += i+1 + '<br />';
    if (i==0){
      lank_number.innerHTML += lanking_sort[i][0]
      +"&nbsp;"
       + '<br />';
    }
    else{
      lank_number.innerHTML += lanking_sort[i][0]
       + '<br />';
    }
  
    cont.innerHTML += lanking_sort[i][1] + '<br />';
  }
  
  
  </script>
   {% endblock %}