Documentation

Basic Math Gaps

Description

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

Properties

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 Gaps Definition Examples chapter or Demo Presentation.
Is Equation Defines if the addon is an equation, which indicates that the correctness of the mathematical expressions will be verified.
Is Not Activity Defines if the addon is NOT an activity, which means that it won't be taken into consideration when checking correctness.
Is Disabled Defines if the addon is disabled, which means that you won't be able to interact with it.
Gap Type This property allows selecting a proper gap type – editable or draggable.
Signs Property signs allows defining the signs to be declared for 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
show --- Shows the addon.
hide --- Hides the addon
disable --- Disables the addon.
enable --- Enables the addon.
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 addon.

Advanced Connector integration

Each command supported by the Basic Math Gaps addon can be used in the Advanced Connector addon 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 addon 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 addon 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 addon 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 addon is Equation true, the score is 1 or 0, depending on the answer.

Show Answers

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

CSS Classes

Property name Description
.basic-math-gaps-wrapper Outer wrapper of a whole addon
.basic-math-gaps-container Inner container of a whole addon
.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 this addon can be used.