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.