56 lines
2.6 KiB
Vue
56 lines
2.6 KiB
Vue
<template>
|
|
<v-checkbox v-model="modelValue.shuffle" label="Shuffle questions"></v-checkbox>
|
|
<v-dialog max-width="1400" scrollable>
|
|
<template v-slot:activator="{ props: activatorProps }">
|
|
<v-btn v-bind="activatorProps">Manage Questions</v-btn>
|
|
</template>
|
|
|
|
<template v-slot:default="{ isActive }">
|
|
<v-card>
|
|
<v-card-text>
|
|
<div class="d-flex flex-wrap w-100">
|
|
<v-card v-for="(n, ni) in modelValue.questions" class="v-col-6" variant="outlined" border="0">
|
|
<v-card-item>
|
|
<v-text-field density="compact" hide-details :label="`Question #${ni+1}`" v-model="n.q" class="py-2">
|
|
<template v-slot:append>
|
|
<v-btn variant="plain" color="error" @click="deleteQuestion(ni)">
|
|
<v-icon icon="mdi-delete-forever"></v-icon>
|
|
</v-btn>
|
|
</template>
|
|
</v-text-field>
|
|
<v-text-field hide-details density="compact" v-model="n.a[0]" class="pb-2"
|
|
label="Correct answer" icon-color="success" prepend-icon="mdi-check"></v-text-field>
|
|
<v-text-field hide-details density="compact" v-model="n.a[1]" class="pb-2"
|
|
label="Wrong answer #1" icon-color="error" prepend-icon="mdi-close"></v-text-field>
|
|
<v-text-field hide-details density="compact" v-model="n.a[2]" class="pb-2"
|
|
label="Wrong answer #2" v-if="n.a[1]" icon-color="error" prepend-icon="mdi-close"></v-text-field>
|
|
<v-text-field density="compact" hide-details label="Wrong answer hint" v-model="n.h" class="pb-2"></v-text-field>
|
|
</v-card-item>
|
|
<v-divider></v-divider>
|
|
</v-card>
|
|
</div>
|
|
</v-card-text>
|
|
<v-btn @click="addQuestion" block>Add question</v-btn>
|
|
</v-card>
|
|
</template>
|
|
</v-dialog>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props:['modelValue'],
|
|
mounted(){
|
|
this.modelValue.questions ??= [];
|
|
},
|
|
methods:{
|
|
addQuestion(){
|
|
this.modelValue.questions.push({
|
|
q:'', a:['', ''], h:''
|
|
})
|
|
},
|
|
deleteQuestion(idx){
|
|
this.modelValue.questions.splice(idx, 1);
|
|
}
|
|
}
|
|
}
|
|
</script> |