Documentation

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 module 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 module.

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

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

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

Custom Scoring

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

Scoring

Connection addon allows to create exercises as well as activities.

Events

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

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.

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 addon.