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" class="flex justify-center flex-wrap">
            {{range .Answers}}
            <form method="post" class="m-1">
                <input class="hidden" name="type" value="answer" />
                <input class="hidden" name="answer" value="{{.}}" />
                <button type="submit" class="btn btn-lg rounded-2xl">{{index $.T .}}</button>
            </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}}