Submit a request
Submit a request

Extend Author API With Custom Question Authoring

How to set up default schemas rules as well as the desired editor layout for your custom Question or Feature with Question Editor.

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 custom_question_types and custom_feature_types attributes of initOptions.

Main Attribute

Type Description
custom_type Define unique type your custom Question / Feature. This is useful when you want to create your own tile Item in Question Editor v3.
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_schemas 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
  • number
  • boolean
  • array
  • editor
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 provided white listed attributes.
  • select - Render a dropdown box.
  • formula - Advanced latex formula editor.
  • array -
  • editor - Render a rich text editor.
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 type number.

asset

(optional)

For type string, you can specify asset property with 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>
    
Was this article helpful?
1 out of 4 found this helpful

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