submit exercise layout

Author: rockstarr-programmerr

src/interfaces/classroom.ts

@@ -19,8 +19,14 @@ export declare interface ReadingSubmissionResult {
   is_correct: boolean;
 }
 
+declare interface _ReadingExercise {
+  pk: number;
+  url: string;
+  identifier: string;
+}
+
 export declare interface ReadingExerciseReport {
-  exercise: string;
+  exercise: _ReadingExercise;
   passage_1_total: number;
   passage_2_total: number;
   passage_3_total: number;

src/interfaces/reading-question.ts

@@ -8,3 +8,15 @@ export declare interface ReadingQuestion {
   choices: string[];
   answers: string[];
 }
+
+declare interface _AnswerChoice {
+  text: string;
+  value: string;
+}
+
+export declare interface ReadingAnswer {
+  question_number: ReadingQuestion['number'];
+  content: string;
+  question_type?: ReadingQuestion['question_type'];
+  choices?: _AnswerChoice[];
+}

src/router/index.ts

@@ -21,6 +21,7 @@ import ReadingExerciseDetail from '../views/reading-exercise/ReadingExerciseDeta
 import ReadingExerciseCreate from '../views/reading-exercise/ReadingExerciseCreate.vue'
 import ReadingExerciseUpdate from '../views/reading-exercise/ReadingExerciseUpdate.vue'
 import ReadingExerciseEditAnswers from '../views/reading-exercise/ReadingExerciseEditAnswers.vue'
+import ReadingExerciseSubmit from '../views/reading-exercise/ReadingExerciseSubmit.vue'
 
 import { castToNumber, prefixWith } from './utils'
 
@@ -115,6 +116,12 @@ const routes: Array<RouteConfig> = [
       component: ReadingExerciseEditAnswers,
       props: castToNumber('pk')
     },
+    {
+      path: '/:pk/submit',
+      name: 'ReadingExerciseSubmit',
+      component: ReadingExerciseSubmit,
+      props: castToNumber('pk')
+    },
     {
       path: '/:pk',
       name: 'ReadingExerciseDetail',

src/utils/index.ts

@@ -23,7 +23,8 @@ export function snakeCaseToCamelCase (text: string): string {
   return words.join('')
 }
 
-export function toTitleCase (text: string, separator?: string): string {
+export function toTitleCase (text: string | undefined, separator?: string): string {
+  if (text === undefined) return ''
   if (separator === undefined) separator = ' '
   let words = text.split(separator)
   words = words.map(word => {

src/views/classroom/ClassroomExercisesReadingStudent.vue

@@ -28,13 +28,20 @@
             v-for="report of reports"
             :key="report.pk"
           >
-            <td>{{ report.exercise }}</td>
+            <td>{{ report.exercise.identifier }}</td>
             <template v-if="!report.submitted">
               <td colspan="5">
                 Not submitted
               </td>
               <td class="text-center">
-                Start
+                <router-link
+                  :to="{
+                    name: 'ReadingExerciseSubmit',
+                    params: { pk: report.exercise.pk }
+                  }"
+                >
+                  Start
+                </router-link>
               </td>
             </template>
             <template v-else>

src/views/reading-exercise/ReadingExerciseSubmit.vue

@@ -0,0 +1,153 @@
+<template>
+  <v-container>
+    <v-progress-circular
+      v-if="loading"
+      indeterminate
+      color="primary"
+    ></v-progress-circular>
+
+    <div v-else>
+      <h1>{{ exercise.identifier }}</h1>
+      <v-divider></v-divider>
+
+      <v-row class="mt-0">
+        <v-col cols="6" class="exercise-col">
+          <div v-html="exercise.content"></div>
+        </v-col>
+        <v-col cols="6" class="exercise-col">
+          <p class="mb-0">Your answers</p>
+          <v-row>
+            <v-col
+              v-for="(answers, index) of [answersCol1, answersCol2]"
+              :key="index"
+              cols="6"
+            >
+              <v-simple-table>
+                <tbody>
+                  <tr
+                    v-for="answer of answers"
+                    :key="answer.question_number"
+                  >
+                    <th>{{ answer.question_number }}</th>
+                    <td>
+                      <v-select
+                        v-if="answer.question_type !== 'fill_blank'"
+                        v-model="answer.content"
+                        :items="answer.choices"
+                        hide-details
+                      ></v-select>
+                      <v-text-field
+                        v-else
+                        v-model="answer.content"
+                        hide-details
+                      ></v-text-field>
+                    </td>
+                  </tr>
+                </tbody>
+              </v-simple-table>
+            </v-col>
+          </v-row>
+        </v-col>
+      </v-row>
+    </div>
+  </v-container>
+</template>
+
+<script lang="ts">
+import { ReadingExercise } from '@/interfaces/reading-exercise'
+import { ReadingAnswer, ReadingQuestion } from '@/interfaces/reading-question'
+import { unexpectedExc } from '@/utils'
+import { Vue, Component, Prop } from 'vue-property-decorator'
+import { mapState } from 'vuex'
+
+@Component({
+  computed: {
+    ...mapState('readingExercise', {
+      exercise: 'currentReadingExercise'
+    }),
+    ...mapState('readingExercise', {
+      questions: 'currentQuestions'
+    })
+  }
+})
+export default class ReadingExerciseSubmit extends Vue {
+  @Prop(Number) readonly pk!: number
+
+  async created (): Promise<void> {
+    await this.setQuestions()
+    this.setAnswers()
+  }
+
+  /**
+   * Questions
+   */
+  exercise!: ReadingExercise
+  questions!: ReadingQuestion[]
+  loading = false
+
+  async setQuestions (): Promise<void> {
+    this.loading = true
+
+    try {
+      await this.$store.dispatch('readingExercise/detail', this.pk)
+      await this.$store.dispatch('readingExercise/getQuestions')
+    } catch (error) {
+      unexpectedExc(error)
+    } finally {
+      this.loading = false
+    }
+  }
+
+  /**
+   * Answers
+   */
+  answers: ReadingAnswer[] = []
+
+  setAnswers (): void {
+    this.answers = this.questions.map(question => {
+      let choices: ReadingAnswer['choices'] = []
+
+      if (question.question_type === 'true_false') {
+        choices = [
+          { text: 'TRUE', value: 'TRUE' },
+          { text: 'FALSE', value: 'FALSE' },
+          { text: 'NOT GIVEN', value: 'NOT_GIVEN' }
+        ]
+      } else if (question.question_type === 'yes_no') {
+        choices = [
+          { text: 'YES', value: 'YES' },
+          { text: 'NO', value: 'NO' },
+          { text: 'NOT GIVEN', value: 'NOT_GIVEN' }
+        ]
+      } else {
+        choices = question.choices.map(choice => (
+          { text: choice, value: choice }
+        ))
+      }
+
+      return {
+        question_number: question.number,
+        content: '',
+        question_type: question.question_type,
+        choices
+      }
+    })
+  }
+
+  get answersCol1 (): ReadingAnswer[] {
+    return this.answers.filter(answer => answer.question_number <= 20)
+  }
+
+  get answersCol2 (): ReadingAnswer[] {
+    return this.answers.filter(answer => answer.question_number > 20)
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.exercise-col {
+  height: 80vh;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+</style>