<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Restatement Clue Decoder</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      -webkit-tap-highlight-color: transparent;
    }

    body {
      background: #ffffff;
      padding: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
    }

    .decoder-app {
      width: 100%;
      max-width: 560px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    /* Controls Header */
    .stepper-nav {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 6px;
      background: #f8fafc;
      padding: 6px 10px;
      border-radius: 10px;
      border: 1px solid #e2e8f0;
      flex-wrap: wrap;
    }

    .nav-title {
      font-size: 13px;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 6px;
      color: #1e2945;
    }

    .nav-title svg {
      width: 16px;
      height: 16px;
      flex-shrink: 0;
    }

    .btn-group {
      display: flex;
      gap: 4px;
    }

    .step-btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      padding: 4px 8px;
      font-size: 11px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
      transition: background 0.15s, color 0.15s, border-color 0.15s;
    }

    .step-btn.active {
      background: #1e2945;
      color: #ffffff;
      border-color: #1e2945;
    }

    /* Sentence Box */
    .sentence-card {
      background: #ffffff;
      border: 1.5px solid #e2e8f0;
      border-radius: 12px;
      padding: 12px 14px;
      text-align: center;
      line-height: 1.7;
      font-size: 15px;
      font-weight: 500;
      color: #1e2945;
    }

    .target {
      padding: 2px 6px;
      border-radius: 6px;
      font-weight: 700;
      display: inline;
      transition: all 0.25s ease;
      border: 1.5px solid transparent;
      white-space: nowrap;
    }

    .target.hard {
      background: #ffedd5;
      color: #9a3412;
      border-color: #fed7aa;
    }

    .target.bridge {
      background: #dbeafe;
      color: #1e40af;
      border-color: #bfdbfe;
    }

    .target.meaning {
      background: #ccfbf1;
      color: #115e59;
      border-color: #99f6e4;
    }

    .target.dimmed {
      opacity: 0.55;
      background: #f1f5f9;
      color: #64748b;
      border-color: #e2e8f0;
    }

    .target.active-target {
      box-shadow: 0 0 0 2.5px rgba(30, 41, 69, 0.25);
    }

    /* Flow Chart */
    .flow-container {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      gap: 4px;
      position: relative;
    }

    .card-node {
      flex: 1;
      background: #f8fafc;
      border-radius: 10px;
      border: 1.5px solid #e2e8f0;
      padding: 10px 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      gap: 5px;
      transition: opacity 0.25s, border-color 0.25s, background 0.25s;
      cursor: pointer;
      min-width: 0;
    }

    .card-node.dimmed {
      opacity: 0.55;
      background: #f8fafc;
      border-style: dashed;
      border-color: #cbd5e1;
    }

    .card-node.dimmed .node-word {
      color: #64748b;
    }

    .card-node.dimmed .badge {
      opacity: 0.65;
    }

    .card-node.active-node {
      opacity: 1;
      background: #ffffff;
      border-color: #94a3b8;
      border-style: solid;
      box-shadow: 0 2px 8px rgba(30, 41, 69, 0.08);
    }

    .badge {
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.3px;
      padding: 2px 6px;
      border-radius: 12px;
      white-space: nowrap;
    }

    .badge-orange {
      background: #ffedd5;
      color: #9a3412;
    }

    .badge-blue {
      background: #dbeafe;
      color: #1e40af;
    }

    .badge-teal {
      background: #ccfbf1;
      color: #115e59;
    }

    .node-word {
      font-size: 13.5px;
      font-weight: 700;
      color: #1e2945;
      line-height: 1.2;
    }

    .connector {
      display: flex;
      align-items: center;
      justify-content: center;
      color: #94a3b8;
      font-size: 14px;
      font-weight: bold;
      user-select: none;
      flex-shrink: 0;
      padding: 0 2px;
    }

    /* Equation Summary */
    .result-strip {
      border-radius: 10px;
      padding: 8px 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: 13px;
      font-weight: 700;
      transition: all 0.25s;
    }

    .result-strip.active {
      background: #f0fdf4;
      border: 1.5px solid #86efac;
      color: #14532d;
    }

    .result-strip.active .eq-part {
      color: #14532d;
    }

    .result-strip.dimmed {
      background: #f8fafc;
      border: 1.5px dashed #cbd5e1;
      color: #64748b;
      opacity: 0.65;
    }

    .result-strip.dimmed .eq-part {
      color: #64748b;
    }

    .eq-label {
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.4px;
      margin-right: 4px;
    }

    @media (max-width: 440px) {
      .sentence-card {
        font-size: 14px;
        line-height: 1.65;
        padding: 10px 8px;
      }
      .target {
        padding: 1px 4px;
      }
      .flow-container {
        flex-direction: column;
        gap: 4px;
      }
      .card-node {
        width: 100%;
        flex-direction: row;
        justify-content: space-between;
        padding: 6px 12px;
      }
      .connector {
        transform: rotate(90deg);
        height: 12px;
      }
      .result-strip {
        font-size: 12px;
        padding: 6px 10px;
      }
    }
  </style>
