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.
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.
Properties= mandatory property
-
base_question_type object
Use this config option to modify the behaviour and appearance of all question types.
-
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.
-
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)).
-
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)).
-
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.
-
widget_json QuestionJson | FeatureJson
JSON used to initialize the Question Editor with pre-existing content.
-
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 elementThis 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.