viveksantayana/wanderhome-quiz-client
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Renamed app store to results store.

Browse Source
This commit is contained in:
Vivek Santayana
2022-09-01 15:51:54 +01:00
parent 3788f08679
commit 28732539de
13 changed files with 93 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
client/src/views/results/compare-answers/CompareQuestion.vue
View File

@@ -1,7 +1,7 @@
<script>
import { useQuestionStore } from '@/stores/questions.js'
import { useAnswersStore } from '@/stores/answers.js'
import { useAppStore } from '@/stores/app.js'
import { useResultsStore } from '@/stores/results.js'
import Content from '@/components/Content.vue'
import Header from '@/components/Header.vue'
import TextFrame from '@/components/TextFrame.vue'
@@ -20,12 +20,12 @@
setup() {
const questionStore = useQuestionStore()
const answersStore = useAnswersStore()
const appStore = useAppStore()
const resultsStore = useResultsStore()
return {
questionStore,
answersStore,
appStore
resultsStore
}
},
methods: {
@@ -37,14 +37,14 @@
}
},
mounted() {
this.appStore.compareCurrent = this.id
this.resultsStore.compareCurrent = this.id
this.$watch(
() => this.$route.params, (toParams, previousParams) => {
if (this.$route.name == 'CompareQuestion') {
if (toParams.id >= this.questionStore.questions.length || this.id < 0) {
this.$router.push('/err_notfound')
} else {
this.appStore.compareCurrent = toParams.id
this.resultsStore.compareCurrent = toParams.id
}
}
}
@@ -64,19 +64,19 @@
Compare Answers
</Header>
<Content>
<div v-if="questionStore.questions[this.id] && answersStore.answers[this.id] != null && appStore.answers[this.id]">
<div v-if="questionStore.questions[this.id] && answersStore.answers[this.id] != null && resultsStore.answers[this.id]">
<article class="prose">
<h3>Question {{ this.id + 1}}</h3>
<div v-html="questionStore.questions[this.id].question"></div>
</article>
<div class="grid grid-cols-1 content-evenly items-center gap-2 justify-between mt-12 mx-auto lg:grid-cols-2">
<div v-for="(answer, index) in questionStore.questions[this.id].answers" :key="`q${this.id}-o${index}`" class="inline-flex justify-between rounded-md bg-lime-200" :style="`background: linear-gradient(to right, rgb(217 249 157) ${100*this.appStore.answers[this.id][index] / this.appStore.count}%, transparent ${100*this.appStore.answers[this.id][index] / this.appStore.count+3}%)`">
<div v-for="(answer, index) in questionStore.questions[this.id].answers" :key="`q${this.id}-o${index}`" class="inline-flex justify-between rounded-md bg-lime-200" :style="`background: linear-gradient(to right, rgb(217 249 157) ${100*this.resultsStore.answers[this.id][index] / this.resultsStore.count}%, transparent ${100*this.resultsStore.answers[this.id][index] / this.resultsStore.count+3}%)`">
<div v-html="answer" class="flex uncial-antiqua h-full p-2 select-none transition-all duration-100 ease-in-out" :class=" optionSelected(this.id, index) ? 'option-selected' : '' " :aria-label="answer" :title="answer"></div>
<div class="flex p-2 w-fit items-center" style="white-space:nowrap;">{{ Math.round(100*this.appStore.answers[this.id][index] / this.appStore.count) }} &#37;</div>
<div class="flex p-2 w-fit items-center" style="white-space:nowrap;">{{ Math.round(100*this.resultsStore.answers[this.id][index] / this.resultsStore.count) }} &#37;</div>
</div>
</div>
<div class="text-center mt-6 mb-12 text-lg text-gray-600">
From of {{ this.appStore.count }} users.
From of {{ this.resultsStore.count }} users.
</div>
<div class="w-full flex mx-auto items-center justify-between max-w-sm">
<router-link :to="`/results/answers/${this.id-1}`" v-if="this.id > 0">