Make community questions editable by everyone

components/AddOpenEndedQuestion.vue

@@ -2,79 +2,80 @@
   <v-card>
     <ValidationObserver ref="observer" v-slot="{ invalid }">
       <form @submit.prevent="submit">
-        <v-card-title style="cursor: pointer;" @click="showBody = !showBody">
+        <v-card-text>
-          <span class="flex-grow-1 flex-shrink-0 text-subtitle-1 font-weight-medium">Eigene Frage einsenden</span>
+          <v-row>
-          <v-btn icon @click.stop="showBody = !showBody">
+            <v-col cols="12">
-            <v-icon>{{ showBody ? 'mdi-chevron-up' : 'mdi-chevron-down' }}</v-icon>
+              <ValidationProvider v-slot="{ errors }" name="Kapitelnummer" :rules="{ regex: /^[1-9]+$/ }">
+                <v-text-field
+                  v-model="chapter"
+                  filled
+                  hint="Freilassen, wenn deine Frage das Wissen aus mehreren Kapiteln vereint."
+                  persistent-hint
+                  maxlength="1"
+                  label="Kapitelnummer"
+                  :error-messages="errors"
+                ></v-text-field>
+              </ValidationProvider>
+            </v-col>
+            <v-col cols="12">
+              <ValidationProvider v-slot="{ errors }" name="Frage/Aufgabenstellung" :rules="{ required: true, min: 20, max: questionMaxLength }">
+                <v-textarea
+                  v-model="question"
+                  required
+                  auto-grow
+                  filled
+                  counter
+                  :maxlength="questionMaxLength"
+                  label="Frage/Aufgabenstellung"
+                  :error-messages="errors"
+                ></v-textarea>
+              </ValidationProvider>
+            </v-col>
+            <v-col cols="12">
+              <ValidationProvider v-slot="{ errors }" name="Musterlösung" :rules="{ required: true, min: 50, max: solutionMaxLength }">
+                <v-textarea
+                  v-model="solution"
+                  required
+                  auto-grow
+                  filled
+                  counter
+                  :maxlength="solutionMaxLength"
+                  label="Musterlösung"
+                  :error-messages="errors"
+                ></v-textarea>
+              </ValidationProvider>
+            </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="reset">Reset</v-btn>
+          <v-btn v-if="editing" outlined color="primary" @click="$emit('close')">Abbrechen</v-btn>
+          <v-btn
+            type="submit"
+            depressed
+            color="primary"
+            :loading="loading"
+            :disabled="invalid"
+          >
+            {{ editing ? 'Absenden' : 'Einreichen' }}
           </v-btn>
-        </v-card-title>
+        </v-card-actions>
-        <v-expand-transition>
-          <div v-show="showBody">
-            <v-card-text>
-              <v-row>
-                <v-col cols="12">
-                  <ValidationProvider v-slot="{ errors }" name="Kapitelnummer" :rules="{ regex: /^[1-9]+$/ }">
-                    <v-text-field
-                      v-model="chapter"
-                      filled
-                      hint="Freilassen, wenn deine Frage das Wissen aus mehreren Kapiteln vereint."
-                      persistent-hint
-                      maxlength="1"
-                      label="Kapitelnummer"
-                      :error-messages="errors"
-                    ></v-text-field>
-                  </ValidationProvider>
-                </v-col>
-                <v-col cols="12">
-                  <ValidationProvider v-slot="{ errors }" name="Frage/Aufgabenstellung" :rules="{ required: true, min: 20, max: questionMaxLength }">
-                    <v-textarea
-                      v-model="question"
-                      required
-                      auto-grow
-                      filled
-                      counter
-                      :maxlength="questionMaxLength"
-                      label="Frage/Aufgabenstellung"
-                      :error-messages="errors"
-                    ></v-textarea>
-                  </ValidationProvider>
-                </v-col>
-                <v-col cols="12">
-                  <ValidationProvider v-slot="{ errors }" name="Musterlösung" :rules="{ required: true, min: 50, max: solutionMaxLength }">
-                    <v-textarea
-                      v-model="solution"
-                      required
-                      auto-grow
-                      filled
-                      counter
-                      :maxlength="solutionMaxLength"
-                      label="Musterlösung"
-                      :error-messages="errors"
-                    ></v-textarea>
-                  </ValidationProvider>
-                </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>
 </template>
 
 <script>
