Login Register

Documentation

Fractions

Description

This module allows users to create activities that include parts of geometrical figures: circle, rectangle, and square.

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 the geometrical figure you wish to use: circle, rectangle, or square. Choosing the circle will make all properties related to the rectangle and square inactive and vice versa.
Rectangular horizontal parts Enables choosing horizontal parts of a rectangle. Active only when the figure "Rectangular" is selected.
Rectangular vertical parts Enables choosing vertical parts of a rectangle. Active only when the figure "Rectangular" is selected.
Circle parts Enables choosing the parts of a circle. Active only when the figure "Circle" is selected.
Square parts Enables choosing the parts of a square. Active only when the figure "Square" is selected. The number of parts must be a 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 deselected parts An image is displayed when a part is deselected for the 'Rectangular' figure.

This property allows online resources. Find out more »
Image for selected parts An image is displayed when a part is selected for the 'Rectangular' figure.

This property allows online resources. Find out more »
Speech text Sets the values of speech texts - predefined phrases providing additional context while using the module in the Text To Speech mode. Speech texts are always read using the content's default language.

Supported commands

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

Events

The Fractions module sends events to the Event Bus when the 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 module has a correct answer, 0 for other answers.

CSS classes

Class name Description
.FractionsWrapper Main class containing the entire module'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 for the module

.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;
}

Demo presentation

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