Coloured Square Game - Instructions

A small game for practicing colour, state, and interaction testing.

About Page

Coloured Square Game is a compact target for practising observation and rule modelling.

Use it to practice:

  • modelling the win condition
  • checking colour changes
  • inspecting DOM and JavaScript state
  • looking for inconsistent rules
  • comparing visible behaviour with source code behaviour

Exploratory Testing

Create a simple state model as you play. Note the visible square state, your action, and what changed afterward.

DevTools Exercises

The game says to press the red button when the square is red. Use that rule as your model, then compare it with the code.

Try:

  • clicking the change link many times and recording every colour shown
  • inspecting the colours array in the console
  • inspecting the square and button styles in the DOM
  • checking whether the UI can reach the winning state without intervention
  • using the console to put the app into states that normal play does not reach

Example console experiments:

document.getElementById("theSquare").style.backgroundColor = "red";

document.getElementById("theButton").style.backgroundColor =
    document.getElementById("theSquare").style.backgroundColor;

colours = ["red"];

You can also replace the win check while exploring:

checkColour = function() {
    changeStatusText("Winner!");
    alert("You Win!");
};

Use these as testing exercises: first identify the rule problem, then use DevTools to demonstrate the state that the UI cannot naturally reach.