Adding a Custom Editor Layout for a Question Type

This article explains how to change the Question Editor edit panel layouts. Here's a demo of a customized edit layout so you can see what is possible.

This section steps you through using a custom editor layout.
 
Add ui.layout.edit_panel settings to your init options. The layout property is an identifier that maps the layout to a script tag on the page (see step 3). If you do not specify a template or a template_reference, then that layout will apply to all templates with that widget type. (e.g. in the code example, the mcq_1 layout will be used for all templates except for "Multiple Choice – Multiple Response" and "Multiple Choice – Standard" which has the reference "9e8149bd-e4d8-4dd6-a751-1a113a4b9163"). If you specify template_reference, then it is used instead of template, i.e. the code will try to find a custom layout for the given template_reference.
var initOptions = {
        configuration: {
            consumer_key: 'INSERT_CONSUMER_KEY'
        },
        ui: {
            layout: {
                global_template: 'edit',
                edit_panel: {
                    mcq: [
                        {
                            layout: 'mcq_1'
                        },
                        {
                            layout: 'mcq_2',
                            template: 'Multiple Choice – Multiple Response'
                        },
                        {
                            layout: 'mcq_2',
                            template_reference: '9e8149bd-e4d8-4dd6-a751-1a113a4b9163'
                        }
                    ]
                }
            }
        },
        widget_type: "response"
    },
    questionEditorApp = LearnosityQuestionEditor.init(initOptions);
Add a script tag to store the editor layout template with an appropriate layout identifier
            <script type="text/template" data-lrn-qe-layout="mcq_1"></script>
Download the default template for the Question 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 editor 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. If you want to position an array attribute, see the section on loops.

e.g. <span data-lrn-qe-input="stimulus" data-lrn-qe-label="Compose question:"></span> will render the following:

data-lrn-qe-input

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.
data-lrn-qe-show-delete

In a complex component where there is a delete button, this flag allows you to show or hide the delete button. It accepts either true or false and the default is true. It is currently supported with the following inputs: mcq options, math symbols, possible responses, essay formatting options, math symbol groups, highlight line colour options, math text blocks, graph tools and controls and possible points in number line Questions.

<h1>My Custom Edit Panel Layout</h1>
<span data-lrn-qe-input="stimulus" class="lrn-qe-lg-ckeditor lrn-text-normal"></span>
<!-- MCQ options with hidden delete button -->
<div data-lrn-qe-loop="options[*]">
    <span data-lrn-qe-input="options[*]" data-lrn-qe-show-delete="false"></span>
</div>

This data field allows you to define a placholder for the 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_stimulusin 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. If you want to position an array attribute, see the section on loops.

e.g. <span data-lrn-qe-label="stimulus"></span> will render the following:

data-label.png

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>
                

Define where add buttons for a particular attribute (e.g. options for an mcq Question) should be rendered.

eg. <span data-lrn-qe-action-add="options"></span> will render the following:

data-lrn-qe-action

Attributes  
data-lrn-qe-action-add Define which widget attribute (e.g. options for an mcq Question) these action buttons should control
class (Optional) Define extra CSS classes for the buttons. The Question Editor API will not remove any classes specified in the layout.

Define where remove buttons for attributes which consist of multiple elements (e.g. validation alternate responses) should be rendered.

Attributes  
data-lrn-qe-action-remove Define which widget attribute (e.g. validation alternate responses) the remove button should control
class (Optional) Define extra CSS classes for the buttons. The Question Editor API will not remove any classes specified in the layout.

Define the DOM template of a complex array Item.

Loops are needed for array attributes, e.g. alternate responses. (There can be multiple alternate responses so the Question JSON will contain an array.) The example in the code example on the right will render the DOM below, every time a new alternate response is added by the author. Behind the scenes, the Question Editor API layout engine injects the template inside the corresponding data-lrn-qe-loop any time a view that matches the loop regex (validation.alt_responses[*]).

data-lrn-qe-loop

Attributes  
data-lrn-qe-loop Define the template of the array Item (can be nested in another array Item's loop template). When the Learnosity Question Editor API layout engine hits a div with a data-lrn-qe-loop attribute, it will use the inner HTML of that div as the template for the specified array attribute.
        <div class="lrn-qe-tab-item" data-lrn-qe-loop="validation.alt_responses[*]" data-lrn-qe-tab-item
             data-lrn-qe-layout-listeners="remove">
            <div class="lrn-qe-tab-header" data-lrn-qe-tab-header>
                <div class="lrn-qe-tab-trigger" data-lrn-qe-trigger>
                    <span data-lrn-qe-label="validation.alt_responses[*]"></span>
                </div>
            </div>

            <div class="lrn-qe-tab-content" data-lrn-qe-tab-content>
                <div class="lrn-qe-tab-sub-content">
                    <span data-lrn-qe-action="validation.alt_responses[*]" class="lrn-qe-tab-remove"></span>
                    <span data-lrn-qe-input="validation.alt_responses[*].score"
                          data-lrn-qe-label="Point(s)"
                          class="lrn-qe-form-control-sm lrn-text-normal lrn-qe-custom-points lrn-mls"></span>
                </div>
                <span data-lrn-qe-input="validation.alt_responses[*].value" data-lrn-qe-label></span>
            </div>
        </div>
                        

Define a section that can be hidden/shown using hidden_sections/shown_sections in the init options

Attributes  
data-lrn-qe-section Define the name of the section, e.g. "more_options.heading" "more_options.content" "more_options.divider"
Was this article helpful?

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