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

Add overview of open and completed quiz rounds

Browse Source
This commit is contained in:
Rakantor
2022-11-08 00:28:12 +01:00
parent b45114a2d1
commit 22deb8812a
8 changed files with 317 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
components/AddClosedEndedQuestion.vue
View File

@@ -2,54 +2,44 @@
<v-card>
<ValidationObserver ref="observer" v-slot="{ invalid }">
<form @submit.prevent="submit">
<v-card-title style="cursor: pointer;" @click="showBody = !showBody">
<span class="flex-grow-1 flex-shrink-0 text-subtitle-1 font-weight-medium">Eigene Quizfrage einreichen</span>
<v-btn icon @click.stop="showBody = !showBody">
<v-icon>{{ showBody ? 'mdi-chevron-up' : 'mdi-chevron-down' }}</v-icon>
</v-btn>
</v-card-title>
<v-expand-transition>
<div v-show="showBody">
<v-card-text>
<v-row>
<v-col cols="12">
<ValidationProvider v-slot="{ errors }" name="frage" rules="required">
<v-text-field v-model="question" required label="Frage" :error-messages="errors"></v-text-field>
</ValidationProvider>
</v-col>
<v-col v-for="(n, index) in 4" :key="index" cols="6">
<ValidationProvider v-slot="{ errors }" :name="`antwort${n}`" rules="required">
<v-text-field v-model="answers[index]" required :label="`Antwort #${n}`" :error-messages="errors"></v-text-field>
</ValidationProvider>
</v-col>
<v-col cols="12">
<ValidationProvider v-slot="{ errors }" name="richtig" rules="required">
<v-select v-model="correctAnswer" required :items="answers" label="Richtige Antwort" :error-messages="errors"></v-select>
</ValidationProvider>
</v-col>
<v-col cols="12">
<v-text-field
v-model="comment"
label="(Optional) Anmerkung"
persistent-hint
hint="Nur der Tutor kann deine Anmerkung sehen."
>
<template #message="{ message }">
<v-icon small>mdi-information</v-icon>
<span>{{ message }}</span>
</template>
</v-text-field>
</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>
<v-card-text>
<v-row>
<v-col cols="12">
<ValidationProvider v-slot="{ errors }" name="frage" rules="required">
<v-text-field v-model="question" required label="Frage" :error-messages="errors"></v-text-field>
</ValidationProvider>
</v-col>
<v-col v-for="(n, index) in 4" :key="index" cols="6">
<ValidationProvider v-slot="{ errors }" :name="`antwort${n}`" rules="required">
<v-text-field v-model="answers[index]" required :label="`Antwort #${n}`" :error-messages="errors"></v-text-field>
</ValidationProvider>
</v-col>
<v-col cols="12">
<ValidationProvider v-slot="{ errors }" name="richtig" rules="required">
<v-select v-model="correctAnswer" required :items="answers" label="Richtige Antwort" :error-messages="errors"></v-select>
</ValidationProvider>
</v-col>
<v-col cols="12">
<v-text-field
v-model="comment"
label="(Optional) Anmerkung"
persistent-hint
hint="Nur der Tutor kann deine Anmerkung sehen."
>
<template #message="{ message }">
<v-icon small>mdi-information</v-icon>
<span>{{ message }}</span>
</template>
</v-text-field>
</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>
</form>
</ValidationObserver>
</v-card>
@@ -76,7 +66,6 @@ export default {
},
data () {
return {
showBody: false,
loading: false,
question: '',
answers: [],

64
components/Challenge.vue
View File

@@ -1,64 +0,0 @@
<template>
<v-card>
<v-card-title>
Spiele {{ games.won + games.lost + games.tie }}
</v-card-title>
<v-card-subtitle>
<div>Siege: {{ games.won }}</div>
<div>Unentschieden: {{ games.lost }}</div>
<div>Niederlagen: {{ games.tie }}</div>
<div>Fragen: {{ games.questionsCorrect + games.questionsIncorrect }}</div>
<div>Richtig: {{ questionsCorrectPercent }}%</div>
</v-card-subtitle>
<v-card-text>
{{ text }}
</v-card-text>
<v-card-text>
<v-btn depressed color="success" class="my-3" @click="playVersus">
<v-icon left>mdi-play</v-icon>
Spielen
</v-btn>
</v-card-text>
<v-divider></v-divider>
<AddClosedEndedQuestion />
</v-card>
</template>
<script>
export default {
name: 'ChallengeComponent',
props: {
courseId: {
type: String,
required: true
}
},
data () {
return {
}
},
computed: {
games () {
return this.$store.state.user.games[this.courseId]
},
questionsCorrectPercent () {
const percent = (this.games.questionsCorrect / (this.games.questionsCorrect + this.games.questionsIncorrect)) * 100
// percent will be NaN if the student hasn't played any games yet
return percent ? Math.round(parseFloat(percent)) : 100 // Convert to float, then round to closest int
},
text () {
if (this.questionsAnswered >= 20 && this.questionsCorrectPercent >= 90) {
return 'Du scheinst gut auf die Klausur vorbereitet zu sein. Viel Glück!'
} else {
return 'Wir empfehlen Dir noch ein wenig zu üben, bevor du zur Klausur antrittst.'
}
}
},
methods: {
playVersus () {
// TODO
this.$router.push(`${this.$route.path}/play`)
}
}
}
</script>

48
components/CompletedGameCard.vue Normal file
View File

@@ -0,0 +1,48 @@
<template>
<v-card width="500">
<v-row align="center">
<v-col cols="auto">
<v-icon size="48" color="amber">{{ icon }}</v-icon>
</v-col>
<v-col>
<div class="text-h6 text--primary">{{ title }}</div>
<div class="text-caption text--secondary">gegen {{ opponentName }}</div>
</v-col>
</v-row>
</v-card>
</template>
<script>
import { Game } from '~/plugins/game'
export default {
name: 'CompletedGameCard',
props: {
game: {
type: Game,
required: true
}
},
computed: {
result () {
return this.game.getResult()
},
playerNumber () {
return this.game.player1id === this.$auth.currentUser.uid ? 1 : 2
},
isWinner () {
return !this.result.tie && this.result.winner === this.playerNumber
},
title () {
if (this.result.tie) return 'Unentschieden'
else return this.isWinner ? 'Sieg' : 'Niederlage'
},
icon () {
return this.isWinner ? 'mdi-trophy' : 'mdi-trophy-broken'
},
opponentName () {
return this.game.player1id === this.$auth.currentUser.uid ? this.game.player2name : this.game.player1name
}
}
}
</script>

48
components/OpenGameCard.vue Normal file
View File

@@ -0,0 +1,48 @@
<template>
<v-card outlined width="500">
<v-card-text>
<v-row align="center" justify="center" no-gutters class="text-subtitle-1">
<v-col cols="auto">
<div class="text--primary text-center">{{ game.player1name }}</div>
<v-icon
v-for="oneIndex, zeroIndex in game.questionIds.length" :key="'pl1'+zeroIndex"
small
:color="dotColor(game, 1, zeroIndex)"
>mdi-circle</v-icon>
</v-col>
<v-col cols="auto" class="mx-12">vs.</v-col>
<v-col cols="auto">
<div class="text--primary text-center">{{ game.player2name || '?' }}</div>
<v-icon
v-for="oneIndex, zeroIndex in game.questionIds.length" :key="'pl2'+zeroIndex"
small
:color="dotColor(game, 2, zeroIndex)"
>mdi-circle</v-icon>
</v-col>
</v-row>
</v-card-text>
</v-card>
</template>
<script>
import { Game } from '~/plugins/game'
export default {
name: 'OpenGameCard',
props: {
game: {
type: Game,
required: true
}
},
methods: {
dotColor (game, playerNumber, index) {
if (!game || index + 1 > game[`player${playerNumber}answers`].length) return ''
else {
const correct = game[`player${playerNumber}answers`][index].richtig
return correct ? 'success' : 'error'
}
}
}
}
</script>

153
components/QuizComponent.vue Normal file
View File

@@ -0,0 +1,153 @@
<template>
<v-card>
<v-card-title>Challenge</v-card-title>
<v-card-text>
<v-btn depressed color="success" class="my-3" @click="playVersus">
<v-icon left>mdi-play</v-icon>
Spielen
</v-btn>
</v-card-text>
<v-expansion-panels v-model="expPanel" accordion class="text-subtitle-1 font-weight-medium">
<v-expansion-panel>
<v-expansion-panel-header>
Offene Spiele ({{ openGames.length }})
</v-expansion-panel-header>
<v-expansion-panel-content>
<v-row>
<v-col v-for="(og, i) in openGames" :key="i" cols="12">
<OpenGameCard :game="og" />
</v-col>
</v-row>
</v-expansion-panel-content>
</v-expansion-panel>
<v-expansion-panel>
<v-expansion-panel-header>
Beendete Spiele ({{ completedGames.length }})
</v-expansion-panel-header>
<v-expansion-panel-content>
<v-row>
<v-col v-for="(cg, i) in completedGames" :key="i" cols="12">
<CompletedGameCard :game="cg" />
</v-col>
</v-row>
</v-expansion-panel-content>
</v-expansion-panel>
<v-expansion-panel>
<v-expansion-panel-header>
Persönliche Statistik
</v-expansion-panel-header>
<v-expansion-panel-content>
<v-card-title>
Spiele {{ games.won + games.lost + games.tie }}
</v-card-title>
<v-card-subtitle>
<div>Siege: {{ games.won }}</div>
<div>Unentschieden: {{ games.lost }}</div>
<div>Niederlagen: {{ games.tie }}</div>
<div>Fragen: {{ games.questionsCorrect + games.questionsIncorrect }}</div>
<div>Richtig: {{ questionsCorrectPercent }}%</div>
</v-card-subtitle>
<v-card-text>
{{ text }}
</v-card-text>
</v-expansion-panel-content>
</v-expansion-panel>
<v-expansion-panel>
<v-expansion-panel-header>
Neue Quizfrage einreichen
</v-expansion-panel-header>
<v-expansion-panel-content>
<AddClosedEndedQuestion />
</v-expansion-panel-content>
</v-expansion-panel>
</v-expansion-panels>
</v-card>
</template>
<script>
import { collection, query, where, orderBy, limit, getDocs } from 'firebase/firestore'
import { GameConverter } from '~/plugins/game'
export default {
name: 'QuizComponent',
props: {
courseId: {
type: String,
required: true
}
},
data () {
return {
openGames: [],
completedGames: [],
expPanel: 0
}
},
computed: {
games () {
return this.$store.state.user.games[this.courseId]
},
questionsCorrectPercent () {
const percent = (this.games.questionsCorrect / (this.games.questionsCorrect + this.games.questionsIncorrect)) * 100
// percent will be NaN if the student hasn't played any games yet
return percent ? Math.round(parseFloat(percent)) : 100 // Convert to float, then round to closest int
},
text () {
if (this.questionsAnswered >= 20 && this.questionsCorrectPercent >= 90) {
return 'Du scheinst gut auf die Klausur vorbereitet zu sein. Viel Glück!'
} else {
return 'Wir empfehlen Dir noch ein wenig zu üben, bevor du zur Klausur antrittst.'
}
}
},
created () {
// Get list of unfinished games from db
this.getOpenGames()
// Get list of completed games from db (limit to 10 most recent)
this.getCompletedGames()
},
methods: {
getOpenGames () {
const q = query(
collection(this.$db, `kurse/${this.courseId}/spiele`).withConverter(GameConverter),
where('abgeschlossen', '==', false),
where('spielerIds', 'array-contains', this.$auth.currentUser.uid),
orderBy('erstellt', 'desc')
)
getDocs(q).then((querySnapshot) => {
querySnapshot.forEach((doc) => {
// doc.data() is never undefined for query doc snapshots
this.openGames.push(doc.data())
})
}).catch((error) => {
// Query failed; display error message
this.$toast({ content: error, color: 'error' })
})
},
getCompletedGames () {
const q = query(
collection(this.$db, `kurse/${this.courseId}/spiele`).withConverter(GameConverter),
where('abgeschlossen', '==', true),
where('spielerIds', 'array-contains', this.$auth.currentUser.uid),
orderBy('erstellt', 'desc'),
limit(10)
)
getDocs(q).then((querySnapshot) => {
querySnapshot.forEach((doc) => {
// doc.data() is never undefined for query doc snapshots
this.completedGames.push(doc.data())
})
}).catch((error) => {
// Query failed; display error message
this.$toast({ content: error, color: 'error' })
})
},
playVersus () {
// TODO
this.$router.push(`${this.$route.path}/play`)
}
}
}
</script>

2
pages/courses/_course/index.vue
View File

@@ -42,7 +42,7 @@
<TutorPanel :course-id="courseID" />
</v-col>
<v-col cols="12">
<Challenge :course-id="courseID" />
<QuizComponent :course-id="courseID" />
</v-col>
<v-col cols="12">
<Coop :course-id="courseID" />

19
pages/courses/_course/play.vue
View File

@@ -181,6 +181,7 @@ export default {
this.game.player2id = this.$auth.currentUser.uid
this.game.player2name = this.$store.state.user.displayName
this.game.player2answers = []
this.game.playerIds.push(this.game.player2id)
// Get a new write batch
const batch = writeBatch(this.$db)
@@ -214,6 +215,7 @@ export default {
null,
rndQuestions.map(q => q.id),
Date.now() / 1000, // Current UNIX timestamp in seconds
false,
this.$auth.currentUser.uid,
this.$store.state.user.displayName,
[],
@@ -252,7 +254,11 @@ export default {
// Update the user's given answers for the current game
const gameRef = doc(this.$db, `kurse/${this.courseID}/spiele/${this.game.id}`)
batch.update(gameRef, {
[`spieler${this.playerNumber}antworten`]: arrayUnion({ frage: this.selectedQuestion.id, antwort: this.submittedAnswer })
[`spieler${this.playerNumber}antworten`]: arrayUnion({
frage: this.selectedQuestion.id,
antwort: this.submittedAnswer,
richtig: this.answerCorrect
})
})
// Increment the number of correct/incorrect answers given by the user by 1
@@ -265,7 +271,11 @@ export default {
// Commit the batch
batch.commit().then((empty) => {
// Batch execution was successful
this.game[`player${this.playerNumber}answers`].push({ frage: this.selectedQuestion.id, antwort: this.submittedAnswer })
this.game[`player${this.playerNumber}answers`].push({
frage: this.selectedQuestion.id,
antwort: this.submittedAnswer,
richtig: this.answerCorrect
})
}).catch((error) => {
// Batch execution failed; display error message
this.$toast({content: error, color: 'error'})
@@ -319,6 +329,7 @@ export default {
})
},
completeGame () {
this.game.completed = true
const result = this.game.getResult()
// Figure out which player won and which player lost, or if the game was a tie
@@ -345,6 +356,10 @@ export default {
const refPl2 = doc(this.$db, `benutzer/${this.game.player2id}`)
batch.update(refPl2, { [`spiele.${this.courseID}.${updateFieldPl2}`]: increment(1) })
// Set the game's "completed" field to true
const refGame = doc(this.$db, `kurse/${this.courseID}/spiele/${this.game.id}`)
batch.update(refGame, { abgeschlossen: true })
// Commit the batch
batch.commit().catch((error) => {
// Batch execution failed; display error message

29
plugins/game.js
View File

@@ -1,31 +1,24 @@
export class Game {
constructor (id, questions, created, player1id, player1name, player1answers, player2id, player2name, player2answers) {
constructor (id, questions, created, completed, player1id, player1name, player1answers, player2id, player2name, player2answers) {
this.id = id
this.questionIds = questions
this.created = created
this.completed = completed
this.player1id = player1id
this.player1name = player1name
this.player1answers = player1answers
this.player2id = player2id
this.player2name = player2name
this.player2answers = player2answers
this.playerIds = []
if (this.player1id) this.playerIds.push(this.player1id)
if (this.player2id) this.playerIds.push(this.player2id)
}
getResult () {
if (!this.questions) return {}
const qs = this.questions
function countCorrectAnswers(answersGiven) {
let i = 0
answersGiven.forEach(a => {
const q = qs.find(e => e.id === a.frage)
if (q && a.antwort === q.correctAnswer) i++
})
return i
}
const correctAnswersPl1 = countCorrectAnswers(this.player1answers)
const correctAnswersPl2 = countCorrectAnswers(this.player2answers)
const correctAnswersPl1 = this.player1answers.filter(a => a.richtig).length
const correctAnswersPl2 = this.player2answers.filter(a => a.richtig).length
return {
winner: correctAnswersPl1 > correctAnswersPl2 ? 1 : 2,
@@ -43,18 +36,20 @@ export const GameConverter = {
return {
fragen: game.questionIds,
erstellt: game.created,
abgeschlossen: game.completed,
spieler1id: game.player1id,
spieler1name: game.player1name,
spieler1antworten: game.player1answers,
spieler2id: game.player2id,
spieler2name: game.player2name,
spieler2antworten: game.player2answers
spieler2antworten: game.player2answers,
spielerIds: game.playerIds
}
},
fromFirestore: (snapshot, options) => {
const data = snapshot.data(options)
return new Game(
snapshot.id, data.fragen, data.erstellt,
snapshot.id, data.fragen, data.erstellt, data.abgeschlossen,
data.spieler1id, data.spieler1name, data.spieler1antworten,
data.spieler2id, data.spieler2name, data.spieler2antworten
)