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

Add rating system for community questions

Browse Source
This commit is contained in:
Rakantor
2022-11-10 22:50:45 +01:00
parent a389d4be84
commit a269902743
4 changed files with 180 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
components/AddOpenEndedQuestion.vue
View File

@@ -96,14 +96,16 @@ export default {
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
this.$toast({ content: 'Deine Frage wurde eingereicht!', color: 'success' })
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
@@ -153,7 +155,7 @@ export default {
this.$auth.currentUser.uid, // Ref: https://firebase.google.com/docs/reference/js/v8/firebase.User
Date.now() / 1000, // Current UNIX timestamp in seconds
[],
[]
{}
)
const questionRef = doc(collection(this.$db, `kurse/${this.$store.state.selectedCourse}/fragenOffen`).withConverter(OpenEndedQuestionConverter))

5
components/Coop.vue
View File

@@ -3,7 +3,7 @@
<v-card-title>Community Fragen</v-card-title>
<OpenEndedQuestionsList :questions="questions" />
<v-divider></v-divider>
<AddOpenEndedQuestion />
<AddOpenEndedQuestion @added="addQuestionToList" />
</v-card>
</template>
@@ -43,6 +43,9 @@ export default {
// Failed to fetch questions from the database; display error message
this.$toast({ content: error, color: 'error' })
})
},
addQuestionToList (q) {
this.questions.push(q)
}
}
}

150
components/OpenEndedQuestionsList.vue
View File

