Colour Tiles

Contents

Note:

The HTML5 version of this tool was developed in July 2021. There are some differences between the newer HTML5 version and the version available for download from the App Store or Google Play Store but the core functionality remains the same. This support page was developed based on the downloadable App version of the tool so the images and instructions may not match the HTML5 tool perfectly, however, it still contains many useful examples.

Overview
Examples

• Counting
• Composing and Decomposing
• Representing
• Model Operations
• Patterning
• Measurement and Geometry
• Creating Nets
• Beading

Sample Files
Features of the Tool

• Buttons
• Other Functionality

Features of Updates Videos
Keyboard Shortcuts
Links

Overview

Use the Colour Tiles Tool to represent numbers, ratios and percents by dragging tiles from the selection panel at the left into the workspace. Explore patterns and measurement. Create geometric designs. Users can change colours, shapes, create mirror images, rotate, and clone selections. Three shapes are available: squares, circles, and rounded squares. Three sets of colours combine to give almost 100 choices. Use the underlying grid, with or without number labels, to help position and count tiles.

Access a wide variety of Annotation tools to communicate thinking.
Insert pictures into the tool.
Work created in a mathies tool can be saved and opened. A saved file can be shared with peers or submitted to a teacher. The file will contain all solution steps from start to finish.

Take a screenshot to use as part of a portfolio, presentation, web page, etc.

top

Examples

Counting Practise counting by dragging tiles into the workspace. Practise skip counting by 2s, 5s, 10s, or 100s by changing the Number of Copies to Drag button and then dragging tiles into the workspace. Practise counting backwards. Drag a number of tiles into the workspace and then drag individual tiles or groups of tiles to the recycle bin. Check the total number of tiles in the workspace using the Tile Count button .

Many WINS Counting activities use Colour Tiles including Counting Forward to 10 and Counting Backwards from 50.

Counting Backwards from 50 - Activity 4 top

Composing and Decomposing Composing is the idea that whole numbers can be combined to create a larger number. Drag different numbers of tiles into the workspace and combine them to make a larger collection of tiles. For example, a group of 10 tiles, a group of 5 tiles and then 1 single tile might be dragged into the workspace to create a group of 16 tiles. This illustrates that one way to compose 16 is 10 and 5 and 1. Use the Number of Copies to Drag button and/or the Copy button to create groups of tiles of different sizes. Decomposing is the idea that a number can be broken down into smaller numbers. Once a number has been represented by a group of tiles, select subsets of the group and use the Change Selected Tiles button to change the colour of the selected group of tiles. This illustrates that the given value can be decomposed into smaller numbers.

Many WINS Composing and Decomposing Whole Number activities use Colour Tiles including Composing and Decomposing Whole Numbers to 20 and Whole Numbers to 50.

Composing and Decomposing Whole Numbers to 50 - Activity 6 top

Representing On desktop, click on the image above to open this file.

The annotation grid has been used to simulate the base ten materials shown here. This template file has been created so that the grid matches the size of the tiles. If the tiles are resized, the grid will resize to match. Enter annotation mode to manipulate the base ten materials. Rods, flats and units can be moved, copied and rotated. Be careful NOT to accidentally resize the base ten materials or they will no longer match the tiles.

On desktop, click on the image above to open this file.

Many WINS Representing, Comparing and Ordering Whole Numbers activities use Colour Tiles including: Representing Numbers to 5, Numbers to 20, Numbers to 100 and Compare and Order to 50

Representing Numbers to 5 - Activity 1

top

Model Operations

Many WINS Operations activities use Colour Tiles including: Exploring Multiplication, Exploring Division, Multiplication Facts To 9 x 9 and Situations Involving Products to 50.

Multiplication Facts to 9 x 9 - Activity 3

top Patterning

On desktop, click on the image above to open this file.

Linear Growing Patterns

AB Pattern

Tables and Chairs See Engaging Math's Visual Patterns Cards which uses the Colour Tiles app. top

Measurement and Geometry

On desktop, click on the image above to open this file.

On desktop, click on the image above to open this file.

The following is a nice exercise to get new users familiarized with the tool and some of the useful buttons.

Symmetry and Transformations

Here is a video demonstration of one possible solution:

Symmetry

Creating Nets.

These could be printed out and constructed.
top

Beading

The Beading set of tiles grew out of the "Connecting Indigenous and Western Mathematical Ways of Knowing" research project that Dr. Ruth Beatty, Lakehead University, and Danielle Blair, Provincial Math Lead,
have been doing in partnership with select First Nations, Métis, Inuit communities and Ontario school boards.
Students can use the tool to design their loom bead work and engage in mathematical discourse around pattern, number, symmetry and transformations.

An Eganville District PS student using v1.0 of Colour Tiles as part of loom bead study

Below is an example of a 3 colour, 1 bead chevron pattern. This type of pattern has a 3 column core.
Notice the colour of some of the cloners in the selection panel has been changed to facilitate the creation of this pattern,.

On desktop, click on the image above to open this file.

top

Sample Files (for V2.0.0 and beyond)

(Note: This feature is NOT available in the HTML5 version of the tool.)
To access a sample file:

• click the link in the Sample column (desktop only), or
• use the Open WWW button in the Settings dialog and supply the URL, or
• download the file from the URL column (right-click and save locally on desktop, hard tap on mobile) and use the Open button in the tool, or
• add the mathies sample files Google drive folder to "My Drive" which allows convenient access on all devices.

See the File Operations page for more details.

