classroomio/packages/storybook/src/molecules/exercise-question/exercise-question.stories.svelte

<script module lang="ts">
  import { defineMeta } from '@storybook/addon-svelte-csf';
  import { ExerciseQuestion } from '@cio/ui';
  import QuestionTypeModes from './question-type-modes.svelte';
  import {
    CHECKBOX_FIXTURE,
    FILE_UPLOAD_FIXTURE,
    FILL_BLANK_FIXTURE,
    HOTSPOT_FIXTURE,
    LINK_FIXTURE,
    MATCHING_FIXTURE,
    NUMERIC_FIXTURE,
    ORDERING_FIXTURE,
    RADIO_FIXTURE,
    SHORT_ANSWER_FIXTURE,
    TEXTAREA_FIXTURE,
    TRUE_FALSE_FIXTURE
  } from './question-fixtures';

  const { Story } = defineMeta({
    title: 'Molecules/ExerciseQuestion',
    component: ExerciseQuestion.QuestionRenderer,
    parameters: {
      layout: 'padded'
    },
    tags: ['autodocs']
  });
</script>

<Story name="Checkbox">
  {#snippet template()}
    <QuestionTypeModes
      question={CHECKBOX_FIXTURE.question}
      answer={CHECKBOX_FIXTURE.answer}
      wrongAnswer={CHECKBOX_FIXTURE.wrongAnswer}
    />
  {/snippet}
</Story>

<Story name="FileUpload">
  {#snippet template()}
    <QuestionTypeModes
      question={FILE_UPLOAD_FIXTURE.question}
      answer={FILE_UPLOAD_FIXTURE.answer}
      wrongAnswer={FILE_UPLOAD_FIXTURE.wrongAnswer}
    />
  {/snippet}
</Story>

<Story name="FillBlank">
  {#snippet template()}
    <QuestionTypeModes
      question={FILL_BLANK_FIXTURE.question}
      answer={FILL_BLANK_FIXTURE.answer}
      wrongAnswer={FILL_BLANK_FIXTURE.wrongAnswer}
    />
  {/snippet}
</Story>

<Story
  name="Hotspot"
  parameters={{
    docs: {
      description: {
        story:
          '**Hidden in the app** – This question type is not shown in the exercise editor dropdown. Still in development.'
      }
    }
  }}
>
  {#snippet template()}
    <div
      class="ui:mb-4 ui:rounded-md ui:border ui:border-amber-500/50 ui:bg-amber-500/10 ui:px-4 ui:py-3 ui:text-sm ui:text-amber-800 ui:dark:text-amber-200"
    >
      <strong>Hidden – still in development.</strong> Not available in the exercise editor.
    </div>
    <QuestionTypeModes
      question={HOTSPOT_FIXTURE.question}
      answer={HOTSPOT_FIXTURE.answer}
      wrongAnswer={HOTSPOT_FIXTURE.wrongAnswer}
    />
  {/snippet}
</Story>

<Story name="Link">
  {#snippet template()}
    <QuestionTypeModes
      question={LINK_FIXTURE.question}
      answer={LINK_FIXTURE.answer}
      wrongAnswer={LINK_FIXTURE.wrongAnswer}
    />
  {/snippet}
</Story>

<Story
  name="Matching"
  parameters={{
    docs: {
      description: {
        story:
          '**Hidden in the app** – This question type is not shown in the exercise editor dropdown. Still in development.'
      }
    }
  }}
>
  {#snippet template()}
    <div
      class="ui:mb-4 ui:rounded-md ui:border ui:border-amber-500/50 ui:bg-amber-500/10 ui:px-4 ui:py-3 ui:text-sm ui:text-amber-800 ui:dark:text-amber-200"
    >
      <strong>Hidden – still in development.</strong> Not available in the exercise editor.
    </div>
    <QuestionTypeModes
      question={MATCHING_FIXTURE.question}
      answer={MATCHING_FIXTURE.answer}
      wrongAnswer={MATCHING_FIXTURE.wrongAnswer}
    />
  {/snippet}
</Story>

<Story name="Numeric">
  {#snippet template()}
    <QuestionTypeModes
      question={NUMERIC_FIXTURE.question}
      answer={NUMERIC_FIXTURE.answer}
      wrongAnswer={NUMERIC_FIXTURE.wrongAnswer}
    />
  {/snippet}
</Story>

<Story name="Ordering">
  {#snippet template()}
    <QuestionTypeModes
      question={ORDERING_FIXTURE.question}
      answer={ORDERING_FIXTURE.answer}
      wrongAnswer={ORDERING_FIXTURE.wrongAnswer}
    />
  {/snippet}
</Story>

<Story name="Radio">
  {#snippet template()}
    <QuestionTypeModes
      question={RADIO_FIXTURE.question}
      answer={RADIO_FIXTURE.answer}
      wrongAnswer={RADIO_FIXTURE.wrongAnswer}
    />
  {/snippet}
</Story>

<Story name="ShortAnswer">
  {#snippet template()}
    <QuestionTypeModes
      question={SHORT_ANSWER_FIXTURE.question}
      answer={SHORT_ANSWER_FIXTURE.answer}
      wrongAnswer={SHORT_ANSWER_FIXTURE.wrongAnswer}
    />
  {/snippet}
</Story>

<Story name="Textarea">
  {#snippet template()}
    <QuestionTypeModes
      question={TEXTAREA_FIXTURE.question}
      answer={TEXTAREA_FIXTURE.answer}
      wrongAnswer={TEXTAREA_FIXTURE.wrongAnswer}
    />
  {/snippet}
</Story>

<Story name="TrueFalse">
  {#snippet template()}
    <QuestionTypeModes
      question={TRUE_FALSE_FIXTURE.question}
      answer={TRUE_FALSE_FIXTURE.answer}
      wrongAnswer={TRUE_FALSE_FIXTURE.wrongAnswer}
    />
  {/snippet}
</Story>