Documentation
Glossary
Description
This module allows preparing 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 the Text module and shows definitions triggered by the Definition event.
Properties
The list starts with the common properties, learn more about them by visiting the Modules description section. The other available properties are described below.
| 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.