@windward/games 0.0.1

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

@@ -0,0 +1,338 @@
+<template>
+    <v-container>
+        <v-row
+            align="center"
+            justify="center"
+            class="font-weight-bold text-capitalize"
+            v-if="result !== null"
+        >
+            <div v-if="result">
+                {{
+                    $t(
+                        'plugin.games.components.content.blocks.quizshow_game.feedback.correct'
+                    )
+                }}
+            </div>
+            <div v-if="!result">
+                {{
+                    $t(
+                        'plugin.games.components.content.blocks.quizshow_game.feedback.incorrect'
+                    )
+                }}
+            </div>
+        </v-row>
+        <br />
+        <v-row
+            align="center"
+            justify="center"
+            class="pa-4 mb-4 font-weight-bold text-capitalize"
+        >
+            <v-textarea
+                v-if="editMode"
+                v-model="question.text"
+                :counter="255"
+                maxlength="255"
+                :label="
+                    $t(
+                        'plugin.games.components.content.blocks.quizshow_game.form.question'
+                    )
+                "
+                @input=""
+            ></v-textarea>
+            <v-card flat v-if="!editMode" v-html="question.text"></v-card>
+        </v-row>
+        <v-row
+            align="center"
+            justify="center"
+            class="pa-4 mb-4 font-weight-bold text-capitalize"
+        >
+            <v-text-field
+                v-if="editMode"
+                v-model="question.feedback"
+                :counter="255"
+                maxlength="255"
+                :label="
+                    $t(
+                        'plugin.games.components.content.blocks.quizshow_game.feedback.feedback'
+                    )
+                "
+            ></v-text-field>
+        </v-row>
+
+        <div class="d-flex flex-column">
+            <v-row
+                v-for="(choice, choice_index) in question.choices"
+                :key="choice_index"
+            >
+                <v-card
+                    v-ripple
+                    v-if="!editMode"
+                    @click="getUserInput(choice_index)"
+                    class="ma-1 pa-5 justify-start flex-fill"
+                    :class="generateButtonColor(choice_index)"
+                    :outlined="generateButtonOutline(choice_index)"
+                >
+                    <v-icon
+                        color="success"
+                        v-if="
+                            !editMode &&
+                            userInput !== null &&
+                            userInput === question.answer &&
+                            choice_index === userInput
+                        "
+                    >
+                        mdi-check-circle-outline</v-icon
+                    >
+                    <v-icon
+                        color="error"
+                        v-if="
+                            !editMode &&
+                            userInput !== null &&
+                            choice_index !== question.answer &&
+                            choice_index === userInput
+                        "
+                    >
+                        mdi-close-circle-outline</v-icon
+                    >
+                    <span v-html="mathToHtml(choice.text)"></span>
+                    <v-icon
+                        class="info-icon"
+                        v-if="generateButtonColor(choice_index) === 'success'"
+                        @click="onFeedback"
+                        >mdi-information</v-icon
+                    >
+                </v-card>
+                <v-text-field
+                    v-if="editMode"
+                    v-model="question.choices[choice_index].text"
+                    :counter="255"
+                    maxlength="255"
+                    :label="
+                        $t(
+                            'plugin.games.components.content.blocks.quizshow_game.form.choice'
+                        )
+                    "
+                    outlined
+                    @input=""
+                ></v-text-field>
+                <v-switch
+                    v-if="editMode"
+                    :disabled="
+                        !question.choices[choice_index].is_answer &&
+                        question.answer !== null
+                    "
+                    v-model="question.choices[choice_index].is_answer"
+                    :label="`is answer`"
+                    @click="setAnswer(choice_index)"
+                ></v-switch>
+                <v-icon v-if="editMode" @click="deleteItem(choice)">
+                    mdi-delete
+                </v-icon>
+            </v-row>
+        </div>
+        <v-row
+            align="center"
+            justify="center"
+            class="pt-10 font-weight-bold text-capitalize"
+        >
+            <v-btn
+                v-if="editMode"
+                @click="addChoice"
+                class="ma-1 pa-5 justify-start"
+                color="secondary"
+                outlined
+            >
+                {{
+                    $tc(
+                        'plugin.games.components.content.blocks.quizshow_game.add_choice'
+                    )
+                }}
+            </v-btn>
+        </v-row>
+        <v-row
+            align="center"
+            justify="center"
+            class="pt-10 font-weight-bold text-capitalize"
+        >
+            {{
+                $tc(
+                    'plugin.games.components.content.blocks.quizshow_game.form.for_points',
+                    Number(points),
+                    {
+                        points: Number(points),
+                    }
+                )
+            }}</v-row
+        >
+        <Dialog
+            v-model="feedbackModal"
+            :trigger="false"
+            @click:outside="close"
+            @click:close="close"
+            @keydown.esc="close"
+        >
+            <template #title>
+                {{
+                    $t(
+                        'plugin.games.components.content.blocks.quizshow_game.feedback.answer_description'
+                    )
+                }}
+            </template>
+            <template #form="{ on, attrs }">
+                <div v-bind="attrs" v-on="on">
+                    {{
+                        question.feedback
+                            ? question.feedback
+                            : $t(
+                                  'plugin.games.components.content.blocks.quizshow_game.feedback.placeholder'
+                              )
+                    }}
+                </div>
+            </template>
+        </Dialog>
+    </v-container>
+</template>
+
+<script>
+import Dialog from '~/components/Dialog.vue'
+import { MathHelper } from '@windward/core/utils'
+
+export default {
+    name: 'AnswerPanel',
+    components: { Dialog },
+    props: {
+        editMode: { type: Boolean, required: false, default: false },
+        value: { type: Object, required: true, default: () => {} },
+        state: { type: Object, required: false, default: () => {} },
+        points: { type: Number, required: true, default: 0 },
+    },
+    data() {
+        return {
+            question: {
+                text: '',
+                feedback: '',
+                answer: null,
+                choices: [],
+            },
+            userInput: null,
+            result: null,
+            feedbackModal: false,
+        }
+    },
+    watch: {
+        question: {
+            handler(newValue) {
+                this.$emit('input', newValue)
+            },
+            deep: true,
+        },
+    },
+    mounted() {
+        if (!_.isEmpty(this.value)) {
+            this.question = _.cloneDeep(this.value)
+        }
+        if (!_.isEmpty(this.state)) {
+            this.userInput = this.state.userInput
+            this.result = this.state.result
+        }
+    },
+    computed: {},
+    methods: {
+        mathToHtml(text) {
+            return MathHelper.convertMathContentToHtml(text)
+        },
+        emitUserInput() {
+            this.$emit('click-answer', {
+                result: this.result,
+                userInput: this.userInput,
+            })
+        },
+        generateButtonOutline(index) {
+            if (this.userInput === null) {
+                return true
+            }
+            if (this.question.choices[index].is_answer) {
+                return false
+            }
+            if (
+                this.userInput !== this.question.answer &&
+                index === this.userInput
+            ) {
+                return false
+            } else {
+                return true
+            }
+        },
+        generateButtonColor(index) {
+            if (this.userInput === null) {
+                return 'answer_display'
+            }
+            if (this.question.choices[index].is_answer) {
+                return 'success'
+            }
+            if (
+                this.userInput !== this.question.answer &&
+                index === this.userInput
+            ) {
+                return 'error'
+            } else {
+                return 'answer_display'
+            }
+        },
+        click() {
+            this.$emit('input', true)
+        },
+        getUserInput(answer) {
+            if (this.userInput === null) {
+                this.userInput = answer
+                if (answer === this.question.answer) {
+                    this.result = true
+                } else {
+                    this.result = false
+                }
+
+                this.emitUserInput()
+            }
+        },
+        setAnswer(index) {
+            if (this.question.answer === null) {
+                this.question.answer = index
+            } else if (this.question.answer === index) {
+                this.question.answer = null
+            }
+        },
+        addChoice() {
+            this.question.choices.push({ text: '', is_answer: false })
+        },
+        deleteItem(item) {
+            const editedIndex = this.question.choices.indexOf(item)
+            this.question.choices.splice(editedIndex, 1)
+        },
+        onFeedback(index) {
+            this.feedbackModal = true
+        },
+        close() {
+            this.feedbackModal = false
+        },
+    },
+}
+</script>
+
+<style scoped>
+.bucket {
+    box-shadow: 0px 2px 3px #0000004a;
+    color: black;
+    cursor: pointer;
+    padding: 0.3em;
+    margin: 0.3em;
+    vertical-align: middle;
+    display: inline-block;
+}
+.answer_display {
+    outline: var(--v-secondary-base) solid 2px;
+}
+.info-icon {
+    position: relative;
+    float: right;
+}
+</style>

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

