Documentation

Connection

Description

The Connection module allows defining two columns of items which match one another. All the elements can be determined both by texts and by images. The activity can work either in a single connection mode where each item on the left matches one corresponding item on the right, or multiple connection mode where each item can be used in multiple connections. The aim of the activity is to find all proper connections.

It supports formatted html items (including images), styling of elements and connections.

The Addon allows creating a connection activity only in a vertical mode. In order to build a horizontal connection, it is possible to use the Points and Lines Addon.

Properties

Property name Description
Single connection mode If checked, every item can be part of only one connection. Otherwise, each item can be used in many connections.
Left column A list of items in left column. Each item should have: id, content, connect to (id of the corresponding item on the right) and additional class. See section "configuration" for more details.
Right column List of items in right column. Each item should have: id, content, connect to (id of the corresponding item on the right) and additional class. See section "configuration" for more details.
Columns width Defines columns' width in percentage. It has 3 properties: left, middle and right.
Default connection color Color of the connection. Can be a word (e.g. black) or hexadecimal definition (#000000)
Correct connection color Color of the correct connection (in check mode). Can be a word (e.g. green) or hexadecimal definition (#00FF00)
Incorrect connection color Color of the incorrect connection (in check mode). Can be a word (e.g. red) or hexadecimal definition (#FF0000)
Connection thickness How thick a line is, e.g. 2
Is not an activity With this option, the selected score and errors will not be returned by addon.
Random order left column With this option checked, elements in left column will be arranged randomly.
Random order right column With this option checked, elements in right column will be arranged randomly.
Show answers line color Color of the connection lines in Show Answers mode.
Block wrong answers With this option checked, wrong answers are removed and the "on wrong" event is sent.
Remove dragged element With this option checked, a dragged element is removed from its original position while dragging it.
Lang attribute This property allows to define the language for this addon (different than the language of the lesson).
Speech texts List of speech texts: Connected, Disconnected, Connected to, Selected, Deselected, Correct, Wrong.
This texts will be read by Text to Speech addon after a user performs an action.
Initial connections List of points connected at the module's start.
Property name Description
From ID Start point of the initial connection
To ID End point of the initial connection
Is disabled Disabling a provided connection. If the connection is disabled, it can't be changed by user interaction. Make sure that the disabled connection is connected to a proper path, because a user can't change it.

Configuration

Items in both columns are spread vertically in equal distances across the column height no matter how many elements there are.

The width of the connections area is calculated based on the width of left and right column. However, you can change this setting in Columns width property.

If you include images into connection addon and you cannot see right column then you have to set "columns width" property other than empty or auto.

To configure which connections are allowed you have to:

  • provide a list of items for left column
  • provide a list of items for right column
  • each item should have an id which is unique across all elements in both columns
  • a "connects to" defines a list of comma separated ids of items to which the current item can be connected to. If you provide multiple ids here and select the "single mode" option, only the last one will be used.
  • it is enough to define the "connects to" on one side only
  • additional class is not required.

Supported commands

Command name Params Description
isOK id Returns an object that contains information about the connection status and its validity. The response is described below.
isAllOK --- Returns true if all connections are made correctly and there are no mistakes, otherwise false.
isAttempted --- Returns true if any connection is selected.
show --- Shows the module.
hide --- Hides the module.

Response of isOK(id) command:

{
    value: boolean,
    source: string,
    selectedDestinations: string[],
    correctDestinations: string[]
}
Parameter Description
value Represents the correctness of source connections.
source The node which is subject to analysis. Is passed in the command argument.
selectedDestinations Selected nodes that are connected to the source.
correctDestinations Nodes that should be connected to the source.

Show Answers

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

Custom Scoring

The Connection addon supports Custom Scoring scripts. For more information about Custom Scoring, see documentation.

Command name Params Description
isSelected from - left column index,
to - right column index
Returns true if the connection is selected, otherwise false.
markAsCorrect from - left column index,
to - right column index
Marks the connection as correct.
markAsWrong from - left column index,
to - right column index
Marks the connection as wrong.

Scoring

Connection addon allows to create exercises as well as activities.

Property Description
maxScore the number of defined connections
score 1 point for each proper connection
errorCount 1 error point for each connection that hasn't been defined

Events

The Connection addon sends ValueChanged type events to Event Bus when a user creates or removes a connection.

Field name Description
Item Information about which connection has been created/removed (i.e. 1-4 means that conection has been created/removed between elements with IDs 1 and 4)
Value 1 if connection has been created, 0 if connection has been removed
Score 1 if connection is correct, 0 if connection is incorrect

When a user makes all connections without any error, the addon sends the 'ALL OK' event. This event is different from a normal Connection event so its structure is shown below.

Field name Description
Item all
Value N/A
Score N/A

CSS classes

Class name Description
.connectionContainer Table that wraps the whole addon
.connectionLeftColumn Table cell that spans left column
.connectionRightColumn Table cell that spans right column
.content Table that holds the items inside the one of the above columns. You can set its height to decide if the items should be placed vertically across the whole module (100%) or in a different way (ie. 50%)
.connections Table cell that spans the canvas element that is used to draw the lines
.connectionItem Table that holds a single item. It describes the element that wraps the whole item (both text and icon).
.inner Describes the table cell with the content part of a single element.
.icon Describes the table cell element that can be used as an icon.
.innerWrapper Describes the div within the .inner table cell that wraps the content.
.iconWrapper Describes the div within the .icon table cell that wraps the icon. If you need to create an icon with an image, you should upload the file using the presentation assets. Then you can apply a custom style either to this class or the icon class to use the image as background.
.selected Single item selected for a connection. Use this selector instead of .connectionItem to apply styles to the selected item.
.connectionItem-correct Additional class for a correctly matched item in error checking mode.
.connectionItem-wrong Additional class for an incorrectly matched item in error checking mode.

Styles from a sample presentation

Here are the styles used in a sample presentation. ConnectionSample style is used on the first page. The second page contains a default styling for the module.

.ConnectionSample {
}

.ConnectionSample .connectionItem {
    border: none;
}

.ConnectionSample .connectionLeftColumn .content{
    height: 50%;
    font-size: 12px;
}

.ConnectionSample .connectionRightColumn .content{
    height: 100%;
    font-size: 12px;
}

.ConnectionSample .connectionLeftColumn .connectionItem .innerWrapper {
    border: solid 1px #555;
    padding: 5px;
    background-color: #eee;
    border-radius: 5px;
    text-align: center;
}

.ConnectionSample .connectionLeftColumn .connectionItem .icon {
    text-align: right;
    width: 17px;
    padding: 0px;
}

.ConnectionSample .connectionLeftColumn .connectionItem .iconWrapper {
    height: 15px;
    width: 15px;
    border-radius: 2px;
    background-color: #ffa;
    border: solid 1px #555;
}

.ConnectionSample .connectionLeftColumn .selected .iconWrapper {
    height: 15px;
    width: 15px;
    border-radius: 2px;
    background-color: #ff0;
    border: solid 1px #f00;
}

.ConnectionSample .connectionRightColumn .connectionItem .innerWrapper {
    border: solid 1px #469;
    padding: 5px;
    background-color: #acf;
    border-radius: 5px;
    text-align: center;
}

.ConnectionSample .connectionRightColumn .selected .innerWrapper {
    border: solid 1px #469;
    padding: 5px;
    background-color: #bdf;
    border-radius: 5px;
    text-align: center;
}

.ConnectionSample .connectionRightColumn .connectionItem .icon {
    text-align: right;
    width: 17px;
    padding: 0px;
}

.ConnectionSample .connectionRightColumn .connectionItem .iconWrapper {
    height: 30px;
    width: 30px;
    background-image: url('/file/serve/521194');
}

.ConnectionSample .connectionRightColumn .selected .iconWrapper {
    height: 30px;
    width: 30px;
    background-image: url('/file/serve/518177');
}

Demo presentation

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