Customizing the simple Feature modal – Learnosity Product & Developer Help

This article explains how to change the Question Editor simple Feature modal window.

Getting started

This section steps you through using a custom editor layout.

1. Add config

Add ui.layout.simple_features settings to your initOptions. The layout property is an identifier that maps the layout to a script tag on the page (see step 3). Add simple_feature_templates array to your initOptions. If defined, each simple Feature that you wish to display in the modal must at least have a reference attribute defined in the array for it to appear. The ordering of this array is also reflected in the modal's primary navigation. Name and template defaults are also configurable for each entry in this array. It should be noted that when defining defaults for both protractor and ruler, an image property must exist. Further to this, the ruler image property must be one of the following ruler-15-cm, ruler-30-cm, ruler-6-inches, ruler-12-inches. The image property for protractor must be protractor.

var initOptions = {
        configuration: {
            consumer_key: 'INSERT_CONSUMER_KEY'
        },
        ui: {
            layout: {
                simple_features: {
                    calculator: [
                        {
                            layout: "calculator-layout"
                        }
                    ],
                    videoplayer: [
                        {
                            layout: "video-player-layout"
                        }
                    ]
                }
            }
        },
        simple_feature_templates: [
            {
                reference: "eb6156a3-decd-4ee7-8348-a09144ea1c4a"
            },
            {
                reference: "116e3f78-a564-4862-877c-91cdad8a2c2b"
            },
            {
                name: "New ruler",
                reference: "4d918ac6-2ac5-48f5-8707-c1957c157new",
                defaults: {
                    type: "imagetool",
                    button: true,
                    buttonicon: "ruler",
                    image: "ruler-15-cm",
                    label: "New Ruler",
                    alt: "A 15-centimetre ruler."
                }
            },
            {
                reference: "d3e05438-8321-457c-a541-3cb18020eae8"
            }
        ]
        widget_type: "response"
    },
    questionEditorApp = LearnosityQuestionEditor.init(initOptions);

2. Embed your custom layout script

Add a script tag to store the simple Feature modal layout template with an appropriate layout identifier:

            <script type="text/template" data-lrn-qe-layout="calculator-layout"></script>

3. Download the Question/Feature layout example

Download the default template for the simple Feature type you wish to modify by going to our layout download page.

4. Modify the layout

Paste the template into the script tag you created previously modify the template to suit your needs (e.g. change labels, delete unneeded attributes, etc.).

data-lrn-qe-input

Define where a particular widget attribute (e.g. Question stimulus) should be rendered. inputs only work for non-array attributes.

Attributes
data-lrn-qe-input	Define which widget attribute this input relates to
class	(Optional) Define extra css classes for the rendered input. The Question Editor API will not strip out any classes specified in the layout.

<h1>My Custom Edit Panel Layout</h1>
<span data-lrn-qe-input="player_type"></span>

<span data-lrn-qe-input="src"></span>

data-lrn-qe-i18n-placeholder-label

This data field allows you to define a placholder for editor, string, textarea and number input fields of Question Editor. The placeholders appear if the element is empty.

If you specify <span data-lrn-qe-input="stimulus" data-lrn-qe-i18n-placeholder-label="empty_stimulus"></span> Question Editor searches for a label with key placeholder:empty_stimulus in the label bundle and will display what it finds there as a placeholder.

If you don't want to specify special keys for the placeholder values, you can use default keys in the label bundle. Default keys are built by adding a prefix placeholder: to an element's attribute path. For example for data-lrn-qe-input="stimulus" you can specify a label with key placeholder:stimulus.

Attributes
data-lrn-qe-i18n-placeholder-label	Define which label should be used as a placeholder for this element

<h1>My Custom Edit Panel Layout</h1>
<span data-lrn-qe-input="stimulus" data-lrn-qe-i18n-placeholder-label="empty_stimulus"></span>

data-lrn-qe-label

Define where the label for a particular widget attribute (e.g. Question stimulus) should be rendered. Labels only work for non-array attributes.

e.g. <span data-lrn-qe-label="stimulus"></span> will render the stimulus, or example it could be text that says "Compose question:".

Attributes
data-lrn-qe-label	Define which widget attribute this label relates to
class	(Optional) Define extra CSS classes for the rendered label. The Question Editor API will not strip out any classes specified in the layout.

<h1>My Custom Edit Panel Layout</h1>
<span data-lrn-qe-label="stimulus" class="lrn-qe-lg-ckeditor lrn-text-normal"></span>