Description
Use the Match word with picture widget to easily create a simple association game where the end user can match words with the corresponding words.
Creating an association game is very simple: just drag it from the Objects panel to the stage, placing it on the page, and double-click on the widget to edit it.
For each word added to the widget, PubCoder will give you the option of adding a corresponding image that will subsequently generate the pair to be found on our game.
Double click on the game placeholder on the stage to edit the list of pairs, or use the selection inspector to change the generic settings.
Properties
Match word with picture widget supports most of the Generic Object Properties, plus the ones listed below. To edit properties of a Match woird with picture widget, select it and use the selection inspector at the right of your project window.
| Pairs | Click to edit the list of word/picture pairs for the game |
| Background Color | The background color to apply to the entire widget |
| Secondary Background Color | The background color applied to the inner area where the images tiles are placed |
| Picture Background Color | The background color to apply the images placeholders (e.g. for images with alpha channels or proportions different than specified with Picture Height and Picture Width) |
| Picture Width | The width of the placeholder for the pictures |
| Picture Height | The height of the placeholder for the pictures |
| Heading | Optional title displayed in the upper portion of the widget |
| Words Position | Choose where to display the words in relation to the images: Top, Bottom, Left and Right |
| Words Position ▹ Words Coulmn Width | When choosing Left or Right word position, the widget will be divided in two “columns”, one for the images and one for the words: here you can define the width of the column containing word, the column for the images will take up the remaining space |
| Correct Match Color | Defines the color to be applied to the image tile when the correct word has been dragged over |
| Wrong Match Color | Defines the color to be applied to the image tile when the wrong word has been dragged over |
| Unchecked Match Color | Defines the color to be applied to the image tile when a word has been dragged over but the user has not yet dragged all the words |
| Text ▹ Font | Defines the font to use to display the text |
| Text ▹ Size | Defines the font size, in pixels, to use to display the text |
| Text ▹ Color | Defines the color to display the text |
| Text ▹ Secondary Color | Defines the color to display the words when placed over the images tiles |
| Options ▹ Mode | One between Display All Pictures or Display Random Pictures. When the latter is used the widget will randomically select a number of images (defined in the Pictures to display) from all pairs defined for the widget |
| Options ▹ Reveal Correct Matches | Enable to display the matchings correctness when the end user finishes the game (Correct match color or Wrong match color will be applied) |
| Options ▹ Autosave User Matches | Enable to save user matchings when reloading the page |
| Assessment ▹ Assessment ID | Optional, allows to set an assessments identifier for this widget, enabling statistics collection by Shelf or LMS systems |
| Assessment ▹ Assessment Category | Optional, allows to set an assessments category for this widget, enabling statistics collection by Shelf or LMS systems |
Events
Match word with picture widget triggers all Widget Events , plus the ones listed below. . To edit event handlers for a Memory Game, select it and use the Interactivity Panel on the right side of the project window.
Changed
The user dragged a word over a tile or to the words area.
Completed
The user dragged all of the words over the tiles.
Reset
The user reset the game and is able to play it again from scratch
Actions
Match word with picture widget can be used as target of most Generic Actions, plus the ones listed below.
Reset Match word with picture
Removes any words placed on the picture tiles, restoring the game to its initial state.