Login Register

Documentation

Memo Game

Description

The Memo Game module allows the creation of a simple game that checks the user's ability to match different pairs of items. Initially, all items are placed randomly on hidden cards ("face down"). A user can check what is "under" the card by clicking on it, but the card turns back to its hidden state in case of a mismatch. A user has to find all matching pairs by remembering the location of individual items and their meaning.

The demo presentation is available here.

Each card contains one item, which is text (unformatted) or image. You can build pairs from various types of items – text with text, text with image, or image with image.

Cards' reverses can be displayed in one or two styles. In the first case, all cards look the same to the user when they are hidden. In the second one, the first items in each pair use a different style than the second one, which serves as a hint to the user. Cards' reverses can be styled using CSS or can be filled with an image.

In case of a mismatch, a module draws an “X” sign on a just-shown card to notify the user about the failure. Those cards are hidden again when the user clicks on another card.

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
Pairs List of items to match.
Columns Number of columns in the grid of cards.
Rows Number of rows in the grid of cards.
Use two styles for cards If checked the first item in each pair uses a different style for a card than the second one.
Image for style A If uploaded, that image will be used to indicate cards' reverses for the first item in each pair. If “Use two styles for cards” isn't checked, that will apply to all cards.

This property allows online resources. Find out more »
Image for style B If uploaded, the image will be used to indicate cards' reverses for the second item in each pair.

This property allows online resources. Find out more »
Style A cover alt text Sets the alternative text for the style A image.
Style B cover alt text Sets the alternative text for the style B image.
Keep cards aspect ratio If checked, cards are fitted into a rectangular shape, even if the module itself isn't rectangular.
Show cards for preview If checked, it shows cards instead of their reverses in the editor.
Is Not Activity The module is not an activity which means it gives neither score nor errors.
Image Mode A list of available image size adjustments to the module's size: Original (no changes), Stretch, and KeepAspect.
Keep wrong marking The red "X" symbol remains until the next item is clicked.
Time to solve the task Time (in seconds) to solve the task.
Time is measured from the first click on a card. When the time is up, the "Session ended message" is displayed.
The default empty value means that the time will not be measured.
Session ended message This message is displayed when the time to solve the task is over.
Click to turn over incorrect pair A click is required to turn over an incorrect pair, only then it is possible to click the next item.
Show all answers in gradual show answers mode If this property is marked, then the Gradual Show Answer module displays the complete solution after using this button only once.
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.

Supported commands

Command name Params Description
isAllOK --- Returns true when all cards are matched correctly, otherwise false.
hide --- Hides the module if it is visible.
show --- Shows the module if it is hidden.

Show Answers

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

Events

When a user properly matches all cards, 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 N/A

When a user matches a pair of cards, the module sends the 'ValueChanged' event. This event has a score of 1 if the cards are matched properly, otherwise its 0. The event also has an item, a pair of clicked cards' IDs - (the first clicked card, the second clicked card).

Field name Description
Source ID of this instance of the module.
Item A pair of cards' IDs. The format is as shown below: first_clicked_card_id-second_clicked_card_id
Value 1
Score 1 - a pair is matched correctly.
0 - a pair is matched incorrectly.

When the time to solve the task is specified and a user starts a session (first card selection), the module sends the following events:

Event type Field name Description
ItemConsumed Event occurs every second when the module is active (user started the game).
Source ID of this instance of the module.
Item Progress of time (%).
Value Spent time (in the MM:SS format).
ItemSelected Event occurs when the session starts or when the time is over.
Source ID of this instance of the module.
Item "startSession" or "endSession"
Value [empty]
Score [empty]

Configuration

The module will generate twice as many cards as are defined in the "Pairs" property. They will be spread in a grid with the "Columns" and "Rows" properties. The number of cells in the grid must match the number of cards. For example, if you have 10 pairs, it will generate 20 cards, and the grid can consist of e.g. 4 rows and 5 columns.

To configure a minimal implementation of the module you have to:

  • Define at least two pairs by filling the "Pairs" property,
  • Define geometry by filling in the "Rows" and "Columns" properties to match the required number of cards.

CSS classes

Class name Description
.gamememo_container .placeholder It indicates the style that applies to all cards; if you want to add space between cards, use the top/left/right/bottom property with a positive value.
.gamememo_container .front It indicates the style that applies to cards regardless of their type when their content is hidden (the user sees the reverse of the card).
.gamememo_container .front_A It indicates the style that applies to type A cards (or all cards if the "Use two styles for cards" property is not set) when their content is hidden (the user sees the reverse of the card). If you want to use an image, use the "Image for style B" property.
.gamememo_container .front_B It indicates the style that applies to type B cards (used only if the "Use two styles for cards" property is not set) when their content is hidden (the user sees the reverse of the card). If you want to use an image, use the "Image for style B" property.
.gamememo_container .back It indicates the style that applies to cards when they are uncovered (the user sees the content of the card).
.gamememo_container .mismatch_mark It indicates the style that applies to the "X" symbol that appears for a while after matching the invalid pair of cards.
.gamememo_container .tick_mark It indicates the style applying to the tick symbol that appears for a while after matching the right pair of cards.
.gamememo_container .cell-show-answers It indicates the style that applies to cards when Show Answers is active.
.gamememo_container .cell-wrong It indicates the style that applies to the cards when the check answers mode is active, and a card has been matched incorrectly.
.gamememo_container .memo-lock-screen The style of the overlay layer that displays when the time to solve the task is over.
.gamememo_container .memo-lock-screen-info The style of the layer on which the "Session Ended Message" appears.
.gamememo_container .cell-correct It indicates the style that applies to the cards when the check answers mode is active, and a card has been matched correctly.
.gamememo_container .keyboard_navigation_active_element It indicates the style that applies to the card activated by the keyboard navigation.

Examples

1.1. Just add some space between the cards and the border: 

.gamememo_boxed {
}

.gamememo_boxed div.placeholder {
    bottom: 4px;
    top: 4px;
    left: 4px;
    right: 4px;
}

.gamememo_boxed div.front_A {
    border: 2px solid #000;
}

.gamememo_boxed div.front_A:hover {
    border: 2px solid yellow;
}

1.2. Rounded corners, shadow and borders: 

.gamememo_pretty {
}

.gamememo_pretty div.placeholder {
    border-radius: 12px;
    bottom: 4px;
    top: 4px;
    left: 4px;
    right: 4px;
}

.gamememo_pretty div.front {
    box-shadow: 1px 1px 8px 3px #ccc;
}

.gamememo_pretty div.front_A {
    border: 2px solid #fff;
}

.gamememo_pretty div.front_B {
    border: 2px solid #fff;
}

.gamememo_pretty div.back {
    border-radius: 12px;
    border: 1px dotted #ccc;
    bottom: 4px;
    top: 4px;
    left: 4px;
    right: 4px;
}

Keyboard navigation

  • arrows - navigation between cards.
  • space - select a card.

Demo presentation

Demo presentation contains examples of how to use the Memo Game module.