Integrating Learnosity Rubric Editor API into your system is a simple process.

1. Include the script to load Rubric Editor API

Include the following script in your HTML page, and also a DOM node where you want the UI to appear.

<script src="https://feedbackaide.learnosity.com/js/rubric-editor"></script>
...
<div class="rubric-editor-container"></div>

This script will add a LearnosityRubricEditor object to the JavaScript runtime.

2. Create an Instance of Rubric Editor App - LearnosityRubricEditor.init()

In the JavaScript code of your app, create an instance of Rubric Editor App.

const rubricEditorApp = await LearnosityRubricEditor.init();

3.  Create the editor instance using createEditor()

const editor = await rubricEditorApp.createEditor({
    variant: "modal",
    rubric_json: {...}, // if you have an existing rubric you want to edit
});

See Feedback Aide Rubrics for examples of the rubric_json.

4. Display the UI

We now use the editor to create the UI and attach it to the page.

editor.attach(document.querySelector('.rubric-editor-container'));

Load this in the browser - and you will now have your first Rubric Editor instance.

Next steps

The Rubric Editor API includes a range of configurable options. See the Rubric Editor API Developer Documentation for more information.