Documentation
Context Metadata
At times, it may be useful to pass metadata to your content, so that it can be modified based on the context in which it is being used. For instance, you may wish to hide Show Answers button whenever a student is working with a lesson, but display them for the teacher. In order to pass such data to the player and to access them from your custom addons and scripts, you may use the following methods.
Player methods
| Function | Description |
|---|---|
| setContextMetadata(contextData) | This method allows you to pass context metadata to the player so that they may later be accessed by addons and scripts. The method is called on the player object and takes one argument - contextData, which should be a dictionary containing key-value metadata that you wish to pass to the player. |
Player Controller methods
| Function | Description |
|---|---|
| getContextMetadata() | This method allows you to gain access to the current context metadata. The method is called on the player controller object (which you gain access to either via the player.getPlayerServices() method, or by adding the presenter.setPlayerController(controller) method to your addon) and takes no arguments. When called, the method will return the most recent contextData dictionary that was set using the player.setContextMetadata(contextData) method. If setContextMetadata was never called, getContextMetadata will return null. |
An example regarding the Dark Mode:
EVENTSTART
Name:PageLoaded
SCRIPTSTART
var isDark = false;
if (presenter.playerController.getContextMetadata() != null) {
isDark = presenter.playerController.getContextMetadata().isDarkModeEnabled;
}
if (isDark == true) {
$('.ic_page').addClass('highContrast');
$('.ic_header').addClass('highContrast');
$('.ic_footer').addClass('highContrast');
} else {
$('.ic_page').removeClass('highContrast');
$('.ic_header').removeClass('highContrast');
$('.ic_footer').removeClass('highContrast');
}
SCRIPTEND
EVENTEND
Add in the CSS e.g.:
[class*="page"].highContrast {
background: grey !important;
color: white !important;
}
.highContrast .text_test {
background-color: black !important;
color: white !important;
}