{{ block title }}
Runde {{player.round_number}}
{{ endblock }}
{{ block content }}
<p>
    Bitte suchen Sie die passende Analogie aus
</p>

{{if Normal}}

        <p id="question"></p>

        <div>
            <button type="button" onclick="recordResponse(this)" value="A" id="optionA" class="btn btn-primary">
            </button>
            <button type="button" onclick="recordResponse(this)" value="B" id="optionB" class="btn btn-primary">
            </button>
            <button type="button" onclick="recordResponse(this)" value="C" id="optionC" class="btn btn-primary" >
            </button>
            <button type="button" onclick="recordResponse(this)" value="D" id="optionD" class="btn btn-primary">
            </button>
            <button type="button" onclick="recordResponse(this)" value="E" id="optionE" class="btn btn-primary">
            </button>
        </div>

        <input type="hidden" name="raw_responses" id="raw_responses">


{{else}}
    <p id="question"></p>

    <div>
        <button type="button" onclick="recordResponse(this)" value="A" id="optionA" class="btn btn-primary">
        </button>
        <button type="button" onclick="recordResponse(this)" value="B" id="optionB" class="btn btn-primary">
        </button>
        <button type="button" onclick="recordResponse(this)" value="C" id="optionC" class="btn btn-primary" >
        </button>
        <button type="button" onclick="recordResponse(this)" value="D" id="optionD" class="btn btn-primary">
        </button>
        <button type="button" onclick="recordResponse(this)" value="E" id="optionE" class="btn btn-primary">
        </button>
    </div>
        <b>solution of this question: <p id="solution"></p></b>

<input type="hidden" name="raw_responses" id="raw_responses">

{{endif}}

<script>

    let responses = {}

    let trialIndex = 0;
    let trials = js_vars.trials;

    function updateUI() {
        for (let item of ['question', 'optionA', 'optionB', 'optionC','optionD','optionE','solution']) {
            document.getElementById(item).innerText = trials[trialIndex][item];
        }
    }

    function recordResponse(btn) {
        let trialId = trials[trialIndex].id;
        responses[trialId] = btn.value;
        trialIndex++;
        if (trialIndex === trials.length) {
            document.getElementById('raw_responses').value = JSON.stringify(responses)
            document.getElementById('form').submit();
        } else {
            updateUI();
        }
    }
    function handleSubmit() {
        const selectedOption = document.querySelector('button.btn-primary:focus');
        const trialId = trials[trialIndex].id;
        responses[trialId] = selectedOption ? selectedOption.value : 0;
        document.getElementById('raw_responses').value = JSON.stringify(responses);
    }

    document.getElementById('form').addEventListener('submit', handleSubmit);

    updateUI();

    updateUI();
</script>

{{ endblock }}