This is a lower-level API. Lower-level APIs are not recommended for most projects, and may not be available on all plans. See our page on recommended deployment patterns for more information.

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:

The Initialization object is mandatory.

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);

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

Properties

= 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.

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".

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.