</head>
<body>

<div class="decoder-app">
  
  <div class="stepper-nav">
    <div class="nav-title">
      <svg viewBox="0 0 24 24" fill="none" stroke="#1e2945" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
        <circle cx="11" cy="11" r="8"></circle>
        <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
      </svg>
      <span>Clue Decoder</span>
    </div>
    <div class="btn-group">
      <button class="step-btn active" id="btn1" onclick="setStep(1)">1. Word</button>
      <button class="step-btn" id="btn2" onclick="setStep(2)">2. Signal</button>
      <button class="step-btn" id="btn3" onclick="setStep(3)">3. Meaning</button>
      <button class="step-btn" id="btn4" onclick="setStep(4)">All</button>
    </div>
  </div>

  
  <div class="sentence-card">
    The mountain path was <span class="target hard" id="t-hard">perilous</span>; <span class="target bridge" id="t-bridge">that is</span>, it was <span class="target meaning" id="t-meaning">full of danger</span>.
  </div>

  
  <div class="flow-container">
    
    <div class="card-node active-node" id="n-hard" onclick="setStep(1)">
      <span class="badge badge-orange">Hard Word</span>
      <span class="node-word">perilous</span>
    </div>

    <div class="connector">➔</div>

    
    <div class="card-node dimmed" id="n-bridge" onclick="setStep(2)">
      <span class="badge badge-blue">Signal Bridge</span>
      <span class="node-word">that is</span>
    </div>

    <div class="connector">➔</div>

    
    <div class="card-node dimmed" id="n-meaning" onclick="setStep(3)">
      <span class="badge badge-teal">Plain English</span>
      <span class="node-word">full of danger</span>
    </div>
  </div>

  
  <div class="result-strip dimmed" id="equation">
    <span class="eq-label">Meaning:</span>
    <span class="eq-part">perilous</span>
    <span class="eq-part">=</span>
    <span class="eq-part">full of danger</span>
  </div>
</div>

<script>
  let currentStep = 1;
  let autoPlayTimer = null;

  function setStep(step) {
    currentStep = step;
    
    // Update button states
    for (let i = 1; i <= 4; i++) {
      const btn = document.getElementById('btn' + i);
      if (btn) btn.classList.toggle('active', i === step);
    }

    const tHard = document.getElementById('t-hard');
    const tBridge = document.getElementById('t-bridge');
    const tMeaning = document.getElementById('t-meaning');

    const nHard = document.getElementById('n-hard');
    const nBridge = document.getElementById('n-bridge');
    const nMeaning = document.getElementById('n-meaning');
    const eq = document.getElementById('equation');

    // Reset styles
    [tHard, tBridge, tMeaning].forEach(el => el.classList.remove('dimmed', 'active-target'));
    [nHard, nBridge, nMeaning].forEach(el => el.classList.remove('dimmed', 'active-node'));
    eq.classList.remove('active', 'dimmed');

    if (step === 1) {
      tHard.classList.add('active-target');
      nHard.classList.add('active-node');
      
      tBridge.classList.add('dimmed');
      tMeaning.classList.add('dimmed');
      nBridge.classList.add('dimmed');
      nMeaning.classList.add('dimmed');
      eq.classList.add('dimmed');
    } else if (step === 2) {
      tHard.classList.remove('dimmed');
      tBridge.classList.add('active-target');
      nHard.classList.add('active-node');
      nBridge.classList.add('active-node');
      
      tMeaning.classList.add('dimmed');
      nMeaning.classList.add('dimmed');
      eq.classList.add('dimmed');
    } else if (step === 3) {
      tHard.classList.remove('dimmed');
      tBridge.classList.remove('dimmed');
      tMeaning.classList.add('active-target');
      
      nHard.classList.add('active-node');
      nBridge.classList.add('active-node');
      nMeaning.classList.add('active-node');
      eq.classList.add('active');
    } else if (step === 4) {
      nHard.classList.add('active-node');
      nBridge.classList.add('active-node');
      nMeaning.classList.add('active-node');
      eq.classList.add('active');
    }
  }

  // Initialize
  setStep(1);

  // Auto-advance cycle
  function startAutoCycle() {
    autoPlayTimer = setInterval(() => {
      let next = currentStep + 1;
      if (next > 4) next = 1;
      setStep(next);
    }, 4500);
  }

  // Stop auto-play on user click
  document.querySelectorAll('button, .card-node').forEach(elem => {
    elem.addEventListener('click', () => {
      if (autoPlayTimer) clearInterval(autoPlayTimer);
    });
  });

  startAutoCycle();
