@qtikit/react

React component to render from QTI models and stylesheets in XML. The component exposes the QTI interaction and passes the result to the host component

Install

npm install @qtikit/react

Usage

import React from 'react';
import QtiViewer from '@qtikit/react/lib'
import { UserInput } from '@qtikit/model/lib/user-input';

const Home = () => {
  const [inputState, setInputState] = React.useState <UserInput>({});
  const assessmentItemSrc = 'https://yoursite.com/assessment.xml';
  const stylesheetSrc = 'https:/yoursite.com/qti-default.css';

  return (
    <div className={styles.container}>
      <QtiViewer
        assessmentItemSrc={assessmentItemSrc}
        stylesheetSrc={stylesheetSrc}
        inputState={inputState}
        onChange={setInputState}
      />
    </div>
  )
}

export default Home

Stylesheet

QtiViewer supports custom stylesheets to display QTI Interactions and Components in their own style. CSS class names follow BEM style. Refer to Example. Here is a sample that shows how to use a stylesheet.

• Fetch a stylesheet from remote, and applies it to scoped CSS under the root element of QtiViewer.

  <QtiViewer
    assessmentItemSrc={assessmentItemSrc}
    stylesheetSrc={'https://yoursite.com'}
    inputState={inputState}
    onChange={setInputState}
  />
  

• In Next.js, You can use CSS in global and local. See the sample code below.
  • Global CSS, Add css path to __app.js

    import '../styles/qti-default.css'
    
    import type { AppProps } from 'next/app'
    
    function MyApp({ Component, pageProps }: AppProps) {
      return <Component {...pageProps} />
    }
    
    export default MyApp
    

  • Local CSS, You must use a plugin to update local CSS, css-loader options. CSS is loaded when the page loads

    // in next.config.js
    const withCssLoaderOptions = require('next-cssloader-options');
    
    module.exports = withCssLoaderOptions({
      cssLoaderOptions: {
        modules: {
          getLocalIdent: (context, localIdentName, localName, options) => localName
        }
      }
    });
    
    // in index.js
    import QtiStyles from '../styles/qtikit.module.css'
    
    const Home: NextPage = () => (
      <div className={QtiStyles.qtikitInteraction}>
        <QtiViewer
          assessmentItemSrc={assessmentItemSrc}
          inputState={inputState}
          onChange={setInputState}
        />
      </div>
    )
    

Test

We're using Storybook to test and preview now with IMSGlobal Sample Files. Please visit our showcase with a assessment XML url as a param

Example

Choice Interaction