Rakantor/iu-quiz-app
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor: layout

Browse Source
This commit is contained in:
Rakantor
2022-11-05 18:44:52 +01:00
parent cc20ed870c
commit 1ed0790804
9 changed files with 377 additions and 164 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
components/AddClosedEndedQuestion.vue
View File

@@ -2,45 +2,54 @@
<v-card>
<ValidationObserver ref="observer" v-slot="{ invalid }">
<form @submit.prevent="submit">
<v-card-title>Geschlossene Frage einreichen</v-card-title>
<v-card-text>
<v-row>
<v-col cols="12">
<ValidationProvider v-slot="{ errors }" name="frage" rules="required">
<v-text-field v-model="question" required label="Frage" :error-messages="errors"></v-text-field>
</ValidationProvider>
</v-col>
<v-col v-for="(n, index) in 4" :key="index">
<ValidationProvider v-slot="{ errors }" :name="`antwort${n}`" rules="required">
<v-text-field v-model="answers[index]" required :label="`Antwort #${n}`" :error-messages="errors"></v-text-field>
</ValidationProvider>
</v-col>
<v-col cols="12">
<ValidationProvider v-slot="{ errors }" name="richtig" rules="required">
<v-select v-model="correctAnswer" required :items="answers" label="Richtige Antwort" :error-messages="errors"></v-select>
</ValidationProvider>
</v-col>
<v-col cols="12">
<v-text-field
v-model="comment"
label="(Optional) Anmerkung"
persistent-hint
hint="Nur der Tutor kann deine Anmerkung sehen."
>
<template #message="{ message }">
<v-icon small>mdi-information</v-icon>
<span>{{ message }}</span>
</template>
</v-text-field>
</v-col>
</v-row>
</v-card-text>
<v-card-actions>
<v-btn v-if="$config.NODE_ENV !== 'production'" depressed color="warning" @click="addQuestionsForTesting">+10 Fragen</v-btn>
<v-spacer />
<v-btn text color="primary" @click="clear">Reset</v-btn>
<v-btn type="submit" depressed color="primary" :loading="loading" :disabled="invalid">Einreichen</v-btn>
</v-card-actions>
<v-card-title style="cursor: pointer;" @click="showBody = !showBody">
<span class="flex-grow-1 flex-shrink-0 text-subtitle-1 font-weight-medium">Eigene Quizfrage einreichen</span>
<v-btn icon @click.stop="showBody = !showBody">
<v-icon>{{ showBody ? 'mdi-chevron-up' : 'mdi-chevron-down' }}</v-icon>
</v-btn>
</v-card-title>
<v-expand-transition>
<div v-show="showBody">
<v-card-text>
<v-row>
<v-col cols="12">
<ValidationProvider v-slot="{ errors }" name="frage" rules="required">
<v-text-field v-model="question" required label="Frage" :error-messages="errors"></v-text-field>
</ValidationProvider>
</v-col>
<v-col v-for="(n, index) in 4" :key="index" cols="6">
<ValidationProvider v-slot="{ errors }" :name="`antwort${n}`" rules="required">
<v-text-field v-model="answers[index]" required :label="`Antwort #${n}`" :error-messages="errors"></v-text-field>
</ValidationProvider>
</v-col>
<v-col cols="12">
<ValidationProvider v-slot="{ errors }" name="richtig" rules="required">
<v-select v-model="correctAnswer" required :items="answers" label="Richtige Antwort" :error-messages="errors"></v-select>
</ValidationProvider>
</v-col>
<v-col cols="12">
<v-text-field
v-model="comment"
label="(Optional) Anmerkung"
persistent-hint
hint="Nur der Tutor kann deine Anmerkung sehen."
>
<template #message="{ message }">
<v-icon small>mdi-information</v-icon>
<span>{{ message }}</span>
</template>
</v-text-field>
</v-col>
</v-row>
</v-card-text>
<v-card-actions>
<v-btn v-if="$config.NODE_ENV !== 'production'" depressed color="warning" @click="addQuestionsForTesting">+10 Fragen</v-btn>
<v-spacer />
<v-btn text color="primary" @click="clear">Reset</v-btn>
<v-btn type="submit" depressed color="primary" :loading="loading" :disabled="invalid">Einreichen</v-btn>
</v-card-actions>
</div>
</v-expand-transition>
</form>
</ValidationObserver>
</v-card>
@@ -67,6 +76,7 @@ export default {
},
data () {
return {
showBody: false,
loading: false,
question: '',
answers: [],