70 lines
1.8 KiB
Vue
70 lines
1.8 KiB
Vue
<script lang="ts" setup>
|
|
import { onKeyStroke } from '@vueuse/core';
|
|
|
|
const props = defineProps<{
|
|
question: Question;
|
|
phase: string;
|
|
}>();
|
|
|
|
const answer = defineModel<string | null | undefined>();
|
|
|
|
const yesButton = useTemplateRef('true-button');
|
|
|
|
onKeyStroke(['T', 't', 'Y', 'y'], () => {
|
|
if (props.phase != 'result') {
|
|
yesButton.value[0].click();
|
|
}
|
|
});
|
|
|
|
const noButton = useTemplateRef('false-button');
|
|
|
|
onKeyStroke(['N', 'n'], () => {
|
|
if (props.phase != 'result') {
|
|
noButton.value[0].click();
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="flex flex-none flex-col gap-6 border-t px-4 py-5 border-base-300 bg-base-100"
|
|
>
|
|
<div class="text-xl">
|
|
{{ question?.text }}
|
|
</div>
|
|
<div>
|
|
<div class="flex flex-row justify-around">
|
|
<input
|
|
v-for="[element, value] of Object.entries({ yes: true, no: false })"
|
|
:id="`odp_${element}`"
|
|
:ref="`${value}-button`"
|
|
:key="`btn_answer_${element}`"
|
|
v-model="answer"
|
|
type="radio"
|
|
name="tak_nie"
|
|
:value="value.toString()"
|
|
class="btn btn-primary btn-xl"
|
|
:aria-label="$t(element).toLocaleUpperCase()"
|
|
:class="
|
|
phase == 'exam'
|
|
? answer == null
|
|
? false
|
|
: answer === value.toString()
|
|
? '!btn-secondary'
|
|
: ''
|
|
: `${
|
|
answer === value.toString()
|
|
? 'outline-set-solid outline-2'
|
|
: ''
|
|
} ${
|
|
question?.correct_answer?.toString() == value.toString()
|
|
? ' btn-success'
|
|
: ' btn-error'
|
|
}`
|
|
"
|
|
:checked="answer == null ? false : answer === value.toString()"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|