Installation

# npm
npm install @schule4-0/react-qti

# Yarn
yarn add @schule4-0/react-qti

Components

This project is still in early development. New components will be added later

• Multiple Choice
• Single Choice

Roadmap

This project is still in early development, but the plan is to build out most of the QTI Elements used by the Common Cartridge standard.

Multiple Choice

The MultipleChoice component accepts a path to an MultipleChoice QTI XML file and provides you with all the necessary abstractions so that you just have to care about rendering and styling the Element.

• Basic example
• Component API

Basic example

MultipleChoice Exercises are built using the MultipleChoice, MultipleChoice.Exercise, MultipleChoice.Choice, and MultipleChoice.Button components.

The MultipleChoice.Button will automatically submit the provided answers for now the responses are not actually submitted to the QTI Endpoint.

import { Fragment } from 'react';
import { MultipleChoice } from '@schule4-0/react-qti';

function Exercise() {
  return (
    <MultipleChoice path="/multiple-choice.xml" as="div">
      <MultipleChoice.Exercise>
        {({ prompt }) => (
          <Fragment>
            <h1>{prompt}</h1>
            <MultipleChoice.Choice />
          </Fragment>
        )}
      </MultipleChoice.Exercise>
      <MultipleChoice.Button />
    </MultipleChoice>
  );
}

Styling

This is a headless component so there are no styles included by default. Instead, the components expose useful information via render props that you can use to apply the styles you'd like to apply yourself.

Rendering a different element for a component

By default, the MultipleChoice and its subcomponents each render a default element that is sensible for that component.

For example, MultipleChoice.Button renders a button by default. MultipleChoice and MultipleChoice.Exercise interestingly do not render an extra element, and instead render their children directly by default.

This is easy to change using the as prop, which exists on every component.

import { MultipleChoice } from '@headlessui/react'

function Exercise() {
  return (
    <MultipleChoice path="/multiple-choice.xml" as="div">
      <MultipleChoice.Exercise as"div">
        {({ prompt }) => (
          <Fragment>
            <h1>{prompt}</h1>
            <MultipleChoice.Choice />
          </Fragment>
        )}
      </MultipleChoice.Exercise>
      <MultipleChoice.Button as="a" />
    </MultipleChoice>
  );
}

To tell an element to render its children directly with no wrapper element, use as={React.Fragment}.

Component API

MultipleChoice

<MultipleChoice>
  <MultipleChoice.Exercise>
    {...}
  </MultipleChoice.Exercise>
</MultipleChoice>

Props

| Prop | Type | Default | Description | | ---- | ------------------- | --------------------------------------- | --------------------------------------------------------------- | | as | String | Component | React.Fragment (no wrapper element) | The element or component the MultipleChoice should render as. |

MultipleChoice.Button

<MultipleChoice.Exercise>
  {({ prompt }) => (
    <>
      <h1>{prompt}</h1>
      <MultipleChoice.Choice />
    </>
  )}
</MultipleChoice.Exercise>

Props

| Prop | Type | Default | Description | | ---- | ------------------- | -------- | ---------------------------------------------------------------------- | | as | String | Component | button | The element or component the MultipleChoice.Button should render as. |

Render prop object

| Prop | Type | Description | | -------- | ------ | -------------------------------------- | | prompt | String | The prompt/question from the QTI File. |

MultipleChoice.Items

<MultipleChoice.Choice>
  {({ text, checked }) => (
    <span>
      {checked ? '✅' : '❌'}: {text}
    </span>
  )}
</MultipleChoice.Choice>

Props

| Prop | Type | Default | Description | | ---- | ------------------- | ------- | --------------------------------------------------------------------- | | as | String | Component | div | The element or component the MultipleChoice.Items should render as. |

Render prop object

| Prop | Type | Description | | --------- | ------- | ----------------------------------------------------------- | | checked | Boolean | Wheather the input element is seleced/checked at the moment | | text | string | The text/value for the choice item / question |

MultipleChoice.Item

<MultipleChoice.Button></MultipleChoice.Button>

Props

| Prop | Type | Default | Description | | ---- | ------------------- | --------------------------------------- | -------------------------------------------------------------------- | | as | String | Component | React.Fragment (no wrapper element) | The element or component the MultipleChoice.Item should render as. |

Single Choice

The MultipleChoice component accepts a path to an MultipleChoice QTI XML file and provides you with all the necessary abstractions so that you just have to care about rendering and styling the Element.

For now please look at the documentation for the MultipleChoice component because they are fairly similar