{{ block title }}
    First game
{{ endblock }}

{{ block content }}


    <img class="gameImage" src="{{ static 'IQTest/1/game1.png' }}" width="800px"/>

    {{ for image in image_data }}
        <label style="text-align: center">
            <img src="{{ static image.path }}" width="200px">
            <br>
            <input type="radio" name="img_choice" value="{{ image.name }}" class="persist">
        </label>
    {{ endfor }}
    <br><br><br>
    <button>
    Submit
    </button>
    {{ formfield_errors 'input1' }}
    <input type="hidden" name="input1" id="input1" />

    <script>
        function persistInput(inp) {
            let isCheckbox = inp.type === 'checkbox';

            let valueAttr = isCheckbox ? 'checked' : 'value';
            let key = `input-${pageNumber}-${inp.name}`;
            let storedValue = sessionStorage.getItem(key);
            if (storedValue != null) {
                form[inp.name][valueAttr] = storedValue;
            }

            inp.addEventListener('input', function () {
                let curValue = inp[valueAttr];
                // needed because sessionStorage implicitly converts true/false to strings
                if (isCheckbox) curValue = curValue ? 'checked' : '';
                sessionStorage.setItem(key, curValue);
                console.log("curValue: " + ImageNameWithoutFileEnding(curValue))
                document.getElementById("input1").value = ImageNameWithoutFileEnding(curValue);
            });
        }

        function ImageNameWithoutFileEnding(imageName) {
            let fullString = imageName.toString()
            return fullString[2];
        }

        function AddPointsIfCorrectAnswer(){
                liveSend({'solution': '1', 'value': 100})
        }
        // since sessionStorage persists across pages,
        // we don't want to contaminate other pages in the same session
        // whose fields happen to have the same name.
        let urlParts = window.location.pathname.split('/');
        let lastIndex = urlParts.length - 1
        let pageNumber = urlParts[lastIndex];
        // in case the path somehow has a trailing slash
        if (pageNumber === '') pageNumber = urlParts[lastIndex - 1];
        let form;
        document.addEventListener("DOMContentLoaded", function (event) {
            form = document.getElementById('form');
            for (let inp of document.getElementsByClassName('persist')) {
                persistInput(inp);
            }
        });
    </script>

{{ endblock }}