98 lines
2.8 KiB
Vue
98 lines
2.8 KiB
Vue
<script setup lang="ts">
|
|
import { range } from 'lodash';
|
|
|
|
defineProps<{
|
|
result: ResultEndType;
|
|
countBasic: number;
|
|
countAdvanced: number;
|
|
now: string | null | undefined;
|
|
}>();
|
|
|
|
const emit = defineEmits<{
|
|
changeNow: [value: string];
|
|
changeCount: [num: number];
|
|
again: [];
|
|
home: [];
|
|
}>();
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="flex flex-col items-stretch p-4 gap-6 border-l border-base-300 bg-base-100"
|
|
>
|
|
<div class="btn btn-warning btn-xl" @click="$emit('home')">
|
|
{{ $t('goBackToHomePage') }}
|
|
</div>
|
|
|
|
<button class="btn btn-info btn-lg" @click="emit('changeNow', 'basic')">
|
|
{{ $t('basicQuestions') }}
|
|
</button>
|
|
|
|
<div
|
|
class="grid grid-cols-[repeat(auto-fit,50px)] gap-2 justify-around w-full"
|
|
>
|
|
<input
|
|
v-for="num in range(0, 20)"
|
|
:key="`choose-${num}-basic`"
|
|
type="radio"
|
|
:aria-label="(num + 1).toString()"
|
|
class="btn btn-md"
|
|
name="chooser"
|
|
:class="`${
|
|
result.basic[num].chosen_answer == ''
|
|
? 'btn-warning'
|
|
: result.basic[num].question?.correct_answer ===
|
|
result.basic[num].chosen_answer
|
|
? 'btn-success'
|
|
: 'btn-error'
|
|
} ${now === 'basic' && countBasic === num ? 'outline-set-solid outline-2' : ''}`"
|
|
:checked="now === 'basic' ? countBasic === num : false"
|
|
@click="
|
|
emit('changeNow', 'basic');
|
|
emit('changeCount', num);
|
|
"
|
|
/>
|
|
</div>
|
|
|
|
<button class="btn btn-info btn-lg" @click="emit('changeNow', 'advanced')">
|
|
{{ $t('advancedQuestions') }}
|
|
</button>
|
|
|
|
<div
|
|
class="grid grid-cols-[repeat(auto-fit,50px)] gap-2 justify-around w-full"
|
|
>
|
|
<input
|
|
v-for="num in range(0, 12)"
|
|
:key="`choose-${num}-advanced`"
|
|
type="radio"
|
|
:aria-label="`${num + 1}`"
|
|
class="btn btn-md"
|
|
name="chooser"
|
|
:class="`${
|
|
result.advanced[num].chosen_answer == ''
|
|
? 'btn-warning'
|
|
: result.advanced[num].question?.correct_answer ===
|
|
result.advanced[num].chosen_answer
|
|
? 'btn-success'
|
|
: 'btn-error'
|
|
} ${now === 'advanced' && countAdvanced === num ? 'outline-set-solid outline-2' : ''}`"
|
|
:checked="now === 'advanced' ? countAdvanced === num : false"
|
|
@click="
|
|
emit('changeNow', 'advanced');
|
|
emit('changeCount', num);
|
|
"
|
|
/>
|
|
</div>
|
|
<div class="flex-1">
|
|
<div class="*:inline">
|
|
{{ $t('points') }}: <slot name="points" /> / 74
|
|
</div>
|
|
<div class="*:inline">
|
|
{{ $t('result') }}: <slot name="resultTrueFalse" />
|
|
</div>
|
|
</div>
|
|
<div class="btn btn-warning btn-xl" @click="$emit('again')">
|
|
{{ $t('startAgain') }}
|
|
</div>
|
|
</div>
|
|
</template>
|