Add feature: Students can send in new questions

components/AddClosedEndedQuestion.vue

@@ -2,7 +2,7 @@
   <v-card>
     <ValidationObserver ref="observer" v-slot="{ invalid }">
       <form @submit.prevent="submit">
-        <v-card-title>Frage einreichen</v-card-title>
+        <v-card-title>Geschlossene Frage einreichen</v-card-title>
         <v-card-text>
           <v-row>
             <v-col cols="12">
@@ -37,7 +37,7 @@
         </v-card-text>
         <v-card-actions>
           <v-spacer />
-          <v-btn depressed outlined color="primary" @click="clear">Reset</v-btn>
+          <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>
       </form>
@@ -86,10 +86,10 @@ export default {
         status: 'neu'
       }
 
-      // Atomically add the new question to the "fragen" array field.
+      // Atomically add the new question to the "geschlossen" (fragen/{kursID}/geschlossen) array field.
       const questionsRef = doc(this.$db, 'fragen', this.$store.state.selectedCourse)
       updateDoc(questionsRef, {
-        fragen: arrayUnion(q) // Ref: https://firebase.google.com/docs/firestore/manage-data/add-data#update_elements_in_an_array
+        geschlossen: arrayUnion(q) // Ref: https://firebase.google.com/docs/firestore/manage-data/add-data#update_elements_in_an_array
       }).then((empty) => {
         // Successfully added new question to database
         this.$toast({ content: 'Deine Frage wurde eingereicht!', color: 'success' })

components/AddOpenEndedQuestion.vue

@@ -0,0 +1,111 @@
+<template>
+  <v-card>
+    <ValidationObserver ref="observer" v-slot="{ invalid }">
+      <form @submit.prevent="submit">
+        <v-card-title>Offene Frage einreichen</v-card-title>
+        <v-card-text>
+          <v-row>
+            <v-col cols="12">
+              <ValidationProvider v-slot="{ errors }" name="Frage/Aufgabenstellung" rules="required|min:20">
+                <v-textarea
+                  v-model="question"
+                  required
+                  auto-grow
+                  filled
+                  counter
+                  label="Frage/Aufgabenstellung"
+                  :error-messages="errors"
+                ></v-textarea>
+              </ValidationProvider>
+            </v-col>
+            <v-col cols="12">
+              <ValidationProvider v-slot="{ errors }" name="Musterlösung" rules="required|min:50">
+                <v-textarea
+                  v-model="solution"
+                  required
+                  auto-grow
+                  filled
+                  counter
+                  label="Musterlösung"
+                  :error-messages="errors"
+                ></v-textarea>
+              </ValidationProvider>
+            </v-col>
+          </v-row>
+        </v-card-text>
+        <v-card-actions>
+          <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>
+      </form>
+    </ValidationObserver>
+  </v-card>
+</template>
+
+<script>
+import { doc, updateDoc, arrayUnion } from 'firebase/firestore'
+// We use vee-validate@3 for form validation.
+// https://vee-validate.logaretm.com/v3/guide/basics.html
+import { ValidationProvider, ValidationObserver, extend } from 'vee-validate'
+import { required, min } from 'vee-validate/dist/rules'
+
+extend('required', {
+  ...required,
+  message: 'Pflichtfeld'
+})
+
+extend('min', {
+  ...min,
+  message: '{_field_} muss mindestens {length} Zeichen lang sein.'
+})
+
+export default {
+  components: {
+    ValidationProvider,
+    ValidationObserver
+  },
+  data () {
+    return {
+      loading: false,
+      question: '',
+      solution: ''
+    }
+  },
+  methods: {
+    submit () {
+      this.loading = true
+
+      const q = {
+        ersteller: this.$auth.currentUser.uid, // Ref: https://firebase.google.com/docs/reference/js/v8/firebase.User
+        erstellt: Date.now() / 1000, // Current UNIX timestamp in seconds
+        frage: this.question,
+        musterloesung: this.solution,
+        bewertungen: [],
+        schwierigkeit: []
+      }
+
+      // Atomically add the new question to the "offen" (fragen/{kursID}/offen) array field.
+      const questionsRef = doc(this.$db, 'fragen', this.$store.state.selectedCourse)
+      updateDoc(questionsRef, {
+        offen: arrayUnion(q) // Ref: https://firebase.google.com/docs/firestore/manage-data/add-data#update_elements_in_an_array
+      }).then((empty) => {
+        // Successfully added new question to database
+        this.$toast({ content: 'Deine Frage wurde eingereicht!', color: 'success' })
+      })
+      .catch((error) => {
+        // Failed to add question to database; display error message
+        this.$toast({content: error, color: 'error'})
+      })
+      .then(() => {
+        this.loading = false
+      })
+    },
+    clear () {
+      this.question = ''
+      this.solution = ''
+      this.$refs.observer.reset()
+    }
+  }
+}
+</script>

pages/courses/_course.vue

@@ -11,7 +11,10 @@
         <v-btn depressed color="primary" @click="playCoop">Co-op Mode</v-btn>
       </v-col>
       <v-col cols="12">
-        <AddQuestionComponent />
+        <AddClosedEndedQuestion />
+      </v-col>
+      <v-col cols="12">
+        <AddOpenEndedQuestion />
       </v-col>
     </v-row>
   </v-container>