react-qti

@schule4-0/react-qti

A set of unstyled, UI components for React which can load content from QTI files.

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