Authoring Custom Questions & Features

Please see Getting Started with Custom Questions and Features before starting with your Custom Question project.
 
We recommend using the Custom Question Skeleton project to build your Custom Question.
This page describes how to set up default schemas rules as well as the desired editor layout for your custom Question or Feature with Learnosity Question Editor API.

Custom Question / Feature Schemas Rules

In order for Question Editor to understand what desired input types you want to use when authoring your custom Question / Feature, you need to define the schemas rule for each input.

The rule will be inserted through the custom_question_types and custom_feature_types initialization options.

Main Attribute

Type Description
custom_type Define the unique type for your custom Question / Feature. This is useful when you want to create your own tile in Question Editor v3 (this allows your Question type to appear as an option in the authoring user interface).
name Name of your custom Question / Feature.
js Mandatory property - either a string or an object containing hyperlink string(s) that will be used to render your custom Question / Feature.
css Optional hyperlink string that will be used to render your custom Question / Feature.
editor_layout Optional hyperlink string that is used to define the layout of your custom Question / Feature when authoring with Question Editor v3. Visit our Question Editor's editor layout page to learn more.
version Optional version string of your custom Question / Feature.
editor_schema Base schemas of the custom Question / Feature.
 

Schemas Attribute

Type Description
name Define the display name of the input.
description Explain the purpose of the input. The text provided here will be visible in Question Editor's Help modal.
required If set to false then this attribute will be removed from generated JSON if its current value matches its default value.
default Defined default value of current input.
type Define the input type.
  • string - a simple text input (text only).
  • number - a simple number text input (number only).
  • boolean - a toggle box.
  • editor - a Rich Text Editor box (like our stimulus).
  • question - render the current Custom Question by reusing the same Question JSON and its provided whitelist_attributes (the attributes you want to render in this current Question instance). When you attempt this Question, its value will be passed into the Question JSON instance - think of the rendered multiple choice Question in the Validation section of the Question Editor, when you attempt it, its response values like [0, 1, 2] will be used as the validation.valid_response.value as we use the schemas of validation.valid_response.value in Question.
  • array - the most special case: think of the Options array in multiple choice Questions where you can add/remove options. Array can accept any kind of input above from 1-5. For example: an array of strings, an array of numbers (or booleans, editors, questions) and so on.
  • object - for nesting further attributes.
element (optional) Define how the input should render if not default (e.g. string field would render as an input box by default, but could be made to be a select box instead)
  • question - Render current Question / Feature based on the provided white listed attributes.
  • select - Render a dropdown box.
  • formula - Advanced latex formula editor.
  • editor - Render a rich text editor.
  • array - If "type" is set to "array" - either leave this option blank, or also set it to "array".

If type is set to "array", then either leave this field blank, or also set it to "array" as no other values are supported. Use the items property to define the the element for each array entry instead.

items

(optional)

If property type is set to "array", then this option is used to configure what element each array entry is.

Object containing definition for each entry in an array. This object is a nested version of attribute, i.e. it can have its own type set to "object" , with attributes, or be set to "string"with element set to "select".

options 

(optional)

If property element is set to "select", then this option is used to configure what the drop-down menu options are.

It is an array of objects, containing keys label- i.e. the value shown in the dropdown menu, and value - which is the value stored in the JSON when this option is selected.
white_list (optional) Define the white list attribute array that will be passed into Question element type. This is usually one/some of the other properties defined which you want to render here to set the correct answer by rendering an instance of your Question.

min

max

(optional)

 Min/max value for the type number.

asset

(optional)

For the type string, you can specify the asset property as "mediaType" to allow media upload.

"asset": {
    "mediaType":"image",
    "returnType":"URL"
}

How to Create Custom Question / Feature Custom Tile Items

Once the custom Question / Feature is defined through custom_question_types and custom_feature_types, we can now reference those custom Questions / Features in question_type_templates through their custom_type unique ids.

var initOptions = {
    custom_question_types: [{
        "custom_type": "custom_short_text",
        "type": "custom",
        "name": "Custom Shorttext (DRAFT)",
        "js": {
            "question":"//demos.learnosity.com/casestudies/customquestions/custom_shorttext_q.js",
            "scorer":"//demos.learnosity.com/casestudies/customquestions/custom_shorttext_s.js"
        },
        "css": "//demos.learnosity.com/casestudies/customquestions/custom_shorttext.css",
        "editor_layout": "//demos.learnosity.com/casestudies/customquestions/custom_shorttext.html",
        "version": "v0.1.0",
        "editor_schema": {
            "hidden_question": false,
            "properties": {
                "valid_response": {
                    "type": "string",
                    "name": "Valid response",
                    "description": "Correct answer for the question.",
                    "required": false
                },
                "score": {
                    "type": "number",
                    "name": "Score",
                    "description": "Score for a correct answer.",
                    "required": false,
                    "default": 0
                }
            }
        }
    }],
    
    custom_feature_types: [{
        "custom_type": "name_of_custom_type",
        "name": "Display Name of Custom Feature",
        "js": "//[your.domain]/myfeaturescript.js",
        "css": "//[your.domain]/myfeaturestyles.css",
        "version": "1.0.0",
        "editor_layout": "//[your.domain]/myquestioneditorlayout.html",
        "editor_schema": {
            "hidden_question": false,
            "properties": {
                "placeholder_text": {
                    "type": "string",
                    "required": false
                }
            }
        }
    }],
    
    question_type_templates: {
        custom_short_text: [
            {
                "name": "Custom Question - Short text",
                "description": "A custom question type - short text",
                "group_reference": "other",
                "image": "custom_image_link_of_your_custom_question_tile_item",
                "defaults": {
                    "type": "custom",
                    "js": {
                        "question":"//demos.learnosity.com/casestudies/customquestions/custom_shorttext_q.js",
                        "scorer":"//demos.learnosity.com/casestudies/customquestions/custom_shorttext_s.js"
                    },
                    "css": "//demos.learnosity.com/casestudies/customquestions/custom_shorttext.css",
                    "valid_response": "",
                    "score": 1
                }
            }
        ],
        custom_text_input_feature: [
            {
                "name": "Custom Feature - Simple textinput",
                "description": "A custom feature type - simple textinput",
                "image": "custom_image_link_of_your_custom_feature_tile_item",
                "defaults": {
                    "type": "customfeature",
                    "js": "//docs.learnosity.com/demos/products/questionsapi/customfeatures/textinput/index.js",
                    "css": "//docs.learnosity.com/demos/products/questionsapi/customfeatures/textinput/index.css",
                    "placeholder": "Default placeholder"
                }
            }
        ]
    }
};

// Sample of editor_layout of custom_shorttext.html
<div class="lrn-qe-edit-form">
    <span data-lrn-qe-label="valid_response"></span>
    <span data-lrn-qe-input="valid_response"></span>    
    <span data-lrn-qe-label="score"></span>
    <span data-lrn-qe-input="score"></span>    
</div>

 

Demo

In this demo, we've added a Custom Box & Whisker question.

Go to demo

Related articles


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