Login Register

Documentation

Clock

Description

The Clock module allows users to create activities related to the clock and time.

Properties

The list starts with the common properties, learn more about them by visiting the Modules description section. The other available properties are described below.

Property name Description
Time Standard Enables to choose the time display (12H or 24H).
Initial Time Enables to set the initial time for the module. The time should be entered in a 00:00 or 0:00 format. If Show Second Hand is active, this property requires the format 00:00:00.
Minutes step Enables choosing the big hand-minute step. For example, if you define the step as 5, the big hand will be moved every 5 minutes.
Show Clock Labels Enables to show the clock labels.
Show second hand Enables third hand for seconds.
Seconds step Same as the Minutes step but defined for seconds.
Active Hand This property allows choosing the active clock hand.
Synchronize Hands This property allows you to choose how the hands 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 »
Correct Answer Defines the correct answer (required when “Is Activity” is checked). The time should be entered in a 00:00 or 0:00 format.
Is Disabled Allows disabling the module so that the user is not able to interact with it.
Is Activity Enables to define whether the Clock module is an activity or not.
Continuous events The events are sent while the user is moving the clock hand, otherwise, the clock hand needs to be released to send an event.

Supported commands

Command name Params Description
setClockTime time
(h : min)		 Sets the clock's time.
getCurrentTime --- Returns the current time (hours : minutes).
getCurrentHour --- Returns current hour.
getCurrentMinute --- Returns current minute.
hide --- Hides the module if it is visible.
show --- Shows the module if it is hidden.
enable --- Enables the module if it is disabled.
disable --- Disables the module if it is enabled.
markAsCorrect --- Marks the module as correct.
markAsWrong --- Marks the module as wrong.
markAsEmpty --- Removes all module marks.

Events

The Clock module sends events to the Event Bus when the user selects/deselects its element.

Field name Description
Item Always 1.
Value Current time.
Score 1 when the module has a correct answer, 0 for other answers.

CSS classes

Class name Description
.analog-clock Main class containing the entire module'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 improve the user experience while working with the Clock module 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 to use the Clock module.