Submit a request
Submit a request

Customizing the simple feature modal

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

 

This section steps you through using a custom editor layout.
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);
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>
Download the default template for the simple feature type you wish to modify by going to our layout download page.
 
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.).
 
Below is a list of the components that are used in custom simple feature modal layouts. The components are span or div tags (refer to individual code snippets) with a data-lrn-qe-{component} attribute.
 

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>

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>
                

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

eg. <span data-lrn-qe-label="stimulus"></span> will render

data-lrn-qe-label

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

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