Advanced

Tutor model

i62 💰:9.4

i52 💰:7.9

🏆 i67 💰:62.5

i70 💰:125.0

i68 💰:125.0

🏆 i66 💰:75.0

i65 💰:125.0

i63 💰:62.5

i61 💰:75.0

i60 💰:9.4

i60 💰:37.5

i58 💰:62.5

i57 💰:22.5

i57 💰:37.5

i56 💰:45.0

⚡ i55 💰:11.25

i55 💰:37.5

i54 💰:62.5

i52 💰:35.0

i51 💰:37.5

i49 💰:15.0

i49 💰:62.5

i48 💰:11.3

i47 💰:7.5

i44 💰:25.0

i43 💰:37.5

i42 💰:187.5

i40 💰:5.0

i39 💰:100.0

i38 💰:37.5

i37 💰:11.0

i36 💰:187.5

i34 💰:12.5

i33 💰:37.5

i30 💰:1.0

i29 💰:1.5

i28 💰:150.0

i23 💰:20.0

i20 💰:4.0

i18 💰:1.0

i16 💰:25.0

i13 💰:1.5

Keep session private

What would you like to learn?

Override for the tutor's lesson content generation calls. Auto uses the system default (Claude Sonnet 5 for lesson text, Opus 5 for diagrams).

Lesson generation model

System default

i58 💰:18.8

i31 💰:11.0

i25 💰:31.3

Tutoring abilities

Imagine walking through a busy town where nobody says a word, but pictures on the walls tell you exactly what to do!

These pictures are called **symbols**, and they keep everyone safe.

How do signs speak to us without using many words?