</script>

</body>
</html>

Using Sentence-Level Clues to Infer the Meaning of Unfamiliar Words

<!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;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }

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

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

    /* Top Word Card */
    .word-card {
      width: 100%;
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      padding: 12px 16px;
      text-align: center;
      box-shadow: 0 2px 6px rgba(30, 41, 69, 0.05);
      transition: all 0.3s ease;
    }

    .word-card.active {
      border-color: #22b7ff;
      box-shadow: 0 0 0 3px rgba(34, 183, 255, 0.2);
    }

    .label-tag {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: #64748b;
      margin-bottom: 2px;
    }

    .target-word {
      font-size: 22px;
      font-weight: 800;
      color: #1e2945;
      letter-spacing: -0.02em;
    }

    /* Connector & Clue */
    .flow-connector {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      position: relative;
    }

    .line {
      width: 2px;
      height: 10px;
      background: #cbd5e1;
    }

    .clue-pill {
      background: #eff6ff;
      border: 1.5px solid #93c5fd;
      color: #1d4ed8;
      font-size: 13px;
      font-weight: 700;
      padding: 4px 12px;
      border-radius: 20px;
      transition: all 0.3s ease;
      cursor: pointer;
    }

    .clue-pill.active {
      background: #2563eb;
      color: #ffffff;
      border-color: #2563eb;
      box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
    }

    /* Examples Row */
    .examples-row {
      display: flex;
      justify-content: center;
      gap: 12px;
      width: 100%;
    }

    .example-node {
      flex: 1;
      max-width: 100px;
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      padding: 8px 4px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .example-node.active {
      border-color: #10b981;
      background: #f0fdf4;
      box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18);
    }

    .example-icon {
      font-size: 26px;
      line-height: 1;
    }

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

    /* Inferred Meaning Box */
    .meaning-card {
      width: 100%;
      background: #ecfdf5;
      border: 2px solid #34d399;
      border-radius: 12px;
      padding: 12px 14px;
      text-align: center;
      box-shadow: 0 4px 12px rgba(16, 185, 129, 0.12);
      transition: all 0.3s ease;
    }

    .meaning-card.active {
      box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.28), 0 4px 12px rgba(16, 185, 129, 0.2);
    }

    .meaning-title {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: #047857;
      margin-bottom: 2px;
    }

    .meaning-text {
      font-size: 15px;
      font-weight: 700;
      color: #065f46;
    }

    /* Stepper Controls */
    .controls {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 4px;
    }

    .step-btn {
      background: #ffffff;
      border: 1.5px solid #cbd5e1;
      color: #1e2945;
      font-size: 12px;
      font-weight: 600;
      padding: 4px 10px;
      border-radius: 6px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .step-btn:hover {
      background: #f1f5f9;
    }

    .dots {
      display: flex;
      gap: 6px;
    }

    .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #cbd5e1;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .dot.active {
      background: #2563eb;
      transform: scale(1.2);
    }
  </style>
