89 lines
2.6 KiB
HTML
89 lines
2.6 KiB
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>
|