This lesson will help students with the core coding concept of sequencing.

They will learn that computers follow instructions in a specific order and that a single mistake (a "bug") can change the entire outcome.

This is a hands-on, unplugged activity where students become the "robots" and you are the "programmer."

Materials Needed:

• Worksheet: A simple grid with squares (Downloadable from this step).

• Coloured Pencils/Markers: A small set of three colours.

• Instruction Cards: A set of cards with a different icon for each colour and a simple icon for "move to the next square." 

Begin the lesson by telling the students they are going to be a "robot artist."

Explain that robots need very specific instructions to create art. They must follow every single instruction exactly as it's given.

Show the students the instruction cards. Each card represents a single action. For example:

• A red circle icon for "Colour the square red."

• A blue square icon for "Colour the square blue."

• An arrow icon for "Move to the next square."

Have the students practice each action as you hold up the card. This helps them connect the symbol to the action.

Lay out a simple sequence of instruction cards on the floor or a table, such as: Red, Red, Blue, Move, Blue.

This is your first algorithm (a set of instructions).

Guide the students to follow the algorithm on their worksheets using the slideshow below.

Point to each block on the screen as you tell them what to do.

For example, point to the first red block and say, "Colour your first box red." Then, point to the blue block and say, "Now, colour your next box blue." When you get to the right arrow, instruct them, "don't colour this box!".

Shape Code Slideshow :root{ --bg:#f7f9ff; --panel:#ffffff; --ink:#0f172a; --muted:#64748b; --border:#dbe2ef; --accent:#1f2a62; --accent-2:#2a3a86; --red:#ef4444; --blue:#3b82f6; --green:#10b981; } html,body{height:100%;} body{ margin:0; background:var(--bg); color:var(--ink); font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial; display:grid; place-items:center; } .stage{ width:min(94vw, 1000px); border:1px solid var(--border); border-radius:16px; background:var(--panel); box-shadow:0 10px 30px rgba(2,6,23,.08); padding:20px 20px 16px; } .title{ text-align:center; font-weight:800; letter-spacing:.2px; margin:4px 0 16px; font-size:clamp(18px, 2.6vw, 28px); color:var(--muted); } .grid{ display:grid; grid-template-columns: repeat(5, 1fr); gap:12px; } .cell{ aspect-ratio:1/1; border:2px dashed var(--border); border-radius:12px; background:linear-gradient(180deg, #fbfdff, #f0f4ff); display:grid; place-items:center; overflow:hidden; } .cell svg{ width:68%; height:68%; } .controls{ display:flex; justify-content:center; align-items:center; gap:12px; margin-top:16px; } button{ border:0; border-radius:10px; padding:10px 16px; font-weight:800; color:#fff; background:var(--accent); cursor:pointer; box-shadow:0 6px 16px rgba(2,6,23,.12); transition:background .2s ease, transform .06s ease; } button:hover{ background:var(--accent-2); } button:active{ transform:translateY(1px); } .count{ color:var(--muted); font-weight:700; min-width:90px; text-align:center; } /* Accessible off-screen live region text */ .sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }

Shape Code – 5 Boxes

Next Code

Slide 1 / 4

// --- Slides (exactly as specified) --- // tokens: 'blue-circle', 'red-square', 'green-triangle', 'empty' const slides = [ // Slide 1 ['blue-circle','red-square','blue-circle','empty','red-square'], // Slide 2 ['red-square','empty','blue-circle','red-square','blue-circle'], // Slide 3 ['blue-circle','empty','blue-circle','empty','red-square'], // Slide 4 (introduces green triangle) ['blue-circle','red-square','green-triangle','empty','green-triangle'], ]; const gridEl = document.getElementById('grid'); const nextBtn = document.getElementById('nextBtn'); const counterEl = document.getElementById('counter'); const liveEl = document.getElementById('live'); let idx = 0; function shapeSVG(token){ // All shapes use a 100x100 viewBox to scale nicely inside each cell switch(token){ case 'blue-circle': return ``; case 'red-square': return ``; case 'green-triangle': return ``; default: // empty box return ``; } } function render(){ const current = slides[idx]; gridEl.innerHTML = ''; current.forEach(token => { const cell = document.createElement('div'); cell.className = 'cell'; cell.innerHTML = shapeSVG(token); gridEl.appendChild(cell); }); counterEl.textContent = `Slide ${idx+1} / ${slides.length}`; liveEl.textContent = `Showing slide ${idx+1}`; } nextBtn.addEventListener('click', () => { idx = (idx + 1) % slides.length; render(); }); // Keyboard support (Enter/Space to advance) document.addEventListener('keydown', (e) => { if (e.key === 'Enter' || e.key === ' ') { // prevent page scroll on Space when focused on body e.preventDefault(); nextBtn.click(); } if (e.key === 'ArrowRight') nextBtn.click(); }); // Initial paint render();