</head>
<body>

  <div class="diagram">
    
    <div id="wordCard" class="word-card active">
      <div class="label-tag">Unknown Word</div>
      <div class="target-word">Amphibians</div>
    </div>

    
    <div class="flow-connector">
      <div class="line"></div>
      <div id="cluePill" class="clue-pill">Clue: "such as" ↓</div>
      <div class="line"></div>
    </div>

    
    <div class="examples-row">
      <div class="example-node" data-idx="0">
        <span class="example-icon">🐸</span>
        <span class="example-name">Frogs</span>
      </div>
      <div class="example-node" data-idx="1">
        <span class="example-icon">🟤</span>
        <span class="example-name">Toads</span>
      </div>
      <div class="example-node" data-idx="2">
        <span class="example-icon">🦎</span>
        <span class="example-name">Salamanders</span>
      </div>
    </div>

    
    <div class="line"></div>
    <div id="meaningCard" class="meaning-card">
      <div class="meaning-title">Inferred Category</div>
      <div class="meaning-text">Animals living on land and in water</div>
    </div>

    
    <div class="controls">
      <button id="toggleBtn" class="step-btn">⏸ Pause</button>
      <div class="dots">
        <div class="dot active" data-step="0"></div>
        <div class="dot" data-step="1"></div>
        <div class="dot" data-step="2"></div>
        <div class="dot" data-step="3"></div>
      </div>
    </div>
  </div>

  <script>
    const wordCard = document.getElementById('wordCard');
    const cluePill = document.getElementById('cluePill');
    const exampleNodes = document.querySelectorAll('.example-node');
    const meaningCard = document.getElementById('meaningCard');
    const dots = document.querySelectorAll('.dot');
    const toggleBtn = document.getElementById('toggleBtn');

    let currentStep = 0;
    let playing = true;
    let intervalId = null;

    function applyStep(step) {
      currentStep = step;
      
      // Update dots
      dots.forEach((dot, idx) => {
        dot.classList.toggle('active', idx === step);
      });

      // Clear all active
      wordCard.classList.remove('active');
      cluePill.classList.remove('active');
      exampleNodes.forEach(node => node.classList.remove('active'));
      meaningCard.classList.remove('active');

      if (step === 0) {
        wordCard.classList.add('active');
      } else if (step === 1) {
        wordCard.classList.add('active');
        cluePill.classList.add('active');
      } else if (step === 2) {
        wordCard.classList.add('active');
        cluePill.classList.add('active');
        exampleNodes.forEach(node => node.classList.add('active'));
      } else if (step === 3) {
        wordCard.classList.add('active');
        cluePill.classList.add('active');
        exampleNodes.forEach(node => node.classList.add('active'));
        meaningCard.classList.add('active');
      }
    }

    function nextStep() {
      applyStep((currentStep + 1) % 4);
    }

    function startTimer() {
      if (intervalId) clearInterval(intervalId);
      intervalId = setInterval(nextStep, 3200);
      playing = true;
      toggleBtn.textContent = '⏸ Pause';
    }

    function pauseTimer() {
      if (intervalId) clearInterval(intervalId);
      intervalId = null;
      playing = false;
      toggleBtn.textContent = '▶ Play';
    }

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

    dots.forEach((dot, idx) => {
      dot.addEventListener('click', () => {
        applyStep(idx);
        if (playing) startTimer();
      });
    });

    wordCard.addEventListener('click', () => { applyStep(0); if (playing) startTimer(); });
    cluePill.addEventListener('click', () => { applyStep(1); if (playing) startTimer(); });
    exampleNodes.forEach(node => {
      node.addEventListener('click', () => { applyStep(2); if (playing) startTimer(); });
    });
    meaningCard.addEventListener('click', () => { applyStep(3); if (playing) startTimer(); });

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

