{{ block title }}
Tutroial - Lotteries vs Safe Options
{{ endblock }}

{{ block content }}
<div class="alert alert-primary" role="alert">
    <p>
        The idea of this experiment is to find the point at which you are willing to switch between the lottery and the
        safe payment.
        Following this idea, the experiment comes with a feature that, once you select a safe payment or a lottery,
        automatically checks all the remaining safe payments/lotteries for you.
    </p>
    <p>
        For your bonus payment, one of the scenarios (i.e. table rows) will be randomly selected. If you chose the safe
        payment in that row, your bonus will be the safe payment. If you chose the lottery, the lottery will be drawn,
        and the result will be your bonus.
    </p>
    <p>Mind that you can revise your decision for as long as you want before submitting it.</p>
</div>


<strong>Choose a value for each row</strong>

<form id="form">
<table class="table table-striped">
    <colgroup>
        <col width="45%">
        <col width="10%">
        <col width="45%">
    </colgroup>
    <tr>
        <td align="right"><b>Lottery</b></td>
        <td></td>
        <td align="left"><b>Safe Payment</b></td>
    </tr>
    {{ for key, amount in right_side_amounts.items() }}
    <tr>
        <td align="right">
            <b>10€</b> with 50% probability, <b>0€</b> with 50% probability
        <td align="middle">
            <input type="radio"
                   name="c{{ key }}"
                   value="left"
                   required="required">&nbsp;&nbsp;
            <input type="radio"
                   name="c{{ key }}"
                   value="right"
                   required="required">
        </td>
        <td align="left">
            <b>{{ amount }}€ </b> with 100% probability
    </tr>
    {{ endfor }}
</table>
</form>

<div style="width:100px; margin:0 auto;">
    <button type="button" class="btn btn-primary" onclick="submitForm()">Next</button>
</div>


{{ endblock }}


{{ block scripts }}

<script>


    document.addEventListener("DOMContentLoaded", function() {
        const leftButtons = document.querySelectorAll('input[type="radio"][value="left"]');
        const rightButtons = document.querySelectorAll('input[type="radio"][value="right"]');

        leftButtons.forEach((button, index) => {
            button.addEventListener('click', () => {
                // Set all left buttons before this to checked
                for (let i = 0; i <= index; i++) {
                    leftButtons[i].checked = true;
                }
                // Set all right buttons after this to checked
                for (let i = index + 1; i < rightButtons.length; i++) {
                    rightButtons[i].checked = true;
                }
            });
        });

        rightButtons.forEach((button, index) => {
            button.addEventListener('click', () => {
                // Set all left buttons before this to unchecked
                for (let i = 0; i < index; i++) {
                    leftButtons[i].checked = true;
                }
                // Set all right buttons after this to checked
                for (let i = index + 1; i < rightButtons.length; i++) {
                    rightButtons[i].checked = true;
                }
            });
        });
    });

        function submitForm() { // Accept the event object as a parameter
        let errorMessage = '';
        for (let i = 0; i <= 1000; i += 200) {
            if (!document.querySelector(`input[name="c${i}"]:checked`)) {
                errorMessage += `Please select an option for the radio button group named ${i}. `;
            }
        }

        if (errorMessage) {
            event.preventDefault(); // Prevent form submission if there are errors
            alert(errorMessage);
        } else {
            // If no errors, submit the form
            let form = document.getElementById('form');
            form.submit();
        }
    }

</script>
{{ endblock }}