Task Layout

This component is used to render task layouts correctly

Example Usage

Example

Lösung mit Zähler und Nenner gleichnamig machen: $\frac{27}{13}-\frac{9}{1344}+4$ $y$ sei gegeben mit $=4$.

A $\frac{18}{13}$

B $\frac{19}{13}$

C $\frac{17}{13}$

D $\frac{16}{13}$

x=

A $1$

B $2$

C $3$

D $4$

Wie viel ist 2 mal 3?

Antwort...

Der

Antwort...

fällt nicht weit vom Stamm.

Analysiere die Beziehung zu seinem Vater.

Antwort eingeben...

Lösung mit Zähler und Nenner gleichnamig machen: $\frac{27}{13}-\frac{9}{1344}+4$ $y$ sei gegeben mit $=4$.

A $\frac{18}{13}$

B $\frac{19}{13}$

C $\frac{17}{13}$

D $\frac{16}{13}$

1 Subtasks

x=

A $1$

B $2$

C $3$

D $4$

1 Subtasks

Wie viel ist 2 mal 3?

$6$ $6,0$ $6.0$ $Sechs$ $Six$

1 Subtasks

Der

Apfel

fällt nicht weit vom Stamm.

1 Subtasks

Analysiere die Beziehung zu seinem Vater.

Die Rechtschreibung ist korrekt und alle Satzzeichen wurden richtig gesetzt. Alle Formeln wurden bedacht

1 Subtasks

Lösung mit Zähler und Nenner gleichnamig machen: $\frac{27}{13}-\frac{9}{1344}+4$ $y$ sei gegeben mit $=4$.

A $\frac{18}{13}$

B $\frac{19}{13}$

C $\frac{17}{13}$

D $\frac{16}{13}$

x=

A $1$

B $2$

C $3$

D $4$

Wie viel ist 2 mal 3?

Der

fällt nicht weit vom Stamm.

Analysiere die Beziehung zu seinem Vater.

Answers: {}

<template>
  <SkCard class="mb-l">
    <SkTaskLayout :inline="true" :layout="task" :data="data"></SkTaskLayout>
  </SkCard>
  <SkCard>
    <SkTaskLayout v-model="answers" :layout="task" :data="data" :highlight-solutions="true">
      <template #groupFooter="{ subtasks }">
        {{ subtasks.length }} Subtasks
        <SkButton @click="answers = []">Antworten zurücksetzen</SkButton>
      </template>
    </SkTaskLayout>
  </SkCard>
  <SkTaskLayout v-model="answers" :layout="task" :data="data" :editable="true"> </SkTaskLayout>
  <h3 class="!mt-l">Answers: {{ answers }}</h3>
</template>
<script setup>
import { ref } from 'vue';

const answers = ref({});
const task = [
  {
    type: 'image',
    provider: 'schoolkit',
    id: '49135d2a-f036-43b1-8246-099fe053662b',
    url: 'http://localhost:8055/assets/49135d2a-f036-43b1-8246-099fe053662b',
  },
  {
    type: 'text',
    content: 'Lösung mit Zähler und Nenner gleichnamig machen: ',
  },
  {
    type: 'latex',
    content: '\\frac{27}{13}-\\frac{9}{1344}+4',
  },
  {
    type: 'text',
    content: '\n',
  },
  {
    type: 'latex',
    content: 'y',
  },
  {
    type: 'text',
    content: ' sei gegeben mit ',
  },
  {
    type: 'latex',
    content: '=4',
  },
  {
    type: 'text',
    content: '.',
  },
  {
    type: 'group',
    interface: 'single',
    content: [
      {
        type: 'task',
        content: '2e5cae50-375e-4855-b73e-8fa8214c0273',
      },
    ],
  },
  {
    type: 'group',
    interface: 'single',
    content: [
      {
        type: 'row',
        content: [
          {
            type: 'text',
            content: 'x=',
            meta: 'prefix',
          },
          {
            type: 'task',
            content: '0bcf4d7a-27a9-4ae8-91cc-9b640106deca',
          },
          {
            type: 'text',
            content: '',
            meta: 'suffix',
          },
        ],
      },
    ],
  },
  {
    type: 'group',
    interface: 'text',
    content: [
      {
        type: 'text',
        content: 'Wie viel ist 2 mal 3?',
      },
      {
        type: 'task',
        content: '178ae6d6-cf4c-4863-b58f-16865e4720cd',
      },
    ],
  },
  {
    type: 'group',
    interface: 'text',
    content: [
      {
        type: 'text',
        content: 'Der ',
      },
      {
        type: 'task',
        content: '4e3b9b60-836f-4649-9154-155012987473',
      },
      {
        type: 'text',
        content: ' fällt nicht weit vom Stamm.',
      },
    ],
  },

  {
    type: 'group',
    interface: 'longtext',
    content: [
      {
        type: 'text',
        content: 'Analysiere die Beziehung zu seinem Vater.',
      },
      {
        type: 'task',
        content: '23456',
      },
    ],
  },
];

const data = [
  {
    id: '2e5cae50-375e-4855-b73e-8fa8214c0273',
    solutions: ['\\frac{18}{13}'],
    choices: ['\\frac{18}{13}', '\\frac{19}{13}', '\\frac{17}{13}', '\\frac{16}{13}'],
    points: 1,
    duration: 1,
    type: 'single',
    notation: 'latex',
    requirements: [],
    Version: '1',
  },
  {
    id: '0bcf4d7a-27a9-4ae8-91cc-9b640106deca',
    points: 1,
    duration: 1,
    solutions: ['3'],
    type: 'single',
    choices: ['1', '2', '3', '4'],
    notation: 'latex',
    requirements: [],
  },
  {
    id: '178ae6d6-cf4c-4863-b58f-16865e4720cd',
    points: 1,
    duration: 1,
    solutions: ['6', '6,0', '6.0', 'Sechs', 'Six'],
    type: 'text',
    choices: ['6', '6,0', 'Sechs', 'Six'],
    notation: 'latex',
    requirements: [],
    version: 1,
  },
  {
    id: '4e3b9b60-836f-4649-9154-155012987473',
    points: 6,
    duration: 1,
    solutions: ['Apfel'],
    type: 'text',
    choices: [],
    notation: 'text',
    requirements: [],
    version: 1,
  },
  {
    id: '23456',
    points: 6,
    duration: 1,
    type: 'longtext',
    choices: [],
    criterias: [
      { text: 'Die Rechtschreibung ist korrekt und alle Satzzeichen wurden richtig gesetzt.' },
      { text: 'Alle Formeln wurden bedacht' },
    ],
    requirements: [],
    version: 1,
  },
];
</script>

Reference

Properties

Name	Type	Default	Description
layout	ref	null	The task object from the database
data	ref	null	Render task content as well
editable	Boolean	false	Whether the task is editable or not (not supported yet)
highlightSolutions	Boolean	false	Whether the solution should be highlighted or not
inline	Boolean	false	Whether the task should be displayed inline or not (h3 or div)
v-model	ref	null	The answer array with student answers

Events

Name	Parameters	Description
@input	event	the payload of the input

slots

Name	Slot Props	Description
task	task, index, layout	This slot can be used to manually handle the display of each task
groupFooter	interface, content, subtasks	This slot can be used to append some content at the end of a group