SEECBC/FrontEnd/pages/learning/_chapter/_level/exercise/do.vue

<template>
  <div>
    <h1 class="mb-5 display-2 font-weight-light">
      {{ $t('learning.exercise.title') }}
    </h1>
    <question-card v-for="q in questions" :key="q.id" :question="q" class="mb-5" />
    <v-row>
      <v-col>
        <v-btn color="primary" tile outlined block>
          {{ $t('learning.exercise.do.commit') }}
        </v-btn>
      </v-col>
    </v-row>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import QuestionCard from '~/components/learning/QuestionCard.vue'

const mockQuestion = {
  description: 'test',
  id: 1,
  type: 'choice',
  multiple: true,
  options: [
    { label: 'A', description: 'This is the first choice' },
    { label: 'B', description: 'This is the second choice' },
    { label: 'C', description: 'This is the third choice' },
    { label: 'D', description: 'This is the forth choice' }
  ]
}

export default Vue.extend({
  components: { QuestionCard },
  validate({ query }): boolean {
    return 'exerciseId' in query
  },
  data() {
    return {
      questions: [mockQuestion]
    }
  },
  computed: {
    exerciseId(): string {
      return this.$route.query.exerciseId as string
    }
  }
})
</script>

<style scoped></style>