Creating Custom Features

Please see Getting Started with Custom Questions and Features before starting with your Custom Feature project.
We recommend using the Custom Question Skeleton project to build your Custom Feature.
This article outlines how to create your own custom feature type to be used within Learnosity's Questions API.
Learnosity Features are interactive elements that can be added to an assessment, such as rulers, protractors, or calculators.

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": "//",

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

    return {
        Feature: CustomFeature

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 (initialresume, 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 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.

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" />");"ready");


Questions API will trigger an error event if your feature does not call the ready event within an acceptable timeframe.



Custom Image Gallery feature that allows you to add/remove images and navigate through them.

Go to demo
Was this article helpful?

Did you arrive here by accident? If so, learn more about Learnosity.