{{ extends 'global/Page.html' }}

{{ block title }}Task 1: interface instruction  {{ endblock }}

{{ block content }}

<p>
    You must indicate your choice between Option A and Option B for all the values of p%.
    Otherwise, you will not be allowed to proceed to the next question (a message asking you to "Please fix the errors" will be displayed).
</p>
<p>
    Therefore, to save you the trouble of clicking on the options button for each value of p%, you can click on Option A for a certain probability such that the computer will automatically choose all the Option A above.
    Moreover, you can click on Option B for a certain probability such that the computer will automatically choose all the Option B below and all the Option A above.
</p>

<P>
   You can change your choices as many times as you want. However, once you have decided and clicked on the appropriate option button, you will need to click the “Confirm” button to register your choices and move on to the next question.
   You will not be allowed to go back to the question once you have clicked on the “Confirm” button.
</P>
<p>
    Please use the following question to familiarize yourself with the interface. You should indicate your preference for all the values of p%.
    Note that this is a practice question, and will NOT be used to determine your final payment.
</p>

<p style: align="center">
   <b>Which option do you prefer?</b>
</p>
<p>
            <table class="mb-4" align="center" id="customers" >

                <col width="400">
                <col width="20">
                <col width="20">
                <col width="300">

                 <thead>
                    <tr align="center">
                        <th style="background-color: lightgrey; color: black; border: 1px solid lightgrey">
                            Option A <br>
                        </th>
                        <th style="background-color: lightgrey; color: black; border: 1px solid lightgrey" colspan="2">
                            <table align="center" width="100%">
                                <tr>
                                    <td colspan="2" style="border: 1px solid lightgrey;">
                                    </td>
                                </tr>
                                <tr>
                                    <td style="background-color: lightgrey; border: 1px solid lightgrey;">

                                    </td>
                                    <td style="background-color: lightgrey; border: 1px solid lightgrey;">

                                    </td>
                                </tr>
                            </table>
                        </th>
                        <th style="background-color: lightgrey; color: black; border: 1px solid lightgrey">
                            Option B<br>
                        </th>
                    </tr>
                </thead>
                <thead>
                    <tr align="center">
                        <th style="background-color: lightgrey; color: black; border: 1px solid lightgrey">
                            You gain €10 if the <span style="color:Indigo"> algorithmic analyst's</span> accuracy rate falls within the range of <span style="color:Green">strictly more than 60% and less than 100%</span>; €0 otherwise
                        </th>
                        <th style="background-color: lightgrey; color: black; border: 1px solid lightgrey" colspan="2">
                            <table align="center" width="100%">
                                <tr>
                                    <td colspan="2" style="border: 1px solid lightgrey;">
                                    </td>
                                </tr>
                                <tr>
                                    <td style="background-color: lightgrey; border: 1px solid lightgrey;">
                                       <br><br>A
                                    </td>
                                    <td style="background-color: lightgrey; border: 1px solid lightgrey;">
                                       <br><br>B
                                    </td>
                                </tr>
                            </table>
                        </th>
                        <th style="background-color: lightgrey; color: black; border: 1px solid lightgrey">
                    You gain  €10  with the following probability; €0 otherwise
                        </th>
                    </tr>
                </thead>
                <tbody>
                    {{ for p in practice_percentages_1 }}
                        <tr>
                            {{ if forloop.counter == 1 }}
                                <!-- Option A -->
                                <td align="center" rowspan="20">

                           <img src="{% static 'my_folder/p_0.png' %}" width="400px"/>

                            </td>

                            {{ endif }}

                            <!-- radio select form fields -->
                            <td align="center" >
                                <input type="radio" name="choice_{{ forloop.counter }}" value="left" data-num="{{ forloop.counter }}">
                            </td>
                            <td align="center">
                                <input type="radio"  name="choice_{{ forloop.counter }}" value="right" data-num="{{ forloop.counter }}">
                            </td>
                            <!-- Option B -->
                            <td align="center" >
                                <b>{{ p }}</b>
                            </td>
                        </tr>
                    {{ endfor }}
                </tbody>
            </table>

<input type="hidden" name="ambiguity_switch" id="id_switching_point">

<p class="text-center">
  <button class="btn btn-outline-secondary" id="submit-switch">
                Confirm
          </button>
</p>

<p id='warning' style="font-size: 12px; text-align: center">
    <em>
        Once you press the confirm button, you cannot go back. Think carefully before you make a decision.<br>
        Please raise your hand if anything is unclear.
    </em>
</p>


{{ endblock }}

{{ block scripts }}
<script>
window.onload = () => {
  	const warning = document.getElementById('warning');

    $('input[type=radio]').on('change', function () {
        let clickedRadio = this,
            afterClickedRadio = false;

      	if (clickedRadio.value === 'right' || parseInt(clickedRadio.dataset.num) === parseInt(js_vars.num_choices)) {
          	warning.style.display = 'block';
        }

        let radios = document.querySelectorAll('input[type=radio]');
        for (let i = 0; i < radios.length; ++i) {
            let radio = radios[i];

            if (radio === clickedRadio) {
                afterClickedRadio = true;
                radio.checked = true;
                continue;
            }
            if (!afterClickedRadio && radio.value === 'left') {
                radio.checked = true;
            }
            if (afterClickedRadio && clickedRadio.value === 'right' && radio.value === 'right') {
                radio.checked = true;
            }
        }
    });

    $('#submit-switch').on('click', function (e) {
        let form = $('#form')[0];
        if (form.checkValidity()) {
          	e.preventDefault();
            let radios = document.querySelectorAll('input[type=radio]'),
            decision = document.querySelector('input[name="ambiguity_switch"]');

            for (let i = 0; i < radios.length; ++i) {
                let radio = radios[i];

                if (radio.value === 'right' && radio.checked) {
                    decision.value = radio.dataset.num;
                    break;
                } else if (radio.value === 'left' && radio.checked && parseInt(radio.dataset.num) === parseInt(js_vars.num_choices)) {
                    decision.value = parseInt(js_vars.num_choices) + 1;
                }
            }

            console.log(decision.value);

            form.submit();
        }
    });

  	const showIntructions = document.getElementById('show-instructions');
  	const instructions = document.getElementById('instructions-reminder');
  	let shown = false;
  	showIntructions.addEventListener('click', function (e) {
      	if (!shown) {
          	shown = true;
        	instructions.style.display = 'block';
          	showIntructions.classList.add("btn-secondary");
          	showIntructions.innerHTML = 'Hide Instructions';
        } else {
          	shown=false;
          	instructions.style.display = 'none';
          	showIntructions.classList.remove("btn-secondary");
          	showIntructions.innerHTML = 'Click to see the reminder of the instruction';
        }

      	showIntructions.blur();
    })

  	document.getElementById('close-instructions').addEventListener('click', function (e) {
      	shown=false;
      	instructions.style.display = 'none';
      	showIntructions.classList.remove("btn-secondary");
      	showIntructions.innerHTML = 'Click to see the reminder of the instruction';
    })
}
</script>
{{ endblock }}