-import { collection, doc, addDoc, writeBatch } from 'firebase/firestore'
+import { collection, doc, addDoc, setDoc, writeBatch } 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, max, regex } from 'vee-validate/dist/rules'
 import dedent from 'dedent'
+import _isEmpty from 'lodash-es/isEmpty'
+import _isEqual from 'lodash-es/isEqual'
 import { OpenEndedQuestion, OpenEndedQuestionConverter } from '~/plugins/open-ended-question'
 
 extend('required', {
@@ -102,17 +103,32 @@ export default {
     ValidationProvider,
     ValidationObserver
   },
+  props: {
+    openEndedQuestion: OpenEndedQuestion
+  },
   data () {
     return {
       questionMaxLength: 250,
-      solutionMaxLength: 1000,
+      solutionMaxLength: 1500,
       chapter: null,
       question: '',
       solution: '',
-      showBody: false,
       loading: false
     }
   },
+  computed: {
+    editing () {
+      return !_isEmpty(this.openEndedQuestion)
+    }
+  },
+  watch: {
+    openEndedQuestion () {
+      this.reset()
+    }
+  },
+  mounted () {
+    this.reset()
+  },
   methods: {
     submit () {
       // Remove extra spaces at the start and end of the string (trim),
@@ -125,41 +141,80 @@ export default {
       this.$nextTick(() => {
         this.$refs.observer.validate().then((success) => {
           if (!success) return
-
+          this.editing ? this.updateQuestion() : this.createQuestion()
-          this.loading = true
-          const q = new OpenEndedQuestion(
-            null,
-            this.chapter,
-            this.question,
-            this.solution,
-            this.$auth.currentUser.uid, // Ref: https://firebase.google.com/docs/reference/js/v8/firebase.User
-            Date.now() / 1000, // Current UNIX timestamp in seconds
-            [],
-            {}
-          )
-
-          // Add a new document with a generated id.
-          addDoc(collection(this.$db, `kurse/${this.$store.state.selectedCourse}/fragenOffen`).withConverter(OpenEndedQuestionConverter), q)
-          .then((docRef) => {
-            // Successfully added new question to database
-            q.id = docRef.id
-            this.$emit('added', q)
-            this.$toast({ content: 'Deine Frage wurde hinzugefügt!', color: 'success' })
-          })
-          .catch((error) => {
-            // Failed to add question to database; display error message
-            this.$toast({content: error, color: 'error'})
-          })
-          .then(() => {
-            this.loading = false
-          })
         })
       })
     },
-    clear () {
+    createQuestion () {
-      this.chapter = ''
+      const q = new OpenEndedQuestion(
-      this.question = ''
+        null,
-      this.solution = ''
+        this.chapter,
+        this.question,
+        this.solution,
+        this.$auth.currentUser.uid,
+        Date.now() / 1000, // Current UNIX timestamp in seconds
+        [],
+        {}
+      )
+
+      // Add a new document with a generated id
+      this.loading = true
+      addDoc(collection(this.$db, `kurse/${this.$store.state.selectedCourse}/fragenOffen`).withConverter(OpenEndedQuestionConverter), q)
+      .then((docRef) => {
+        // Successfully added new question to database
+        q.id = docRef.id
+        this.$store.commit('addOpenEndedQuestion', q)
+        this.$toast({ content: 'Deine Frage wurde hinzugefügt!', color: 'success' })
+      })
+      .catch((error) => {
+        // Failed to add question to database; display error message
+        this.$toast({content: error, color: 'error'})
+      })
+      .then(() => {
+        this.loading = false
+      })
+    },
+    updateQuestion () {
+      const q = new OpenEndedQuestion(
+        this.openEndedQuestion.id,
+        this.chapter,
+        this.question,
+        this.solution,
+        this.openEndedQuestion.creator,
+        this.openEndedQuestion.created,
+        this.openEndedQuestion.helpful,
+        this.openEndedQuestion.difficulty
+      )
+
+      // Abort if no changes were made to the question
+      if (_isEqual(this.openEndedQuestion, q)) return
+
+      // Update an existing document
+      this.loading = true
+      setDoc(doc(this.$db, `kurse/${this.$store.state.selectedCourse}/fragenOffen/${q.id}`).withConverter(OpenEndedQuestionConverter), q)
+      .then((docRef) => {
+        // Successfully updated the question
+        this.$store.commit('addOpenEndedQuestion', q)
+        this.$toast({ content: 'Die Frage wurde überarbeitet!', color: 'success' })
+      })
+      .catch((error) => {
+        // Failed to add question to database; display error message
+        this.$toast({content: error, color: 'error'})
+      })
+      .then(() => {
+        this.loading = false
+      })
+    },
+    reset () {
+      if (this.editing) {
+        this.chapter = this.openEndedQuestion.chapter
+        this.question = this.openEndedQuestion.question
+        this.solution = this.openEndedQuestion.solution
+      } else {
+        this.chapter = ''
+        this.question = ''
+        this.solution = ''
+      }
       this.$refs.observer.reset()
     },
     // TODO: This method is used for writing test data to the database and should be removed in production

components/CommunityComponent.vue

@@ -1,9 +1,18 @@
 <template>
   <v-card>
     <v-card-title>Community Fragen</v-card-title>
-    <OpenEndedQuestionsList :questions="questions" />
+    <OpenEndedQuestionsList />
     <v-divider></v-divider>
-    <AddOpenEndedQuestion @added="addQuestionToList" />
+    <v-expansion-panels accordion class="text-subtitle-1 font-weight-medium">
+      <v-expansion-panel>
+        <v-expansion-panel-header>
+          Eigene Frage einsenden
+        </v-expansion-panel-header>
+        <v-expansion-panel-content>
+          <AddOpenEndedQuestion />
+        </v-expansion-panel-content>
+      </v-expansion-panel>
+    </v-expansion-panels>
   </v-card>
 </template>
 
@@ -12,16 +21,10 @@ import { collection, getDocs } from 'firebase/firestore'
 import { OpenEndedQuestionConverter } from '~/plugins/open-ended-question'
 
 export default {
-  name: 'CoopComponent',
+  name: 'CommunityComponent',
-  props: {
+  computed: {
-    courseId: {
+    courseId () {
-      type: String,
+      return this.$store.state.selectedCourse
-      required: true
-    }
-  },
-  data () {
-    return {
-      questions: []
     }
   },
   created () {
@@ -34,18 +37,16 @@ export default {
 
       // Execute the query
       getDocs(questionsRef).then((querySnapshot) => {
-        this.questions = []
+        const questions = []
         querySnapshot.forEach((doc) => {
           // Convert to OpenEndedQuestion object
-          this.questions.push(doc.data())
+          questions.push(doc.data())
         })
+        this.$store.commit('setOpenEndedQuestions', questions)
       }).catch((error) => {
         // Failed to fetch questions from the database; display error message
         this.$toast({ content: error, color: 'error' })
       })
-    },
-    addQuestionToList (q) {
-      this.questions.push(q)
     }
   }
 }

components/OpenEndedQuestionsList.vue

@@ -1,116 +1,121 @@
 <template>
-  <v-data-iterator
+  <v-container fluid>
-    :items="items"
+    <v-dialog v-model="show" persistent max-width="600">
-    :items-per-page.sync="itemsPerPage"
+      <AddOpenEndedQuestion :open-ended-question="selectedQuestion" @close="show = false" />
-    :page.sync="page"
+    </v-dialog>
-    :search="search"
+    <v-data-iterator
-    disable-sort
+      :items="items"
-    no-data-text="Keine Daten vorhanden"
+      :items-per-page.sync="itemsPerPage"
-    no-results-text="Keine passenden Ergebnisse gefunden"
+      :page.sync="page"
-    locale="de-DE"
+      :search="search"
-    class="text-center"
+      disable-sort
-    :footer-props="{ itemsPerPageOptions: itemsPerPageArray, itemsPerPageText: 'Fragen pro Seite'}"
+      no-data-text="Keine Daten vorhanden"
-  >
+      no-results-text="Keine passenden Ergebnisse gefunden"
-    <template #header>
+      locale="de-DE"
-      <v-toolbar flat class="mb-1">
+      class="text-center"
-        <v-text-field
+      :footer-props="{ itemsPerPageOptions: itemsPerPageArray, itemsPerPageText: 'Fragen pro Seite'}"
-          v-model="search"
+    >
-          clearable
+      <template #header>
-          flat
+        <v-toolbar flat class="mb-1">
-          solo-inverted
+          <v-text-field
-          hide-details
+            v-model="search"
-          prepend-inner-icon="mdi-magnify"
+            clearable
-          label="Suchen"
-        ></v-text-field>
-        <template v-if="$vuetify.breakpoint.mdAndUp">
-          <v-spacer></v-spacer>
-          <v-select
-            v-model="sortBy"
             flat
             solo-inverted
             hide-details
-            :items="keys"
+            prepend-inner-icon="mdi-magnify"
-            item-text="key"
+            label="Suchen"
-            item-value="value"
+          ></v-text-field>
-            prepend-inner-icon="mdi-sort"
+          <template v-if="$vuetify.breakpoint.mdAndUp">
-            label="Sortieren"
+            <v-spacer></v-spacer>
-          ></v-select>
+            <v-select
-          <v-spacer></v-spacer>
+              v-model="sortBy"
-          <v-btn-toggle
+              flat
-            v-model="sortDesc"
+              solo-inverted
-            mandatory
+              hide-details
-          >
+              :items="keys"
-            <v-btn large depressed :value="false">
+              item-text="key"
-              <v-icon>mdi-sort-ascending</v-icon>
+              item-value="value"
-            </v-btn>
+              prepend-inner-icon="mdi-sort"
-            <v-btn large depressed :value="true">
+              label="Sortieren"
-              <v-icon>mdi-sort-descending</v-icon>
+            ></v-select>
-            </v-btn>
+            <v-spacer></v-spacer>
-          </v-btn-toggle>
+            <v-btn-toggle
-        </template>
+              v-model="sortDesc"
-      </v-toolbar>
+              mandatory
-    </template>
-
-    <template #default="props">
-      <v-container fluid>
-        <v-card outlined>
-          <v-expansion-panels v-model="openPanels" hover accordion>
-            <v-expansion-panel
-              v-for="(item, i) in props.items"
-              :key="i"
-              @click="setSelectedQuestion(item)"
             >
-              <v-expansion-panel-header v-slot="{ open }">
+              <v-btn large depressed :value="false">
-                <v-row dense>
+                <v-icon>mdi-sort-ascending</v-icon>
-                  <v-col cols="12" class="text-overline text--secondary">
+              </v-btn>
-                    <strong>Kapitel {{ item.chapter || '-' }}</strong>
+              <v-btn large depressed :value="true">
-                  </v-col>
+                <v-icon>mdi-sort-descending</v-icon>
-                  <v-col cols="12" class="text-pre-wrap">
+              </v-btn>
-                    <strong>{{ item.question }}</strong>
+            </v-btn-toggle>
-                  </v-col>
+          </template>
-                  <v-fade-transition leave-absolute>
+        </v-toolbar>
-                    <v-col v-if="!open" cols="12" class="text-caption text--secondary">
+      </template>
-                      <v-row style="width: 100%">
-                        <v-col cols="auto">
-                          Hilfreich: {{ item.helpful.length }}
-                        </v-col>
-                        <v-col cols="auto">
-                          Schwierigkeit: {{ item.getDifficultyString() }}
-                        </v-col>
-                      </v-row>
-                    </v-col>
-                  </v-fade-transition>
-                </v-row>
-              </v-expansion-panel-header>
-              <v-expansion-panel-content>
-                <v-row no-gutters>
-                  <v-col cols="12" class="mb-4">
-                    <div class="text-left text-pre-wrap">{{ item.solution }}</div>
-                  </v-col>
-                  <v-col v-for="(btn, btni) in actionButtons" :key="btni" cols="auto" :class="btn.class">
-                    <v-tooltip bottom>
-                      <template #activator="{ on, attrs }">
-                        <v-btn icon :color="btn.active ? btn.iconColor : ''" v-bind="attrs" v-on="on" @click="btn.onClick">
-                          <v-icon>{{ btn.active ? btn.iconActive : btn.iconInactive }}</v-icon>
-                        </v-btn>
-                      </template>
-                      <span>{{ btn.tooltip }}</span>
-                    </v-tooltip>
-                    <div class="text-caption text--secondary">{{ btn.caption }}</div>
-                  </v-col>
-                </v-row>
-              </v-expansion-panel-content>
-            </v-expansion-panel>
-          </v-expansion-panels>
-        </v-card>
-      </v-container>
-    </template>
 
-    <!-- eslint-disable-next-line -->
+      <template #default="props">
-    <template #footer.page-text="{ pageStart, pageStop, itemsLength }">
+        <v-container fluid>
-      <span>{{ pageStart }} - {{ pageStop }} von {{ itemsLength }}</span>
+          <v-card outlined>
-    </template>
+            <v-expansion-panels v-model="openPanels" hover accordion>
-  </v-data-iterator>
+              <v-expansion-panel
+                v-for="(item, i) in props.items"
+                :key="i"
+                @click="setSelectedQuestion(item)"
+              >
+                <v-expansion-panel-header v-slot="{ open }">
+                  <v-row dense>
+                    <v-col cols="12" class="text-overline text--secondary">
+                      <strong>Kapitel {{ item.chapter || '-' }}</strong>
+                    </v-col>
+                    <v-col cols="12" class="text-pre-wrap">
+                      <strong>{{ item.question }}</strong>
+                    </v-col>
+                    <v-fade-transition leave-absolute>
+                      <v-col v-if="!open" cols="12" class="text-caption text--secondary">
+                        <v-row style="width: 100%">
+                          <v-col cols="auto">
+                            Hilfreich: {{ item.helpful.length }}
+                          </v-col>
+                          <v-col cols="auto">
+                            Schwierigkeit: {{ item.getDifficultyString() }}
+                          </v-col>
+                        </v-row>
+                      </v-col>
+                    </v-fade-transition>
+                  </v-row>
+                </v-expansion-panel-header>
+                <v-expansion-panel-content>
+                  <v-row no-gutters>
+                    <v-col cols="12" class="mb-4">
+                      <div class="text-left text-pre-wrap">{{ item.solution }}</div>
+                    </v-col>
+                    <v-col v-for="(btn, btni) in actionButtons" :key="btni" cols="auto" :class="btn.class">
+                      <v-tooltip bottom>
+                        <template #activator="{ on, attrs }">
+                          <v-btn icon :color="btn.active ? btn.iconColor : ''" v-bind="attrs" v-on="on" @click="btn.onClick">
+                            <v-icon>{{ btn.active ? btn.iconActive : btn.iconInactive }}</v-icon>
+                          </v-btn>
+                        </template>
+                        <span>{{ btn.tooltip }}</span>
+                      </v-tooltip>
+                      <div class="text-caption text--secondary">{{ btn.caption }}</div>
+                    </v-col>
+                  </v-row>
+                </v-expansion-panel-content>
+              </v-expansion-panel>
+            </v-expansion-panels>
+          </v-card>
+        </v-container>
+      </template>
+
+      <!-- eslint-disable-next-line -->
+      <template #footer.page-text="{ pageStart, pageStop, itemsLength }">
+        <span>{{ pageStart }} - {{ pageStop }} von {{ itemsLength }}</span>
+      </template>
+    </v-data-iterator>
+  </v-container>
 </template>
 
 <script>
@@ -118,12 +123,6 @@ import { doc, updateDoc, arrayUnion, arrayRemove } from 'firebase/firestore'
 
 export default {
   name: 'OpenEndedQuestionsList',
-  props: {
-    questions: {
-      type: Array,
-      required: true
-    }
-  },
   data () {
     return {
       items: [],
@@ -140,10 +139,14 @@ export default {
         { key: 'Schwierigkeit', value: 'difficultyLevel' }
       ],
       openPanels: [],
-      selectedQuestion: null
+      selectedQuestion: null,
+      show: false
     }
   },
   computed: {
+    questions () {
+      return this.$store.state.openEndedQuestions
+    },
     courseId () {
       return this.$store.state.selectedCourse
     },
@@ -193,6 +196,14 @@ export default {
           caption: this.selectedQuestion && this.selectedQuestion.difficulty.hard.length,
           tooltip: 'Schwere Frage',
           onClick() { self.toggleDifficulty('hard') }
+        },
+        // Button "Edit"
+        {
+          active: true,
+          iconActive: 'mdi-pencil-outline',
+          tooltip: 'Bearbeiten',
+          class: 'ml-4',
+          onClick() { self.show = true }
         }
       ]
     },
@@ -244,12 +255,7 @@ export default {
         hilfreich: this.helpful ? arrayRemove(this.$auth.currentUser.uid) : arrayUnion(this.$auth.currentUser.uid)
       }).then((empty) => {
         // Update question in list
-        if (this.helpful) {
+        this.$store.commit('toggleHelpfulQuestion', this.selectedQuestion.id)
-          const index = this.selectedQuestion.helpful.indexOf(this.$auth.currentUser.uid)
-          this.selectedQuestion.helpful.splice(index, 1)
-        } else {
-          this.selectedQuestion.helpful.push(this.$auth.currentUser.uid)
-        }
       }).catch((error) => {
         // Failed to update the question; display error message
         this.$toast({ content: error, color: 'error' })
@@ -272,24 +278,13 @@ export default {
       updateDoc(doc(this.$db, `kurse/${this.courseId}/fragenOffen/${this.selectedQuestion.id}`), updateProps)
       .then((empty) => {
         // Update question in list
-        if (this.difficulty === type) {
+        this.$store.commit('setDifficulty', { questionId: this.selectedQuestion.id, difficulty: type })
-          const index = this.selectedQuestion.difficulty[type].indexOf(this.$auth.currentUser.uid)
-          this.selectedQuestion.difficulty[type].splice(index, 1)
-        } else {
-          const indexEasy = this.selectedQuestion.difficulty.easy.indexOf(this.$auth.currentUser.uid)
-          if (indexEasy !== -1) this.selectedQuestion.difficulty.easy.splice(indexEasy, 1)
-          const indexMedium = this.selectedQuestion.difficulty.medium.indexOf(this.$auth.currentUser.uid)
-          if (indexMedium !== -1) this.selectedQuestion.difficulty.medium.splice(indexMedium, 1)
-          const indexHard = this.selectedQuestion.difficulty.hard.indexOf(this.$auth.currentUser.uid)
-          if (indexHard !== -1) this.selectedQuestion.difficulty.hard.splice(indexHard, 1)
-          this.selectedQuestion.difficulty[type].push(this.$auth.currentUser.uid)
-        }
-        this.selectedQuestion.updateDifficultyLevel()
       }).catch((error) => {
         // Failed to update the question; display error message
         this.$toast({ content: error, color: 'error' })
       })
-    }
+    },
+    editQuestion () {}
   },
 }
 </script>

store/index.js

@@ -5,7 +5,8 @@ export const state = () => ({
   idTokenResult: null,
   user: null,
   courses: {},
-  selectedCourse: undefined
+  selectedCourse: undefined,
+  openEndedQuestions: []
 })
 
 export const getters = {
@@ -54,6 +55,47 @@ export const mutations = {
   setSelectedCourse (state, courseID) {
     state.selectedCourse = courseID
   },
+  setOpenEndedQuestions (state, questions) {
+    state.openEndedQuestions = questions
+  },
+  addOpenEndedQuestion (state, question) {
+    const index = state.openEndedQuestions.findIndex(q => q.id === question.id)
+    if (index === -1) {
+      // The question does not exist in the array --> add
+      state.openEndedQuestions.push(question)
+    } else {
+      // The question already exists in the array --> update
+      this._vm.$set(state.openEndedQuestions, index, question)
+    }
+  },
+  toggleHelpfulQuestion (state, questionId) {
+    const index = state.openEndedQuestions.findIndex(q => q.id === questionId)
+    if (index !== -1) {
+      const i = state.openEndedQuestions[index].helpful.indexOf(this.$auth.currentUser.uid)
+      if (i === -1) state.openEndedQuestions[index].helpful.push(this.$auth.currentUser.uid)
+      else state.openEndedQuestions[index].helpful.splice(i, 1)
+    }
+  },
+  setDifficulty (state, { questionId, difficulty }) {
+    const index = state.openEndedQuestions.findIndex(q => q.id === questionId)
+    if (index !== -1) {
+      const i = state.openEndedQuestions[index].difficulty[difficulty].indexOf(this.$auth.currentUser.uid)
+
+      if (i !== -1) {
+        state.openEndedQuestions[index].difficulty[difficulty].splice(i, 1)
+      } else {
+        const indexEasy = state.openEndedQuestions[index].difficulty.easy.indexOf(this.$auth.currentUser.uid)
+        if (indexEasy !== -1) state.openEndedQuestions[index].difficulty.easy.splice(indexEasy, 1)
+        const indexMedium = state.openEndedQuestions[index].difficulty.medium.indexOf(this.$auth.currentUser.uid)
+        if (indexMedium !== -1) state.openEndedQuestions[index].difficulty.medium.splice(indexMedium, 1)
+        const indexHard = state.openEndedQuestions[index].difficulty.hard.indexOf(this.$auth.currentUser.uid)
+        if (indexHard !== -1) state.openEndedQuestions[index].difficulty.hard.splice(indexHard, 1)
+        state.openEndedQuestions[index].difficulty[difficulty].push(this.$auth.currentUser.uid)
+      }
+
+      state.openEndedQuestions[index].updateDifficultyLevel()
+    }
+  },
   addGameInProgress (state, { courseID, gameID }) {
     const index = state.user.gamesStarted.findIndex(e => e.course === courseID)
     if (index !== -1) {