<!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: #f8f9fa;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      padding: 16px 12px;
      user-select: none;
    }

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

    .tab-btn {
      flex: 1;
      padding: 8px 6px;
      border: 1px solid #e2e8f0;
      background: #ffffff;
      border-radius: 12px;
      font-size: 13px;
      font-weight: 600;
      color: #64748b;
      cursor: pointer;
      text-align: center;
      transition: all 0.25s ease;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
    }

    .tab-btn.active {
      background: #22b7ff;
      color: #ffffff;
      border-color: #22b7ff;
      box-shadow: 0 4px 10px rgba(34, 183, 255, 0.3);
    }

    .stage-area {
      position: relative;
      width: 100%;
      max-width: 440px;
      height: 230px;
      margin: 12px 0;
    }

    .card-panel {
      position: absolute;
      inset: 0;
      background: #ffffff;
      border-radius: 16px;
      padding: 18px 14px;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
      border: 1px solid #edf2f7;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transform: translateY(6px);
      transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .card-panel.active {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0);
    }

    .sentence-flow {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 6px 8px;
      font-size: 17px;
      font-weight: 600;
      text-align: center;
      line-height: 1.4;
    }

    .word-slot {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 105px;
      height: 38px;
      border-radius: 10px;
      padding: 0 10px;
      font-weight: 700;
      position: relative;
    }

    .slot-pop {
      background: #fee2e2;
      color: #dc2626;
      border: 2px dashed #f87171;
      text-decoration: line-through;
    }

    .slot-insert {
      background: #e0f2fe;
      color: #0284c7;
      border: 2px solid #38bdf8;
      box-shadow: 0 2px 8px rgba(56, 189, 248, 0.25);
    }

    .slot-verified {
      background: #dcfce7;
      color: #16a34a;
      border: 2px solid #4ade80;
    }

    .swap-visual {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      margin-top: 10px;
    }

    .arrow-swap {
      font-size: 18px;
      color: #22b7ff;
      font-weight: bold;
    }

    .check-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: #f0fdf4;
      border: 1.5px solid #86efac;
      color: #15803d;
      padding: 8px 16px;
      border-radius: 999px;
      font-size: 14px;
      font-weight: 700;
      margin-top: 16px;
      box-shadow: 0 2px 6px rgba(22, 163, 74, 0.1);
    }

    .check-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 22px;
      height: 22px;
      background: #22c55e;
      color: #ffffff;
      border-radius: 50%;
      font-size: 13px;
    }

    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
      width: 100%;
    }

    .play-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 38px;
      height: 38px;
      border-radius: 50%;
      border: 1px solid #e2e8f0;
      background: #ffffff;
      color: #1e2945;
      font-size: 14px;
      cursor: pointer;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
      transition: background 0.2s;
    }

    .play-btn:active {
      background: #f1f5f9;
    }

    .dots-container {
      display: flex;
      gap: 8px;
    }

    .dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #cbd5e1;
      cursor: pointer;
      transition: background 0.25s, transform 0.25s;
    }

    .dot.active {
      background: #22b7ff;
      transform: scale(1.2);
    }
  </style>
</head>
<body>

  
  <div class="nav-tabs">
    <button class="tab-btn active" id="tab0">1. Swap</button>
    <button class="tab-btn" id="tab1">2. Reread</button>
    <button class="tab-btn" id="tab2">3. Verify</button>
  </div>

  
  <div class="stage-area">

    
    <div class="card-panel active" id="panel0">
      <div class="sentence-flow">
        <span>The puppy was</span>
        <span class="word-slot slot-pop">slumbering</span>
        <span>on the rug.</span>
      </div>
      <div class="swap-visual">
        <span class="arrow-swap">⬇ plug in synonym</span>
        <span class="word-slot slot-insert">sleeping</span>
      </div>
    </div>

    
    <div class="card-panel" id="panel1">
      <div class="sentence-flow">
        <span>The puppy was</span>
        <span class="word-slot slot-insert">sleeping</span>
        <span>on the rug.</span>
      </div>
      <div style="margin-top: 18px; font-size: 13px; color: #64748b; font-weight: 500;">
        🔊 Read aloud to test meaning
      </div>
    </div>

    
    <div class="card-panel" id="panel2">
      <div class="sentence-flow">
        <span>The puppy was</span>
        <span class="word-slot slot-verified">sleeping</span>
        <span>on the rug.</span>
      </div>
      <div class="check-badge">
        <span class="check-icon">✓</span>
        <span>Makes clear sense!</span>
      </div>
    </div>

  </div>

  
  <div class="controls">
    <button class="play-btn" id="playToggle" title="Play / Pause">⏸</button>
    <div class="dots-container">
      <div class="dot active" id="dot0"></div>
      <div class="dot" id="dot1"></div>
      <div class="dot" id="dot2"></div>
    </div>
  </div>

  <script>
    let currentStep = 0;
    let isPlaying = true;
    let timer = null;
    const totalSteps = 3;
    const STEP_DURATION = 3200;

    const tabs = [document.getElementById('tab0'), document.getElementById('tab1'), document.getElementById('tab2')];
    const panels = [document.getElementById('panel0'), document.getElementById('panel1'), document.getElementById('panel2')];
    const dots = [document.getElementById('dot0'), document.getElementById('dot1'), document.getElementById('dot2')];
    const playBtn = document.getElementById('playToggle');

    function showStep(index) {
      currentStep = index;
      for (let i = 0; i < totalSteps; i++) {
        const isActive = i === index;
        tabs[i].classList.toggle('active', isActive);
        panels[i].classList.toggle('active', isActive);
        dots[i].classList.toggle('active', isActive);
      }
    }

    function nextStep() {
      showStep((currentStep + 1) % totalSteps);
    }

    function startAutoPlay() {
      stopAutoPlay();
      isPlaying = true;
      playBtn.textContent = '⏸';
      timer = setInterval(nextStep, STEP_DURATION);
    }

    function stopAutoPlay() {
      isPlaying = false;
      playBtn.textContent = '▶';
      if (timer) clearInterval(timer);
    }

    // Tab & Dot click events
    tabs.forEach((tab, i) => {
      tab.addEventListener('click', () => {
        showStep(i);
        startAutoPlay();
      });
    });

    dots.forEach((dot, i) => {
      dot.addEventListener('click', () => {
        showStep(i);
        startAutoPlay();
      });
    });

    // Play/Pause button toggle
    playBtn.addEventListener('click', () => {
      if (isPlaying) {
        stopAutoPlay();
      } else {
        startAutoPlay();
      }
    });

    // Initialize auto stepper
    startAutoPlay();
  </script>
