Submit a request
Submit a request

Creating Your Own Question Editor Global Layout

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);
        
This section steps you through using a custom global layout. Follow the steps below to build your own custom global layout.
 
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);
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>
                        
Play around with the markup and apply CSS until it meets your needs. You can style the global layouts in any way you choose.
 
Define which global layout to use. If not set, Learnosity's default global layout (edit) will be used
edit Learnosity default global layout. This layout will render edit panel and preview panel in a single column and 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 2 column layout.
custom Custom global layout. Any view that user wants to render is needed to be defined through span element with 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);
                            
The sections below detail the global layout components that are available for use

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: 
widget_selection.png

<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>
            

Define the title of the question/feature that user is editing.

For example: 
widget_title.png

<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>
            

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: 
widget_edit_panel.png

<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>
        

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: 
widget_show_answers_toggle.png

<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>
        

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: 
widget_live_score.png

<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>
    

The source button opens a modal 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: 
widget_source_button.png

<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>
        

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

For example: 
widget_help_button.png

<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>
        

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: 
widget_preview.png

<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>

The change widget button takes an author back to the tile view where they can select another question/feature type to author

For example: 
change_question_button.png

<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>
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.