Sample Click to open in the tool - desktop only	URL Type or copy into Open WWW text box, or save locally by right-clicking or hard-pressing
Represent Numbers	https://mathies.ca/files/examples/CT_Ex1.xml
Chevron Beading Pattern	https://mathies.ca/files/examples/CT_Ex2.xml
Transformations	https://mathies.ca/files/examples/CT_SS2.xml
Patterning	https://mathies.ca/files/examples/CT_SS3.xml
Area and Perimeter	https://mathies.ca/files/examples/CT_SS4.xml
Base Ten	https://mathies.ca/files/examples/CT_BaseTen.xml

Note: These files were designed on a desktop computer and may not open exactly as shown on other devices.
top

Features of the Tool

(Note: The HTML5 version of the tool includes many, but not all of these features and employs a slightly different user interface.)
Colour Tiles opens with a choice of three sets of tiles.
It is also possible to switch languages and open a file from the opening screen.

Button	Description
	Tile Size Decrease / increase tile size.
	Change Selected Tiles Show the moveable Change Selected dialog to change the colour or shape of selected tiles.
	Extend Selection All tiles that have the same colour as the currently selected ones are added to the selection. If no tiles are selected, all tiles become selected.
	English / French Switch between English and French.
	Annotation Tool Hide/Show a wide variety of Annotation Tools which can be used to communicate thinking.
	Insert Image Button Insert images into the tool. More details.
	Undo / Redo Step backward or forward through the actions taken with the tool. This feature is not only useful for backtracking when a misstep is made, it enables a student to demonstrate their work from the start to the finish. The student can press Undo until they are at the start of their solution and then press Redo repeatedly, explaining each step. Note: Undo / Redo is not available for annotation objects.
	Reset Delete all work and return the tool to its starting state.
	Information Shows a dialog with a link to this support page, a feedback form as well as copyright details and version number.
	Settings Shows the settings dialog which opens with the Tiles tab showing by default. Click on Grid to access configurable properties for the background grid. Click on File to access open, import and save file operations. The Apply to workspace setting allows the user to determine whether changes to tile shape are applied only to the cloner tiles in the selection panel or also to the tiles in the workspace. The Auto Size Annotation setting is selected by default. This means that if the block size is changed, any annotation in the workspace will be scaled to match.
	Recycle (in the workspace) Click to clear selected tiles. If nothing is selected, the entire workspace will be cleared. Alternatively, drag items to the recycle bin to remove them.
	Tile Count Show the moveable dialog with a count of each colour of tile.
	Number of Copies to Drag Set the number of copies to drag from the selection panel.
	Copy Make a copy of the selected objects.

top

Other Functionality

Multiple Select To select tiles draw a marquee rectangle around them. If tiles overlap, only the tile on the top layer will be selected (unless the ALT key is held down). Hold down the SHIFT key when drawing a marquee rectangle to add to the previous selection. Click a tile to add to or remove it from the selection. Selected tiles can be moved, copied, rotated, reflected vertically or horizontally, or recycled as a group. The grey button at the top right will compact these controls into a moveable dialog. Close the Controls dialog to bring the controls back around the selection. The controls are only visible when tiles are selected.

Configure the Selection Panel Click on a cloner tile in the selection panel to change its colour (Bead and Many only).

top

Features of the Updates Videos

View a movie about the new features in v.2.0.2.
(Save and Load Files, New Annotation Objects, Annotation Feature Tip Sheet, and the French localization)


(Changes in v1.1 brought to mobile, changes and performance improvements to undo/redo, compact Controls dialog, and multiplier keyboard shortcuts).

Not working? Try mp4 format

(Opening Dialog, new shapes and colours, new Change Selected dialog, new Settings dialog, new Extend Selection by Colour button, new Count dialog, changing cloner tile colour, and top layer selection).
As of v.2.0.0 the Settings dialog now looks different. The functionality described in this video is now found spread across the Tile and Grid tabs.

Not working? Try mp4 format

top

Keyboard Shortcuts

On the desktop version of this tool, the standard Keyboard Shortcuts have been implemented.

Colour Tiles specific keyboard shortcuts are as follows:

SHIFT + 0	Change the multiplier to 100.
SPACE + 1 through SPACE + 6	Adds a tile matching cloner 1 through 6 to the workspace.
SPACE + SHIFT + 1 through SPACE + SHIFT + 6	Changes the selected tiles to the colour of cloner 1 through 6.
SPACE + ALT + 1 through SPACE + ALT + 3	Changes the selected tiles to squares, circles and rounded squares, respectively.
SPACE + E	Extends selection to match the selected colours (just like the button).
C	Shows/hides the compact controls.

top

Links

mathies Colour Tiles Learning Tool Tip Sheet

Colour Tiles Manipulative Sheet
(Source - EduGAINS | Ministry Developed Resources | Mathematics | Lessons & Supports | Manipulatives)

• What are Colour Tiles?
• How do Colour Tiles help students?
• Sample Activities
• Recommended Websites (dated)

EduGAINS video: Colour Tiles - Multiplication of Fractions
EduGAINS video: Two Coloured Counters - Zero Principle
Visit EduGAINS for additional Manipulative Sheets and Videos.

mathies Tools and Games used in WINS - Most WINS activities incorporate the Colour Tiles tool.

Focusing on the Fundamentals of Math - A Teacher's Guide
Connecting Fundamental Math Concepts with mathies.ca (Draft)

Algebraic Reasoning - The Power of Visual Representations, which uses Colour Tiles (from the OAME Gazette September 2018).

top