Documentation

Glossary

Description

This module allows to prepare a dictionary. After triggering a proper command from another module, a selected word together with its description will appear in a modal dialog box.

It is also possible to use one Glossary addon for the entire lesson. To do that, simply embed the addon in a header or footer page in Commons, and then trigger Glossary on all pages available in a presentation. You may of course call different dictionary entries on different pages.

By default, Glossary cooperates with Text module and shows definitions triggered by the Definition event.

Properties

Property name Description
List of words It's dictionary describing ID, Text, Description of words.
ID This must be a unique value. It's a key for other modules to find selected Text and Description in dicitonary.
Text This value will be displayed in a header of modal box.
Description This is a description for the word.
Visible This is a helper, which allows you to preview dialog box in editor.
Open external link in This property allows selecting the location for new pages being opened via external links: new tab (default) or the same tab.

Supported commands

Command name Params Description
show id Example: Glossary1.show("Word_ID"). This command will open dialog box with description of Word with id = Word_ID.

Advanced Connector integration

Each command supported by the Glossary addon can be used in Advanced Connector addon scripts. The below example presents how to show a Dialog Box with a definition of Word_ID element set in Glossary.

    EVENTSTART
    Source:Text2
    SCRIPTSTART
        var glossaryModule = presenter.playerController.getModule('Glossary1');
        glossaryModule.show("Word_ID");
    SCRIPTEND
    EVENTEND

CSS classes

Class name Description
.ui-dialog indicates the look of the dialog box
.ui-dialog-titlebar indicates the look of the titlebar
ui-dialog-title-dialog indicates the look of the title
.ui-dialog-titlebar-close indicates the look of the close button
.ui-dialog-content indicates the look of the description container

Example styling

Custom styling from demo presentation:

.GlossaryCustomStyling {
}

.GlossaryCustomStyling .ui-dialog {
    width:500px !important;
    border:1px solid #fcc;
    overflow:visible;
}

.GlossaryCustomStyling .ui-dialog-titlebar {
    border:2px solid #fcc;
    background:none;
    background-color:Tomato;
}

.GlossaryCustomStyling .ui-dialog-title {
    color:#111;
}

.GlossaryCustomStyling .ui-widget-content {
    background:none;
    background-color:#111;
    color:#fff;
}

.GlossaryCustomStyling .ui-corner-all {
    border-radius:10px;
}

Demo presentation

Demo presentation contain examples of how to use Glossary addon.