Login Register

Documentation

Basic Math Gaps

Description

The Basic Math Gaps module is used to quickly create simple mathematical expressions.

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
Decimal Separator By default, the decimal separator in Basic Math Gaps is a dot character. When this field is filled in with, e.g., a comma, all settings containing the dot character will have it replaced with a comma.
Gaps Definition Gaps Definitions, examples can be found in the Gaps Definition Examples chapter or the Demo Presentation.
Is Equation Defines if the module is an equation, which indicates that the correctness of the mathematical expressions will be verified.
Use numeric keyboard When enabled, gaps will activate the virtual numeric keyboard on mobile devices when selected. This will also cause the gaps to only accept numeric values.
Is Not 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.
Gap width This property allows defining the width of all gaps in the currently selected Basic Math Gaps module.
Gap Type This property allows selecting a proper gap type – Editable or Draggable.
User action events With this option checked, the Basic Math Gaps module will send the ValueChanged event on every change made in a gap.
Signs This property allows declaring mathematical operations like addition, subtraction, division, and multiplication.

Gaps Definition

[1] + 2 = [3]

1/[2] = 1/[4] + [1/4]

1 [1/4] + 2 [1/4] = 3 2/4

Supported commands

Command name Params Description
hide --- Hides the module if it is visible.
show --- Shows the module if it is hidden.
disable --- Disables the module.
enable --- Enables the module.
isAllOK --- Returns true if all gaps are filled correctly and there are no mistakes, otherwise false.
getView --- Returns HTML element, which is the container of the module.

Advanced Connector integration

Each command supported by the Basic Math Gaps module can be used in the Advanced Connector module scripts. The below example shows how to check if all gaps are filled correctly:

EVENTSTART
Source: Basic_Math_Gaps1
SCRIPTSTART

    var bmg = presenter.playerController.getModule('basicMathGaps1');
    if (bmg.isAllOK()) {
        // do something when all gaps are filled correctly
    } else {
        // do something otherwise
    }

SCRIPTEND
EVENTEND

Scoring

By default, the Basic Math Gaps module allows to create exercises as well as activities. To set a module in a non-excercise mode, it is necessary to set the 'Is not an activity' property. If the module is not in an excercise mode, all of the below methods return 0!

Property Description
maxScore - is Equation false Number of gap items.
maxScore - is Equation true 1
score - is Equation false 1 point for each gap filled in correctly.
score - is Equation true 1 if all gaps are filled in correctly.
errorCount - is Equation false 1 error point for each gap filled in incorrectly.
errorCount - is Equation true 1 if any gap is filled in incorrectly.

Events

Basic Math Gaps sends events compatible with both Connector and Advanced Connector modules. When a gap is filled, it sends an event with the following arguments:

Field name Description
Item Id of the gap filled
Value Value inserted into a gap
Score Depending on the correct or wrong value, it sends 1 or 0 respectively.

When a user properly places all items without any error, the module sends the 'ALL OK' event. This event is different from a normal event, so its structure is shown below.

Field name Description
Item all
Value N/A
Score If the module is Equation true, the score is 1 or 0, depending on the answer.

Show Answers

This module is fully compatible with the Show Answers module and displays correct answers when an adequate event is sent.

CSS Classes

Property name Description
.basic-math-gaps-wrapper Outer wrapper of a whole module.
.basic-math-gaps-container Inner container of a whole module.
.element Elements other than a gap.
.fraction-container Container for fractions.
.numerator Numerator in fraction container.
.denominator Denominator in fraction container.
.correct This class is added in error-checking mode when the gap is filled in correctly.
.wrong This class is added in error-checking mode when the gap is filled in incorrectly.

Default Styling

.basic-math-gaps-wrapper .basic-math-gaps-container {
    padding: 10px 0px;
    border: 1px solid transparent;
}

.basic-math-gaps-wrapper .basic-math-gaps-container input,
.basic-math-gaps-wrapper .basic-math-gaps-container .element {
    width: 30px;
    text-align: center;
    margin: 0 2px;
}

.basic-math-gaps-wrapper .basic-math-gaps-container > input,
.basic-math-gaps-wrapper .basic-math-gaps-container > .element,
.basic-math-gaps-wrapper .basic-math-gaps-container > .fraction-container {
    float: left;
}

.basic-math-gaps-wrapper .basic-math-gaps-container.hasFractions > input,
.basic-math-gaps-wrapper .basic-math-gaps-container.hasFractions > .element {
    margin-top: 15px;
}

.basic-math-gaps-wrapper .basic-math-gaps-container .element {
    display: inline-block;
}

.basic-math-gaps-wrapper .basic-math-gaps-container .fraction-container {
    display: inline-block;
    text-align: center;
    padding: 0 5px;
}

.basic-math-gaps-wrapper .basic-math-gaps-container .fraction-container .numerator {
    padding: 0 5px;
}

.basic-math-gaps-wrapper .basic-math-gaps-container .fraction-container .denominator {
    border-top: 1px solid #000;
    display: block;
    padding: 2px 5px 0px 5px;
    margin-top: 2px;
}

.basic-math-gaps-wrapper .basic-math-gaps-container .hidden-addition {
    width: 0px;
    height: 0px;
    visibility: hidden;
    display: inline-block;
}

.basic-math-gaps-wrapper .basic-math-gaps-container .correct {
    border-color: #00bb00;
    background-color: #bbffbb;
}

.basic-math-gaps-wrapper .basic-math-gaps-container .wrong {
    border-color: #ff1111;
    background-color: #ffbbbb;
}
.basic-math-gaps-wrapper .basic-math-gaps-container.wrong {
    border: 1px solid #ff1111;
}

.basic-math-gaps-wrapper .basic-math-gaps-container.correct {
    border: 1px solid #00bb00;
}

Demo presentation

Demo presentation contains examples of how to use the Basic Math Gaps module.