Creating Your Own Question Editor Global Layout – Learnosity Product & Developer Help

Custom global layouts allow you to create a custom UI layout for the Question Editor API.

With a custom global layout, you can craft an authoring experience that suits your authoring workflow. Don't need to show the Question preview? No problems: leave that tag out of the layout. A custom global layout contains multiple span tags with data-lrn-qe-layout- attributes. To use a global layout, specify the name in the init options.

var initOptions = {
        ui: {
            layout: {
                global_template: 'custom'
            }
        }
    },
    questionEditorApp = LearnosityQuestionEditor.init(initOptions);

Getting started

This section steps you through using a custom global layout. Follow the steps below to build your own custom global layout.

1. Add config

Set ui.layout.global_template to "custom".

    var initOptions = {
            configuration: {
                consumer_key: 'INSERT_CONSUMER_KEY'
            },
            ui: {
                layout: {
                    global_template: 'custom'
                }
            },
            widget_type: "response"
        },
        questionEditorApp = LearnosityQuestionEditor.init(initOptions);

2. Add your custom global layout HTML to the page

Refer to the Global Layout components section to see which global layout components are available. (As a quick heads up - components are the spans with data-lrn-qe-layout-{component-name}).

<div class="place-holder">
    <h5 class="place-holder-title">Block 1</h5>
    <div class="component-view-block">
        <h4>Question/Feature tile list</h4>
        <div class="component-view-block-content">
            <span data-lrn-qe-layout-tile-list=""></span>
        </div>
    </div>
    <div class="component-view-block">
        <h4>Editing widget title</h4>
        <div class="component-view-block-content">
            <span data-lrn-qe-layout-widget-title=""></span>
        </div>
    </div>
</div>
<div class="place-holder">
    <h5 class="place-holder-title">Block 2</h5>
    <div class="component-view-block">
        <h4>Validate question button</h4>
        <div class="component-view-block-content">
            <span data-lrn-qe-layout-validate-question=""></span>
        </div>
    </div>
</div>
<div class="place-holder">
    <h5 class="place-holder-title">Block 3</h5>
    <div class="component-view-block">
        <h4>Validatable question live score element</h4>
        <div class="component-view-block-content">
            <span data-lrn-qe-layout-live-score=""></span>
        </div>
    </div>
</div>

3. Polish

Play around with the markup and apply CSS until it meets your needs. You can style the global layouts in any way you choose.

Global layout initialization object

Define which global layout to use. If not set, Learnosity's default global layout (edit) will be used.

edit	The Learnosity default global layout. This layout will render the edit panel and preview panel in a single column and the user can toggle the visibility of each view by clicking the Preview button.
edit_preview	This layout will render the edit panel and preview panel in a two column layout.
custom	Custom global layout. Any view that user wants to render is needed to be defined through span element with this data attribute: data-lrn-qe-layout- prefix.

                var initOptions = {
                    widgetType: 'response',
                    ui: {
                        layout: {
                            global_template: 'custom' // custom global layout is being used. Default global layouts of Learnosity are 'edit' and 'edit_preview'
                        }
                    }
                };
                var questionEditorApp = LearnosityQuestionEditor.init(initOptions);

Global layout components

The sections below detail the global layout components that are available for use in the

widget selection view.

The widget selection view allows users to browse all the Questions/Features that Learnosity supports. By selecting a Question/Feature from the list, the default JSON of that Question/Feature will be loaded in the widget edit panel.

For example:

<span data-lrn-qe-layout-tile-list></span>	Define where the widget selection view should be rendered.

<div class="my-widget-selection-wrapper">
    <span data-lrn-qe-layout-tile-list></span>
</div>

Editing the widget title view

Define the title of the Question/Feature that user is editing.

For example:

<span data-lrn-qe-layout-widget-title></span>	Define where the current editing widget title view should be rendered.

<div class="container col-12">
    <span data-lrn-qe-layout-widget-title></span>

Widget edit panel

The widget edit panel allows an author to set Question/Feature options (e.g. turning multiple_responses on/off for an MCQ question) through our visual editor rather than having to handwrite question JSON.

For example:

<span data-lrn-qe-layout-edit-panel></span>	Define where the widget edit panel should be rendered.

<div class="row col-6">
    <span data-lrn-qe-layout-edit-panel></span>
</div>

Validate question button

The validate question button allows the author to experiment with the validation options they have set. They can answer the Question in the live preview and then click the validate button to see if the current Question's response is correct or not.

For example:

<span data-lrn-qe-layout-validate-question></span>	Define where the validate editing Question should be rendered.

<div class="row col-6">
    <div class="button-controls">
        <span data-lrn-qe-layout-validate-question></span>

Question live score

The Question live score lets the author experiment with validation options. They can set valid responses in the edit pane and then try different answers in the Question preview to see what score a student would receive. Every time they change the response in the Question preview, the live score will update.

For example:

<span data-lrn-qe-layout-live-score></span>	Define where the Question live score widget should be rendered.

    <span data-lrn-qe-layout-live-score></span>
</div>

Source button

The source button opens a modal window that allows the author to inspect or modify the widget's JSON source. This is particularly useful when sharing content with other authors.

For example:

<span data-lrn-qe-layout-source-button></span>	Define where the validate editing Question should be rendered.

<div class="row col-6">
    <div class="button-controls">
        <span data-lrn-qe-layout-source-button></span>

Help button

The help button opens a searchable help modal, with help content specific to the current widget.

For example:

<span data-lrn-qe-layout-global-help></span>	Define where the validate editing Question should be rendered.

<div class="row col-6">
    <div class="button-controls">
        <span data-lrn-qe-layout-global-help></span>

Widget preview panel

The widget preview panel shows an author what the Question/Feature will look like when it is published. The preview automatically updates when the author changes the options in the edit panel.

For example:

<span data-lrn-qe-layout-preview-panel></span>	Define where the widget preview panel should be rendered.

<span data-lrn-qe-layout-preview-panel></span>

Change widget button

The change widget button takes an author back to the tile view where they can select another Question/Feature type to work on.

For example:

<span data-lrn-qe-layout-change-question></span>	Define where the widget preview panel should be rendered.

<span data-lrn-qe-layout-change-question></span>

Getting started

1. Add config

2. Add your custom global layout HTML to the page

3. Polish

Global layout initialization object

Global layout components

widget selection view.

Editing the widget title view

Widget edit panel

Validate question button

Question live score

Source button

Help button

Widget preview panel

Change widget button

Related articles