Task Layout

This component is used to render single or mutliple choice tasks

Example Usage

Example

A 12000

B This is a very very long choice choice

C 11100

D 12100

E 12090

A 12000

B This is a very very long choice choice

C 11100

D 12100

E 12090

Task Choice Type with v-model: []

Type:

ShowAnswers:

Editable:

A 12000

B This is a very very long choice choice

C 11100

D 12100

E 12090

<template>
  <SkTaskChoice :task="dataTask" />
  <SkTaskChoice :task="dataTask" :highlight-solutions="true" />
  <p class="!mt-l !mb-s">Task Choice Type with v-model: {{ value }}</p>
  <p>
    Type:
    <button
      class="bg-blue p-xs rounded-sm"
      @click="dataTask.type = dataTask.type === 'single' ? 'multi' : 'single'"
    >
      {{ dataTask.type }}
    </button>
  </p>
  <p>
    ShowAnswers:
    <button class="bg-blue p-xs rounded-sm" @click="showAnswers = !showAnswers">
      {{ showAnswers }}
    </button>
  </p>

  <p>
    Editable:
    <button class="bg-blue p-xs rounded-sm" @click="editable = !editable">
      {{ editable }}
    </button>
  </p>
  <SkTaskChoice
    v-model="value"
    :editable="editable"
    :task="dataTask"
    :highlight-solutions="showAnswers"
  />
</template>
<script setup>
import { ref, reactive } from 'vue';
const dataTask = reactive({
  id: '00612c3a-4eaa-459a-bb63-589d82a1841b',
  points: 1,
  duration: 1,
  solutions: ['12100'],
  type: 'single',
  choices: ['12000', 'This is a very very long choice choice', '11100', '12100', '12090'],
  notation: 'normal',
  requirements: [],
});

const showAnswers = ref(false);
const editable = ref(false);
const value = ref([]);
</script>

Reference

Properties

Name	Type	Default	Description
task	ref	null	One Task object from a task.data array
highlightSolution	Boolean	false	Whether the solution should be highlighted or not
v-model	ref	undefined	Set this to a variable in order to make the TaskChoice editable

Events

Name	Parameters	Description
@input	event	the payload of the input

slots

Name	Slot Props	Description
default	choice, index	Use the default slot to change the behaviour of each tasks