@windward/games 0.0.9 → 0.1.0

package/components/content/blocks/multipleChoice/MultipleChoice.vue

@@ -3,215 +3,181 @@
         <v-row>
             <v-col>
                 <h3>{{ block.metadata.config.title }}</h3>
-                <p>{{ block.metadata.config.instructions }}</p>
+                <p class="mb-0">{{ block.metadata.config.instructions }}</p>
             </v-col>
         </v-row>
-        <v-row>
-            <v-col class="pa-0">
-                <v-carousel height="600">
-                    <v-container>
-                        <v-carousel-item
-                            v-for="question in block.metadata.config.questions"
-                            :key="question.id"
-                        >
-                            <v-col class="d-flex justify-center">
-                                <p class="questionBody">{{ question.body }}</p>
-                            </v-col>
-                            <v-container :key="updateKey">
-                                <v-row
-                                    v-for="answer in question.answer_options"
-                                    :key="answer.id"
-                                    class="mb-2"
-                                >
-                                    <v-col
-                                        cols="12"
-                                        md="2"
-                                        class="d-flex justify-end"
-                                    >
+        <v-carousel height="600">
+            <v-carousel-item
+                v-for="question in block.metadata.config.questions"
+                :key="question.id"
+            >
+                <v-col class="d-flex justify-center">
+                    <p>{{ question.body }}</p>
+                </v-col>
+                <v-container :key="updateKey">
+                    <v-row
+                        v-for="answer in question.answer_options"
+                        :key="answer.id"
+                        class="mb-2"
+                    >
+                        <v-col cols="12" md="1" class="d-flex justify-end">
+                            <v-icon
+                                :class="handleIconClass(question, answer)"
+                                >{{ handleIcon(question, answer) }}</v-icon
+                            >
+                        </v-col>
+                        <v-col cols="12" md="10" class="pa-0">
+                            <v-card
+                                class="container-answer-option pa-2"
+                                :disabled="answer.disabled"
+                                :class="onIsThisCorrect(answer, question)"
+                                outlined
+                                tile
+                                @click="onChooseAnswer(answer, question)"
+                            >
+                                <div class="d-flex justify-space-between">
+                                    <p class="mb-0">
+                                        {{
+                                            getCharacter(question, answer) +
+                                            '. ' +
+                                            answer.value
+                                        }}
+                                    </p>
+                                    <div>
                                         <v-icon
                                             :class="
