❤
npm
Sign UpSign In

react-cmi5

1.0.5 • Public • Published

react-cmi5

React wrapper component for an xapi/cmi5 assignable unit @see https://github.com/AICC/CMI-5_Spec_Current/blob/quartz/cmi5_spec.md#au_requirements

Integration in a React App

To integrate this cmi5 implementation in a React app, you can use these steps:

Install react-cmi5

npm install --save react-cmi5

Include the cmi5.js lib

npm install react-cmi5 will have copied cmi5.js to the public folder at the root of your React project.

You must include cmi5.js in your index.html, e.g.

<head>
  <script src="%PUBLIC_URL%/cmi5.js"></script> 
  <!--
    Notice the use of %PUBLIC_URL% in the tags above.
    It will be replaced with the URL of the `public` folder during the build.
    Only files inside the `public` folder can be referenced from the HTML.
 
    Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
    work correctly both with client-side routing and a non-root public URL.
    Learn how to configure a non-root public URL by running `npm run build`.
  -->
</head>

NOTE: the reason this is included as a downloadable script instead of a normal node package dependency is because that is how the cmi5.js lib is currently distributed (already bundled code). In a future release it would be good to tease apart the cmi5.js contents into npm packages and remove the need for the script-tag include.

Wrap a Question with Component Cmi5AssignableUnit

Include the Cmi5AU React component in your src and wrap use it to wrap a question, e.g.

import React, { Component } from 'react';
import './App.css';
import Cmi5AU from 'react-cmi5';
import ExampleQuestion from './ExampleQuestion';
 
class App extends Component {
  render() {
    return (
      <div className="App">
        <Cmi5AssignableUnit>
          <ExampleQuestion/>
        </Cmi5AssignableUnit>
      </div>
    )
  }
}
 
export default App;

...then in your question component when you're ready to submit a result, call one of the injected property functions passed or failed, e.g.

import React, { Component } from 'react';
 
export default class ExampleQuestion extends Component {
  render()
  {
    // props includes special actions for passed({score:1.0}) and failed({score: 0.0 })
    // These are wrappers for cmi.passed and cmi.failed
    // that make sure cmi has initialized before score is actually sent
    const {passed, failed} = this.props
 
    const onSubmit = () => {
      const score = this.state.score // score was set when user chose a radio-button answer
      if(score > 0) {
        this.props.passed(score)
      }
      else {
        this.props.failed(score)
      }
      this.props.terminate() // MUST call terminate to end the session
    }
 
    return (
      <div>
        question form here
        <button onClick={onSubmit}>submit</button>
      </div>
    )
   }
 }
 

Dependencies (2)

Dev Dependencies (11)

Package Sidebar

Install

npm i react-cmi5

Repository

github.com/beatthat/react-cmi5

Homepage

github.com/beatthat/react-cmi5#readme

Weekly Downloads

0

Version

1.0.5

License

ISC

Unpacked Size

622 kB

Total Files

20

Last publish

Collaborators

  • larrykirschner
Try on RunKit
Report malware