tijl.dev-core/web/views/apps/flags/question.html

<div class="container">

    <div>

        <div>
            Questions left: {{.QuestionsLeft}}
        </div>
        <div>
            Errors: {{.Errors}}
        </div>
        {{range .TimeLeft}}
        <div>
            Seconds left: <span id="countdown">{{.}}</span>
        </div>
        {{end}}

        <div class="flex justify-center p-4 mt-4">
            <span style="font-size: 105px;">{{.Flag}}</span>
        </div>

        <div hx-boost="true" id="answers" class="flex justify-center flex-wrap">
            {{range $index, $answer := .Answers}}
            <form method="post" class="m-1">
                <input class="hidden" name="type" value="answer" />
                <input class="hidden" name="answer" value="{{.}}" />
                {{if eq . $.PreviousError}}
                <button disabled type="submit" class="btn btn-lg btn-error rounded-2xl">{{index $.T $answer}}<kbd
                        class="hidden lg:block kbd kbd-sm">{{index $.ShortcutKeys $index}}</kbd></button>
                {{else}}
                <button type="submit" class="btn btn-lg rounded-2xl">{{index $.T $answer}} <kbd
                        class="hidden lg:block kbd kbd-sm">{{index $.ShortcutKeys $index}}</kbd></button>
                {{end}}
            </form>
            {{end}}
        </div>

        <form hx-boost="true" method="post">
            <input class="hidden" name="type" value="exit" />
            <button type="submit" class="btn hover:btn-error">Stop</button>
        </form>

    </div>

</div>

{{range .TimeLeft}}
<script>
    function startCountdown() {
        const countdownElement = document.getElementById('countdown');
        let countdownNumber = parseInt(countdownElement.innerHTML, 10);
        const intervalId = setInterval(() => {
            countdownNumber -= 1;
            countdownElement.innerHTML = countdownNumber;
        }, 1000);
    }

    startCountdown();
</script>
{{end}}

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const keyMap = {
            'd': 0,
            'f': 1,
            'h': 2,
            'j': 3,
            'k': 4
        };

        function triggerButton(key) {
            const index = keyMap[key];
            if (index !== undefined) {
                const buttons = document.querySelectorAll('#answers button');
                if (buttons[index]) {
                    buttons[index].click();
                }
            }
        }

        document.addEventListener('keydown', function (e) {
            const key = e.key.toLowerCase();
            if (keyMap.hasOwnProperty(key)) {
                triggerButton(key);
            }
        });
    });
</script>