Login Register

Documentation

Memo Game

Description

The Memo Game module allows creating 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 latter 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 Amount of columns in the grid of cards
Rows Amount of rows in the grid of cards
Use two styles for cards If checked, the first item in each pair uses different style for a card than the second one
Keep cards aspect ratio If checked, cards are fitted into a rectangular shape of even if the module itself isn't rectangular
Show cards for preview If checked, it shows cards instead of their reverses in the editor
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 »
Image Mode A list of available image size adjustments to the Addon's size. The choice embraces: Original (no changes), KeepAspect and Stretch.
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.

Supported commands

Command name Params Description
isAllOK --- Returns true when all cards are matched correctly, otherwise false
show --- Shows the module
hide --- Hides the module

Show Answers

This module is fully compatible with 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 addon sends the 'ValueChanged' event. This event has score 1 if the cards are matched properly, otherwise 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 addon
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 addon sends the following events:

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

Configuration

The module will obviously generate twice as many cards as are defined in "Pairs" property. They will be spread in a grid of geometry defined with the "Columns" and "Rows" properties. The amount of cells in the grid has to match the amount 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 the "Rows" and "Columns" property to match the required amount of cards.

CSS classes

Class name Description
.gamememo_container .placeholder 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 indicates the style that applies to cards regardless of their type when their content is hidden (user sees the reverse of the card).
.gamememo_container .front_A 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 (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 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 (user sees the reverse of the card). If you want to use an image, use the "Image for style B" property.
.gamememo_container .back indicates the style that applies to cards when they are uncovered (user sees the content of the card).
.gamememo_container .mismatch_mark 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 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 indicates the style that applies to cards when Show Answers is active.
.gamememo_container .cell-wrong 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 style of the overlay layer that displays when time to solve the tas is over.
.gamememo_container .memo-lock-screen-info style of the layer on which "Session Ended Message" appears.
.gamememo_container .cell-correct 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 indicates the style that applies to the card activated by keyboard navigation

Examples

1.1. Just add some space between cards and 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 addon.