Questions API's custom feature type allows you to create your own features, giving you full control over the rendering of the feature area and the user interaction with the feature.
A custom feature is defined like any other feature type, by passing a JSON object to the Questions API. In the feature JSON, you provide a URL to a JavaScript file containing the logic to control your feature.
{
"feature_id": "custom-feature-1",
"type": "customfeature",
"js": "//docs.learnosity.com/demos/products/questionsapi/customfeatures/textinput/index.js",
...
}The JavaScript Module
The JavaScript file that you provide must define an AMD module using Learnosity's namespaced require.js instance, LearnosityAmd.define. The module must define a function to act as a constructor for your feature. The module must return an object with a Feature property containing the constructor, like so:
LearnosityAmd.define(function () {
function CustomFeature(init) {
console.log(init);
}
return {
Feature: CustomFeature
};
});The Init Object
Questions API will instantiate your feature by calling this function, passing in an object with the following properties:
| state | The state Questions API was initialised in (initial, resume, or review). |
| feature | The feature object to be rendered. |
| $el | A jQuery selection containing the DOM element for your feature's response area. This is where you will render the feature. |
| events | A Backbone.js Events object. You must use this to communicate with Questions API (see below). |
| quesitonsApiVersion | A string containing the version number of the current instance of Questions API. |
Rendering The Feature
Your JavaScript module must render the HTML for the feature inside the provided element. When this is complete, you must notify Questions API that the feature is ready. This example renders a simple text input, and then triggers the ready event:
init.$el.html("<input type="text" />");
init.events.trigger("ready");
Questions API will trigger an error event if your feature does not call the ready event within an acceptable timeframe.
Demo
Custom Image Gallery feature that allows you to add/remove images and navigate through them.
Go to demo