-                                                handleIconClass(
+                                                handleInformationClass(
                                                     question,
                                                     answer
                                                 )
                                             "
-                                            >{{
-                                                handleIcon(question, answer)
-                                            }}</v-icon
-                                        >
-                                    </v-col>
-                                    <v-col cols="12" md="8" class="pa-0">
-                                        <v-card
-                                            class="optionOutline pa-2"
-                                            :disabled="answer.disabled"
-                                            :class="
-                                                onIsThisCorrect(
-                                                    answer,
-                                                    question
-                                                )
-                                            "
-                                            outlined
-                                            tile
                                             @click="
-                                                onChooseAnswer(answer, question)
+                                                onAnswerDescription(question)
                                             "
-                                        >
-                                            <div
-                                                class="d-flex justify-space-between"
-                                            >
-                                                <p class="mb-0">
-                                                    {{
-                                                        getCharacter(
-                                                            question,
-                                                            answer
-                                                        ) +
-                                                        ': ' +
-                                                        answer.value
-                                                    }}
-                                                </p>
-                                                <div>
-                                                    <v-icon
-                                                        :class="
-                                                            handleInformationClass(
-                                                                question,
-                                                                answer
-                                                            )
-                                                        "
-                                                        @click="
-                                                            onAnswerDescription(
-                                                                question
-                                                            )
-                                                        "
-                                                        >{{
-                                                            handleInformationOutline(
-                                                                question,
-                                                                answer
-                                                            )
-                                                        }}</v-icon
-                                                    >
-                                                </div>
-                                            </div>
-                                        </v-card>
-                                    </v-col>
-                                    <v-col cols="12" md="2"></v-col>
-                                </v-row>
-                            </v-container>
-                            <v-col cols="12" md="12">
-                                <v-row class="d-flex justify-center">
-                                    <v-btn
-                                        color="primary"
-                                        outlined
-                                        class="mr-4 hintButton"
-                                        @click="onHint(question)"
-                                        >{{
-                                            $t(
-                                                'plugin.games.components.content.blocks.multiple_choice.hint'
-                                            )
-                                        }}</v-btn
-                                    >
-                                    <v-btn
-                                        color="primary fiftyButton"
-                                        outlined
-                                        :disabled="
-                                            question.answer_options.length !==
-                                                4 || question.fiftyFifty
-                                        "
-                                        class="ml-4 fiftyButton"
-                                        @click="onFifty(question)"
-                                        >{{
-                                            $t(
-                                                'plugin.games.components.content.blocks.multiple_choice.fifty'
-                                            )
-                                        }}</v-btn
-                                    >
-                                </v-row>
-                            </v-col>
-                            <v-layout class="mt-2">
-                                <v-flex xs4></v-flex>
-                                <v-flex xs4>
-                                    <v-col align="center" tabindex="0">
-                                        {{
-                                            $t(
-                                                'plugin.games.components.content.blocks.matching_game.of_complete_text_area',
-                                                [
-                                                    completedAmount,
-                                                    totalAmountQuestions,
-                                                ]
-                                            )
-                                        }}
-                                        <v-progress-linear
-                                            color="success"
-                                            outlined
-                                            v-model="completedPercent"
-                                            rounded
-                                            height="15"
-                                        ></v-progress-linear>
-                                    </v-col>
-                                </v-flex>
-                                <v-flex xs4></v-flex>
-                            </v-layout>
-                            <v-layout class="mt-2" v-if="mountCourseCounter">
-                                <v-flex xs8></v-flex>
-                                <v-flex xs4>
-                                    <v-col>
-                                        <p>
-                                            {{
-                                                $t(
-                                                    'plugin.games.components.content.blocks.multiple_choice.total_points'
-                                                )
-                                            }}
-                                        </p>
-                                        <p>
-                                            {{ studentAmountCorrect }}
-                                            {{
-                                                $t(
-                                                    'plugin.games.components.content.blocks.multiple_choice.out_of'
+                                            >{{
+                                                handleInformationOutline(
+                                                    question,
+                                                    answer
                                                 )
-                                            }}
-                                            {{ totalQuestionsMultipleChoice }}
-                                        </p>
-                                    </v-col>
-                                </v-flex>
-                            </v-layout>
-                        </v-carousel-item>
-                        <Dialog
-                            v-model="dialog"
-                            :trigger="false"
-                            @click:outside="close"
-                            @click:close="close"
-                            @keydown.esc="close"
-                        >
-                            <template #title>
-                                <div v-if="hint">
-                                    {{
-                                        $t(
-                                            'plugin.games.components.content.blocks.multiple_choice.hint_title'
-                                        )
-                                    }}
-                                </div>
-                                <div v-if="answerDescriptionModal">
-                                    {{
-                                        $t(
-                                            'plugin.games.components.content.blocks.multiple_choice.answer_feedback'
-                                        )
-                                    }}
-                                </div>
-                            </template>
-                            <template #form="{ on, attrs }">
-                                <div v-bind="attrs" v-on="on">
-                                    <div v-if="hint">
-                                        {{ hintText }}
-                                    </div>
-                                    <div v-if="answerDescriptionModal">
-                                        {{ answerDescription }}
+                                            }}</v-icon
+                                        >
                                     </div>
                                 </div>
-                            </template>
-                        </Dialog>
-                    </v-container>
-                </v-carousel>
-            </v-col>
-        </v-row>
+                            </v-card>
+                        </v-col>
+                        <v-col cols="12" md="1"></v-col>
+                    </v-row>
+                </v-container>
+                <v-col cols="12" md="12">
+                    <v-row class="d-flex justify-center">
+                        <v-btn
+                            color="primary"
+                            outlined
+                            class="mr-4 btn-hint"
+                            @click="onHint(question)"
+                            >{{
+                                $t(
+                                    'windward.games.components.content.blocks.multiple_choice.hint'
+                                )
+                            }}</v-btn
+                        >
+                        <v-btn
+                            color="primary"
+                            outlined
+                            :disabled="
+                                question.answer_options.length !== 4 ||
+                                question.fiftyFifty
+                            "
+                            class="ml-4 btn-fifty"
+                            @click="onFifty(question)"
+                            >{{
+                                $t(
+                                    'windward.games.components.content.blocks.multiple_choice.fifty'
+                                )
+                            }}</v-btn
+                        >
+                    </v-row>
+                </v-col>
+                <v-layout class="mt-2">
+                    <v-flex xs4></v-flex>
+                    <v-flex xs4>
+                        <v-col align="center" tabindex="0">
+                            {{
+                                $t(
+                                    'windward.games.components.content.blocks.matching_game.of_complete_text_area',
+                                    [completedAmount, totalAmountQuestions]
+                                )
+                            }}
+                            <v-progress-linear
+                                color="success"
+                                outlined
+                                v-model="completedPercent"
+                                rounded
+                                height="15"
+                            ></v-progress-linear>
+                        </v-col>
+                    </v-flex>
+                    <v-flex xs4></v-flex>
+                </v-layout>
+                <v-layout class="mt-2" v-if="mountCourseCounter">
+                    <v-flex xs8></v-flex>
+                    <v-flex xs4>
+                        <v-col>
+                            <p>
+                                {{
+                                    $t(
+                                        'windward.games.components.content.blocks.multiple_choice.total_points'
+                                    )
+                                }}
+                            </p>
+                            <p>
+                                {{ studentAmountCorrect }}
+                                {{
+                                    $t(
+                                        'windward.games.components.content.blocks.multiple_choice.out_of'
+                                    )
+                                }}
+                                {{ totalQuestionsMultipleChoice }}
+                            </p>
+                        </v-col>
+                    </v-flex>
+                </v-layout>
+            </v-carousel-item>
+            <Dialog
+                v-model="dialog"
+                :trigger="false"
+                @click:outside="close"
+                @click:close="close"
+                @keydown.esc="close"
+            >
+                <template #title>
+                    <div v-if="hint">
+                        {{
+                            $t(
+                                'windward.games.components.content.blocks.multiple_choice.hint_title'
+                            )
+                        }}
+                    </div>
+                    <div v-if="answerDescriptionModal">
+                        {{
+                            $t(
+                                'windward.games.components.content.blocks.multiple_choice.answer_feedback'
+                            )
+                        }}
+                    </div>
+                </template>
+                <template #form="{ on, attrs }">
+                    <div v-bind="attrs" v-on="on">
+                        <div v-if="hint">
+                            {{ hintText }}
+                        </div>
+                        <div v-if="answerDescriptionModal">
+                            {{ answerDescription }}
+                        </div>
+                    </div>
+                </template>
+            </Dialog>
+        </v-carousel>
     </v-container>
 </template>
 <script>
@@ -239,7 +205,9 @@ export default {
             this.block.metadata.config = {}
         }
         if (_.isEmpty(this.block.metadata.config.title)) {
-            this.block.metadata.config.title = ''
+            this.block.metadata.config.title = this.$t(
+                'windward.games.components.content.blocks.multiple_choice.game_title'
+            )
         }
         if (_.isEmpty(this.block.metadata.config.instructions)) {
             this.block.metadata.config.instructions = ''
@@ -398,7 +366,7 @@ export default {
                     true
                 ) {
                     if (answer.correctAnswer === true) {
-                        return 'studentAnswerCorrect'
+                        return 'container-student-correct'
                     } else {
                         return ''
                     }
@@ -411,14 +379,14 @@ export default {
                         studentsQuestionResponse.student_response
                             .correctAnswer !== true
                     ) {
-                        return 'incorrectBorder'
+                        return 'container-incorrect-border'
                     }
                 } else if (
                     studentsQuestionResponse.student_response.correctAnswer !==
                     true
                 ) {
                     if (answer.correctAnswer === true) {
-                        return 'correctBorder'
+                        return 'container-correct-border'
                     }
                 }
             }
@@ -465,15 +433,15 @@ export default {
                     answer.correctAnswer === true &&
                     studentsQuestionResponse.student_response.chosen === true
                 ) {
-                    return 'isCorrect'
+                    return 'icon-main-correct'
                 }
                 //requirements for correct and unchosen
                 if (answer.correctAnswer === true && answer.chosen === false) {
-                    return 'isCorrect'
+                    return 'icon-main-correct'
                 }
                 // requirements for wrong and chosen
                 if (answer.correctAnswer !== true && answer.chosen === true) {
-                    return 'isIncorrect'
+                    return 'icon-main-incorrect'
                 }
             }
         },
