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 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.)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_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>
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" |