SEECBC/FrontEnd/components/learning/QuestionCard.vue

<template>
  <v-card>
    <v-card-title class="font-weight-light">
      {{ question.description }}
    </v-card-title>
    <v-divider />
    <v-radio-group v-model="chosenOptions" :multiple="multiple" class="ma-4">
      <v-radio
        v-for="option in question.options"
        :key="option.label"
        :value="option.label"
        :label="option.description"
      />
    </v-radio-group>
  </v-card>
</template>

<script lang="ts">
import Vue, { PropOptions } from 'vue'
import { Question } from './types'
export default Vue.extend({
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    question: {
      type: Object,
      required: true
    } as PropOptions<Question>
  },
  data() {
    return {
      chosenOptions: []
    }
  },
  computed: {
    multiple(): boolean {
      return this.question.type === 'choice' && this.question.multiple
    }
  }
})
</script>

<style scoped></style>