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.
Getting started
This section steps you through using a custom editor layout.1. Add config
Addui.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);
2. Embed your custom layout script
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>
3. Download the Question/Feature layout example
Download the default template for the Question type you wish to modify by going to our layout download page4. 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.)Editor Layout components
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.data-lrn-qe-input
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:
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: |
<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>
data-lrn-qe-i18n-placeholder-label
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_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. 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:
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>
data-lrn-qe-action-add
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:
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. |
data-lrn-qe-action-remove
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. |
data-lrn-qe-loop
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[*]).
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>
data-lrn-qe-section
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" |