Documentation

Connection

Description

The Connection module allows defining two sides of items that match one another. All items can be determined both by texts and by images. The activity can work either in a single connection mode where each item on the first side (left column or top row) matches one corresponding item on the second side (right column or bottom row) or in 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), and styling of elements and connections.

The module allows the user to create a connection activity in vertical and horizontal modes. This module allows a separate selection of the orientation for each layout. By default, each layout has a vertical orientation selected.

The printable version is always in vertical mode.

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
Is not an activity With this option, the selected score and errors will not be returned by the module.
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 (or top row) A list of items in the left column (or top row). Each item has an id, content, connect to (id of the corresponding item on the right/bottom side), and additional class field. See the section "Configuration" for more details.
Right column (or bottom row) List of items in the right column (or bottom row). Each item should have an id, content, connect to (id of the corresponding item on the left/top side), and additional class. See the section "Configuration" for more details.
Columns width Defines columns' width in percentage.
It has 3 properties:
  • Left,
  • Middle,
  • Right.
The defined values are used only in the vertical view. At the moment, for the horizontal view, no property has been added to set an adequate value, i.e. the height of the rows.
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.
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).
Disabled connection color Color of the disabled connection. Can be a word (e.g., grey) or hexadecimal definition (#808080).
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.
Random order left column (or top row) With this option checked elements in the left column (or in the top row) will be arranged randomly.
Random order right column (or bottom row) With this option checked elements in the right column (or in the bottom row) 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 defining the language for this module (different than the language of the lesson).
Speech texts 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.
Printable Allows to choose if the module should be included in the printout.
Orientations List of configurations of orientation (vertical and horizontal) of the module, depending on the layout. If there is a layout for which no orientation is defined in this list, the vertical orientation will be used.
Property name Description
Layout Name of the layout.
Orientation List of options (vertical and horizontal) with orientations to choose from.

Configuration

Vertical orientation

Items in both columns are spread vertically at 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 the left and right columns. However, you can change this setting in the "Columns width" property.

If you include images into the Connection module, and you cannot see the right column then you must set the "Columns width" property other than empty or auto.

To configure which connections are allowed you have to:

  • Provide a list of items for the left column in the "Left column (or top row)" property.
  • Provide a list of items for the right column in the "Right column (or bottom row)" property.
  • Each item should have an ID that 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. 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.

Horizontal orientation

Items in both rows are spread horizontally in equal distances across the row width no matter how many elements there are.

The height of the connections' area is calculated based on the height of the top and bottom rows.

To configure which connections are allowed you have to:

  • Provide a list of items for the top row in the "Left column (or top row)" property.
  • Provide a list of items for the bottom row in the "Right column (or bottom row)" property.
  • Each item should have an ID that is unique across all elements in both rows.
  • A "connects to" defines a list of comma-separated IDs of items to which the current item can be connected. 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.
  • In the "Orientations" property add an item with the name of the layout on which Horizontal orientation should be used. To learn more about layouts visit the Managing Layouts section.

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.
hide --- Hides the module if it is visible.
show --- Shows the module if it is hidden.
showAnswers --- Shows the module's answers.
hideAnswers --- Hides the module's answers.
disable from - left column (or top row) item index,
to - right column (or bottom row) item index
Disable the connection.
enable from - left column (or top row) item index,
to - right column (or bottom row) item index
Enable the connection.

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 an adequate event is sent.

Custom Scoring

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

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

Scoring

The Connection module allows the user 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 module sends the ValueChanged type events to the 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 the connection has been created/removed between elements with IDs 1 and 4)
Value 1 if the connection has been created, 0 if the connection has been removed
Score 1 if the connection is correct, 0 if the connection is incorrect

When a user makes all connections without any error, the module 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 module.
.connectionLeftColumn Table cell that spans left column (available only in vertical orientation).
.connectionMiddleColumn Table cell that spans middle column (available only in vertical orientation).
.connectionRightColumn Table cell that spans right column (available only in vertical orientation).
.connectionTopRow Table row that spans top row (available only in horizontal orientation).
.connectionMiddleRow Table row that spans middle row (available only in horizontal orientation).
.connectionBottomRow Table row that spans bottom row (available only in horizontal orientation).
.content Table that holds the items inside one of the above columns (or rows). In vertical orientation, you can set its height to decide if the items should be placed vertically across the whole module (100%) or in a different way (i.e. 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 module.