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.