Question Editor API Initialization

This article details the properties that are passed as parameters to the window.LearnosityQuestionEditor.init() method to initialize Question Editor API.

This method is the starting point to initializing and rendering Question Editor API, and as you can see in the example below, takes three key parameters:

• Initialization object
• HTML element selector
• Callbacks object

The Initialization object is mandatory.

Example

var initOptions = {
    "assetRequest": function(mediaRequested, returnType, callback, attributes) {
        // Do something.
    },
    "configuration" : {
        "consumer_key": "ts34Rdc45SWE34f"
    },
    "label_bundle": {
        // question attributes
        "stimulus": "Compose question",
        "options": "Options",
        "validation.alt_responses.score": "Points",
    },
    "question_type_templates": {
        "mcq": [{
            "name": "MCQ - Custom Style",
            "reference": "customMCQ",
            "group_reference": "mcq",
            "description": "Multiple Choice question with block style and predefined options.",
            "defaults": {
                "options": [{
                    "label": "Dublin",
                    "value": "1"
                }, {
                    "label": "Bristol",
                    "value": "2"
                }, {
                    "label": "Liverpool",
                    "value": "3"
                }, {
                    "label": "London",
                    "value": "4"
                }],
                // A newly added option will have the default label "New Label"
                "options[]": "New Label",
                "ui_style": {
                    "type": "block",
                    "columns": 1,
                    "choice_label": "upper-alpha"
                }
            }
        }]
    },
    "ui": {
        "layout": {
            "global_template": "edit_preview",
            "responsive_edit_mode": {
                "breakpoint": 800 // If the container width becomes less than 800px then switch to edit layout
            }
        }
    },
    "widget_type": "response"
};

var hook = ".my-editor";

var callbacks = {
    "readyListener": function () {
        // Question Editor API sucessfully loaded according to pased init options
        // we can now reliably start calling public methods and listen to events
        questionEditorApp.on("widget:ready", function () {
            // widget has changed, probably as a result of calling setWidget()
        });
    },
    "errorListener": function (e) {
        //callback to occur on error
        console.log("Error code ", e.code);
        console.log("Error message ", e.message);
        console.log("Error name ", e.name);
        console.log("Error name ", e.title);
    }
};

var questionEditorApp = LearnosityQuestionEditor.init(initOptions, hook, callbacks);

Initialization object

The Initialization object allows several UI and Question type customizations definable by the host environment. This is possible using the structure described below.

= mandatory property

• assetRequest function

  If defined the Editor will display a directory/file icon.

• base_question_type object

  Use this config option to modify the behaviour and appearance of all question types.

• configuration object

  An object containing app configuration.

• custom_question_types object

  This config allows you to use Question Editor as a WYSIWYG tool for creating and previewing custom feature content.

• custom_feature_types object

  This config allows you to use Question Editor as a WYSIWYG tool for creating and previewing custom feature content.

• custom_metadata object

  You can use custom metadata to store additional information relating to a question.

• dependencies object

  An object containing Questions API settings.

• group_defaults boolean

  This config option allows you to show or hide the "default" Learnosity template groups in the tile view (for example, Multiple Choice, Fill in the Blanks (Cloze)).

• label_bundle object

  Overrides the Question Editor API text labels.

• premium object

  Some of the question types, or features are defined as premium, and therefore are hidden from authoring unless explicitly enabled.

• question_types object

  Use this config option to modify the behaviour and appearance of Learnosity's question types.

• question_type_groups array

  Use this config option to change the default widget type groups shown in the tile view (for example, Multiple Choice, Fill in the Blanks (Cloze)).

• question_type_templates object

  Optional object to customize question type templates.

• simple_feature_templates array

  Optional array of objects to customize simple feature templates within the simple feature modal as listed in the simple feature modal article.

• rich_text_editor object

  This is the initialization option which determines the rich text editor that will be used by the Question Editor API.

• template_defaults boolean

  This config option allows you to selectively show or hide the "default" Learnosity templates in the tile view (E.

• ui object

  A list of options to customize visual elements of Question Editor.

• widget_json QuestionJson | FeatureJson

  JSON used to initialize the Question Editor with pre-existing content.

• widget_metadata object

  An option to be used in conjunction with widget_json.

• widget_type string

  Determines which supported Learnosity widget type definitions will be loaded in tile view.

HTML Element Selector

The second parameter passed to window.LearnosityQuestionEditor.init() is a string, containing a full CSS selector to an element on the HTML page. Each example below could be a valid value:

#learnosity_questioneditor // CSS selector based on id of an element
.learnosity_questioneditor // CSS selector based on a class of an element

This value tells Question Editor API where to render itself on the page.

Note If the HTML element selector is not provided, Question Editor API will attempt to look for the element with a class "learnosity-question-editor".

Callbacks

The Callbacks object contains optional callback functions that allow detection of the 'ready' status of a Question Editor API instance and any errors encountered.

These events can be handled by defining a readyListener function and an errorListener function respectively.

• readyListener function

  Function to be called when the API has been successfully initialised.

• errorListener function

  Function to be called on a response editor error event.