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 / 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 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
element Define how the input should render.
  • question - Render current question / feature based on provided white listed attributes.
  • select - Render a dropdown box
  • formula - Advanced latex formula editor
  • array
simpleEditor (optional) Only available for string input type. Render simple version of richtext editor.
advancedEditor (optional) Only available for string input type. Render advanced version of richtext editor.
white_list (optional) Define the white list attribute array that will be passed into Question input type.

How to create custom question / feature custom tile item

Once the custom question / feature is defined through custom_question_types and custom_feature_types, we can now reference to those custom question / feature in question_type_templates through their custom_typeunique id.

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?
0 out of 0 found this helpful