npm package: @schule4-0/react-qti
Description: <h3 align="center">   @schule4-0/react-qti </h3>
Author: Lennart Gastler
Latest version: 1.0.0

<h3 align="center">
  @schule4-0/react-qti
</h3>

<p align="center">
  A set of unstyled, UI components for React which can load content from QTI files.
</p>

<p align="center">
  <a href="https://www.npmjs.com/package/@schule4-0/react-qti"><img src="https://img.shields.io/npm/dt/@schule4-0/react-qti.svg" alt="Total Downloads"></a>
  <a href="https://www.npmjs.com/package/@schule4-0/react-qti?activeTab=versions"><img src="https://img.shields.io/npm/v/@schule4-0/react-qti.svg" alt="Latest Release"></a>
</p>

## Installation

```sh
# 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](#multiple-choice)
- [Single 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](#basic-example)
- [Component API](#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.

```jsx
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](https://reactjs.org/docs/render-props.html) 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.

```jsx
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

```jsx
<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

```jsx
<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

```jsx
<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

```jsx
<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](#multiple-choice)