@@ -0,0 +1,260 @@
+<template>
+    <div>
+        <v-toolbar flat tile>
+            <v-app-bar-nav-icon></v-app-bar-nav-icon>
+            <v-toolbar-title class="text-capitalize">{{
+                $t(
+                    'plugin.games.components.content.blocks.quizshow_game.spreadsheet_mode'
+                )
+            }}</v-toolbar-title>
+            <v-spacer></v-spacer>
+            <v-btn
+                icon
+                :aria-label="
+                    $t(
+                        'plugin.games.components.content.blocks.quizshow_game.expand_button'
+                    )
+                "
+                @click="expand"
+            >
+                <v-icon>mdi-arrow-expand-all</v-icon>
+            </v-btn>
+        </v-toolbar>
+        <vue-excel-editor
+            v-model="jsondata"
+            @update="emitData"
+            filter-row
+        >
+            <vue-excel-column
+                field="category"
+                :label="
+                    $t(
+                        'plugin.games.components.content.blocks.quizshow_game.category'
+                    )
+                "
+                type="string"
+                autoFillWidth
+                readonly
+            />
+            <vue-excel-column
+                field="points"
+                :label="
+                    $t(
+                        'plugin.games.components.content.blocks.quizshow_game.points'
+                    )
+                "
+                width="60px"
+                readonly
+            />
+            <vue-excel-column
+                field="question"
+                :label="
+                    $t(
+                        'plugin.games.components.content.blocks.quizshow_game.question'
+                    )
+                "
+                type="string"
+                autoFillWidth
+            />
+            <vue-excel-column
+                field="answer"
+                :label="
+                    $t(
+                        'plugin.games.components.content.blocks.quizshow_game.answer'
+                    )
+                "
+                width="60px"
+                type="number"
+                :options="['1', '2', '3', '4']"
+            />
+            <vue-excel-column
+                field="choice_1"
+                :label="
+                    $t(
+                        'plugin.games.components.content.blocks.quizshow_game.choice_1'
+                    )
+                "
+                type="string"
+                autoFillWidth
+            />
+            <vue-excel-column
+                field="choice_2"
+                :label="
+                    $t(
+                        'plugin.games.components.content.blocks.quizshow_game.choice_2'
+                    )
+                "
+                type="string"
+                autoFillWidth
+            />
+            <vue-excel-column
+                field="choice_3"
+                :label="
+                    $t(
+                        'plugin.games.components.content.blocks.quizshow_game.choice_3'
+                    )
+                "
+                type="string"
+                autoFillWidth
+            />
+            <vue-excel-column
+                field="choice_4"
+                :label="
+                    $t(
+                        'plugin.games.components.content.blocks.quizshow_game.choice_4'
+                    )
+                "
+                type="string"
+                autoFillWidth
+            />
+        </vue-excel-editor>
+        <Dialog
+            v-model="dialog"
+            :trigger="false"
+            fullscreen
+            @click:outside="close"
+            @click:close="close"
+            @keydown.esc="close"
+        >
+            <template #title
+                ><span class="text-capitalize">{{
+                    $t(
+                        'plugin.games.components.content.blocks.quizshow_game.spreadsheet_mode'
+                    )
+                }}</span></template
+            >
+
+            <template #form="{ on, attrs }">
+                <vue-excel-editor
+                    v-model="jsondata"
+                    @update="emitData"
+                    filter-row
+                    v-bind="attrs"
+                    v-on="on"
+                >
+                    <vue-excel-column
+                        field="category"
+                        :label="
+                            $t(
+                                'plugin.games.components.content.blocks.quizshow_game.category'
+                            )
+                        "
+                        type="string"
+                        autoFillWidth
+                        readonly
+                    />
+                    <vue-excel-column
+                        field="points"
+                        :label="
+                            $t(
+                                'plugin.games.components.content.blocks.quizshow_game.points'
+                            )
+                        "
+                        width="60px"
+                        readonly
+                    />
+                    <vue-excel-column
+                        field="question"
+                        :label="
+                            $t(
+                                'plugin.games.components.content.blocks.quizshow_game.question'
+                            )
+                        "
+                        type="string"
+                        autoFillWidth
+                    />
+                    <vue-excel-column
+                        field="answer"
+                        :label="
+                            $t(
+                                'plugin.games.components.content.blocks.quizshow_game.answer'
+                            )
+                        "
+                        width="60px"
+                        type="number"
+                        :options="['1', '2', '3', '4']"
+                    />
+                    <vue-excel-column
+                        field="choice_1"
+                        :label="
+                            $t(
+                                'plugin.games.components.content.blocks.quizshow_game.choice_1'
+                            )
+                        "
+                        type="string"
+                        autoFillWidth
+                    />
+                    <vue-excel-column
+                        field="choice_2"
+                        :label="
+                            $t(
+                                'plugin.games.components.content.blocks.quizshow_game.choice_2'
+                            )
+                        "
+                        type="string"
+                        autoFillWidth
+                    />
+                    <vue-excel-column
+                        field="choice_3"
+                        :label="
+                            $t(
+                                'plugin.games.components.content.blocks.quizshow_game.choice_3'
+                            )
+                        "
+                        type="string"
+                        autoFillWidth
+                    />
+                    <vue-excel-column
+                        field="choice_4"
+                        :label="
+                            $t(
+                                'plugin.games.components.content.blocks.quizshow_game.choice_4'
+                            )
+                        "
+                        type="string"
+                        autoFillWidth
+                    />
+                </vue-excel-editor>
+            </template>
+        </Dialog>
+    </div>
+</template>
+
+<script>
+import Dialog from '~/components/Dialog.vue'
+import VueExcelEditor from 'vue-excel-editor/src/VueExcelEditor'
+import VueExcelColumn from 'vue-excel-editor/src/VueExcelColumn'
+import _ from 'lodash'
+
+export default {
+    name: 'Gridview',
+    components: { Dialog, VueExcelEditor, VueExcelColumn },
+    props: {
+        value: { type: Array, required: true, default: [] },
+    },
+    data() {
+        return {
+            jsondata: [],
+            dialog: false,
+        }
+    },
+    beforeMount() {
+        if (!_.isEmpty(this.value)) {
+            this.jsondata = _.cloneDeep(this.value)
+        }
+    },
+    methods: {
+        expand() {
+            this.dialog = true
+        },
+        emitData() {
+            this.$emit('input', this.jsondata)
+        },
+        close() {
+            this.dialog = false
+        },
+    },
+}
+</script>
+
+<style scoped></style>