@@ -4,8 +4,12 @@
:items-per-page.sync="itemsPerPage"
:page.sync="page"
:search="search"
:sort-by="sortBy.toLowerCase()"
:sort-by="sortBy"
:sort-desc="sortDesc"
no-data-text="Keine Daten vorhanden"
no-results-text="Keine passenden Ergebnisse gefunden"
locale="de-DE"
class="text-center"
>
<template #header>
<v-toolbar
@@ -19,7 +23,7 @@
solo-inverted
hide-details
prepend-inner-icon="mdi-magnify"
label="Search"
label="Suchen"
></v-text-field>
<template v-if="$vuetify.breakpoint.mdAndUp">
<v-spacer></v-spacer>
@@ -29,8 +33,10 @@
solo-inverted
hide-details
:items="keys"
prepend-inner-icon="mdi-magnify"
label="Sort by"
item-text="key"
item-value="value"
prepend-inner-icon="mdi-sort"
label="Sortieren"
></v-select>
<v-spacer></v-spacer>
<v-btn-toggle
@@ -40,7 +46,6 @@
<v-btn
large
depressed
color="blue"
:value="false"
>
<v-icon>mdi-arrow-up</v-icon>
@@ -48,7 +53,6 @@
<v-btn
large
depressed
color="blue"
:value="true"
>
<v-icon>mdi-arrow-down</v-icon>
@@ -61,16 +65,61 @@
<template #default="props">
<v-container fluid>
<v-card outlined>
<v-expansion-panels hover accordion>
<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>
<strong>{{ item.question }}</strong>
<v-expansion-panel-header v-slot="{ open }">
<v-row dense>
<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 class="text-pre-wrap">
<div class="text-pre-wrap">{{ item.solution }}</div>
<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 cols="auto" class="mr-4">
<v-btn icon :color="helpful ? 'primary' : ''" @click="toggleHelpful">
<v-icon>{{ helpful ? 'mdi-thumb-up' : 'mdi-thumb-up-outline' }}</v-icon>
</v-btn>
<div class="text-caption text--secondary">{{ item.helpful.length }}</div>
</v-col>
<v-col cols="auto">
<v-btn icon :color="difficulty === 'easy' ? 'amber' : ''" @click="toggleDifficulty('easy')">
<v-icon>{{ difficulty === 'easy' ? 'mdi-emoticon' : 'mdi-emoticon-outline' }}</v-icon>
</v-btn>
<div class="text-caption text--secondary">{{ item.difficulty.easy.length }}</div>
</v-col>
<v-col cols="auto">
<v-btn icon :color="difficulty === 'medium' ? 'amber' : ''" @click="toggleDifficulty('medium')">
<v-icon>{{ difficulty === 'medium' ? 'mdi-emoticon-happy' : 'mdi-emoticon-happy-outline' }}</v-icon>
</v-btn>
<div class="text-caption text--secondary">{{ item.difficulty.medium.length }}</div>
</v-col>
<v-col cols="auto">
<v-btn icon :color="difficulty === 'hard' ? 'amber' : ''" @click="toggleDifficulty('hard')">
<v-icon>{{ difficulty === 'hard' ? 'mdi-emoticon-confused' : 'mdi-emoticon-confused-outline' }}</v-icon>
</v-btn>
<div class="text-caption text--secondary">{{ item.difficulty.hard.length }}</div>
</v-col>
</v-row>
</v-expansion-panel-content>
</v-expansion-panel>
</v-expansion-panels>
@@ -81,6 +130,8 @@
</template>
<script>
import { doc, updateDoc, arrayUnion, arrayRemove } from 'firebase/firestore'
export default {
name: 'OpenEndedQuestionsList',
props: {
@@ -94,22 +145,38 @@ export default {
itemsPerPageArray: [10, 20, 30],
search: '',
filter: {},
sortDesc: false,
sortDesc: true,
page: 1,
itemsPerPage: 10,
sortBy: 'created',
keys: [
'Created'
]
{ key: 'Neueste', value: 'created' },
{ key: 'Hilfreich', value: 'helpful' },
{ key: 'Schwierigkeit', value: 'difficultyLevel' }
],
openPanels: [],
selectedQuestion: null
}
},
computed: {
courseId () {
return this.$store.state.selectedCourse
},
numberOfPages () {
return Math.ceil(this.questions.length / this.itemsPerPage)
},
filteredKeys () {
return this.keys.filter(key => key !== 'Name')
},
helpful () {
return this.selectedQuestion && this.selectedQuestion.helpful.includes(this.$auth.currentUser.uid)
},
difficulty () {
if (this.selectedQuestion && this.selectedQuestion.difficulty.easy.includes(this.$auth.currentUser.uid)) return 'easy'
else if (this.selectedQuestion && this.selectedQuestion.difficulty.medium.includes(this.$auth.currentUser.uid)) return 'medium'
else if (this.selectedQuestion && this.selectedQuestion.difficulty.hard.includes(this.$auth.currentUser.uid)) return 'hard'
else return null
}
},
methods: {
nextPage () {
@@ -121,6 +188,61 @@ export default {
updateItemsPerPage (number) {
this.itemsPerPage = number
},
setSelectedQuestion(q) {
this.selectedQuestion = q
},
toggleHelpful () {
const qRef = doc(this.$db, `kurse/${this.courseId}/fragenOffen/${this.selectedQuestion.id}`)
updateDoc(qRef, {
hilfreich: this.helpful ? arrayRemove(this.$auth.currentUser.uid) : arrayUnion(this.$auth.currentUser.uid)
}).then((empty) => {
// Update question in list
if (this.helpful) {
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' })
})
},
toggleDifficulty (type) {
const typesDE = { easy: 'leicht', medium: 'mittel', hard: 'schwer' }
const typeDE = typesDE[type]
const updateProps = {}
if (this.difficulty === type) {
updateProps[`schwierigkeit.${typeDE}`] = arrayRemove(this.$auth.currentUser.uid)
} else {
if (typeDE !== typesDE.easy) updateProps['schwierigkeit.leicht'] = arrayRemove(this.$auth.currentUser.uid)
if (typeDE !== typesDE.medium) updateProps['schwierigkeit.mittel'] = arrayRemove(this.$auth.currentUser.uid)
if (typeDE !== typesDE.hard) updateProps['schwierigkeit.schwer'] = arrayRemove(this.$auth.currentUser.uid)
updateProps[`schwierigkeit.${typeDE}`] = arrayUnion(this.$auth.currentUser.uid)
}
updateDoc(doc(this.$db, `kurse/${this.courseId}/fragenOffen/${this.selectedQuestion.id}`), updateProps)
.then((empty) => {
// Update question in list
if (this.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)
}
}).catch((error) => {
// Failed to update the question; display error message
this.$toast({ content: error, color: 'error' })
})
}
},
}
</script>

41
plugins/open-ended-question.js
View File

@@ -1,12 +1,37 @@
export class OpenEndedQuestion {
constructor (id, question, solution, creator, created, ratings, difficulty) {
constructor (id, question, solution, creator, created, helpful, difficulty) {
this.id = id
this.question = question
this.solution = solution
this.creator = creator
this.created = created
this.ratings = ratings
this.difficulty = difficulty
this.helpful = helpful || []
this.difficulty = {
easy: difficulty.leicht || [],
medium: difficulty.mittel || [],
hard: difficulty.schwer || []
}
this.updateDifficultyLevel()
}
updateDifficultyLevel () {
const easyCount = this.difficulty.easy.length
const mediumCount = this.difficulty.medium.length
const hardCount = this.difficulty.hard.length
if (hardCount > 0 && hardCount >= mediumCount && hardCount >= easyCount) this.difficultyLevel = 3
else if (mediumCount > 0 && mediumCount >= hardCount && mediumCount >= easyCount) this.difficultyLevel = 2
else if (easyCount > 0 && easyCount >= hardCount && easyCount >= mediumCount) this.difficultyLevel = 1
else this.difficultyLevel = null
}
getDifficultyString () {
switch (this.difficultyLevel) {
case 1: return 'Leicht'
case 2: return 'Mittel'
case 3: return 'Schwer'
default: return 'Unbewertet'
}
}
}
@@ -18,12 +43,16 @@ export const OpenEndedQuestionConverter = {
musterloesung: openEndedQuestion.solution,
ersteller: openEndedQuestion.creator,
erstellt: openEndedQuestion.created,
bewertungen: openEndedQuestion.ratings,
schwierigkeit: openEndedQuestion.difficulty
hilfreich: openEndedQuestion.helpful,
schwierigkeit: {
leicht: openEndedQuestion.difficulty.easy,
mittel: openEndedQuestion.difficulty.medium,
schwer: openEndedQuestion.difficulty.hard
}
}
},
fromFirestore: (snapshot, options) => {
const data = snapshot.data(options)
return new OpenEndedQuestion(snapshot.id, data.frage, data.musterloesung, data.ersteller, data.erstellt, data.bewertungen, data.schwierigkeit)
return new OpenEndedQuestion(snapshot.id, data.frage, data.musterloesung, data.ersteller, data.erstellt, data.hilfreich, data.schwierigkeit)
}
}