Documentation

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.

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

Response of isOK(id) command:

{
    value: boolean,
    source: string,
    selectedDestinations: string[],
    correctDestinations: string[]
}

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.

Scoring

The Connection module allows the user to create exercises as well as activities.

Events

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

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.

CSS classes

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.