{{ block title }}Introduction{{ endblock }}
{{ block content }}

<div id="floating-button" onmouseover="showImage()" onmouseout="hideImage()">
    <p style="color: blue;">Hover to see experimental set-up.</p>
</div>
<div id="image-container" style="display: none;">
            {% if player.treatment == 'sym' %}
                <img src="{% static 'global/JMP/Symmetric.png' %}" style="width:600px; height:auto;" />
            {% elif player.treatment == 'asy' %}
                <img src="{% static 'global/JMP/Asymmetric.png' %}" style="width:600px; height:auto;" />
            {% elif player.treatment == 'amb' %}
                <img src="{% static 'global/JMP/Ambiguous.png' %}" style="width:600px; height:auto;" />
            {% endif %}
</div>

<script>
  function showImage() {
    document.getElementById('image-container').style.display = 'block';
  }

  function hideImage() {
    document.getElementById('image-container').style.display = 'none';
  }
</script>

<p>
    You are offered a choice between two boxes, A and B. Each of these boxes are randomly picked from the 200 boxes.
    You will be paid $10 additional if your chosen box is golden and if this choice is selected for payment.
    Box A and B are different in the following way:
        <ol>
            <li> We drew 5 balls from Box A one at a time, replacing each ball to the box after it was drawn. Of the 5 balls we drew, 3 were red (and the other 2 were blue). </li>
            <li> We will draw 10 balls from Box B and your choice can be based on the outcome of the draws. </li>
        </ol>
</p>
<p>
    To make your choices, simply click on your choice for each row. Note that the greater the number of red balls drawn from a box, the more likely it is golden rather than wooden.
    So if you pick Box B when 6 red balls out 10 balls are drawn from it, you should still pick it for 7, 8, 9 and 10 red balls out of 10. The interface below is implemented to automatically
    make these selections for you.
</p>
<input type="hidden" name="choice1exp" id="id_choice1exp">
{{ formfield_errors "choice1exp" }}
<table class="table table-striped">
    <colgroup>
        <col width="38%">
        <col width="18%">
        <col width="38%">
    </colgroup>
    <tr>
        <td align="middle"><b>Choose Box A</b></td>
        <td></td>
        <td align="middle"><b>Choose Box B</b></td>
    </tr>
    {{ for amount in right_side_amounts }}
        <tr>
        <td align="right">
           Box A - <b>3 out of 5 </b> balls drawn were red.
        <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>
        <td align="left">
            Box B - if <b>{{ amount }} out of 10</b> balls drawn are red.
    </tr>
    {{ endfor }}
</table>

</div>

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

{{ endblock }}

{{ block scripts }}
<script>
     let allRadios = document.querySelectorAll('input[type=radio]')
        function submitForm() {
        if (document.getElementById('id_choice1exp') !== null) {
            let form = document.getElementById('form');
            if (form.reportValidity()) {
                let switchingPoint = document.getElementById('id_choice1exp');
                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';
    let clickedLeftRadio = clickedRadio.value === 'left';

    if(clickedRadio.value === 'right'){
    for (let aRadio of allRadios) {
        if (aRadio === clickedRadio) {
            afterClickedRadio = true;
        }
        if (clickedRightRadio && !afterClickedRadio && aRadio.value === 'left') {
            aRadio.checked = true;
        }
        if (clickedRightRadio && afterClickedRadio && aRadio.value === 'right') {
            aRadio.checked = true;
        }
    }
    }
    if(clickedRadio.value === 'left'){
    for (let aRadio of allRadios) {
        if (aRadio === clickedRadio) {
            afterClickedRadio = true;
            continue;
        }
        if (!afterClickedRadio &&  aRadio.value === 'left') {
            aRadio.checked = true;
        }
        if (afterClickedRadio && aRadio.value === 'right') {
            aRadio.checked = true;
        }
       }
     for (let aRadio of allRadios) {
        if (aRadio === clickedRadio && 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 }}