85 lines
1.8 KiB
Vue
85 lines
1.8 KiB
Vue
<script lang="ts" setup>
|
|
defineProps<{
|
|
question: AdvancedQuestion | undefined;
|
|
}>();
|
|
|
|
const abc_model = defineModel();
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex flex-col gap-3 border-t p-4 border-slate-300 bg-slate-100">
|
|
<div class="text-xl">{{ question?.pytanie }}</div>
|
|
<div>
|
|
<div class="flex flex-col">
|
|
<input
|
|
type="radio"
|
|
name="abc"
|
|
id="odp_a"
|
|
v-model="abc_model"
|
|
value="a"
|
|
class="hidden"
|
|
/>
|
|
<label for="odp_a">
|
|
<div
|
|
:class="`btn-answer ${abc_model == 'a' ? ' !bg-fuchsia-500' : ''}`"
|
|
>
|
|
A
|
|
</div>
|
|
<span class="block">{{ question?.odp_a }}</span>
|
|
</label>
|
|
<input
|
|
type="radio"
|
|
name="abc"
|
|
id="odp_b"
|
|
v-model="abc_model"
|
|
value="b"
|
|
class="hidden"
|
|
/>
|
|
<label for="odp_b">
|
|
<div
|
|
:class="`btn-answer ${abc_model == 'b' ? ' !bg-fuchsia-500' : ''}`"
|
|
>
|
|
B
|
|
</div>
|
|
<span class="block">{{ question?.odp_b }}</span>
|
|
</label>
|
|
<input
|
|
type="radio"
|
|
name="abc"
|
|
id="odp_c"
|
|
v-model="abc_model"
|
|
value="c"
|
|
class="hidden"
|
|
/>
|
|
<label for="odp_c">
|
|
<div
|
|
:class="`btn-answer ${abc_model == 'c' ? ' !bg-fuchsia-500' : ''}`"
|
|
>
|
|
C
|
|
</div>
|
|
<span class="block">{{ question?.odp_c }}</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.btn-answer {
|
|
@apply flex justify-center items-center text-center;
|
|
}
|
|
label {
|
|
@apply cursor-pointer flex flex-row gap-2 items-center;
|
|
}
|
|
|
|
label:hover .btn-answer {
|
|
@apply bg-blue-300;
|
|
}
|
|
|
|
label:hover {
|
|
@apply bg-slate-200;
|
|
}
|
|
|
|
/* label > div {
|
|
} */
|
|
</style>
|