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.
