Login Register

Documentation

Fractions

Description

This addon allows users to create activities that include parts of two geometrical figures: a circle and a rectangle.

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
Figure Here you can choose a geometrical figure you wish to use: a circle, square or a rectangle. Choosing a circle will make all properties related to a rectangle, square inactive and vice-versa.
Rectangular horizontal parts Enables to choose horizontal parts of a rectangle. Active only when figure Rectangular is selected.
Rectangular vertical parts Enables to choose vertical parts of a rectangle. Active only when figure Rectangular is selected.
Circle parts Enables to choose the parts of a circle. Active only when figure Circle is selected.
Square parts Enables to choose the parts of a square. Active only when figure Square is selected. Number of parts must be the power of two
Number of correct parts Defines how many elements should be selected.
Selected parts This property defines which elements should be selected at the beginning. The elements are numbered from 1 to a number of parts and can be comma separated (e.g. 1,2,3 means that the elements with numbers 1, 2 and 3 will be selected). It is also possible to use the interval notation:
*From-To-Step (From dash To dash Step) defines the element the selection will start and end with as well as its step (if you write From-To, the Step will be 1 by default).
Selection color Defines the color of the selected parts.
Empty color Defines the color of the unselected parts.
Stroke color Defines the color of a stroke.
Stroke width Defines the width of a stroke.
Is not an activity With this option marked, the score and errors will not be returned by the module.
Is disabled Allows disabling the module so that the user is not able to interact with it.
Image for selected parts An image displayed when a part is selected.

This property allows online resources. Find out more »
Image for deselected parts An image displayed when a part is deselected.

This property allows online resources. Find out more »

Supported commands

Command name Params Description
setSelectionColor color Changes the selection color.
getCurrentNumber --- Returns the current number of the selected parts.
show --- Shows the addon.
hide --- Hides the addon.
markAsCorrect --- Marks the addon as correct.
markAsWrong --- Marks the addon as wrong.
markAsEmpty --- Removes all addon marks.
enable --- Changes state to "enabled".
disable --- Changes state to "disabled."
isAllOK --- Returns true if all answers are correct.

Events

The Fractions addon sends events to Event Bus when a user selects/deselects its element.

Field name Description
Item The number of the part
Value 1 for selection, 0 for deselection
Score 1 when the addon has a correct answer, 0 for other answers

CSS classes

Class name Description
.FractionsWrapper Main class containing the entire Addon's content.
.FractionsWrapper.disable Added when the module is disabled.
.FractionsWrapper.incorrect Added when the module is incorrect in the show errors mode.
.FractionsWrapper.correct Added when the module is correct in the show errors mode.

Styles from the sample presentation

.Fractions_test{    
}    

.Fractions_test .FractionsWrapper{    
   padding: 10px;     
   border: 3px solid #bbbbbb;    
   background: #ffffff;    
}    

Fractions_test .FractionsWrapper.disable{        
   opacity: 0.5;    
}    

.Fractions_test .FractionsWrapper.incorrect{    
   border: 3px solid  #ff4901;    
}

.Fractions_test .FractionsWrapper.correct{    
   border: 3px solid  #06d401;    
}

.Fractions_test2{    
   padding: 10px;     
   background: #ffffff;    
}    

.Fractions_test2 .FractionsWrapper.disable{        
   opacity: 0.5;    
}     

.Fractions_test2 .FractionsWrapper.incorrect{    
   outline: 3px solid  #ff4901;    
}

.Fractions_test2 .FractionsWrapper.correct{
   outline: 3px solid  #06d401;
}

Demo presentation

Demo presentation contains examples of how to use the Fractions addon.