91 lines
2.1 KiB
Vue
91 lines
2.1 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 aButton = useTemplateRef('A-button');
|
|
|
|
onKeyStroke(['A', 'a'], () => {
|
|
if (props.phase != 'result') {
|
|
aButton.value[0].click();
|
|
}
|
|
});
|
|
|
|
const bButton = useTemplateRef('B-button');
|
|
|
|
onKeyStroke(['B', 'b'], () => {
|
|
if (props.phase != 'result') {
|
|
bButton.value[0].click();
|
|
}
|
|
});
|
|
|
|
const cButton = useTemplateRef('C-button');
|
|
|
|
onKeyStroke(['C', 'c'], () => {
|
|
if (props.phase != 'result') {
|
|
cButton.value[0].click();
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="flex flex-col gap-5 border-t px-4 py-5 border-base-300 bg-base-100"
|
|
>
|
|
<div class="text-xl">
|
|
{{ question?.text }}
|
|
</div>
|
|
<div class="flex flex-col gap-3">
|
|
<div
|
|
v-for="[element, value] of Object.entries({
|
|
A: (question as AdvancedQuestion)?.answer_a,
|
|
B: (question as AdvancedQuestion)?.answer_b,
|
|
C: (question as AdvancedQuestion)?.answer_c,
|
|
})"
|
|
:key="`btn_answer_${element}_${value}`"
|
|
>
|
|
<input
|
|
:id="`odp_${element}`"
|
|
:ref="`${element}-button`"
|
|
v-model="answer"
|
|
type="radio"
|
|
name="abc"
|
|
:value="element"
|
|
class="hidden"
|
|
/>
|
|
<label :for="`odp_${element}`">
|
|
<div
|
|
:class="
|
|
phase == 'exam'
|
|
? answer === element
|
|
? ' !btn-secondary'
|
|
: ''
|
|
: `${answer === element ? 'outline-set-solid outline-2' : ''} ${element == question?.correct_answer ? 'btn-success' : 'btn-error'}`
|
|
"
|
|
class="btn btn-primary btn-lg"
|
|
>
|
|
{{ element }}
|
|
</div>
|
|
<span class="block">{{ value }}</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
label {
|
|
@apply cursor-pointer flex flex-row gap-2 items-center;
|
|
&:hover {
|
|
@apply bg-base-200;
|
|
}
|
|
}
|
|
span {
|
|
@apply text-lg;
|
|
}
|
|
</style>
|