{{warning}}

CoreSpring Question Editor

The CoreSpring Question Editor allows you to load an authoring UI for any of the CoreSpring question types.

You can use it to load existing items for editing, or to create a new item.

How to Use

  1. Get an access token for the CoreSpring API
  2. Get a browser token
  3. Load javacript file with browser token and api client
  4. Construct an instance of QuestionComponentEditor

Get an access token for the CoreSpring API

See this page on how to create an access token

curl -X POST https://platform.corespring.org/auth/access_token?client_id=$clientId&client_secret=$clientSecret
# returns { access_token: "accessToken"}

Create a browser token

curl -X POST https://platform.corespring.org/api/v2/browser-token?access_token=$accessToken \
-d '{"expires": 0}' \
-H "Content-Type: application/json"
# returns { browserToken: "browserToken", apiClient: "apiClient", accessSettings: {expires: 0, ...}}

Load javacript file with browser token and api client

The component editor url is: https://platform.corespring.org/v2/player/component-editor.js

Adding these query parameters:

  • editorToken your editor access token
  • apiClient your API client id

Example

<script src="https://platform.corespring.org/v2/player/component-editor.js?editorToken=$browserToken&apiClient=$apiClient"></script>

Construct an instance of QuestionComponentEditor:

var corespringEditor = new org.corespring.editors.QuestionComponentEditor(
        '.player-holder',
        launchOpts, 
        function(error){
          console.error("error creating editor " + JSON.stringify(error));
        });

This will give you access to an instance of a QuestionComponentEditor, the API for this is described in the following section.


QuestionComponentEditor API

constructor QuestionComponentEditor(divId, launchOptions, onError)

  • playerHolder (string) - a selector string to locate the element in which to place the Question Editor
  • launchOptions (Object) - see below
  • onError (Function) - error callback function that will be called with any errors thrown by the editor.

Launch Options

itemId

The item id of the item to edit. If no item id is provided one will be created.

onItemCreated(itemId)

If the QuestionComponentEditor was constructed without passing an itemId property a new item will be created and this callback function will be called with the generated item id.

componentType

Which component / question type to edit or create. It must be one of the following values:

Value Description
corespring-multiple-choice Multi choice style question (single or multi response)
corespring-text-entry Short answer text based constructed response
corespring-extended-text-entry Longer answer text entry.
corespring-inline-choice Dropdown style question
corespring-dnd-categorize Students drag elements from one area, and drop them into another for the purposes of categorization.
corespring-drag-and-drop-inline Students are asked to complete a sentence, word, phrase or equation using context clues presented in the text that surrounds it.
corespring-ordering Students to arrange out-of-order elements into a correct order.
corespring-line Student plots a line on a graph.
corespring-multiple-line Student plots multiple lines on a graph.
corespring-match Students select a choice matching an example on a per-row basis. A common use case for choice matrix is to display a list of statements, and students select either 'true' or 'false'.
corespring-select-text Students to select words or sentences in a text section.
corespring-point-intercept Students to plot points on a graph.
corespring-number-line Students plot points, line segments or rays on a number line.

previewMode ('tabs' | 'preview-right')

The question editor shows a self-updating preview of the question as it is edited.

  • tabs This setting will display a preview of the question in a tab. The user will see 'configure' and 'preview' tabs.
  • preview-right with this setting the preview displayed in a panel to the right of the configuration panel.

previewWidth [optional] (number)

This setting lets you set the width (in pixels) that the preview should be displayed with.

activePane

If previewMode is set to tabs this setting determines which tab will be active when the item is loaded.

  • config loads the config tab
  • preview loads the preview tab

showNavigation (Boolean, default = true)

If previewMode is set to tabs:

  • true tabs navigation will be shown
  • false no navigation will be shown

This allows developers to present their own navigation to toggle these views, see showNavigation() described below.

autoSizeEnabled (Boolean, default true)

Whether the component should automatically rezize if the containing div is resized.

collectionId

If loading the Editor without passing an itemId option a new item will be created, this paramater indicates the collection in which the item should be created. If no collectionId is specified the item is added to the default collection for your organization.

QuestionComponentEditor Functions

The following functions are available through the QuestionComponentEditor object:

showNavigation(show: Boolean)

Show/hide the navigation (seeshowNavigation option)

showPreview(show: Boolean)

Show/hides the preview when using preview-right

showPane(pane, done)

When tab mode is active (see above) this allows toggling which view is presented.

pane == config - show the configuration pane pane == preview - show the preview pane

done - a callback that will be called when the navigation pane has changed.

remove()

Removes the embedded instance of the QuestionComponentEditor