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


{{ block content }}

<b><p> <font size="5"> 任务3 </font></p></b>

<p>现在我们开始任务3，请等待实验员一起阅读任务3说明。</p>

<b><p>任务3说明</p></b>
{% if player.endowment == 100 %}
<p>已知在任务2的初始实验点分配机制中，你获得<b>100</b>个实验点，你组内的另一名成员获得<b>0</b>个实验点。该分配结果可能是因为</p>
  <p>  （1）骰子随机掷出的结果小于等于7（即1、2、3、4、5、6或7），且你在任务1中的积分<b>高于</b>同组另一名成员的任务1积分；</p>
或者
      <p>（2）骰子随机掷出的结果大于7（即8、9或10），且你在任务1中的积分<b>低于</b>同组另一名成员的任务1积分。</p>
<p><font size="2.5">* 如果你和同组另一名实验参与者在任务1中的积分相同时，电脑会以50%-50%的概率随机分配一名组员100个实验点，另一名组员0个实验点。</font></p>

{% else %}
<p> 已知在任务2的初始实验点分配机制中，你获得<b>0</b>个实验点，你组内的另一名成员获得<b>100</b>个实验点。该分配结果可能是因为</p>
<p>      （1）骰子随机掷出的结果小于等于7（即1、2、3、4、5、6或7），且你在任务1中的积分<b>低于</b>同组另一名成员的任务1积分；</p>
或者
 <p>     （2）骰子随机掷出的结果大于7（即8、9或10），且你在任务1中的积分<b>高于</b>同组另一名成员的任务1积分。</p>
<p><font size="2.5">* 如果你和同组另一名实验参与者在任务1中的积分相同时，电脑会以50%-50%的概率随机分配一名组员100个实验点，另一名组员0个实验点。</font></p>

{% endif %}
<p><b>
  请依次在下面所列的11种情境对选项A和选项B中的一项进行选择。在你提交11个选择后，点击按钮，电脑会以相等的概率随机从11个情境中选取出一个，并根据你在该情境中的选择的选项决定你在任务3中的报酬。
</b></p>

<p> 例如电脑随机选中第4行的决策情境，如果你在这个决策情境中选择了选项A并且你在任务1中获得的积分高于同组另一名成员，你会获得100个实验点。如果你在这个决策情境中选择了选项B并且你在任务1中获得的积分低于同组另一名成员，你会获得0个实验点。如果你在这个决策情境中选择了选项A，你确保会获得30个实验点。</p>
  <p>     注意: 在这11个情境中你可以全部选择选项A，也可以全部选择选项B。但是你只有一次从选项A和选项B转换的机会。如果在某情景中你从选项A转移到选择选项B，电脑会把之后的选项全部自动选择选项B。
</p>
<br>
    <br>
<input type="hidden" name="switching_point2" id="id_switching_point">
{{ formfield_errors 'switching_point2' }}

<table class="table table-striped">
    <colgroup>
        <col width="55%">
        <col width="10%">
        <col width="35%">
    </colgroup>
    <tr>
        <td align="right"><b>选项A</b></td>
        <td></td>
        <td align="left"><b>选项B</b></td>
    </tr>
    {{for amount in left_side_amounts}}
    <tr>
        <td align="right">
            情境: &nbsp &nbsp &nbsp &nbsp &nbsp 如果你比另一名成员在任务1中积分高，获得<b>100</b>实验点；
            如果你比另一名成员在任务1中低分低，获得<b>0</b>个实验点。

        <td align="middle">
            <input type="radio"
                   value="left"
                   name="{{ amount }}"
                   required>&nbsp;&nbsp;
            <input type="radio"
                   name="{{ amount }}"
                   value="right" data-amount="{{ amount }}"
                   required>
        <td align="left">
            确保 <b>{{ amount}}</b> 个实验点
        </td>
    </tr>
        {{ endfor }}
</table>


<button type="button" class="btn btn-primary" onclick="submitForm()">Next</button>


{{ endblock }}


{{ block scripts }}
<script>
    let allRadios = document.querySelectorAll('input[type=radio]')
    function submitForm() {
        let form = document.getElementById('form');
        if (form.reportValidity()) {
            let switchingPoint = document.getElementById('id_switching_point');

            let allChoicesAreOnLeft = true;
            for (let radio of allRadios) {
                if (radio.value === 'right' && radio.checked) {
                    switchingPoint.value = radio.dataset.amount;
                    allChoicesAreOnLeft = false;
                    break;
                }
            }
            if (allChoicesAreOnLeft) {
                // '9999' represents the valueInput if the user didn't click the right side for any choice
                // it means their switching point is off the scale. you can change 9999 to some other valueInput
                // that is larger than any right-hand-side choice.
                switchingPoint.value = '9999';
            }
            form.submit();
        }
    }

    function onRadioClick(evt) {
        let clickedRadio = evt.target;
        let afterClickedRadio = false;
        let clickedRightRadio = clickedRadio.value === 'right';

        for (let aRadio of allRadios) {
            if (aRadio === clickedRadio) {
                afterClickedRadio = true;
                continue;
            }
            if (clickedRightRadio && afterClickedRadio && aRadio.value === 'right') {
                aRadio.checked = true;
            }
            if (!clickedRightRadio && !afterClickedRadio && aRadio.value === 'left') {
                aRadio.checked = true;
            }
        }
    }

    document.addEventListener("DOMContentLoaded", function (event) {
        for (let radio of document.querySelectorAll('input[type=radio]')) {
            radio.onchange = onRadioClick;
        }
    });

</script>
{{ endblock }}