</body>
</html>

<!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>Sentence Breakdown: In-text Clues</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      -webkit-tap-highlight-color: transparent;
    }

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

    .main-wrap {
      width: 100%;
      max-width: 580px;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    /* Sentence Card */
    .sentence-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 20px 18px;
      font-size: 19px;
      line-height: 1.6;
      font-weight: 500;
      color: #1e2945;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
      text-align: center;
      transition: all 0.25s ease;
    }

    .chunk {
      display: inline;
      padding: 3px 6px;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    /* Highlight states */
    .chunk-word {
      color: #c2410c;
      background: rgba(249, 115, 22, 0.12);
      border-bottom: 2.5px solid #f97316;
    }
    .chunk-word.active {
      background: #f97316;
      color: #ffffff;
    }

    .chunk-signal {
      color: #7e22ce;
      background: rgba(168, 85, 247, 0.14);
      border-bottom: 2.5px solid #a855f7;
      font-weight: 700;
    }
    .chunk-signal.active {
      background: #a855f7;
      color: #ffffff;
    }

    .chunk-def {
      color: #15803d;
      background: rgba(34, 197, 94, 0.14);
      border-bottom: 2.5px solid #22c55e;
    }
    .chunk-def.active {
      background: #22c55e;
      color: #ffffff;
    }

    .neutral {
      color: #64748b;
    }

    /* Callout Badges Grid */
    .badges-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      width: 100%;
    }

    .badge-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 12px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 6px;
      cursor: pointer;
      transition: all 0.2s ease;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
      user-select: none;
    }

    .badge-card:active {
      transform: scale(0.98);
    }

    .badge-tag {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.03em;
      text-transform: uppercase;
      padding: 4px 8px;
      border-radius: 999px;
    }

    .badge-word {
      border-color: #fdba74;
    }
    .badge-word .badge-tag {
      background: #fff7ed;
      color: #ea580c;
    }
    .badge-word.active {
      border-color: #f97316;
      background: #fff7ed;
      box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.25);
    }

    .badge-signal {
      border-color: #d8b4fe;
    }
    .badge-signal .badge-tag {
      background: #faf5ff;
      color: #9333ea;
    }
    .badge-signal.active {
      border-color: #a855f7;
      background: #faf5ff;
      box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.25);
    }

    .badge-def {
      border-color: #86efac;
    }
    .badge-def .badge-tag {
      background: #f0fdf4;
      color: #16a34a;
    }
    .badge-def.active {
      border-color: #22c55e;
      background: #f0fdf4;
      box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.25);
    }

    .badge-symbol {
      font-size: 16px;
      font-weight: 700;
      color: #1e2945;
    }

    /* Bottom Status bar */
    .status-bar {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 8px;
    }

    .nav-btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      color: #1e2945;
      font-size: 13px;
      font-weight: 600;
      padding: 6px 14px;
      border-radius: 20px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      transition: background 0.15s ease;
    }

    .nav-btn:hover {
      background: #f1f5f9;
    }

    .dot-btn {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #cbd5e1;
      border: none;
      cursor: pointer;
      padding: 0;
      transition: all 0.2s ease;
    }

    .dot-btn.active {
      background: #2563eb;
      width: 18px;
      border-radius: 10px;
    }

    @media (max-width: 440px) {
      .sentence-card {
        font-size: 16px;
        padding: 16px 12px;
      }
      .badge-tag {
        font-size: 10px;
        padding: 3px 6px;
      }
      .badge-symbol {
        font-size: 14px;
      }
    }
  </style>
