wanderhome-quiz-client/client/src/views/results/compare-answers/CompareQuestion.vue

<script>
    import { useQuestionStore } from '@/stores/questions.js'
    import { useAnswersStore } from '@/stores/answers.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'
    import ArrowLeftBold from '@/components/icons/ArrowLeftBold.vue'
    import ArrowRightBold from '@/components/icons/ArrowRightBold.vue'

    export default {
        name: 'CompareQuestion',
        components: {
            ArrowLeftBold,
            ArrowRightBold,
            Content,
            Header,
            TextFrame
        },
        setup() {
            const questionStore = useQuestionStore()
            const answersStore = useAnswersStore()
            const resultsStore = useResultsStore()

            return {
                questionStore,
                answersStore,
                resultsStore
            }
        },
        methods: {
            optionSelected(id, index) {
                if (Array.isArray(this.answersStore.answers[id])) {
                    return this.answersStore.answers[id].includes(index)
                }
                return this.answersStore.answers[id] == index
            }
        },
        mounted() {
            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.resultsStore.compareCurrent = toParams.id
                        }
                    }
                }
            )
        },
        props: {
            id: {
                type: Number,
                required: true
            }
        }
    }
</script>
<template>
    <TextFrame>
        <Header>
            Compare Answers
        </Header>
        <Content>
            <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.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 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.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 {{ 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">
                        <div class="inline-flex h-full px-3 py-1 space-x-1 rounded-md bg-olive-800 text-white items-center transition-all duration-300 ease-in-out hover:bg-olive-600" title="Back">
                            <span class="scale-100">
                                <ArrowLeftBold/>
                            </span>
                            <span class="uncial-antiqua">Back</span>
                        </div>
                    </router-link>
                    <div class="inline-flex h-full px-3 py-1 space-x-1 rounded-md bg-olive-800 opacity-50 text-white items-center hover:cursor-not-allowed" v-else>
                        <span class="scale-100">
                            <ArrowLeftBold/>
                        </span>
                        <span class="uncial-antiqua">Back</span>
                    </div>
                    <router-link :to="`/results/answers/${this.id+1}`" v-if="this.id < this.questionStore.questions.length - 1">
                        <div class="inline-flex h-full px-3 py-1 space-x-1 rounded-md bg-olive-800 text-white items-center transition-all duration-300 ease-in-out hover:bg-olive-600" title="Next">
                            <span class="uncial-antiqua">Next</span>
                            <span class="scale-100">
                                <ArrowRightBold/>
                            </span>
                        </div>
                    </router-link>
                    <div class="inline-flex h-full px-3 py-1 space-x-1 rounded-md bg-olive-800 opacity-50 text-white items-center hover:cursor-not-allowed" v-else>
                        <span class="uncial-antiqua">Next</span>
                        <span class="scale-100">
                            <ArrowRightBold/>
                        </span>
                    </div>
                </div>
            </div>
            <div v-else>

            </div>
        </Content>
    </TextFrame>
</template>
<style scoped>
    .option-selected {
        @apply border-olive-600;
        @apply border-solid;
        @apply border-l-2;
        @apply text-orange-600;
    }
</style>