<!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;
      color: #1e2945;
      background: transparent;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      user-select: none;
    }

    /* Filter buttons */
    .filter-bar {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      justify-content: center;
    }
    .filter-btn {
      appearance: none;
      border: 1px solid #e2e8f0;
      background: #ffffff;
      color: #64748b;
      font-size: 13px;
      font-weight: 600;
      padding: 6px 12px;
      border-radius: 20px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
    }
    .filter-btn.active {
      background: #1e2945;
      color: #ffffff;
      border-color: #1e2945;
      box-shadow: 0 2px 6px rgba(30,41,69,0.2);
    }

    /* Full sentence ribbon */
    .sentence-preview {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 10px 14px;
      font-size: 15px;
      line-height: 1.6;
      text-align: center;
      color: #475569;
    }
    .sentence-preview .hl-noun {
      color: #1e2945;
      font-weight: 700;
      text-decoration: underline;
      text-decoration-color: #1e2945;
      text-underline-offset: 3px;
      text-decoration-thickness: 2px;
    }

    /* Phrase breakdown grid */
    .breakdown-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .phrase-card {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 12px 14px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      transition: opacity 0.25s, border-color 0.25s, box-shadow 0.25s;
    }
    .phrase-card.dimmed {
      opacity: 0.35;
    }
    .phrase-card.active-card {
      border-color: #cbd5e1;
      box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    }

    .words-row {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px 12px;
      font-size: 16px;
    }
    .connector-text {
      color: #64748b;
      font-size: 15px;
    }

    /* Word token with label */
    .token-group {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      gap: 3px;
      position: relative;
    }

    .type-badge {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.4px;
      padding: 2px 7px;
      border-radius: 6px;
      line-height: 1.2;
      white-space: nowrap;
    }

    .word-box {
      font-size: 16px;
      font-weight: 700;
      padding: 4px 10px;
      border-radius: 8px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    /* Adjective Categories */
    .adj-behavior .type-badge { background: #ede9fe; color: #6d28d9; }
    .adj-behavior .word-box { background: #f5f3ff; color: #6d28d9; border: 1.5px solid #ddd6fe; }

    .adj-sound .type-badge { background: #fef3c7; color: #b45309; }
    .adj-sound .word-box { background: #fffbeb; color: #b45309; border: 1.5px solid #fde68a; }

    .adj-color .type-badge { background: #ffe4e6; color: #be123c; }
    .adj-color .word-box { background: #fff1f2; color: #be123c; border: 1.5px solid #fecdd3; }

    .adj-texture .type-badge { background: #ccfbf1; color: #0f766e; }
    .adj-texture .word-box { background: #f0fdfa; color: #0f766e; border: 1.5px solid #99f6e4; }

    /* Noun Styling */
    .noun-token .type-badge {
      background: #e2e8f0;
      color: #1e2945;
    }
    .noun-token .word-box {
      background: #f8fafc;
      color: #1e2945;
      border: 1.5px solid #cbd5e1;
      text-decoration: underline;
      text-decoration-color: #1e2945;
      text-underline-offset: 4px;
      text-decoration-thickness: 2.5px;
    }

    /* Arrow SVG styling */
    .arrow-indicator {
      display: flex;
      align-items: center;
      color: #94a3b8;
      font-weight: 700;
    }
    .arrow-indicator svg {
      width: 24px;
      height: 18px;
    }
  </style>
</head>
<body>

  
  <div class="filter-bar">
    <button class="filter-btn active" data-filter="all">All Modifiers</button>
    <button class="filter-btn" data-filter="behavior">Behavior</button>
    <button class="filter-btn" data-filter="sound">Sound</button>
    <button class="filter-btn" data-filter="color">Color</button>
    <button class="filter-btn" data-filter="texture">Texture</button>
  </div>

  
  <div class="sentence-preview">
    The <span style="color:#6d28d9;font-weight:700;">playful</span> <span class="hl-noun">puppy</span>
    chewed a <span style="color:#b45309;font-weight:700;">squeaky</span>,
    <span style="color:#be123c;font-weight:700;">red</span> <span class="hl-noun">ball</span>
    on the <span style="color:#0f766e;font-weight:700;">rough</span> <span class="hl-noun">rug</span>.
  </div>

  
  <div class="breakdown-list">

    
    <div class="phrase-card active-card" data-category="behavior">
      <div class="words-row">
        <span class="connector-text">The</span>
        
        <div class="token-group adj-behavior">
          <span class="type-badge">Behavior</span>
          <span class="word-box">playful</span>
        </div>

        <div class="arrow-indicator" style="color:#6d28d9;">
          <svg viewBox="0 0 24 16" fill="none">
            <path d="M2 8 C 8 2, 14 2, 20 8" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" fill="none"/>
            <path d="M16 4 L 21 8 L 16 12" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
          </svg>
        </div>

        <div class="token-group noun-token">
          <span class="type-badge">Noun</span>
          <span class="word-box">puppy</span>
        </div>
      </div>
    </div>

    
    <div class="phrase-card active-card" data-category="sound color">
      <div class="words-row">
        <span class="connector-text">chewed a</span>

        <div class="token-group adj-sound" data-sub="sound">
          <span class="type-badge">Sound</span>
          <span class="word-box">squeaky</span>
        </div>

        <div class="arrow-indicator" style="color:#b45309;" data-sub="sound">
          <svg viewBox="0 0 24 16" fill="none">
            <path d="M2 8 C 8 2, 14 2, 20 8" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" fill="none"/>
            <path d="M16 4 L 21 8 L 16 12" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
          </svg>
        </div>

        <div class="token-group adj-color" data-sub="color">
          <span class="type-badge">Color</span>
          <span class="word-box">red</span>
        </div>

        <div class="arrow-indicator" style="color:#be123c;" data-sub="color">
          <svg viewBox="0 0 24 16" fill="none">
            <path d="M2 8 C 8 2, 14 2, 20 8" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" fill="none"/>
            <path d="M16 4 L 21 8 L 16 12" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
          </svg>
        </div>

        <div class="token-group noun-token">
          <span class="type-badge">Noun</span>
          <span class="word-box">ball</span>
        </div>
      </div>
    </div>

    
    <div class="phrase-card active-card" data-category="texture">
      <div class="words-row">
        <span class="connector-text">on the</span>

        <div class="token-group adj-texture">
          <span class="type-badge">Texture</span>
          <span class="word-box">rough</span>
        </div>

        <div class="arrow-indicator" style="color:#0f766e;">
          <svg viewBox="0 0 24 16" fill="none">
            <path d="M2 8 C 8 2, 14 2, 20 8" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" fill="none"/>
            <path d="M16 4 L 21 8 L 16 12" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
          </svg>
        </div>

        <div class="token-group noun-token">
          <span class="type-badge">Noun</span>
          <span class="word-box">rug</span>
        </div>
      </div>
    </div>

  </div>

  <script>
    const filterBtns = document.querySelectorAll('.filter-btn');
    const cards = document.querySelectorAll('.phrase-card');

    filterBtns.forEach(btn => {
      btn.addEventListener('click', () => {
        const filter = btn.dataset.filter;

        filterBtns.forEach(b => b.classList.remove('active'));
        btn.classList.add('active');

        cards.forEach(card => {
          const cats = card.dataset.category.split(' ');
          if (filter === 'all' || cats.includes(filter)) {
            card.classList.remove('dimmed');
            card.classList.add('active-card');
          } else {
            card.classList.add('dimmed');
            card.classList.remove('active-card');
          }

          // Handle multi-modifier card sub-elements
          const subElements = card.querySelectorAll('[data-sub]');
          subElements.forEach(el => {
            if (filter === 'all' || el.dataset.sub === filter) {
              el.style.opacity = '1';
            } else {
              el.style.opacity = '0.25';
            }
          });
        });
      });
    });
  </script>
</body>
</html>

Identifying Descriptive Adjectives and Sensory Modifiers

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Noun & Adjectives Transformation</title>
  <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: #0f172a;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      padding: 10px;
      gap: 12px;
      user-select: none;
    }

    /* Category Badges Row */
    .badges-row {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 8px;
      width: 100%;
      max-width: 520px;
    }

    .badge-btn {
      border: 1.5px solid #cbd5e1;
      background: #f8fafc;
      color: #334155;
      font-size: 13px;
      font-weight: 700;
      padding: 6px 14px;
      border-radius: 9999px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: background-color 0.25s, color 0.25s, border-color 0.25s, box-shadow 0.25s;
    }

    .badge-btn:hover {
      background: #f1f5f9;
      border-color: #94a3b8;
    }

    .badge-btn .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: currentColor;
    }

    .badge-btn.active-size {
      background: #8b5cf6;
      border-color: #7c3aed;
      color: #ffffff;
      box-shadow: 0 2px 8px rgba(139, 92, 246, 0.35);
    }

    .badge-btn.active-shape {
      background: #3b82f6;
      border-color: #2563eb;
      color: #ffffff;
      box-shadow: 0 2px 8px rgba(59, 130, 246, 0.35);
    }

    .badge-btn.active-color {
      background: #10b981;
      border-color: #059669;
      color: #ffffff;
      box-shadow: 0 2px 8px rgba(16, 185, 129, 0.35);
    }

    .badge-btn.active-texture {
      background: #f59e0b;
      border-color: #d97706;
      color: #ffffff;
      box-shadow: 0 2px 8px rgba(245, 158, 11, 0.35);
    }

    /* Transformation Stage */
    .stage {
      position: relative;
      width: 100%;
      max-width: 480px;
      height: 180px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    /* Box Container */
    .box-wrap {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 120px;
    }

    .box-element {
      position: relative;
      background: #94a3b8;
      border: 2px solid #64748b;
      border-radius: 6px;
      box-shadow: 0 6px 12px -2px rgba(15, 23, 42, 0.15);
      transition: width 0.4s ease, height 0.4s ease, border-radius 0.4s ease, background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
      overflow: visible;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .box-inner-label {
      position: relative;
      z-index: 5;
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 0.03em;
      color: #1e293b;
      background: rgba(255, 255, 255, 0.9);
      padding: 3px 8px;
      border-radius: 6px;
      border: 1px solid rgba(0, 0, 0, 0.08);
      white-space: nowrap;
      transition: opacity 0.3s ease, color 0.3s ease, background 0.3s ease;
    }

    /* Ribbons */
    .ribbon-v, .ribbon-h {
      position: absolute;
      background: #f59e0b;
      border: 1px solid #d97706;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.35s ease;
      z-index: 2;
    }

    .ribbon-v {
      width: 14px;
      height: calc(100% + 4px);
      top: -2px;
      left: calc(50% - 7px);
      border-top: none;
      border-bottom: none;
    }

    .ribbon-h {
      height: 14px;
      width: calc(100% + 4px);
      top: calc(50% - 7px);
      left: -2px;
      border-left: none;
      border-right: none;
    }

    /* Bow */
    .bow {
      position: absolute;
      top: -16px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 26px;
      line-height: 1;
      opacity: 0;
      pointer-events: none;
      z-index: 6;
      filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
      transition: opacity 0.35s ease;
    }

    /* Smooth Gloss / Sheen Overlay */
    .sheen {
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0) 65%);
      opacity: 0;
      pointer-events: none;
      z-index: 3;
      transition: opacity 0.4s ease;
    }

    /* State Visual Progression */
    /* State 0: Plain Gray Box */
    .state-0 .box-element {
      width: 76px;
      height: 52px;
      background: #cbd5e1;
      border-color: #94a3b8;
      border-radius: 4px;
    }

    /* State 1: Huge */
    .state-1 .box-element {
      width: 126px;
      height: 70px;
      background: #cbd5e1;
      border-color: #8b5cf6;
      border-radius: 4px;
    }

    /* State 2: Square */
    .state-2 .box-element {
      width: 104px;
      height: 104px;
      background: #cbd5e1;
      border-color: #3b82f6;
      border-radius: 8px;
    }

    /* State 3: Shiny Blue */
    .state-3 .box-element {
      width: 104px;
      height: 104px;
      background: linear-gradient(140deg, #38bdf8 0%, #0284c7 100%);
      border-color: #0369a1;
      border-radius: 8px;
      box-shadow: 0 10px 20px -3px rgba(2, 132, 199, 0.45);
    }
    .state-3 .sheen {
      opacity: 0.8;
    }

    /* State 4: Smooth Gift Box (Ribbon & Bow) */
    .state-4 .box-element {
      width: 104px;
      height: 104px;
      background: linear-gradient(140deg, #38bdf8 0%, #0284c7 100%);
      border-color: #0369a1;
      border-radius: 8px;
      box-shadow: 0 12px 24px -2px rgba(2, 132, 199, 0.5);
    }
    .state-4 .sheen {
      opacity: 1;
    }
    .state-4 .ribbon-v,
    .state-4 .ribbon-h {
      opacity: 1;
    }
    .state-4 .bow {
      opacity: 1;
    }
    .state-4 .box-inner-label {
      background: rgba(255, 255, 255, 0.95);
      color: #0369a1;
      box-shadow: 0 2px 4px rgba(0,0,0,0.15);
    }

    /* Sentence / Caption Display */
    .sentence-display {
      font-size: 14px;
      font-weight: 600;
      color: #334155;
      text-align: center;
      line-height: 1.4;
      min-height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      flex-wrap: wrap;
    }

    .tag-size { color: #7c3aed; font-weight: 700; }
    .tag-shape { color: #2563eb; font-weight: 700; }
    .tag-color { color: #059669; font-weight: 700; }
    .tag-texture { color: #d97706; font-weight: 700; }
    .tag-noun { color: #0f172a; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }

    /* Interactive Stepper Controls */
    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      width: 100%;
      max-width: 480px;
    }

    .ctrl-btn {
      background: #ffffff;
      border: 1.5px solid #cbd5e1;
      color: #1e293b;
      padding: 6px 14px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      transition: background-color 0.2s, border-color 0.2s;
    }

    .ctrl-btn:hover {
      background: #f1f5f9;
      border-color: #94a3b8;
    }

    .ctrl-btn:active {
      background: #e2e8f0;
    }

    .dots-nav {
      display: flex;
      gap: 6px;
      align-items: center;
      padding: 0 4px;
    }

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

    .nav-dot:hover {
      background: #94a3b8;
    }

    .nav-dot.active {
      background: #0284c7;
      box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.25);
    }

    @media (max-width: 400px) {
      .badge-btn {
        font-size: 12px;
        padding: 5px 10px;
      }
      .ctrl-btn {
        font-size: 12px;
        padding: 5px 10px;
      }
      .sentence-display {
        font-size: 13px;
      }
    }
  </style>
</head>
<body>

  
  <div class="badges-row">
    <button class="badge-btn" id="b-size" onclick="goToStep(1)" title="Add Size">
      <span class="dot"></span> huge (size)
    </button>
    <button class="badge-btn" id="b-shape" onclick="goToStep(2)" title="Add Shape">
      <span class="dot"></span> square (shape)
    </button>
    <button class="badge-btn" id="b-color" onclick="goToStep(3)" title="Add Color">
      <span class="dot"></span> shiny blue (color)
    </button>
    <button class="badge-btn" id="b-texture" onclick="goToStep(4)" title="Add Texture">
      <span class="dot"></span> smooth (texture)
    </button>
  </div>

  
  <div class="stage">
    <div class="box-wrap state-0" id="boxWrap">
      <div class="bow">🎁</div>
      <div class="box-element">
        <div class="ribbon-v"></div>
        <div class="ribbon-h"></div>
        <div class="sheen"></div>
        <span class="box-inner-label" id="innerLabel">Noun: box</span>
      </div>
    </div>
  </div>

  
  <div class="sentence-display" id="sentenceDisplay">
    Noun: <span class="tag-noun">box</span> (plain &amp; gray)
  </div>

  
  <div class="controls">
    <button class="ctrl-btn" onclick="prevStep()">◀ Prev</button>
    <div class="dots-nav">
      <div class="nav-dot active" onclick="goToStep(0)" title="Step 0: Base Noun"></div>
      <div class="nav-dot" onclick="goToStep(1)" title="Step 1: Size"></div>
      <div class="nav-dot" onclick="goToStep(2)" title="Step 2: Shape"></div>
      <div class="nav-dot" onclick="goToStep(3)" title="Step 3: Color"></div>
      <div class="nav-dot" onclick="goToStep(4)" title="Step 4: Texture"></div>
    </div>
    <button class="ctrl-btn" id="playBtn" onclick="togglePlay()">⏸ Auto</button>
    <button class="ctrl-btn" onclick="nextStep()">Next ▶</button>
  </div>

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

    const sentenceTemplates = [
      'Noun: <span class="tag-noun">box</span> (plain &amp; unmodified)',
      '+ Size: A <span class="tag-size">huge</span> <span class="tag-noun">box</span>',
      '+ Shape: A <span class="tag-size">huge</span>, <span class="tag-shape">square</span> <span class="tag-noun">box</span>',
      '+ Color: A <span class="tag-size">huge</span>, <span class="tag-shape">square</span>, <span class="tag-color">shiny blue</span> <span class="tag-noun">box</span>',
      '✨ A <span class="tag-size">huge</span>, <span class="tag-shape">square</span>, <span class="tag-color">shiny blue</span>, <span class="tag-texture">smooth</span> gift <span class="tag-noun">box</span>!'
    ];

    const innerLabels = [
      'Noun: box',
      'huge box',
      'square box',
      'shiny blue box',
      'gift box 🎁'
    ];

    function updateView() {
      const wrap = document.getElementById('boxWrap');
      wrap.className = 'box-wrap state-' + currentStep;

      // Update badge states with correct colors
      document.getElementById('b-size').className = 'badge-btn' + (currentStep >= 1 ? ' active-size' : '');
      document.getElementById('b-shape').className = 'badge-btn' + (currentStep >= 2 ? ' active-shape' : '');
      document.getElementById('b-color').className = 'badge-btn' + (currentStep >= 3 ? ' active-color' : '');
      document.getElementById('b-texture').className = 'badge-btn' + (currentStep >= 4 ? ' active-texture' : '');

      // Update captions
      document.getElementById('sentenceDisplay').innerHTML = sentenceTemplates[currentStep];
      document.getElementById('innerLabel').textContent = innerLabels[currentStep];

      // Update dots
      const dots = document.querySelectorAll('.nav-dot');
      dots.forEach((dot, idx) => {
        dot.className = 'nav-dot' + (idx === currentStep ? ' active' : '');
      });
    }

    function goToStep(step) {
      currentStep = step;
      updateView();
    }

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

    function prevStep() {
      currentStep = (currentStep - 1 + totalSteps) % totalSteps;
      updateView();
    }

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

    function startTimer() {
      clearInterval(timer);
      timer = setInterval(() => {
        if (isPlaying) {
          nextStep();
        }
      }, 2600);
    }

    // Initialize
    updateView();
    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;
      -webkit-tap-highlight-color: transparent;
    }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: transparent;
      color: #1e2945;
      padding: 6px;
      display: flex;
      flex-direction: column;
      gap: 12px;
      min-height: 100%;
    }
    .grid {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 8px;
      width: 100%;
    }
    .cat-card {
      border-radius: 12px;
      padding: 10px 8px 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      position: relative;
      border: 1px solid rgba(0, 0, 0, 0.06);
      transition: box-shadow 0.2s ease;
    }
    .accent-bar {
      position: absolute;
      top: 0;
      left: 12px;
      right: 12px;
      height: 3px;
      border-radius: 0 0 3px 3px;
    }
    .icon-bubble {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 4px;
      margin-bottom: 6px;
      font-size: 20px;
      background: #ffffff;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    }
    .cat-title {
      font-size: 15px;
      font-weight: 700;
      line-height: 1.2;
      margin-bottom: 2px;
    }
    .cat-sub {
      font-size: 11px;
      color: #64748b;
      margin-bottom: 10px;
      line-height: 1.2;
    }
    .pill-list {
      display: flex;
      flex-direction: column;
      gap: 6px;
      width: 100%;
    }
    .pill {
      background: #ffffff;
      border: 1px solid;
      border-radius: 16px;
      padding: 5px 6px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      text-align: center;
      transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
      user-select: none;
    }
    
    /* Category 1: Size */
    .cat-size { background: #f0f9ff; }
    .cat-size .accent-bar { background: #0284c7; }
    .cat-size .cat-title { color: #0369a1; }
    .cat-size .pill { border-color: #bae6fd; color: #0369a1; }
    .cat-size .pill:hover, .cat-size .pill.active { background: #0284c7; color: #ffffff; border-color: #0284c7; box-shadow: 0 2px 8px rgba(2, 132, 199, 0.35); }

    /* Category 2: Shape */
    .cat-shape { background: #faf5ff; }
    .cat-shape .accent-bar { background: #9333ea; }
    .cat-shape .cat-title { color: #7e22ce; }
    .cat-shape .pill { border-color: #e9d5ff; color: #7e22ce; }
    .cat-shape .pill:hover, .cat-shape .pill.active { background: #9333ea; color: #ffffff; border-color: #9333ea; box-shadow: 0 2px 8px rgba(147, 51, 234, 0.35); }

    /* Category 3: Color */
    .cat-color { background: #fffbeb; }
    .cat-color .accent-bar { background: #d97706; }
    .cat-color .cat-title { color: #b45309; }
    .cat-color .pill { border-color: #fde68a; color: #b45309; }
    .cat-color .pill:hover, .cat-color .pill.active { background: #d97706; color: #ffffff; border-color: #d97706; box-shadow: 0 2px 8px rgba(217, 119, 6, 0.35); }

    /* Category 4: Texture */
    .cat-texture { background: #f0fdf4; }
    .cat-texture .accent-bar { background: #059669; }
    .cat-texture .cat-title { color: #047857; }
    .cat-texture .pill { border-color: #a7f3d0; color: #047857; }
    .cat-texture .pill:hover, .cat-texture .pill.active { background: #059669; color: #ffffff; border-color: #059669; box-shadow: 0 2px 8px rgba(5, 150, 105, 0.35); }

    /* Category 5: Sensory */
    .cat-sensory { background: #fff1f2; }
    .cat-sensory .accent-bar { background: #e11d48; }
    .cat-sensory .cat-title { color: #be123c; }
    .cat-sensory .pill { border-color: #fecdd3; color: #be123c; }
    .cat-sensory .pill:hover, .cat-sensory .pill.active { background: #e11d48; color: #ffffff; border-color: #e11d48; box-shadow: 0 2px 8px rgba(225, 29, 72, 0.35); }

    /* Bottom Preview Bar */
    .preview-bar {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 10px 16px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      font-size: 14px;
      color: #475569;
      min-height: 44px;
      text-align: center;
    }
    .preview-text {
      font-size: 15px;
      color: #1e2945;
      font-weight: 500;
    }
    .preview-text strong {
      padding: 2px 6px;
      border-radius: 6px;
      font-weight: 700;
    }

    @media (max-width: 580px) {
      .grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .grid > .cat-card:last-child {
        grid-column: span 2;
      }
      .preview-bar {
        font-size: 13px;
      }
    }
  </style>
</head>
<body>

  <div class="grid">
    
    <div class="cat-card cat-size">
      <div class="accent-bar"></div>
      <div class="icon-bubble">📏</div>
      <div class="cat-title">Size</div>
      <div class="cat-sub">How big or small</div>
      <div class="pill-list">
        <button class="pill" data-type="size" data-sentence="A <strong style='background:#e0f2fe;color:#0284c7;'>gigantic</strong> tree towers over the forest.">gigantic</button>
        <button class="pill" data-type="size" data-sentence="A <strong style='background:#e0f2fe;color:#0284c7;'>tiny</strong> ladybug rested on the leaf.">tiny</button>
        <button class="pill" data-type="size" data-sentence="Water has <strong style='background:#e0f2fe;color:#0284c7;'>microscopic</strong> organisms.">microscopic</button>
      </div>
    </div>

    
    <div class="cat-card cat-shape">
      <div class="accent-bar"></div>
      <div class="icon-bubble">📐</div>
      <div class="cat-title">Shape</div>
      <div class="cat-sub">Form & outline</div>
      <div class="pill-list">
        <button class="pill" data-type="shape" data-sentence="The clock had a <strong style='background:#f3e8ff;color:#9333ea;'>round</strong> wooden frame.">round</button>
        <button class="pill" data-type="shape" data-sentence="She ate a <strong style='background:#f3e8ff;color:#9333ea;'>triangular</strong> slice of pizza.">triangular</button>
        <button class="pill" data-type="shape" data-sentence="An <strong style='background:#f3e8ff;color:#9333ea;'>oval</strong> mirror hung in the hall.">oval</button>
      </div>
    </div>

    
    <div class="cat-card cat-color">
      <div class="accent-bar"></div>
      <div class="icon-bubble">🎨</div>
      <div class="cat-title">Color</div>
      <div class="cat-sub">Shade & hue</div>
      <div class="pill-list">
        <button class="pill" data-type="color" data-sentence="The <strong style='background:#fef3c7;color:#d97706;'>golden</strong> sunlight warmed the room.">golden</button>
        <button class="pill" data-type="color" data-sentence="He wore a <strong style='background:#fef3c7;color:#d97706;'>crimson</strong> velvet coat.">crimson</button>
        <button class="pill" data-type="color" data-sentence="A <strong style='background:#fef3c7;color:#d97706;'>bright yellow</strong> sunflower opened.">bright yellow</button>
      </div>
    </div>

    
    <div class="cat-card cat-texture">
      <div class="accent-bar"></div>
      <div class="icon-bubble">✋</div>
      <div class="cat-title">Texture</div>
      <div class="cat-sub">How it feels</div>
      <div class="pill-list">
        <button class="pill" data-type="texture" data-sentence="The road had a <strong style='background:#dcfce7;color:#059669;'>bumpy</strong> surface.">bumpy</button>
        <button class="pill" data-type="texture" data-sentence="She wrapped the <strong style='background:#dcfce7;color:#059669;'>silky</strong> ribbon.">silky</button>
        <button class="pill" data-type="texture" data-sentence="Watch out for the <strong style='background:#dcfce7;color:#059669;'>prickly</strong> cactus! ">prickly</button>
      </div>
    </div>

    
    <div class="cat-card cat-sensory">
      <div class="accent-bar"></div>
      <div class="icon-bubble">✨</div>
      <div class="cat-title">Sensory</div>
      <div class="cat-sub">Taste, sound, smell</div>
      <div class="pill-list">
        <button class="pill" data-type="sensory" data-sentence="The lemonade was <strong style='background:#ffe4e6;color:#e11d48;'>sour</strong> and icy.">sour</button>
        <button class="pill" data-type="sensory" data-sentence="A <strong style='background:#ffe4e6;color:#e11d48;'>buzzing</strong> bee flew around flowers.">buzzing</button>
        <button class="pill" data-type="sensory" data-sentence="We smelled the <strong style='background:#ffe4e6;color:#e11d48;'>smoky</strong> campfire.">smoky</button>
      </div>
    </div>
  </div>

  
  <div class="preview-bar" id="previewBar">
    <span class="preview-text" id="previewText">Tap any adjective to see it in context</span>
  </div>

  <script>
    const pills = document.querySelectorAll('.pill');
    const previewText = document.getElementById('previewText');

    function setActivePill(pill) {
      pills.forEach(p => p.classList.remove('active'));
      pill.classList.add('active');
      const sentence = pill.getAttribute('data-sentence');
      previewText.innerHTML = sentence;
    }

    pills.forEach(pill => {
      pill.addEventListener('click', () => setActivePill(pill));
    });

    // Auto-select first pill as active default
    if (pills.length > 0) {
      setActivePill(pills[0]);
    }
  </script>
</body>
</html>

Alfabetets bokstäver och vokalljud på romani chib

Konsonanter och deras grundljud

Samband mellan ljud och bokstav i enkla stavelser

Specialtecken och diakritiska tecken i romsk skrift

Dubbelteckning och långa konsonantljud

Sammansatta språkljud och bokstavskombinationer

Läsa och bygga trebokstavsord

Bokstäver, ljud och ordavkodning på romani chib

Meänkielins alfabet: Bokstävernas namn och form

Vokaler på meänkieli: Korta och långa vokalljud

Vokalerna a och ä: Ljud och skrivsätt

Vokalerna o och ö: Ljud och skrivsätt

Vokalerna u och y: Ljud och skrivsätt

Konsonanterna k, p och t i början av ord

Konsonanterna s, m, n och l: Ljudande och skrivning

Bokstaven h och aspirerat ljud i meänkieli

Meänkielins alfabet och grundläggande bokstavsljud

Dela upp ord i stavelser med klappning

Rimord och språklekar på romani chib

Läsa vanliga synord och småord

Läsa korta meningar med flyt

Skilja på stora och små bokstäver

Lyssna och skriva enkla ord (enkelt diktamen)

Språkets ljudsystem i min varietet av romani chib

Från ord till meningar: Läsflyt och skrivande på romani chib

Dubbla vokaler: aa, ee, ii, oo, uu, yy, ää och öö

Dubbla konsonanter: kk, pp, tt och mm

Diftonger i meänkieli: uo, ie och yö

Diftonger med i: ai, ei, oi och ui

Dela ord i stavelser på meänkieli

Från ljud till enkla ord: Ljuda ihop korta ord

Läsa enkla meningar med ljudenliga ord

Ljudkombinationer och tidig läsning på meänkieli

Using Definite and Indefinite Articles Correctly

Expanding Noun Phrases with Articles and Descriptive Adjectives

Identifying Adverbs That Tell How, When, and Where

Forming Regular Adverbs with the -ly Suffix

Choosing Between Adjectives and Adverbs in Sentences

Using Comparative and Superlative Adjectives to Compare

Using Comparative and Superlative Adverbs in Writing

Modifiers: Adjectives, Adverbs, and Expanded Noun Phrases

Stor bokstav och punkt i enkla meningar

Stor bokstav vid namn och platser i Tornedalen

Frågetecken och utropstecken i skrift

Vokalharmoni i meänkieli: Bakre och främre vokaler

Stavning av vanliga småord och bindeord

Dubbelteckning av konsonanter: ll, nn och ss

Stavningsregler vid stadieväxling: k, p och t

Vanliga ord med lång vokal: Stavning av dubbelvokal

Sammansatta ord på meänkieli: Känna igen och skriva

Ord som låter lika men stavas olika

Skiljetecken och stavningsregler på meänkieli

Identifying Complete Subjects and Predicates in Simple Sentences

Combining Subjects to Create Compound Subjects

Combining Verbs to Create Compound Predicates

Connecting Independent Clauses with Coordinating Conjunctions

Choosing Between Simple, Compound, and Complex Sentences

Expanding Simple Sentences with Prepositional Phrases

Rearranging Word Order in Sentences for Variety and Flow

Identifying and Correcting Run-On Sentences and Sentence Fragments

Sentence Architecture: Simple Sentences, Compound Structures, and Conjunctions

Stavningskontroll: Läsa igenom och rätta egen text

Alfabetisk ordning: Hitta ord i enkla ordlistor

Använda digitala och tryckta ordböcker på meänkieli

Digitala hjälpmedel för stavning och ordförslag

Sammanfattning av stavningsregler i elevnära texter

Stavningshjälpmedel och textgranskning på meänkieli

Romska sagor och berättelser för barn

Traditionella romska sagor och fabler för barn

Berättelsens delar: Början, mitt och slut

Karaktärer och miljöer i berättande texter

Bilderböcker: Samspel mellan text och bild

Dikter och ramsor på romani chib

Romska barnvisor och sångtexter

Berättelser, rim och visor på romani chib

Hälsningsfraser och artighetsord på meänkieli

Ord för familj och släkt: Perhe ja suku

Ord för hemmet och rummen: Koti ja huonheet

Ord för kroppen och hälsan: Ruumhi ja terveys

Ord för kläder och vädret: Vaatheet ja sää

Ord för mat och dryck: Ruoka ja juoma

Vardagsord och närmiljö på meänkieli

Ord för glada och lugna känslor: Iloinen ja rauhallinen

Ord för ledsna, arga och rädda känslor

Uttrycka vad man tycker om och ogillar

Uttrycka enkla åsikter med motiveringar: Mie tykkään siksi ko...

Ord för skolan och skoldagen: Koulu ja koulupäivä

Ord för fritid, lekar och intressen: Vappaa-aika

Synonymer och motsatsord på meänkieli

Använda kontextledtrådar för att förstå nya ord

Tematiskt ordförråd: Skapa en egen ordbok

Känslor, åsikter och ordkunskap på meänkieli

Substantiv: Genus, numerus och bestämdhet i romani chib

Adjektivens böjning och kongruens

Verbböjning: Tempus (nutid, dåtid och framtid)

Kasussystemet i romani chib: Subjekt, objekt och ägande

Satser och satsdelar: Subjekt, predikat och adverbial

Ordbildning: Avledningar, prefix och suffix på romani chib

Romani chibs grammatik och formlära

Vad är en mening? Subjekt och predikat i enkla satser

Substantiv på meänkieli: Namn på saker och djur

Substantiv i singular och plural: Ental och flertal med -t

Verb på meänkieli: Handlingar och vad som händer

Verbböjning i presens (nutid): Mie, sie och hän

Verbböjning i plural: Met, tet och het

Nekande meningar: Använda en, et, ei, emmä, että, eivä

Adjektiv på meänkieli: Beskrivande ord

Adjektivets placering och böjning med substantivet

Ordklasser och böjningsmönster på meänkieli

Platsändelser: -ssa/ssä (i) och -lla/llä (på)

Rörelseändelser: -sta/stä (från) och -lle (till)

Frågesatser: Ordföljd och frågesuffix -ko/-kö

Frågeord: Kuka, mikä, missä, minne och miksi

Bindeord som knyter ihop meningar: ja, mutta och ko

Skapa tydliga och fullständiga meningar

Frågor, ändelser och meningsbyggnad på meänkieli

Substantiv på meänkieli: singular och plural

Substantivens kasus: genitiv och ägande

Lokalkasus: var någonstans (inessiv och elativ)

Lokalkasus: till och på (illativ och allativ)

Verb på meänkieli: infinitiv och presens

Verbens dåtid: imperfekt och perfekt

Nekande verb och nekande satser på meänkieli

Meänkielins grammatik: Substantiv, kasus och verb

Adjektiv på meänkieli: beskrivande ord och komparation

Personliga och demonstrativa pronomen

Postpositioner och prepositioner i meänkieli

Ordbildning: sammansatta ord och avledningar

Satsdelar: subjekt, predikat och objekt

Ordföljd i huvudsatser och frågor

Skiljetecken och meningsbyggnad på meänkieli

Meänkielins grammatik: Ordbildning och meningsbyggnad

Planera texten med bilder och enkla stödord

Skriva en enkel berättelse med röd tråd

Beskriva en person eller en vän

Skriva korta meddelanden och gratulationskort

Skriva en enkel faktatext om ett djur eller ett intresse

Skriva en instruktion: Hur man gör eller leker

Skriva enkla dikter och rim på romani chib

Skriva olika typer av texter på romani chib

Connecting Words to Real-Life Contexts and Everyday Experiences

Identifying and Using Synonyms in Sentences

Identifying and Using Antonyms in Sentences

What Are Shades of Meaning Among Related Words?

Distinguishing Shades of Meaning Among Closely Related Verbs

Distinguishing Shades of Meaning Among Closely Related Adjectives

Choosing Precise Words to Express Intensity and Feeling in Writing

Word Nuance: Synonyms, Antonyms, and Shades of Meaning

What Are Noun Groups?

Adding Adjectives to Make Noun Groups

Using Articles: a, an, the in Noun Groups

What Are Verb Groups?

Building Verb Groups With Helper Verbs

Expanding Noun and Verb Groups

Rim och ramsor på meänkieli: Lyssna och känna igen rimord

Enkla dikter för barn: Känsla och bilder i orden

Sånger på meänkieli: Sjunga och förstå textens innehåll

Koppla berättelsens innehåll till egna erfarenheter

Tolka textens budskap: Vad vill författaren berätta?

Läslust och högläsning med inlevelse på meänkieli

Rim, dikter och fördjupat textsamtal på meänkieli

Meningens gränser: Stor bokstav och punkt

Frågetecken och utropstecken

Substantiv: Namn på saker, djur och personer

Substantivens genus: Maskulinum och femininum

Ental och flertal av substantiv (singular och plural)

Adjektiv: Ord som beskriver hur något ser ut eller är

Adjektivens böjning efter substantiv

Verb: Vad görs och vad händer?

Verb i nutid och dåtid (händer nu eller hände då)

Personliga pronomen på romani chib

Ordklasser och grundläggande skiljetecken på romani chib

Lässtrategi: Skumma och söka för att hitta svar

Ställa frågor till faktatexten: Före, under och efter läsning

Sammanfatta huvudinnehåll med stödord ur faktatext

Läsa och förstå texter i digitala medier på meänkieli

Skyltar, anslag och korta meddelanden i vardagen

Läsa om Tornedalens orter och älvar: Tornionjoki

Källkritisk blick: Vem har skrivit texten och varför?

Jämföra information från två korta faktatexter

Berätta vad man har lärt sig från en faktatext

Lässtrategier, digitala medier och källkritik på meänkieli

Binda ihop meningar med bindeord (och, men, för att)

Ordföljd i påståenden och frågor

Stavningsregler för vanligt förekommande ord

Använda ordlistor och stavningsstöd

Jämföra grammatiska mönster i romani chib och svenska

Meningsbyggnad, stavning och språkmönster på romani chib

Planera en berättelse med tankekarta och ritade bilder

Hitta på en spännande huvudperson och ge den namn

Beskriva miljön: Var utspelar sig sagan?

Skriva en fångande början på berättelsen

Bygga upp en händelse: Något händer och ett problem uppstår

Skriva en lösning och ett tydligt slut

Använda tidsord för att skapa sammanhang: Ensiksi, sitte, viimeksi

Skriva enkel dialog: Vad säger karaktärerna?

Bygga upp en berättelse på meänkieli

OGE.3.L.3

Aligned learning resources

Related diagrams