</head>
<body>

  <div class="main-wrap">
    
    <div class="sentence-card" id="sentenceCard">
      <span class="neutral">An </span>
      <span class="chunk chunk-word" id="part0" onclick="setStep(0)">arboretum</span>
      <span class="neutral"> </span>
      <span class="chunk chunk-signal" id="part1a" onclick="setStep(1)">(</span><span class="chunk chunk-def" id="part2" onclick="setStep(2)">a place where trees are grown for study</span><span class="chunk chunk-signal" id="part1b" onclick="setStep(1)">)</span>
      <span class="neutral"> opened near our school.</span>
    </div>

    
    <div class="badges-grid">
      
      <div class="badge-card badge-word" id="card0" onclick="setStep(0)">
        <span class="badge-tag">Unknown Word</span>
        <span class="badge-symbol">arboretum</span>
      </div>

      
      <div class="badge-card badge-signal" id="card1" onclick="setStep(1)">
        <span class="badge-tag">Clue Signal</span>
        <span class="badge-symbol">( ... )</span>
      </div>

      
      <div class="badge-card badge-def" id="card2" onclick="setStep(2)">
        <span class="badge-tag">Direct Definition</span>
        <span class="badge-symbol">tree study place</span>
      </div>
    </div>

    
    <div class="status-bar">
      <button class="nav-btn" id="playBtn" onclick="togglePlay()">⏸ Auto</button>
      <div style="display:flex; gap:6px; margin-left: 6px;">
        <button class="dot-btn active" id="dot0" onclick="setStep(0)" aria-label="Step 1"></button>
        <button class="dot-btn" id="dot1" onclick="setStep(1)" aria-label="Step 2"></button>
        <button class="dot-btn" id="dot2" onclick="setStep(2)" aria-label="Step 3"></button>
      </div>
    </div>
  </div>

  <script>
    let currentStep = 0;
    let isPlaying = true;
    let timer = null;

    const cards = [
      document.getElementById('card0'),
      document.getElementById('card1'),
      document.getElementById('card2')
    ];

    const dots = [
      document.getElementById('dot0'),
      document.getElementById('dot1'),
      document.getElementById('dot2')
    ];

    const partWord = document.getElementById('part0');
    const partSigA = document.getElementById('part1a');
    const partSigB = document.getElementById('part1b');
    const partDef = document.getElementById('part2');

    function updateView() {
      // Cards
      cards.forEach((c, idx) => {
        if (idx === currentStep) {
          c.classList.add('active');
        } else {
          c.classList.remove('active');
        }
      });

      // Dots
      dots.forEach((d, idx) => {
        if (idx === currentStep) {
          d.classList.add('active');
        } else {
          d.classList.remove('active');
        }
      });

      // Sentence parts
      partWord.classList.toggle('active', currentStep === 0);
      partSigA.classList.toggle('active', currentStep === 1);
      partSigB.classList.toggle('active', currentStep === 1);
      partDef.classList.toggle('active', currentStep === 2);
    }

    function setStep(idx) {
      currentStep = idx;
      updateView();
      resetTimer();
    }

    function nextStep() {
      currentStep = (currentStep + 1) % 3;
      updateView();
    }

    function resetTimer() {
      if (timer) clearInterval(timer);
      if (isPlaying) {
        timer = setInterval(nextStep, 3500);
      }
    }

    function togglePlay() {
      isPlaying = !isPlaying;
      const btn = document.getElementById('playBtn');
      btn.textContent = isPlaying ? '⏸ Auto' : '▶ Step';
      if (isPlaying) {
        resetTimer();
      } else {
        if (timer) clearInterval(timer);
      }
    }

    // Initialize
    updateView();
    resetTimer();
  </script>
</body>
</html>

OGE.4.L.9

Aligned learning resources

Related diagrams