Safety signs use bright colors so you can spot them quickly from far away.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <title>Safety Sign Colors</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: system-ui, -apple-system, sans-serif;
      background: #f8f9fa;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 12px;
      user-select: none;
    }

    .main-stage {
      width: 100%;
      max-width: 440px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
    }

    /* Tabs / Selector */
    .color-nav {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
      width: 100%;
    }

    .nav-btn {
      background: #ffffff;
      border: 2px solid #e6e6e6;
      border-radius: 10px;
      padding: 8px 4px;
      cursor: pointer;
      font-size: 14px;
      font-weight: 700;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      transition: all 0.25s ease;
      color: #6b7280;
    }

    .color-dot {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    }

    .dot-red { background: #e02424; }
    .dot-yellow { background: #e3a008; }
    .dot-blue { background: #1a56db; }
    .dot-green { background: #057a55; }

    .nav-btn.active {
      border-color: #1e2945;
      color: #1e2945;
      background: #ffffff;
      box-shadow: 0 4px 12px rgba(0,0,0,0.08);
      transform: translateY(-1px);
    }

    /* Sign Display Display Card */
    .display-box {
      width: 100%;
      height: 230px;
      background: #ffffff;
      border-radius: 16px;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .sign-panel {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
    }

    .sign-panel.active {
      opacity: 1;
      pointer-events: auto;
    }

    /* SVG Sign Shapes */
    .sign-svg {
      width: 120px;
      height: 120px;
      filter: drop-shadow(0 4px 8px rgba(0,0,0,0.12));
    }

    .action-badge {
      font-size: 18px;
      font-weight: 800;
      letter-spacing: 0.5px;
      padding: 6px 20px;
      border-radius: 999px;
    }

    .badge-red { background: #fde8e8; color: #9b1c1c; }
    .badge-yellow { background: #fef08a; color: #723b13; }
    .badge-blue { background: #e1effe; color: #1e429f; }
    .badge-green { background: #def7ec; color: #03543f; }

    /* Playback controls */
    .controls {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .play-btn {
      background: #ffffff;
      border: 1px solid #e6e6e6;
      border-radius: 20px;
      padding: 6px 14px;
      font-size: 13px;
      font-weight: 600;
      color: #4b5563;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
  </style>
</head>
<body>
  <div class="main-stage">
    
    <div class="color-nav">
      <button class="nav-btn active" data-idx="0">
        <span class="color-dot dot-red"></span>
        Red
      </button>
      <button class="nav-btn" data-idx="1">
        <span class="color-dot dot-yellow"></span>
        Yellow
      </button>
      <button class="nav-btn" data-idx="2">
        <span class="color-dot dot-blue"></span>
        Blue
      </button>
      <button class="nav-btn" data-idx="3">
        <span class="color-dot dot-green"></span>
        Green
      </button>
    </div>

    
    <div class="display-box">
      
      <div class="sign-panel active" id="panel-0">
        <svg class="sign-svg" viewBox="0 0 100 100">
          <polygon points="30,5 70,5 95,30 95,70 70,95 30,95 5,70 5,30" fill="#e02424" stroke="#ffffff" stroke-width="4"/>
          <text x="50" y="58" fill="#ffffff" font-size="20" font-weight="900" text-anchor="middle">STOP</text>
        </svg>
        <span class="action-badge badge-red">🛑 STOP</span>
      </div>

      
      <div class="sign-panel" id="panel-1">
        <svg class="sign-svg" viewBox="0 0 100 100">
          <polygon points="50,8 95,88 5,88" fill="#e3a008" stroke="#111827" stroke-width="4" stroke-linejoin="round"/>
          <text x="50" y="65" fill="#111827" font-size="36" font-weight="900" text-anchor="middle">!</text>
        </svg>
        <span class="action-badge badge-yellow">⚠️ CAUTION</span>
      </div>

      
      <div class="sign-panel" id="panel-2">
        <svg class="sign-svg" viewBox="0 0 100 100">
          <circle cx="50" cy="50" r="44" fill="#1a56db" stroke="#ffffff" stroke-width="4"/>
          <circle cx="50" cy="36" r="6" fill="#ffffff"/>
          <rect x="45" y="48" width="10" height="26" rx="3" fill="#ffffff"/>
        </svg>
        <span class="action-badge badge-blue">ℹ️ MUST DO</span>
      </div>

      
      <div class="sign-panel" id="panel-3">
        <svg class="sign-svg" viewBox="0 0 100 100">
          <rect x="8" y="8" width="84" height="84" rx="12" fill="#057a55" stroke="#ffffff" stroke-width="4"/>
          <polygon points="40,30 68,50 40,70" fill="#ffffff"/>
        </svg>
        <span class="action-badge badge-green">🏃 SAFE WAY</span>
      </div>
    </div>

    
    <div class="controls">
      <button class="play-btn" id="togglePlay">
        <span id="playIcon">⏸</span> Auto
      </button>
    </div>
  </div>

  <script>
    const panels = document.querySelectorAll('.sign-panel');
    const buttons = document.querySelectorAll('.nav-btn');
    const toggleBtn = document.getElementById('togglePlay');
    const playIcon = document.getElementById('playIcon');

    let current = 0;
    let playing = true;
    let timer = null;

    function show(index) {
      current = index;
      panels.forEach((p, i) => p.classList.toggle('active', i === index));
      buttons.forEach((b, i) => b.classList.toggle('active', i === index));
    }

    function next() {
      show((current + 1) % panels.length);
    }

    function startTimer() {
      stopTimer();
      timer = setInterval(next, 3200);
      playing = true;
      playIcon.textContent = '⏸';
    }

    function stopTimer() {
      if (timer) clearInterval(timer);
      timer = null;
      playing = false;
      playIcon.textContent = '▶';
    }

    buttons.forEach((btn, idx) => {
      btn.addEventListener('click', () => {
        show(idx);
        startTimer();
      });
    });

    toggleBtn.addEventListener('click', () => {
      if (playing) {
        stopTimer();
      } else {
        next();
        startTimer();
      }
    });

    startTimer();
  </script>
</body>
</html>

What should you do the moment you see a bright red sign?

A **stop sign** has eight sides and bright red paint. When drivers or walkers see it, they must freeze and look both ways.

A red circle with a slash shows an action you **Must Not Do**, like a **No Running** sign by a pool.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="aspect-ratio" content="4:3">
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: transparent;
    color: #1e2945;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    padding: 16px;
    user-select: none;
    -webkit-user-select: none;
  }

  .main-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    width: 100%;
    max-width: 380px;
  }

  /* Sign Display */
  .sign-frame {
    position: relative;
    width: 170px;
    height: 170px;
    background: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  }

  .prohibition-ring {
    position: absolute;
    inset: 0;
    border: 14px solid #ef4444;
    border-radius: 50%;
    pointer-events: none;
  }

  .prohibition-slash {
    position: absolute;
    width: 14px;
    height: 146px;
    background: #ef4444;
    transform: rotate(45deg);
    border-radius: 7px;
    pointer-events: none;
  }

  .sign-icon {
    font-size: 80px;
    line-height: 1;
    z-index: 0;
    transition: transform 0.25s ease;
  }

  /* Meaning Badge */
  .badge {
    background: #fee2e2;
    color: #b91c1c;
    font-size: 17px;
    font-weight: 700;
    padding: 6px 18px;
    border-radius: 20px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
  }

  /* Controls */
  .tabs {
    display: flex;
    gap: 8px;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
  }

  .tab-btn {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 8px 14px;
    font-size: 15px;
    font-weight: 600;
    color: #4b5563;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  }

  .tab-btn.active {
    background: #1e2945;
    border-color: #1e2945;
    color: #ffffff;
  }
</style>
</head>
<body>

<div class="main-stage">
  <div class="sign-frame">
    <div class="sign-icon" id="signIcon">🏃</div>
    <div class="prohibition-ring"></div>
    <div class="prohibition-slash"></div>
  </div>

  <div class="badge" id="signLabel">Must Not Run</div>

  <div class="tabs">
    <button class="tab-btn active" data-icon="🏃" data-label="Must Not Run">
      <span>🏃</span> Run
    </button>
    <button class="tab-btn" data-icon="🏊" data-label="Must Not Swim">
      <span>🏊</span> Swim
    </button>
    <button class="tab-btn" data-icon="📱" data-label="Must Not Use Phones">
      <span>📱</span> Phone
    </button>
    <button class="tab-btn" data-icon="🍔" data-label="Must Not Eat">
      <span>🍔</span> Eat
    </button>
  </div>
</div>

<script>
  const iconEl = document.getElementById('signIcon');
  const labelEl = document.getElementById('signLabel');
  const buttons = document.querySelectorAll('.tab-btn');

  buttons.forEach(btn => {
    btn.addEventListener('click', () => {
      buttons.forEach(b => b.classList.remove('active'));
      btn.classList.add('active');

      iconEl.textContent = btn.dataset.icon;
      labelEl.textContent = btn.dataset.label;
    });
  });
</script>

</body>
</html>

What if the floor is shiny and wet after being mopped?

Yellow signs warn you to **Be Careful** and look out for hazards.

A yellow **Slippery Floor** cone warns you to take gentle steps to prevent accidents.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <title>Reading Everyday Safety and Community Signs</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }

    body {
      background-color: #f8f9fa;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }

    .main-layout {
      width: 100%;
      max-width: 520px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    /* Top Selector Tabs */
    .sign-tabs {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
    }

    .tab-btn {
      background: #ffffff;
      border: 2px solid #e5e7eb;
      border-radius: 12px;
      padding: 8px 4px;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      font-size: 13px;
      font-weight: 600;
      color: #4b5563;
      transition: all 0.25s ease;
      user-select: none;
    }

    .tab-btn:hover {
      background: #f3f4f6;
    }

    .tab-btn.active {
      border-color: #22b7ff;
      background: #eff6ff;
      color: #1e2945;
      box-shadow: 0 2px 8px rgba(34, 183, 255, 0.2);
    }

    .tab-icon {
      font-size: 22px;
      line-height: 1;
    }

    /* Sign Display Card */
    .display-card {
      background: #ffffff;
      border: 1px solid #e5e7eb;
      border-radius: 16px;
      padding: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 14px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    }

    .sign-visual-wrap {
      width: 120px;
      height: 120px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }

    /* Sign Shapes */
    .sign-graphic {
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      transition: transform 0.3s ease, opacity 0.3s ease;
    }

    /* 1. Yellow Triangle */
    .sign-warning {
      width: 110px;
      height: 96px;
      background: #facc15;
      clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
      display: flex;
      align-items: flex-end;
      justify-content: center;
      padding-bottom: 12px;
    }
    .sign-warning-inner {
      font-size: 34px;
      color: #000000;
      line-height: 1;
    }

    /* 2. Green Rectangle */
    .sign-exit {
      width: 114px;
      height: 72px;
      background: #16a34a;
      border-radius: 10px;
      border: 3px solid #ffffff;
      box-shadow: 0 0 0 2px #16a34a;
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      font-size: 18px;
      letter-spacing: 1px;
    }

    /* 3. Blue Square */
    .sign-restroom {
      width: 88px;
      height: 88px;
      background: #0284c7;
      border-radius: 14px;
      border: 3px solid #ffffff;
      box-shadow: 0 0 0 2px #0284c7;
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 40px;
    }

    /* 4. Red Octagon */
    .sign-stop {
      width: 90px;
      height: 90px;
      background: #dc2626;
      clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      border: 3px solid #ffffff;
    }

    /* Information Tiles */
    .info-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      width: 100%;
      gap: 8px;
    }

    .info-box {
      background: #f8f9fa;
      border-radius: 10px;
      padding: 8px;
      text-align: center;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .info-label {
      font-size: 11px;
      text-transform: uppercase;
      font-weight: 700;
      color: #6b7280;
      letter-spacing: 0.5px;
    }

    .info-value {
      font-size: 13px;
      font-weight: 700;
      color: #1e2945;
    }

    .action-badge {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      width: 100%;
      padding: 10px;
      border-radius: 10px;
      font-size: 14px;
      font-weight: 700;
      background: #f3f4f6;
      color: #1f2937;
    }

    .action-icon {
      font-size: 18px;
    }
  </style>
</head>
<body>

  <div class="main-layout">
    
    <div class="sign-tabs" role="tablist">
      <button class="tab-btn active" onclick="showSign(0)" id="tab-0">
        <span class="tab-icon">⚠️</span>
        <span>Wet Floor</span>
      </button>
      <button class="tab-btn" onclick="showSign(1)" id="tab-1">
        <span class="tab-icon">🚪</span>
        <span>Exit</span>
      </button>
      <button class="tab-btn" onclick="showSign(2)" id="tab-2">
        <span class="tab-icon">🚻</span>
        <span>Restroom</span>
      </button>
      <button class="tab-btn" onclick="showSign(3)" id="tab-3">
        <span class="tab-icon">🛑</span>
        <span>Stop</span>
      </button>
    </div>

    
    <div class="display-card">
      <div class="sign-visual-wrap" id="signVisual">
        <div class="sign-graphic sign-warning">
          <span class="sign-warning-inner">⚠️</span>
        </div>
      </div>

      
      <div class="info-grid">
        <div class="info-box">
          <span class="info-label">Color</span>
          <span class="info-value" id="colorText">Yellow</span>
        </div>
        <div class="info-box">
          <span class="info-label">Shape</span>
          <span class="info-value" id="shapeText">Triangle</span>
        </div>
        <div class="info-box">
          <span class="info-label">Meaning</span>
          <span class="info-value" id="meaningText">Caution</span>
        </div>
      </div>

      
      <div class="action-badge" id="actionBadge" style="background:#fef9c3; color:#854d0e;">
        <span class="action-icon" id="actionIcon">🚶</span>
        <span id="actionText">Take slow, gentle steps</span>
      </div>
    </div>
  </div>

  <script>
    const signs = [
      {
        html: '<div class="sign-graphic sign-warning"><span class="sign-warning-inner">⚠️</span></div>',
        color: 'Yellow',
        shape: 'Triangle',
        meaning: 'Warning / Hazard',
        action: 'Take slow, gentle steps',
        icon: '🚶',
        bg: '#fef9c3',
        textColor: '#854d0e'
      },
      {
        html: '<div class="sign-graphic sign-exit"><span>EXIT</span> ➔</div>',
        color: 'Green',
        shape: 'Rectangle',
        meaning: 'Safe Way Out',
        action: 'Follow path to exit door',
        icon: '🚪',
        bg: '#dcfce7',
        textColor: '#15803d'
      },
      {
        html: '<div class="sign-graphic sign-restroom">🚻</div>',
        color: 'Blue',
        shape: 'Square',
        meaning: 'Toilets / Facilities',
        action: 'Public washroom location',
        icon: '🚰',
        bg: '#e0f2fe',
        textColor: '#0369a1'
      },
      {
        html: '<div class="sign-graphic sign-stop">STOP</div>',
        color: 'Red',
        shape: 'Octagon',
        meaning: 'Halt / Danger',
        action: 'Stop completely & check safety',
        icon: '✋',
        bg: '#fee2e2',
        textColor: '#b91c1c'
      }
    ];

    function showSign(index) {
      // Update Tab Styles
      for (let i = 0; i < 4; i++) {
        const tab = document.getElementById('tab-' + i);
        if (i === index) {
          tab.classList.add('active');
        } else {
          tab.classList.remove('active');
        }
      }

      // Update Card Content
      const data = signs[index];
      document.getElementById('signVisual').innerHTML = data.html;
      document.getElementById('colorText').textContent = data.color;
      document.getElementById('shapeText').textContent = data.shape;
      document.getElementById('meaningText').textContent = data.meaning;
      
      const badge = document.getElementById('actionBadge');
      badge.style.background = data.bg;
      badge.style.color = data.textColor;
      document.getElementById('actionIcon').textContent = data.icon;
      document.getElementById('actionText').textContent = data.action;
    }
  </script>
</body>
</html>

Where do you look when you need to find a door or a restroom?

Green signs mark safe places, such as an **Emergency Exit** door or a **First Aid** medical kit.

Blue circles tell you rules you **Must Do**, while blue rectangles give helpful community directions.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      font-family: system-ui, -apple-system, sans-serif;
      background: transparent;
      color: #1e2945;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }
    .grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      width: 100%;
      max-width: 520px;
    }
    .sign-card {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      padding: 16px 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      cursor: pointer;
      user-select: none;
      transition: border-color 0.2s, box-shadow 0.2s;
    }
    .sign-card.active {
      border-color: #0284c7;
      box-shadow: 0 4px 12px rgba(2, 132, 199, 0.15);
    }
    .sign-card:hover {
      opacity: 0.95;
    }
    .sign-preview {
      width: 100px;
      height: 100px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 12px;
    }
    .blue-circle {
      width: 90px;
      height: 90px;
      background-color: #0284c7;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #ffffff;
      font-size: 38px;
      box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
    }
    .blue-rect {
      width: 94px;
      height: 74px;
      background-color: #0284c7;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #ffffff;
      font-size: 36px;
      box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
    }
    .sign-title {
      font-size: 17px;
      font-weight: 700;
      color: #0f172a;
      margin-bottom: 4px;
    }
    .badge {
      display: inline-block;
      font-size: 13px;
      font-weight: 700;
      padding: 4px 10px;
      border-radius: 999px;
      margin-top: 4px;
    }
    .badge-mandatory {
      background: #e0f2fe;
      color: #0369a1;
    }
    .badge-info {
      background: #f1f5f9;
      color: #475569;
    }
    .controls {
      display: flex;
      gap: 8px;
      margin-top: 14px;
      justify-content: center;
    }
    .tab-btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      padding: 6px 12px;
      font-size: 13px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
    }
    .tab-btn.active {
      background: #0284c7;
      border-color: #0284c7;
      color: #ffffff;
    }
    .tab-btn:hover {
      opacity: 0.9;
    }
  </style>
</head>
<body>

  <div class="grid">
    <div class="sign-card active" id="circleCard" onclick="selectType(0)">
      <div class="sign-preview">
        <div class="blue-circle" id="circleIcon">➔</div>
      </div>
      <div class="sign-title">Circle</div>
      <span class="badge badge-mandatory">MUST DO</span>
    </div>

    <div class="sign-card" id="rectCard" onclick="selectType(1)">
      <div class="sign-preview">
        <div class="blue-rect" id="rectIcon">🅿️</div>
      </div>
      <div class="sign-title">Rectangle</div>
      <span class="badge badge-info">DIRECTIONS</span>
    </div>
  </div>

  <div class="controls">
    <button class="tab-btn active" id="opt1" onclick="setExample(0)">Set 1</button>
    <button class="tab-btn" id="opt2" onclick="setExample(1)">Set 2</button>
    <button class="tab-btn" id="opt3" onclick="setExample(2)">Set 3</button>
  </div>

  <script src="{{VENDOR_CDN}}/classace-diagram.js"></script>
  <script>
    const examples = [
      { circle: '➔', rect: '🅿️' },
      { circle: '🚲', rect: 'ℹ️' },
      { circle: '🚶', rect: '🏥' }
    ];

    let currentEx = 0;

    function selectType(index) {
      const circleCard = $('#circleCard');
      const rectCard = $('#rectCard');
      if (index === 0) {
        circleCard.classList.add('active');
        rectCard.classList.remove('active');
      } else {
        rectCard.classList.add('active');
        circleCard.classList.remove('active');
      }
    }

    function setExample(index) {
      currentEx = index;
      $('#circleIcon').textContent = examples[index].circle;
      $('#rectIcon').textContent = examples[index].rect;

      $$('.tab-btn').forEach((btn, i) => {
        if (i === index) {
          btn.classList.add('active');
        } else {
          btn.classList.remove('active');
        }
      });
    }
  </script>
</body>
</html>

Geometric shapes reinforce what a sign means before you even read the words.

**Circles** give orders, **triangles** warn of hazards, and **rectangles** provide general information.

An illuminated **Red Standing Figure** means stop and wait patiently on the pavement.

When the illuminated **Green Walking Figure** appears, check that all traffic has stopped, then walk safely across.

Green signs also mark safety equipment, such as a **First Aid** station to help someone who is hurt.

Let us test our sign-reading skills on a walk through school.

Shapes reinforce a sign's message. A red circle means **Must Not Do** (such as a **No Running** sign), while a blue circle shows an action you **Must Do**.

Triangles warn of potential danger or hazards, while rectangles and squares provide general directions and information.

An illuminated **Red Standing Figure** signals that you must stop and wait on the pavement.

When you see an illuminated **Green Walking Figure**, check that all traffic has stopped, then walk safely across.

Leo sees a yellow cone with water drops on the hallway floor. Should he run as fast as he can, or walk carefully around it?

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <title>Safety Sign: Wet Floor Caution</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #f8fafc;
      color: #1e293b;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      padding: 12px;
      user-select: none;
    }

    .scene-container {
      width: 100%;
      max-width: 480px;
      height: 240px;
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 16px;
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    }

    /* Floor tiles pattern */
    .floor {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 120px;
      background: linear-gradient(to bottom, #f1f5f9 0%, #e2e8f0 100%);
      border-top: 2px solid #cbd5e1;
    }

    .floor-lines {
      position: absolute;
      width: 100%;
      height: 100%;
      background-image: 
        repeating-linear-gradient(90deg, transparent 0, transparent 58px, #cbd5e1 58px, #cbd5e1 60px),
        repeating-linear-gradient(0deg, transparent 0, transparent 38px, #cbd5e1 38px, #cbd5e1 40px);
      opacity: 0.6;
    }

    /* Hazard Zone */
    .hazard-zone {
      position: absolute;
      left: 48%;
      bottom: 22px;
      transform: translateX(-50%);
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .puddle {
      width: 110px;
      height: 38px;
      background: #bae6fd;
      border-radius: 50%;
      position: absolute;
      bottom: -4px;
      opacity: 0.85;
      border: 2px dashed #38bdf8;
    }

    .cone {
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .sign-icon {
      font-size: 38px;
      filter: drop-shadow(0 4px 6px rgba(0,0,0,0.15));
    }

    .sign-label {
      font-size: 11px;
      font-weight: 800;
      background: #facc15;
      color: #713f12;
      padding: 2px 8px;
      border-radius: 6px;
      letter-spacing: 0.5px;
      border: 1px solid #eab308;
      margin-top: -4px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.08);
    }

    /* Actor: Leo */
    .actor {
      position: absolute;
      bottom: 30px;
      left: 10%;
      font-size: 40px;
      z-index: 10;
      transition: all 0.9s cubic-bezier(0.25, 1, 0.5, 1);
      transform-origin: bottom center;
    }

    .status-badge {
      position: absolute;
      top: 14px;
      padding: 6px 14px;
      border-radius: 20px;
      font-size: 14px;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: all 0.3s ease;
      opacity: 0;
      transform: translateY(-8px);
    }

    .status-badge.show {
      opacity: 1;
      transform: translateY(0);
    }

    .status-badge.safe {
      background: #dcfce7;
      color: #15803d;
      border: 1px solid #86efac;
    }

    .status-badge.slip {
      background: #fef2f2;
      color: #b91c1c;
      border: 1px solid #fca5a5;
    }

    /* Safe path trace dots */
    .path-guide {
      position: absolute;
      width: 100%;
      height: 100%;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.4s ease;
    }

    .path-guide.show {
      opacity: 1;
    }

    /* Buttons layout */
    .actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      width: 100%;
      max-width: 480px;
      margin-top: 12px;
    }

    .btn {
      appearance: none;
      border: 2px solid #e2e8f0;
      background: #ffffff;
      border-radius: 12px;
      padding: 12px 14px;
      font-size: 15px;
      font-weight: 700;
      color: #334155;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.04);
      transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
    }

    .btn:active {
      transform: translateY(2px);
    }

    .btn-icon {
      font-size: 24px;
    }

    .btn.selected-safe {
      border-color: #22c55e;
      background: #f0fdf4;
      color: #166534;
      box-shadow: 0 0 0 2px #bbf7d0;
    }

    .btn.selected-slip {
      border-color: #ef4444;
      background: #fef2f2;
      color: #991b1b;
      box-shadow: 0 0 0 2px #fecaca;
    }

    /* Reset button */
    .btn-reset {
      grid-column: span 2;
      background: #f8fafc;
      border: 1px dashed #cbd5e1;
      padding: 8px;
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
      border-radius: 8px;
      cursor: pointer;
      display: none;
      justify-content: center;
      align-items: center;
      gap: 6px;
    }

    .btn-reset.show {
      display: flex;
    }
  </style>
</head>
<body>

  <div class="scene-container">
    <div class="floor">
      <div class="floor-lines"></div>
    </div>

    
    <svg class="path-guide" id="pathGuide" viewBox="0 0 480 240">
      <path d="M 50 170 C 130 170, 160 215, 240 215 C 320 215, 350 170, 420 170" 
            fill="none" 
            stroke="#22c55e" 
            stroke-width="3" 
            stroke-dasharray="6,6" />
    </svg>

    
    <div class="hazard-zone">
      <div class="puddle"></div>
      <div class="cone">
        <div class="sign-icon">⚠️</div>
        <div class="sign-label">CAUTION</div>
      </div>
    </div>

    
    <div class="actor" id="leo">👦</div>

    
    <div class="status-badge" id="statusBadge"></div>
  </div>

  <div class="actions">
    <button class="btn" id="runBtn" onclick="handleAction('run')">
      <span class="btn-icon">🏃💨</span>
      <span>Run fast</span>
    </button>
    <button class="btn" id="walkBtn" onclick="handleAction('walk')">
      <span class="btn-icon">🚶✨</span>
      <span>Walk carefully around</span>
    </button>
    <button class="btn-reset" id="resetBtn" onclick="resetScene()">
      <span>↺ Try again</span>
    </button>
  </div>

  <script>
    const leo = document.getElementById('leo');
    const statusBadge = document.getElementById('statusBadge');
    const pathGuide = document.getElementById('pathGuide');
    const runBtn = document.getElementById('runBtn');
    const walkBtn = document.getElementById('walkBtn');
    const resetBtn = document.getElementById('resetBtn');

    let busy = false;

    function handleAction(action) {
      if (busy) return;
      busy = true;

      // Lock buttons
      runBtn.style.pointerEvents = 'none';
      walkBtn.style.pointerEvents = 'none';
      resetBtn.classList.remove('show');

      if (action === 'walk') {
        walkBtn.classList.add('selected-safe');
        pathGuide.classList.add('show');

        // Step 1: Walk around front of puddle
        leo.style.transition = 'all 0.6s ease-in-out';
        leo.style.left = '45%';
        leo.style.bottom = '12px';

        setTimeout(() => {
          // Step 2: Reach other side safely
          leo.style.left = '82%';
          leo.style.bottom = '30px';
        }, 650);

        setTimeout(() => {
          leo.textContent = '👦✨';
          statusBadge.className = 'status-badge safe show';
          statusBadge.innerHTML = '✓ Safe & Careful!';
          resetBtn.classList.add('show');
          busy = false;

          if (window.answerCorrect) {
            window.answerCorrect({
              answer: 'Walk carefully',
              explanation: 'Yellow caution signs tell us to slow down and avoid wet spots.'
            });
          }
        }, 1350);

      } else if (action === 'run') {
        runBtn.classList.add('selected-slip');

        // Move directly into puddle fast
        leo.style.transition = 'all 0.4s ease-in';
        leo.style.left = '42%';
        leo.style.bottom = '30px';

        setTimeout(() => {
          // Slip reaction
          leo.textContent = '😨';
          leo.style.transition = 'transform 0.3s ease';
          leo.style.transform = 'rotate(-35deg) translateY(-8px)';
        }, 400);

        setTimeout(() => {
          statusBadge.className = 'status-badge slip show';
          statusBadge.innerHTML = '⚠️ Slippery!';
          resetBtn.classList.add('show');
          busy = false;

          if (window.answerIncorrect) {
            window.answerIncorrect({
              answer: 'Run fast',
              feedback: 'Running on wet floors can cause slips! Walk carefully around yellow signs.'
            });
          }
        }, 800);
      }
    }

    function resetScene() {
      busy = true;
      statusBadge.className = 'status-badge';
      pathGuide.classList.remove('show');
      runBtn.classList.remove('selected-slip');
      walkBtn.classList.remove('selected-safe');
      resetBtn.classList.remove('show');

      leo.style.transition = 'all 0.4s ease';
      leo.style.left = '10%';
      leo.style.bottom = '30px';
      leo.style.transform = 'none';
      leo.textContent = '👦';

      setTimeout(() => {
        runBtn.style.pointerEvents = 'auto';
        walkBtn.style.pointerEvents = 'auto';
        busy = false;
      }, 450);
    }
  </script>
</body>
</html>

Because yellow means **caution**, Leo walks with careful steps and stays safe.

Next time you take a walk, look around and see how many colorful safety signs you can spot!

math

Reading Everyday Safety and Community Signs. Recognize and explain the meaning of common environmental symbols and warning signs.

Early Level Road and Community Safety: Signs and Staying Safe

Go Safe with Ziggy: Early Level (ELC and P1) Signs and Road Safety

Curriculum for Excellence Numeracy and Mathematics Benchmarks: MNU 0-20c Data and Information Handling

To support P1 (Early Level) learners with MNU 0-20c, instruction must be experiential and multi-sensory. Effective pedagogical strategies include conducting an indoor/outdoor 'Sign Safari' around the school grounds, using role-play with floor mats (acting as pedestrians following red/green person signals and crossing rules), and utilizing physical sorting trays where children categorize signs by shape and colour function. Emphasize that visual literacy empowers independence and safe decision-making in everyday routines.

Reading Everyday Safety and Community Signs

The Color Secret

Red Means Stop

Yellow Means Caution