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.