@@ -506,12 +474,12 @@ export default {
             )
             if (studentsQuestionResponse) {
                 if (answer.correctAnswer === true && answer.chosen === true) {
-                    return 'informationCorrect'
+                    return 'icon-information-correct'
                 } else if (
                     answer.correctAnswer === true &&
                     answer.chosen === false
                 ) {
-                    return 'isCorrect'
+                    return 'icon-main-correct'
                 }
             }
         },
@@ -581,44 +549,37 @@ export default {
 }
 </script>
 <style scoped>
-.questionBody {
-    font-size: 18px;
+.container-answer-option {
+    border: 1px solid var(--v-primary-base);
+    border-radius: 4px !important;
 }
-.optionOutline {
-    border: 2px solid var(--v-primary-base);
-    border-radius: 3px;
+.container-correct-border {
+    border: 1px solid var(--v-success-base);
 }
-.correctBorder {
-    border: 3px solid var(--v-success-base);
-}
-.incorrectBorder {
+.container-incorrect-border {
     background-color: var(--v-error-base);
-    border: 2px solid var(--v-error-base);
+    border: 1px solid var(--v-error-base);
     color: white;
 }
-.studentAnswerCorrect {
+.container-student-correct {
     background-color: var(--v-success-base);
     color: white;
 }
-.isCorrect {
+.icon-main-correct {
     color: var(--v-success-base);
 }
-.isIncorrect {
+.icon-main-incorrect {
     color: var(--v-error-base);
 }
-.informationCorrect {
+.icon-information-correct {
     color: white;
 }
-.iconStudentCorrect {
-    color: var(--v-success-base);
-    border-radius: 25px;
-}
 /* need important below to override vuetify preset width for buttons */
-.hintButton {
+.btn-hint {
     min-width: 20% !important;
     margin-right: 16px;
 }
-.fiftyButton {
+.btn-fifty {
     min-width: 20% !important;
     margin-right: 16px;
 }

package/components/content/blocks/multipleChoice/QuestionDialog.vue

@@ -6,7 +6,7 @@
                     v-model="question.body"
                     :label="
                         $t(
-                            'plugin.games.components.settings.multiple_choice.question'
+                            'windward.games.components.settings.multiple_choice.question'
                         )
                     "
                     :autofocus="true"
@@ -18,7 +18,7 @@
                     v-model="question.hint"
                     :label="
                         $t(
-                            'plugin.games.components.settings.multiple_choice.question_hint'
+                            'windward.games.components.settings.multiple_choice.question_hint'
                         )
                     "
                     rows="2"
@@ -29,7 +29,7 @@
                     v-model="question.answer_description"
                     :label="
                         $t(
-                            'plugin.games.components.settings.multiple_choice.answer_feedback'
+                            'windward.games.components.settings.multiple_choice.answer_feedback'
                         )
                     "
                     rows="2"
@@ -40,14 +40,14 @@
                 <h4 class="pb-2">
                     {{
                         $t(
-                            'plugin.games.components.settings.multiple_choice.answer_options'
+                            'windward.games.components.settings.multiple_choice.answer_options'
                         )
                     }}
                 </h4>
                 <p>
                     {{
                         $t(
-                            'plugin.games.components.settings.multiple_choice.correct_answer'
+                            'windward.games.components.settings.multiple_choice.correct_answer'
                         )
                     }}
                 </p>
@@ -84,7 +84,7 @@
                             :class="getCorrectAnswer(answer)"
                             :label="
                                 $t(
-                                    'plugin.games.components.settings.multiple_choice.answer_option'
+                                    'windward.games.components.settings.multiple_choice.answer_option'
                                 )
                             "
                             rows="2"
@@ -116,7 +116,7 @@
                     <v-icon class="primary addIcon">mdi-plus</v-icon>
                     {{
                         $t(
-                            'plugin.games.components.settings.multiple_choice.add_answer'
+                            'windward.games.components.settings.multiple_choice.add_answer'
                         )
                     }}
                 </p>