interactive objects integration

src/components/InteractiveObjects/MazeQuizGame/MazeQuizGame.vue

@@ -1,11 +1,56 @@
 <template>
-    <div>
-        MAZE
-    </div>
+    <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>