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.