Documentation
Clock
Description
This addon allows users to create activities related to clock and time.
Properties
Property name | Description |
---|---|
TimeStandard | Enables to choose the time display (12H or 24H). |
InitialTime | Enables to set the initial time for the addon. The time should be entered in a 00:00 or 0:00 format. |
Step (minutes) | Enables to choose the big hand minute step. For example, if you define the step as 5, the big hand will be moved every 5 minutes. |
ShowClockLabels | Enables to show the clock labels. |
ActiveHand | This property allows choosing the active clock hand. |
SynchronizeHands | This property enables to choose how the big hand and the hour hand should be synchronized. |
Images | Enables to set an image as a background. Please note that this property does not support the SVG format. This property allows online resources. Find out more » |
CorrectAnswer | Defines the correct answer (required when “isActivity” is checked). The time should be entered in a 00:00 or 0:00 format. |
isDisable | Defines whether the clock addon is disabled. |
isActivity | Enables to define whether the Clock addon is an activity or not. |
Supported commands
Command name | Params | Description |
---|---|---|
setClockTime | time (h : min) |
Sets the clock's time. |
getCurrentTime | --- | Returns current time (hours : minutes). |
getCurrentHour | --- | Returns current hour. |
getCurrentMinute | --- | Returns current minute. |
show | --- | Shows the addon. |
hide | --- | Hides the addon. |
enable | --- | Enables the addon |
disable | --- | Disables the addon. |
markAsCorrect | --- | Marks the addon as correct. |
markAsWrong | --- | Marks the addon as wrong. |
markAsEmpty | --- | Removes all addon marks. |
Events
The Clock addon sends events to Event Bus when a user selects/deselects its element.
Field name | Description |
---|---|
Item | Always 1 |
Value | Current time |
Score | 1 when the addon has a correct answer, 0 for other answers |
CSS classes
Class name | Description |
---|---|
.analog-clock | Main class containing the entire Addon's content. |
.analog-clock.disable | Added when the module is disabled. |
.analog-clock.incorrect | Added when the module is incorrect in the show errors mode. |
.analog-clock.correct | Added when the module is correct in the show errors mode. |
Styles from a sample presentation
To imrove the user experience while working with the Clock addon on mobile devices, there is the possibility of enlarging the active/clickable area of the clock hands without visually increasing their size. It can be achieved by adding the "stroke-width" class and setting the "stroke-opacity" to zero. Please note that if the "stroke-width" value is too big, it may cause the clock hands to cover each other up. By default, the "stroke-width" is set to 50px.
.Clock_test{
}
.Clock_test .analog-clock{
padding: 10px;
border: 3px solid #bbbbbb;
background: #ffffff;
}
.Clock_test .analog-clock #m-hand{
stroke-width:50px;
stroke-opacity:0;
}
.Clock_test2 .analog-clock #h-hand{
stroke-width:50px;
stroke-opacity:0;
}
.Clock_test .analog-clock.disable{
opacity: 0.5;
}
.Clock_test .analog-clock.incorrect{
border: 3px solid #ff4901;
}
.Clock_test .analog-clock.correct{
border: 3px solid #06d401;
}
Demo presentation
Demo presentation contains examples of how this addon can be used.