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 reading a book that only says: "Pip found a surprise."

Is the surprise big or small? Is it a puppy, a shiny rock, or a birthday cake?

An **illustrator** draws pictures to show you all the fun details that the words leave out.

<!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>How Pictures Help Tell a Story</title>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    font-family: system-ui, -apple-system, sans-serif;
    color: #1e2945;
    background: #f8f9fa;
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100%;
  }

  .diagram {
    width: 100%;
    max-width: 440px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  /* Words bar */
  .words-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 10px 16px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    border: 1px solid #e6e6e6;
  }
  .words-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280;
    font-weight: 600;
    margin-bottom: 2px;
  }
  .story-words {
    font-size: 18px;
    font-weight: 700;
    color: #1e2945;
  }

  /* Illustration stage */
  .stage-card {
    position: relative;
    background: #ffffff;
    border-radius: 16px;
    height: 190px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
    border: 1px solid #e6e6e6;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: background 0.4s ease;
  }

  .scene {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.94);
    transition: opacity 0.35s ease, transform 0.35s ease;
    pointer-events: none;
    padding: 16px;
  }
  .scene.active {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
  }

  .backdrop-emoji {
    font-size: 32px;
    margin-bottom: 4px;
    display: flex;
    gap: 12px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.08));
  }
  .char-emoji {
    font-size: 56px;
    line-height: 1;
    margin: 4px 0;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));
  }
  .detail-badge {
    font-size: 13px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
    margin-top: 6px;
    background: rgba(255,255,255,0.9);
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
  }

  /* Scene-specific themes */
  .scene-party { background: linear-gradient(180deg, #fff3d6 0%, #ffe0eb 100%); }
  .scene-party .detail-badge { color: #d946ef; }

  .scene-rain { background: linear-gradient(180deg, #dbeafe 0%, #bfdbfe 100%); }
  .scene-rain .detail-badge { color: #2563eb; }

  .scene-hungry { background: linear-gradient(180deg, #fef3c7 0%, #fed7aa 100%); }
  .scene-hungry .detail-badge { color: #d97706; }

  /* Tab controls */
  .controls {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  .tab-btn {
    border: none;
    background: #ffffff;
    border-radius: 12px;
    padding: 8px 4px;
    font-size: 13px;
    font-weight: 600;
    color: #4b5563;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    border: 2px solid transparent;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
  }
  .tab-btn span {
    font-size: 18px;
  }
  .tab-btn.active {
    border-color: #22b7ff;
    color: #0284c7;
    background: #f0f9ff;
  }
</style>
</head>
<body>

<div class="diagram">
  
  <div class="words-card">
    <div class="words-label">Words in story</div>
    <div class="story-words">"Leo waited by the door."</div>
  </div>

  
  <div class="stage-card" id="stage">
    
    <div class="scene scene-party active" id="scene-0">
      <div class="backdrop-emoji">🎈 🎂 🎁</div>
      <div class="char-emoji">🐶🎉</div>
      <div class="detail-badge">Excited!</div>
    </div>

    
    <div class="scene scene-rain" id="scene-1">
      <div class="backdrop-emoji">🌧️ ⚡ 🌧️</div>
      <div class="char-emoji">🐶💧</div>
      <div class="detail-badge">Cold & Wet!</div>
    </div>

    
    <div class="scene scene-hungry" id="scene-2">
      <div class="backdrop-emoji">⏰ 🥣 🦴</div>
      <div class="char-emoji">🐶🥺</div>
      <div class="detail-badge">Hungry!</div>
    </div>
  </div>

  
  <div class="controls">
    <button class="tab-btn active" onclick="setPic(0)">
      <span>🎉</span>Party
    </button>
    <button class="tab-btn" onclick="setPic(1)">
      <span>🌧️</span>Rain
    </button>
    <button class="tab-btn" onclick="setPic(2)">
      <span>🦴</span>Hungry
    </button>
  </div>
</div>

<script>
  function setPic(index) {
    const scenes = document.querySelectorAll('.scene');
    const buttons = document.querySelectorAll('.tab-btn');

    scenes.forEach((sc, i) => {
      sc.classList.toggle('active', i === index);
    });

    buttons.forEach((btn, i) => {
      btn.classList.toggle('active', i === index);
    });
  }
</script>
</body>
</html>

Can you tell how a character feels inside without reading a single word?

A picture shows a character's **feelings** through their face, eyes, and body.

<!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>Picture Clues: Character Feelings</title>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #1e2945;
    background: transparent;
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    min-height: 100%;
    user-select: none;
    -webkit-user-select: none;
  }

  .nav-bar {
    display: flex;
    gap: 8px;
    width: 100%;
    max-width: 440px;
    justify-content: center;
    margin-bottom: 8px;
  }

  .mood-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 6px;
    border: 2px solid transparent;
    border-radius: 12px;
    background: #f1f5f9;
    color: #475569;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
  }

  .mood-btn.active {
    background: #ffffff;
    color: #0284c7;
    border-color: #22b7ff;
    box-shadow: 0 4px 12px rgba(34, 183, 255, 0.2);
  }

  .stage {
    position: relative;
    width: 100%;
    max-width: 440px;
    height: 310px;
    border-radius: 16px;
    background: #f8fafc;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.4s ease;
  }

  .stage.happy { background: #eff6ff; }
  .stage.sad { background: #f1f5f9; }
  .stage.excited { background: #fefce8; }
  .stage.scared { background: #faf5ff; }

  /* SVG Character Styling */
  .char-svg {
    width: 100%;
    height: 100%;
    max-height: 290px;
  }

  .part {
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform-origin: center;
  }

  /* Annotation Badges */
  .badge {
    position: absolute;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(4px);
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 4px 10px;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    display: flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    pointer-events: none;
  }

  .badge-face {
    top: 32px;
    left: 20px;
  }

  .badge-body {
    bottom: 60px;
    right: 20px;
  }

  .pointer-line {
    position: absolute;
    stroke: #94a3b8;
    stroke-width: 1.5;
    stroke-dasharray: 3 3;
    pointer-events: none;
  }
</style>
</head>
<body>

  <div class="nav-bar">
    <button class="mood-btn active" onclick="setMood('happy')"><span>😊</span> Happy</button>
    <button class="mood-btn" onclick="setMood('sad')"><span>😢</span> Sad</button>
    <button class="mood-btn" onclick="setMood('excited')"><span>🌟</span> Excited</button>
    <button class="mood-btn" onclick="setMood('scared')"><span>😨</span> Scared</button>
  </div>

  <div class="stage happy" id="stage">
    
    <div class="badge badge-face">
      <span>👁️</span> Face & Eyes
    </div>

    
    <div class="badge badge-body">
      <span>🧍</span> Body Clues
    </div>

    <svg class="char-svg" viewBox="0 0 400 320">
      <defs>
        <radialGradient id="moodGlow" cx="50%" cy="50%" r="50%">
          <stop id="glowColor" offset="0%" stop-color="#38bdf8" stop-opacity="0.3"/>
          <stop offset="100%" stop-color="#ffffff" stop-opacity="0"/>
        </radialGradient>
      </defs>

      
      <circle id="aura" cx="200" cy="160" r="130" fill="url(#moodGlow)" />

      
      <path d="M 125 50 Q 160 50 175 75" fill="none" stroke="#94a3b8" stroke-width="1.5" stroke-dasharray="3 3" />
      <path d="M 285 240 Q 245 240 230 210" fill="none" stroke="#94a3b8" stroke-width="1.5" stroke-dasharray="3 3" />

      
      <ellipse cx="200" cy="285" rx="55" ry="10" fill="#cbd5e1" opacity="0.6" />

      
      <g id="legs" class="part">
        <line x1="185" y1="230" x2="185" y2="280" stroke="#334155" stroke-width="10" stroke-linecap="round" />
        <line x1="215" y1="230" x2="215" y2="280" stroke="#334155" stroke-width="10" stroke-linecap="round" />
      </g>

      
      <g id="torsoGroup" class="part" transform="translate(0, 0)">
        <path id="torso" d="M 175 130 Q 200 125 225 130 L 220 230 Q 200 235 180 230 Z" fill="#22b7ff" />
      </g>

      
      <g id="armsGroup" class="part">
        
        <path id="leftArm" d="M 175 138 Q 145 170 140 195" fill="none" stroke="#22b7ff" stroke-width="12" stroke-linecap="round" />
        
        <path id="rightArm" d="M 225 138 Q 255 170 260 195" fill="none" stroke="#22b7ff" stroke-width="12" stroke-linecap="round" />
      </g>

      
      <g id="headGroup" class="part" transform="translate(0, 0)">
        
        <circle cx="200" cy="85" r="42" fill="#fed7aa" />

        
        <path d="M 160 80 Q 200 35 240 80 Q 220 50 175 55 Z" fill="#92400e" />

        
        <path id="leftBrow" d="M 180 68 Q 188 64 195 68" fill="none" stroke="#78350f" stroke-width="3.5" stroke-linecap="round" />
        <path id="rightBrow" d="M 205 68 Q 212 64 220 68" fill="none" stroke="#78350f" stroke-width="3.5" stroke-linecap="round" />

        
        <g id="eyes">
          <ellipse id="leftEye" cx="187" cy="80" rx="3.5" ry="4.5" fill="#1e293b" />
          <ellipse id="rightEye" cx="213" cy="80" rx="3.5" ry="4.5" fill="#1e293b" />
        </g>

        
        <circle id="leftCheek" cx="178" cy="92" r="5" fill="#f43f5e" opacity="0.3" />
        <circle id="rightCheek" cx="222" cy="92" r="5" fill="#f43f5e" opacity="0.3" />

        
        <path id="mouth" d="M 188 98 Q 200 114 212 98" fill="none" stroke="#78350f" stroke-width="3.5" stroke-linecap="round" />

        
        <g id="effects"></g>
      </g>
    </svg>
  </div>

<script>
  const moods = {
    happy: {
      leftBrow: "M 180 68 Q 188 62 195 67",
      rightBrow: "M 205 67 Q 212 62 220 68",
      leftEye: { rx: 3.5, ry: 4.5, cy: 80 },
      rightEye: { rx: 3.5, ry: 4.5, cy: 80 },
      mouth: "M 188 96 Q 200 115 212 96",
      mouthFill: "#be123c",
      headTransform: "translate(0, 0) rotate(0 200 85)",
      torsoTransform: "translate(0, 0) rotate(0 200 180)",
      leftArm: "M 175 138 Q 140 160 135 180",
      rightArm: "M 225 138 Q 260 160 265 180",
      glow: "#38bdf8",
      cheeks: 0.35,
      effects: ""
    },
    sad: {
      leftBrow: "M 180 64 Q 188 68 195 72",
      rightBrow: "M 205 72 Q 212 68 220 64",
      leftEye: { rx: 3.5, ry: 3, cy: 83 },
      rightEye: { rx: 3.5, ry: 3, cy: 83 },
      mouth: "M 190 108 Q 200 96 210 108",
      mouthFill: "none",
      headTransform: "translate(0, 8) rotate(4 200 85)",
      torsoTransform: "translate(0, 6) rotate(2 200 180)",
      leftArm: "M 175 142 Q 165 185 160 215",
      rightArm: "M 225 142 Q 235 185 240 215",
      glow: "#94a3b8",
      cheeks: 0,
      effects: '<path d="M 182 88 C 180 95 178 98 178 102 C 178 105 182 105 182 102 Z" fill="#60a5fa" />'
    },
    excited: {
      leftBrow: "M 178 62 Q 188 56 196 62",
      rightBrow: "M 204 62 Q 212 56 222 62",
      leftEye: { rx: 5, ry: 6, cy: 78 },
      rightEye: { rx: 5, ry: 6, cy: 78 },
      mouth: "M 186 94 Q 200 120 214 94 Z",
      mouthFill: "#be123c",
      headTransform: "translate(0, -6) rotate(0 200 85)",
      torsoTransform: "translate(0, -4) rotate(0 200 180)",
      leftArm: "M 175 138 Q 130 110 120 80",
      rightArm: "M 225 138 Q 270 110 280 80",
      glow: "#facc15",
      cheeks: 0.5,
      effects: '<text x="135" y="70" font-size="20">✨</text><text x="250" y="70" font-size="20">✨</text>'
    },
    scared: {
      leftBrow: "M 180 62 Q 188 68 196 64",
      rightBrow: "M 204 64 Q 212 68 220 62",
      leftEye: { rx: 6, ry: 6, cy: 80 },
      rightEye: { rx: 6, ry: 6, cy: 80 },
      mouth: "M 190 102 Q 195 98 200 102 Q 205 106 210 102",
      mouthFill: "none",
      headTransform: "translate(0, 4) rotate(-3 200 85)",
      torsoTransform: "translate(0, 2) rotate(-1 200 180)",
      leftArm: "M 175 142 Q 185 170 195 175",
      rightArm: "M 225 142 Q 215 170 205 175",
      glow: "#c084fc",
      cheeks: 0,
      effects: '<path d="M 228 75 C 227 71 230 68 232 68 C 234 68 236 71 234 75 Z" fill="#38bdf8" />'
    }
  };

  function setMood(key) {
    const data = moods[key];
    if (!data) return;

    // Update buttons
    const btns = document.querySelectorAll('.mood-btn');
    btns.forEach(b => {
      if (b.innerText.toLowerCase().includes(key)) {
        b.classList.add('active');
      } else {
        b.classList.remove('active');
      }
    });

    // Update stage class
    const stage = document.getElementById('stage');
    stage.className = 'stage ' + key;

    // Update Face
    document.getElementById('leftBrow').setAttribute('d', data.leftBrow);
    document.getElementById('rightBrow').setAttribute('d', data.rightBrow);

    const le = document.getElementById('leftEye');
    le.setAttribute('rx', data.leftEye.rx);
    le.setAttribute('ry', data.leftEye.ry);
    le.setAttribute('cy', data.leftEye.cy);

    const re = document.getElementById('rightEye');
    re.setAttribute('rx', data.rightEye.rx);
    re.setAttribute('ry', data.rightEye.ry);
    re.setAttribute('cy', data.rightEye.cy);

    const mouth = document.getElementById('mouth');
    mouth.setAttribute('d', data.mouth);
    mouth.setAttribute('fill', data.mouthFill);

    document.getElementById('leftCheek').setAttribute('opacity', data.cheeks);
    document.getElementById('rightCheek').setAttribute('opacity', data.cheeks);

    // Update Transforms
    document.getElementById('headGroup').setAttribute('transform', data.headTransform);
    document.getElementById('torsoGroup').setAttribute('transform', data.torsoTransform);

    // Update Arms
    document.getElementById('leftArm').setAttribute('d', data.leftArm);
    document.getElementById('rightArm').setAttribute('d', data.rightArm);

    // Effects & Glow
    document.getElementById('glowColor').setAttribute('stop-color', data.glow);
    document.getElementById('effects').innerHTML = data.effects;
  }
</script>
</body>
</html>

Just looking at Ben's face tells you the whole mood before you finish reading.

What happens when the picture shows a secret that the words do not even mention?

Pictures often give us hidden **clues** about what is happening in the story.

<!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>How Pictures Give Clues</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      background: #f8f9fa;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 12px;
      min-height: 100%;
      user-select: none;
    }

    .main {
      width: 100%;
      max-width: 480px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    /* Story Text Banner */
    .story-text {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      padding: 8px 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-shadow: 0 2px 6px rgba(0,0,0,0.04);
    }
    .story-label {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #64748b;
    }
    .story-quote {
      font-size: 15px;
      font-weight: 700;
      color: #0f172a;
    }

    /* Picture Stage */
    .picture-frame {
      position: relative;
      width: 100%;
      height: 220px;
      background: linear-gradient(180deg, #1e1b4b 0%, #312e81 55%, #14532d 55%, #166534 100%);
      border-radius: 14px;
      overflow: hidden;
      box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    }

    /* Picture Elements */
    .window-scene {
      position: absolute;
      left: 12%;
      bottom: 45%;
      width: 54px;
      height: 70px;
      background: #fef08a;
      border: 3px solid #78350f;
      border-radius: 4px;
      box-shadow: 0 0 16px rgba(254, 240, 138, 0.4);
    }
    .window-sill {
      position: absolute;
      bottom: -6px;
      left: -6px;
      right: -6px;
      height: 6px;
      background: #451a03;
      border-radius: 2px;
    }
    .silhouette {
      position: absolute;
      bottom: 0;
      left: 12px;
      font-size: 32px;
      line-height: 1;
    }

    /* Hotspot Clues */
    .clue-spot {
      position: absolute;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.25s ease, filter 0.25s ease;
    }
    .clue-spot:active {
      transform: scale(0.95);
    }

    /* Moon Clue */
    .spot-1 {
      top: 14px;
      right: 18px;
      font-size: 38px;
    }

    /* Bush & Puppy Clue */
    .bush {
      position: absolute;
      right: 14%;
      bottom: 22%;
      font-size: 42px;
      z-index: 1;
    }
    .spot-2 {
      right: 20%;
      bottom: 30%;
      font-size: 28px;
      z-index: 2;
    }

    /* Paw Prints Clue */
    .spot-3 {
      left: 36%;
      bottom: 12%;
      font-size: 26px;
      letter-spacing: 6px;
    }

    /* Inspection Ring */
    .ring {
      position: absolute;
      border: 2px dashed #38bdf8;
      border-radius: 50%;
      pointer-events: none;
      opacity: 0;
      transform: scale(0.6);
      transition: opacity 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
    }
    .active .ring {
      opacity: 1;
      transform: scale(1.3);
      border-color: #22b7ff;
      box-shadow: 0 0 12px rgba(34, 183, 255, 0.6);
    }

    /* Clue Zoom Callout */
    .clue-banner {
      position: absolute;
      top: 10px;
      left: 10px;
      background: rgba(15, 23, 42, 0.85);
      backdrop-filter: blur(4px);
      border: 1px solid rgba(255,255,255,0.2);
      border-radius: 8px;
      padding: 4px 10px;
      color: #ffffff;
      font-size: 13px;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: all 0.3s ease;
    }
    .clue-banner span {
      color: #38bdf8;
    }

    /* Interactive Buttons */
    .clue-nav {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 8px;
      width: 100%;
    }
    .clue-btn {
      background: #ffffff;
      border: 2px solid transparent;
      border-radius: 10px;
      padding: 8px 4px;
      font-size: 13px;
      font-weight: 700;
      color: #475569;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      box-shadow: 0 1px 4px rgba(0,0,0,0.06);
      transition: all 0.2s ease;
    }
    .clue-btn span.emoji {
      font-size: 18px;
    }
    .clue-btn.active {
      border-color: #22b7ff;
      color: #0284c7;
      background: #f0f9ff;
      box-shadow: 0 2px 8px rgba(34, 183, 255, 0.2);
    }
  </style>
</head>
<body>

<div class="main">
  
  <div class="story-text">
    <span class="story-label">Story Text</span>
    <span class="story-quote">"Sam heard a noise."</span>
  </div>

  
  <div class="picture-frame">
    
    <div class="window-scene">
      <div class="silhouette">👤</div>
      <div class="window-sill"></div>
    </div>
    <div class="bush">🌳</div>

    
    <div class="clue-spot spot-1" id="target-0">
      <div class="ring" style="width: 46px; height: 46px;"></div>
      🌙
    </div>

    
    <div class="clue-spot spot-2" id="target-1">
      <div class="ring" style="width: 36px; height: 36px;"></div>
      🐶
    </div>

    
    <div class="clue-spot spot-3" id="target-2">
      <div class="ring" style="width: 60px; height: 36px;"></div>
      🐾🐾
    </div>

    
    <div class="clue-banner" id="clueBanner">
      <span>🔍</span> <span id="bannerText">Night time</span>
    </div>
  </div>

  
  <div class="clue-nav">
    <button class="clue-btn active" id="btn-0">
      <span class="emoji">🌙</span>
      <span>1. Night</span>
    </button>
    <button class="clue-btn" id="btn-1">
      <span class="emoji">🐶</span>
      <span>2. Lost pet</span>
    </button>
    <button class="clue-btn" id="btn-2">
      <span class="emoji">🐾</span>
      <span>3. Footprints</span>
    </button>
  </div>
</div>

<script>
  const clues = [
    { title: 'Night time' },
    { title: 'Lost pet' },
    { title: 'Footprints' }
  ];

  let currentIdx = 0;
  let autoTimer = null;

  const bannerText = document.getElementById('bannerText');
  const targets = [
    document.getElementById('target-0'),
    document.getElementById('target-1'),
    document.getElementById('target-2')
  ];
  const buttons = [
    document.getElementById('btn-0'),
    document.getElementById('btn-1'),
    document.getElementById('btn-2')
  ];

  function showClue(idx) {
    currentIdx = idx;
    targets.forEach((t, i) => t.classList.toggle('active', i === idx));
    buttons.forEach((b, i) => b.classList.toggle('active', i === idx));
    bannerText.textContent = clues[idx].title;
  }

  function startCycle() {
    stopCycle();
    autoTimer = setInterval(() => {
      showClue((currentIdx + 1) % clues.length);
    }, 3200);
  }

  function stopCycle() {
    if (autoTimer) {
      clearInterval(autoTimer);
      autoTimer = null;
    }
  }

  // Bind clicks
  buttons.forEach((btn, i) => {
    btn.addEventListener('click', () => {
      stopCycle();
      showClue(i);
      startCycle();
    });
  });

  targets.forEach((t, i) => {
    t.addEventListener('click', () => {
      stopCycle();
      showClue(i);
      startCycle();
    });
  });

  // Initial display
  showClue(0);
  startCycle();
</script>

</body>
</html>

Some readers think pictures are only there for decoration, but that is a mistake.

Words and pictures work as a **team** to give you the whole adventure.

How Pictures Help Tell a Story. Explain how a picture adds meaning to a story.

Use Illustrations in a Story (Kindergarten / Foundation ELA)

KS1 English: How Words and Pictures Tell Stories

All About the Picture: Understanding Story Illustrations

Effective early childhood instruction for AC9EFLA07 relies heavily on 'Picture Walks', Dialogic Reading, and deliberate 'Cover-up' strategies (e.g., reading the words first with the picture hidden to see what information is missing, then revealing the picture to see what new meaning is unlocked). Focus on character facial expressions, background environmental clues, and action details to scaffold visual literacy and oral language.

How Pictures Help Tell a Story

Pictures Show Feelings

Finding Picture Clues