Login Register

Documentation

Clock

Description

This addon allows users to create activities related to 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 addon. The time should be entered in a 00:00 or 0:00 format. If Show Second Hand is active this property requires format 00:00:00.
Minutes step 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.
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 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.