{{ 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_responses1" id="raw_responses1">

{{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>
<input type="hidden" name="raw_responses1" id="raw_responses1">

<b>solution of this question:<p id="solution"></p></b>
{{endif}}

<script>

    let responses = {}

    let trialIndex = 0;
    let trials2 = js_vars.trials2;

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

    function recordResponse(btn) {
        let trialId = trials2[trialIndex].id;
        responses[trialId] = btn.value;
        trialIndex++;
        if (trialIndex === trials2.length) {
            document.getElementById('raw_responses1').value = JSON.stringify(responses)
            document.getElementById('form').submit();
        } else {
            updateUI();
        }
    }

    updateUI();
</script>

{{ endblock }}