@windward/games 0.0.1

package/components/content/blocks/quizshowGame/QuizShow.vue

@@ -0,0 +1,516 @@
+<template>
+    <div>
+        <v-switch
+            v-if="!render"
+            v-model="tableMode"
+            class="text-capitalize"
+            :label="
+                $t(
+                    'plugin.games.components.content.blocks.quizshow_game.spreadsheet_mode'
+                )
+            "
+        ></v-switch>
+        <div v-if="!tableMode">
+            <div>
+                <h1
+                    :aria-label="
+                        $t(
+                            'plugin.games.components.content.blocks.quizshow_game.title'
+                        )
+                    "
+                    tabindex="0"
+                >
+                    {{ block.metadata.config.title }}
+                </h1>
+
+                <p tabindex="0">
+                    <TextViewer v-model="block.metadata.config.instructions" />
+                </p>
+                <p tabindex="0">
+                    {{
+                        $t(
+                            'plugin.games.components.content.blocks.quizshow_game.basic_instructions'
+                        )
+                    }}
+                </p>
+
+                <v-container
+                    class="d-flex flex-row flex-wrap flex-fill"
+                    v-if="show"
+                >
+                    <v-card
+                        v-for="(category, cat_index) in block.metadata.config
+                            .categories"
+                        :key="cat_index"
+                        class="flex-fill"
+                        outlined
+                        tile
+                        :max-width="
+                            block.metadata.config.responsive
+                                ? '100%'
+                                : 100 /
+                                      block.metadata.config.categories.length +
+                                  '%'
+                        "
+                    >
+                        <v-row
+                            align="center"
+                            justify="center"
+                            class="ma-1 text-capitalize font-weight-bold"
+                            >{{ category }}
+                        </v-row>
+                        <v-col
+                            v-for="(point, point_index) in block.metadata.config
+                                .points"
+                            :key="'btn' + point_index"
+                        >
+                            <v-row align="center" justify="center">
+                                <v-btn
+                                    outlined
+                                    :color="
+                                        getButtonColor(cat_index, point_index)
+                                    "
+                                    class="flex-fill ma-2 pa-5"
+                                    @click="quizshow(cat_index, point_index)"
+                                >
+                                    <span class="text--primary">{{
+                                        point
+                                    }}</span>
+                                    <feedback-icons
+                                        v-if="!render"
+                                        :success="
+                                            editorFeedback(
+                                                cat_index,
+                                                point_index
+                                            )
+                                        "
+                                        :icons="editorFeedbackIcons"
+                                    />
+                                    <feedback-icons
+                                        v-if="
+                                            render &&
+                                            options.answers[cat_index][
+                                                point_index
+                                            ] !== null
+                                        "
+                                        :success="
+                                            options.answers[cat_index][
+                                                point_index
+                                            ]
+                                        "
+                                    />
+                                </v-btn>
+                            </v-row>
+                        </v-col>
+                    </v-card>
+                </v-container>
+            </div>
+            <v-fade-transition>
+                <answer-panel
+                    :edit-mode="!render"
+                    v-if="!show"
+                    :points="
+                        Number(block.metadata.config.points[selectedPointIndex])
+                    "
+                    :state="answerStates[selectedCatIndex][selectedPointIndex]"
+                    v-model="
+                        options.questions[selectedCatIndex][selectedPointIndex]
+                    "
+                    @click-answer="getUserInput"
+                />
+            </v-fade-transition>
+            <v-row
+                align="center"
+                justify="center"
+                class="pt-4 ma-4"
+                v-if="!show"
+            >
+                <v-btn
+                    class="text-capitalize"
+                    color="secondary"
+                    @click="show = !show"
+                >
+                    <v-icon>mdi-chevron-left</v-icon>
+                    {{
+                        $t(
+                            'plugin.games.components.content.blocks.quizshow_game.return_to_questions'
+                        )
+                    }}
+                </v-btn>
+            </v-row>
+            <v-row
+                align="center"
+                justify="center"
+                class="pt-4 ma-4"
+                v-if="show"
+            >
+                <v-btn
+                    outlined
+                    class="text-capitalize"
+                    color="secondary"
+                    @click="resetGame"
+                >
+                    {{ $t('shared.forms.reset') }}
+                </v-btn>
+            </v-row>
+            <v-row
+                align="center"
+                justify="center"
+                class="pt-4 ma-4 font-weight-bold text-capitalize"
+                v-if="show"
+            >
+                {{
+                    $t(
+                        'plugin.games.components.content.blocks.quizshow_game.total_score'
+                    ) +
+                    ' ' +
+                    totalScore()
+                }}
+            </v-row>
+        </div>
+        <gridview v-if="tableMode" v-model="gridViewModel" />
+    </div>
+</template>
+
+<script>
+import _ from 'lodash'
+import BaseContentBlock from '~/components/Content/Blocks/BaseContentBlock'
+import AnswerPanel from './AnswerPanel'
+import FeedbackIcons from './feedbackIcons'
+import Gridview from './Gridview'
+import TextViewer from '~/components/Text/TextViewer.vue'
+
+export default {
+    name: 'quizshow',
+    components: { Gridview, FeedbackIcons, AnswerPanel, TextViewer },
+    extends: BaseContentBlock,
+    data() {
+        return {
+            saveState: false,
+            show: true,
+            tableMode: false,
+            options: {
+                categories: [],
+                questions: [],
+                answers: [],
+            },
+            answerStates: [],
+            selectedCatIndex: 0,
+            selectedPointIndex: 0,
+            hello: '',
+        }
+    },
+    beforeMount() {
+        if (!_.isEmpty(this.body)) {
+            this.options = this.body
+        }
+
+        if (this.options.questions.length === 0) {
+            for (let index = 0; index < 10; index++) {
+                this.options.questions[index] = []
+                for (let point_index = 0; point_index < 10; point_index++) {
+                    this.options.questions[index][point_index] = {}
+                }
+            }
+        }
+        if (this.options.answers.length === 0) {
+            this.initAnswers()
+        }
+        if (this.answerStates.length === 0) {
+            this.initAnswersStates()
+        }
+    },
+    mounted() {},
+    updated() {},
+    computed: {
+        editorFeedbackIcons() {
+            if (this.render) {
+                return {
+                    success: 'mdi-check-circle-outline',
+                    error: 'mdi-close-circle-outline',
+                }
+            } else {
+                return {
+                    success: 'mdi-check-circle-outline',
+                    error: 'mdi-alert-circle-outline',
+                }
+            }
+        },
+        rows() {
+            return this.block.metadata.config.maxRows
+                ? Number(this.block.metadata.config.maxRows)
+                : 0
+        },
+        gridViewModel: {
+            get() {
+                let model = []
+                if (
+                    _.isArray(this.block.metadata.config.categories) &&
+                    this.block.metadata.config.categories.length > 0
+                ) {
+                    for (
+                        let cat_index = 0;
+                        cat_index <
+                        this.block.metadata.config.categories.length;
+                        cat_index++
+                    ) {
+                        for (
+                            let point_index = 0;
+                            point_index <
+                            this.block.metadata.config.points.length;
+                            point_index++
+                        ) {
+                            model.push({
+                                cat_index: cat_index,
+                                category:
+                                    this.block.metadata.config.categories[
+                                        cat_index
+                                    ],
+                                point_index: point_index,
+                                points: this.block.metadata.config.points[
+                                    point_index
+                                ],
+                                answer: _.isNumber(
+                                    this.options.questions[cat_index][
+                                        point_index
+                                    ].answer
+                                )
+                                    ? Number(
+                                          this.options.questions[cat_index][
+                                              point_index
+                                          ].answer
+                                      ) + 1
+                                    : '',
+                                question:
+                                    this.options.questions[cat_index][
+                                        point_index
+                                    ].text,
+                                choice_1:
+                                    _.isArray(
+                                        this.options.questions[cat_index][
+                                            point_index
+                                        ].choices
+                                    ) &&
+                                    this.options.questions[cat_index][
+                                        point_index
+                                    ].choices.length > 0
+                                        ? this.options.questions[cat_index][
+                                              point_index
+                                          ].choices[0].text
+                                        : '',
+                                choice_2:
+                                    _.isArray(
+                                        this.options.questions[cat_index][
+                                            point_index
+                                        ].choices
+                                    ) &&
+                                    this.options.questions[cat_index][
+                                        point_index
+                                    ].choices.length > 1
+                                        ? this.options.questions[cat_index][
+                                              point_index
+                                          ].choices[1].text
+                                        : '',
+                                choice_3:
+                                    _.isArray(
+                                        this.options.questions[cat_index][
+                                            point_index
+                                        ].choices
+                                    ) &&
+                                    this.options.questions[cat_index][
+                                        point_index
+                                    ].choices.length > 2
+                                        ? this.options.questions[cat_index][
+                                              point_index
+                                          ].choices[2].text
+                                        : '',
+                                choice_4:
+                                    _.isArray(
+                                        this.options.questions[cat_index][
+                                            point_index
+                                        ].choices
+                                    ) &&
+                                    this.options.questions[cat_index][
+                                        point_index
+                                    ].choices.length > 3
+                                        ? this.options.questions[cat_index][
+                                              point_index
+                                          ].choices[3].text
+                                        : '',
+                            })
+                        }
+                    }
+                }
+
+                return model
+            },
+            set(newValue) {
+                const context = this
+                newValue.forEach(function (item) {
+                    if (
+                        context.options.questions[item.cat_index][
+                            item.point_index
+                        ].text === 'undefined'
+                    ) {
+                        context.options.questions[item.cat_index][
+                            item.point_index
+                        ] = {
+                            text: '',
+                            answer: '',
+                            choices: [],
+                        }
+                    }
+                    context.options.questions[item.cat_index][
+                        item.point_index
+                    ] = {
+                        text: item.question,
+                        answer:
+                            Number(item.answer) > 0
+                                ? Number(item.answer) - 1
+                                : null,
+                        choices: context.makeChoiceArray(item),
+                    }
+                })
+            },
+        },
+    },
+    methods: {
+        resetGame() {
+            this.initAnswers()
+            this.initAnswersStates()
+            this.$forceUpdate()
+        },
+        initAnswers() {
+            for (let index = 0; index < 10; index++) {
+                this.options.answers[index] = []
+                for (let point_index = 0; point_index < 10; point_index++) {
+                    this.options.answers[index][point_index] = null
+                }
+            }
+        },
+        initAnswersStates() {
+            for (let index = 0; index < 10; index++) {
+                this.answerStates[index] = []
+                for (let point_index = 0; point_index < 10; point_index++) {
+                    this.answerStates[index][point_index] = null
+                }
+            }
+        },
+        makeChoiceArray(item) {
+            let item_choices = [
+                item.choice_1,
+                item.choice_2,
+                item.choice_3,
+                item.choice_4,
+            ]
+            const answer = item.answer
+            let choices = item_choices
+                .map(function (lineItem, index) {
+                    if (lineItem.length > 0) {
+                        return {
+                            text: lineItem,
+                            is_answer:
+                                Number(answer) > 0
+                                    ? Number(answer) - 1 === index
+                                    : false,
+                        }
+                    }
+                })
+                .filter((item) => item !== undefined)
+            return choices
+        },
+        totalScore() {
+            let total = 0
+            if (this.block.metadata.config.categories) {
+                for (
+                    let index = 0;
+                    index < this.block.metadata.config.categories.length;
+                    index++
+                ) {
+                    for (
+                        let point_index = 0;
+                        point_index < this.block.metadata.config.points.length;
+                        point_index++
+                    ) {
+                        if (this.options.answers[index][point_index] === true) {
+                            total += Number(
+                                this.block.metadata.config.points[point_index]
+                            )
+                        }
+                    }
+                }
+            }
+
+            return total
+        },
+        getUserInput(event) {
+            this.options.answers[this.selectedCatIndex][
+                this.selectedPointIndex
+            ] = event.result
+            this.answerStates[this.selectedCatIndex][this.selectedPointIndex] =
+                { userInput: event.userInput, result: event.result }
+        },
+        editorFeedback(cat_index, point_index) {
+            if (
+                this.options.questions[cat_index][point_index] &&
+                _.isNumber(
+                    this.options.questions[cat_index][point_index].answer
+                ) &&
+                this.options.questions[cat_index][point_index].text.length > 0
+            ) {
+                return true
+            } else {
+                return false
+            }
+        },
+        userFeedback(cat_index, point_index) {
+            if (this.options.answers[cat_index][point_index]) {
+                return true
+            } else {
+                return false
+            }
+        },
+        async onActionPanelEdit() {
+            this.render = !this.render
+
+            if (this.tableMode) {
+                this.tableMode = false
+            }
+        },
+        async onBeforeSave() {
+            this.emitBody({
+                questions: this.options.questions,
+                categories: this.options.categories,
+                answers: [],
+            })
+        },
+        quizshow(catIndex, pointIndex) {
+            this.selectedCatIndex = catIndex
+            this.selectedPointIndex = pointIndex
+            this.show = !this.show
+        },
+        getButtonColor(cat_index, point_index) {
+            if (!this.render) {
+                if (this.editorFeedback(cat_index, point_index)) {
+                    return 'success'
+                }
+                return 'error'
+            }
+            if (
+                this.render &&
+                this.options.answers[cat_index][point_index] !== null
+            ) {
+                if (this.userFeedback(cat_index, point_index)) {
+                    return 'success'
+                } else {
+                    return 'error'
+                }
+            } else {
+                return 'secondary'
+            }
+        },
+    },
+}
+</script>
+
+<style scoped></style>

package/components/content/blocks/quizshowGame/feedbackIcons.vue

@@ -0,0 +1,41 @@
+<template>
+    <div>
+        <span class="sr-only">
+            {{
+                $t(
+                    'plugin.games.components.content.blocks.quizshow_game.success'
+                )
+            }}</span
+        >
+        <v-icon color="success" v-if="success">
+            {{ icons.success }}
+        </v-icon>
+        <span class="sr-only">
+            {{
+                $t('plugin.games.components.content.blocks.quizshow_game.error')
+            }}</span
+        >
+        <v-icon color="error" v-if="!success">
+            {{ icons.error }}
+        </v-icon>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'feedbackIcons',
+    props: {
+        success: { type: Boolean, required: true },
+        icons: {
+            type: Object,
+            required: false,
+            default: {
+                success: 'mdi-check-circle-outline',
+                error: 'mdi-close-circle-outline',
+            },
+        },
+    },
+}
+</script>
+
+<style scoped></style>