Documentation
Grouping modules
Description
Grouping helps you organize all modules on a page, and with additional options available to the group, it opens up new opportunities for scoring, interactivity, design and much more.
The group is created in the "Module" –> "Group modules" menu for the previously selected modules. The reverse operation "Module" –> "Ungroup modules" is possible for the existing group.
There can be many groups of modules on the page, but please keep in mind that one module can belong only to one group. To select a group, simply click on any of the group's modules on the workspace. Selecting individual modules is possible in the "Modules" panel.
Display in the modules list
If the "Group modules in a div container" is enabled, the group is contained in a collapsible folder:
In other case, the modules don't have to be aligned one on top of another, they can be in any place on the list of the modules, so the folder is not collapsible:
Properties
Property name | Description |
---|---|
Score type | Creating a group of modules makes it possible to give it its own Group's Score Type. The group has 4 modes to calculate its score: Default, Zero to Max, Gradually to Max and Minus Errors. Score Types: For example, if the group's maximum score is 10 points, and the Group's Max Score property is defined as 5, the user will get 5 points for solving all exercises correctly and 2 points for solving only a half of them (rounding down). More information about Score Type can be found here: Activity scoring. |
Group modules in a div container | It is a property that allows you to extend the capabilities of the grouping mechanism by placing all grouped modules into one div container in the DOM structure. The group receives dimensions and positions from its contents, while the positions of the modules are converted relative to the group position. Example: Text is the first module at the position: left: 00, top: 50 in the group. After selecting "Group modules in a div container" its position will be: left: 0, top: 0 and the group will inherit the position: left: 100, top: 50. A group with this property checked allows you to define and assign CSS classes in the same way as for modules. |
Supported commands
Command name | Params | Description |
---|---|---|
show | --- | Shows the group. |
hide | --- | Hides the group. |
Advanced Connector integration
To get access to the group, the getGroup(groupID) method from playerController shall be used. For example, to hide a group on the page, the following expression can be used:
presenter.playerController.getGroup('Group0').hide();
Each command supported by the Group can be used in the Advanced Connector addon's scripts. An extensive version of the above example presents how to hide and show the group using Double State Button.
EVENTSTART
Source:Double_State_Button1
Value:1
SCRIPTSTART
var group0 = presenter.playerController.getGroup('Group0');
group0.hide();
SCRIPTEND
EVENTEND
EVENTSTART
Source:Double_State_Button1
Value:0
SCRIPTSTART
var group0 = presenter.playerController.getGroup('Group0');
group0.show();
SCRIPTEND
EVENTEND
CSS classes
Class name | Description |
---|---|
.moduleGroup | indicates the appearance of a group of modules. |
Examples
.modulegroup_exercise {
background-color: #77a9c1a8;
border: 25px solid #ffffff00;
border-radius: 10px;
box-shadow: 0 0 5px 2px #73899aba;
}
Demo presentation
Demo presentation contains examples of the use of groups of modules.