<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      -webkit-tap-highlight-color: transparent;
    }

    body {
      width: 100%;
      min-height: 100vh;
      background: #ffffff;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: 10px 8px;
      user-select: none;
      overflow-x: hidden;
    }

    .header-title {
      font-size: 16px;
      font-weight: 700;
      color: #0f172a;
      letter-spacing: -0.2px;
      display: flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 4px;
    }

    .main-stage {
      position: relative;
      width: 100%;
      max-width: 440px;
      height: 310px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: auto 0;
    }

    /* Central Character SVG */
    .character-svg {
      width: 160px;
      height: 240px;
      overflow: visible;
      flex-shrink: 0;
      transition: width 0.2s, height 0.2s;
    }

    /* Interactive Badges */
    .badge-btn {
      position: absolute;
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 16px;
      padding: 4px 8px;
      font-size: 12px;
      font-weight: 600;
      color: #334155;
      display: flex;
      align-items: center;
      gap: 6px;
      cursor: pointer;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
      transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
      z-index: 10;
      max-width: 135px;
    }

    .badge-btn:hover {
      border-color: #94a3b8;
      box-shadow: 0 3px 8px rgba(0, 0, 0, 0.09);
    }

    .badge-btn .icon {
      font-size: 14px;
      line-height: 1;
      flex-shrink: 0;
    }

    .badge-btn .rule {
      font-size: 10px;
      font-weight: 500;
      color: #64748b;
      display: block;
      margin-top: 1px;
      line-height: 1.15;
    }

    .badge-btn .text-col {
      display: flex;
      flex-direction: column;
      text-align: left;
      line-height: 1.15;
    }

    /* Badge Positioning */
    #badge-brain {
      top: 4px;
      left: 50%;
      transform: translateX(-50%);
      max-width: 180px;
    }

    #badge-eyes {
      top: 56px;
      left: 4px;
    }

    #badge-ears {
      top: 56px;
      right: 4px;
    }

    #badge-mouth {
      top: 136px;
      left: 4px;
    }

    #badge-body {
      bottom: 4px;
      left: 50%;
      transform: translateX(-50%);
      max-width: 180px;
    }

    /* Responsive adjustments for mobile widths */
    @media (max-width: 420px) {
      .main-stage {
        height: 290px;
      }

      .character-svg {
        width: 130px;
        height: 200px;
      }

      .badge-btn {
        padding: 3px 6px;
        font-size: 11px;
        gap: 4px;
        border-radius: 12px;
        max-width: 110px;
      }

      .badge-btn .icon {
        font-size: 13px;
      }

      .badge-btn .rule {
        font-size: 9px;
      }

      #badge-brain {
        top: 2px;
        max-width: 170px;
      }

      #badge-eyes {
        top: 48px;
        left: 2px;
      }

      #badge-ears {
        top: 48px;
        right: 2px;
      }

      #badge-mouth {
        top: 126px;
        left: 2px;
      }

      #badge-body {
        bottom: 2px;
        max-width: 170px;
      }
    }

    @media (max-width: 350px) {
      .main-stage {
        height: 275px;
      }

      .character-svg {
        width: 115px;
        height: 180px;
      }

      .badge-btn {
        padding: 2px 5px;
        font-size: 10px;
        gap: 3px;
        border-radius: 10px;
        max-width: 100px;
      }

      .badge-btn .icon {
        font-size: 12px;
      }

      .badge-btn .rule {
        font-size: 8px;
      }

      #badge-eyes {
        top: 42px;
        left: 1px;
      }

      #badge-ears {
        top: 42px;
        right: 1px;
      }

      #badge-mouth {
        top: 118px;
        left: 1px;
      }

      #badge-brain {
        top: 1px;
        max-width: 160px;
      }

      #badge-body {
        bottom: 1px;
        max-width: 160px;
      }
    }

    /* Active Highlight States */
    .badge-btn.active {
      border-color: #0284c7;
      background: #f0f9ff;
      color: #0369a1;
      box-shadow: 0 4px 12px rgba(2, 132, 199, 0.2);
    }

    .badge-btn.active .rule {
      color: #0284c7;
      font-weight: 600;
    }

    /* Focus Rings on Character */
    .glow-marker {
      transition: opacity 0.25s ease;
      opacity: 0;
      pointer-events: none;
    }

    .glow-marker.active {
      opacity: 1;
    }

    /* Indicator bar */
    .controls {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-top: 4px;
    }

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

    .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #cbd5e1;
      cursor: pointer;
      transition: background 0.2s, opacity 0.2s;
    }

    .dot.active {
      background: #0284c7;
    }

    .play-btn {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      border-radius: 14px;
      padding: 4px 10px;
      font-size: 12px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 4px;
      transition: background 0.2s, border-color 0.2s;
    }

    .play-btn:hover {
      background: #e2e8f0;
      border-color: #94a3b8;
    }
  </style>
</head>
<body>

  <div class="header-title">
    <span>🌟</span> Whole Body Listening
  </div>

  <div class="main-stage">
    
    <svg class="character-svg" viewBox="0 0 180 260" aria-hidden="true">
      <defs>
        <filter id="soft-shadow" x="-10%" y="-10%" width="120%" height="120%">
          <feDropShadow dx="0" dy="3" stdDeviation="3" flood-opacity="0.08" />
        </filter>
      </defs>

      
      <line x1="90" y1="28" x2="90" y2="44" stroke="#94a3b8" stroke-width="1.5" stroke-dasharray="3 3" />
      <line x1="30" y1="80" x2="70" y2="76" stroke="#94a3b8" stroke-width="1.5" stroke-dasharray="3 3" />
      <line x1="150" y1="80" x2="114" y2="76" stroke="#94a3b8" stroke-width="1.5" stroke-dasharray="3 3" />
      <line x1="36" y1="150" x2="80" y2="108" stroke="#94a3b8" stroke-width="1.5" stroke-dasharray="3 3" />
      <line x1="90" y1="216" x2="90" y2="185" stroke="#94a3b8" stroke-width="1.5" stroke-dasharray="3 3" />

      
      <circle id="glow-brain" class="glow-marker" cx="90" cy="56" r="30" fill="none" stroke="#8b5cf6" stroke-width="4" />
      <circle id="glow-eyes" class="glow-marker" cx="90" cy="74" r="22" fill="none" stroke="#0284c7" stroke-width="4" />
      <g id="glow-ears" class="glow-marker">
        <circle cx="62" cy="76" r="10" fill="none" stroke="#f59e0b" stroke-width="3" />
        <circle cx="118" cy="76" r="10" fill="none" stroke="#f59e0b" stroke-width="3" />
      </g>
      <circle id="glow-mouth" class="glow-marker" cx="90" cy="98" r="14" fill="none" stroke="#ec4899" stroke-width="3.5" />
      <g id="glow-body" class="glow-marker">
        <rect x="52" y="125" width="76" height="80" rx="16" fill="none" stroke="#10b981" stroke-width="3.5" />
      </g>

      
      <path d="M64 125 C64 116 116 116 116 125 L124 180 C124 186 118 190 110 190 L70 190 C62 190 56 186 56 180 Z" fill="#38bdf8" />
      
      
      <path d="M58 135 Q50 160 74 168 Q90 172 106 168 Q130 160 122 135" fill="none" stroke="#0284c7" stroke-width="10" stroke-linecap="round" />
      
      <ellipse cx="90" cy="170" rx="14" ry="7" fill="#fed7aa" />

      
      <ellipse cx="90" cy="198" rx="42" ry="12" fill="#cbd5e1" />
      <path d="M56 188 Q90 206 124 188" stroke="#64748b" stroke-width="12" stroke-linecap="round" fill="none" />
      
      <ellipse cx="58" cy="192" rx="10" ry="6" fill="#f43f5e" />
      <ellipse cx="122" cy="192" rx="10" ry="6" fill="#f43f5e" />

      
      <rect x="83" y="108" width="14" height="18" fill="#fed7aa" rx="4" />

      
      <circle cx="90" cy="76" r="32" fill="#fed7aa" />

      
      <circle cx="60" cy="76" r="7" fill="#fed7aa" />
      <circle cx="120" cy="76" r="7" fill="#fed7aa" />
      <path d="M60 73 Q62 76 60 79" stroke="#fba785" stroke-width="1.5" fill="none" />
      <path d="M120 73 Q118 76 120 79" stroke="#fba785" stroke-width="1.5" fill="none" />

      
      <path d="M60 68 C58 46 72 38 90 38 C108 38 122 46 120 68 C114 54 104 50 90 50 C76 50 66 54 60 68 Z" fill="#6d28d9" />

      
      <circle cx="80" cy="74" r="4.5" fill="#0f172a" />
      <circle cx="100" cy="74" r="4.5" fill="#0f172a" />
      <circle cx="81.5" cy="72.5" r="1.5" fill="#ffffff" />
      <circle cx="101.5" cy="72.5" r="1.5" fill="#ffffff" />

      
      <path d="M75 66 Q80 64 85 66" stroke="#4c1d95" stroke-width="2" stroke-linecap="round" fill="none" />
      <path d="M95 66 Q100 64 105 66" stroke="#4c1d95" stroke-width="2" stroke-linecap="round" fill="none" />

      
      <path d="M90 77 L90 82" stroke="#ea580c" stroke-width="2" stroke-linecap="round" />

      
      <path d="M84 92 Q90 97 96 92" stroke="#b91c1c" stroke-width="2.2" stroke-linecap="round" fill="none" />
    </svg>

    
    <div id="badge-brain" class="badge-btn" data-index="0" role="button" tabindex="0">
      <span class="icon">🧠</span>
      <div class="text-col">
        <strong>Brain</strong>
        <span class="rule">Thinking of words</span>
      </div>
    </div>

    <div id="badge-eyes" class="badge-btn" data-index="1" role="button" tabindex="0">
      <span class="icon">👀</span>
      <div class="text-col">
        <strong>Eyes</strong>
        <span class="rule">Looking at speaker</span>
      </div>
    </div>

    <div id="badge-ears" class="badge-btn" data-index="2" role="button" tabindex="0">
      <span class="icon">👂</span>
      <div class="text-col">
        <strong>Ears</strong>
        <span class="rule">Ready to hear</span>
      </div>
    </div>

    <div id="badge-mouth" class="badge-btn" data-index="3" role="button" tabindex="0">
      <span class="icon">🤐</span>
      <div class="text-col">
        <strong>Mouth</strong>
        <span class="rule">Quiet until called</span>
      </div>
    </div>

    <div id="badge-body" class="badge-btn" data-index="4" role="button" tabindex="0">
      <span class="icon">🧘</span>
      <div class="text-col">
        <strong>Hands &amp; Feet</strong>
        <span class="rule">Calm and still</span>
      </div>
    </div>
  </div>

  
  <div class="controls">
    <button id="playBtn" class="play-btn" aria-label="Toggle Auto-Play">
      <span id="playIcon">⏸</span> Auto
    </button>
    <div class="step-dots">
      <span class="dot" data-index="0" role="button" tabindex="0" aria-label="Step 1"></span>
      <span class="dot" data-index="1" role="button" tabindex="0" aria-label="Step 2"></span>
      <span class="dot" data-index="2" role="button" tabindex="0" aria-label="Step 3"></span>
      <span class="dot" data-index="3" role="button" tabindex="0" aria-label="Step 4"></span>
      <span class="dot" data-index="4" role="button" tabindex="0" aria-label="Step 5"></span>
    </div>
  </div>

  <script>
    const badges = [
      { badge: document.getElementById('badge-brain'), glow: document.getElementById('glow-brain') },
      { badge: document.getElementById('badge-eyes'),  glow: document.getElementById('glow-eyes') },
      { badge: document.getElementById('badge-ears'),  glow: document.getElementById('glow-ears') },
      { badge: document.getElementById('badge-mouth'), glow: document.getElementById('glow-mouth') },
      { badge: document.getElementById('badge-body'),  glow: document.getElementById('glow-body') }
    ];

    const dots = document.querySelectorAll('.dot');
    const playBtn = document.getElementById('playBtn');
    const playIcon = document.getElementById('playIcon');

    let currentIndex = 0;
    let timer = null;
    let isPlaying = true;

    function activateStep(index) {
      currentIndex = (index + badges.length) % badges.length;
      
      badges.forEach((item, i) => {
        if (i === currentIndex) {
          item.badge.classList.add('active');
          item.glow.classList.add('active');
          dots[i].classList.add('active');
        } else {
          item.badge.classList.remove('active');
          item.glow.classList.remove('active');
          dots[i].classList.remove('active');
        }
      });
    }

    function startAutoCycle() {
      stopAutoCycle();
      isPlaying = true;
      playIcon.textContent = '⏸';
      timer = setInterval(() => {
        activateStep(currentIndex + 1);
      }, 3000);
    }

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

    // Direct Badge Interactions
    badges.forEach((item, index) => {
      const handler = () => {
        stopAutoCycle();
        activateStep(index);
      };
      item.badge.addEventListener('click', handler);
      item.badge.addEventListener('keydown', (e) => {
        if (e.key === 'Enter' || e.key === ' ') {
          e.preventDefault();
          handler();
        }
      });
    });

    // Dot Interactions
    dots.forEach((dot, index) => {
      const handler = () => {
        stopAutoCycle();
        activateStep(index);
      };
      dot.addEventListener('click', handler);
      dot.addEventListener('keydown', (e) => {
        if (e.key === 'Enter' || e.key === ' ') {
          e.preventDefault();
          handler();
        }
      });
    });

    // Play/Pause Toggle
    playBtn.addEventListener('click', () => {
      if (isPlaying) {
        stopAutoCycle();
      } else {
        startAutoCycle();
      }
    });

    // Initial setup
    activateStep(0);
    startAutoCycle();
  </script>
</body>
</html>

Following Discussion Ground Rules and Turn-Taking

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Turn-Taking & Discussion Flow</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }

    body {
      width: 100%;
      background: transparent;
      color: #1e293b;
      padding: 8px 4px;
      overflow-x: hidden;
    }

    .stepper-container {
      display: flex;
      flex-direction: column;
      gap: 10px;
      width: 100%;
      max-width: 660px;
      margin: 0 auto;
    }

    /* Controls Bar */
    .controls {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      flex-wrap: wrap;
    }

    .nav-group {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
    }

    .btn-step {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      color: #475569;
      font-size: 12px;
      font-weight: 600;
      padding: 6px 10px;
      border-radius: 6px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    }

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

    .btn-step.active {
      background: #0284c7;
      border-color: #0369a1;
      color: #ffffff;
      box-shadow: 0 2px 4px rgba(2, 132, 199, 0.25);
    }

    .play-btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      color: #334155;
      padding: 6px 12px;
      border-radius: 6px;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: background-color 0.2s ease;
    }

    .play-btn:hover {
      background: #f8fafc;
    }

    /* Comic Flow Layout */
    .flow-wrapper {
      display: flex;
      align-items: stretch;
      justify-content: space-between;
      gap: 6px;
      width: 100%;
    }

    .panel-card {
      flex: 1 1 0;
      min-width: 0;
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 10px;
      padding: 10px 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 250px;
      position: relative;
      transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
      cursor: pointer;
    }

    .panel-card:hover {
      border-color: #94a3b8;
    }

    .panel-card.active {
      border-color: #0284c7;
      background: #f0f9ff;
      box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.18), 0 4px 10px rgba(0, 0, 0, 0.05);
    }

    /* Connector element */
    .flow-connector {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2px;
      flex-shrink: 0;
      width: 32px;
      text-align: center;
      padding: 4px 0;
    }

    .connector-arrow {
      color: #0284c7;
      font-size: 18px;
      line-height: 1;
      font-weight: bold;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .connector-label {
      font-size: 9px;
      font-weight: 700;
      color: #64748b;
      text-transform: uppercase;
      letter-spacing: 0.3px;
      line-height: 1.1;
    }

    .step-badge {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: #64748b;
      background: #f1f5f9;
      padding: 3px 8px;
      border-radius: 12px;
      margin-bottom: 6px;
    }

    .panel-card.active .step-badge {
      background: #0284c7;
      color: #ffffff;
    }

    /* Comic Stage */
    .stage {
      width: 100%;
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin: 4px 0;
    }

    /* Speech Bubble */
    .bubble {
      background: #ffffff;
      border: 1.5px solid #cbd5e1;
      border-radius: 8px;
      padding: 6px 8px;
      font-size: 11.5px;
      line-height: 1.35;
      text-align: center;
      color: #1e293b;
      position: relative;
      width: 100%;
      min-height: 52px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    }

    .bubble.highlight {
      background: #ffffff;
      border-color: #0284c7;
      font-weight: 600;
      color: #0369a1;
    }

    .bubble.silent {
      border: 1.5px dashed #94a3b8;
      background: #f8fafc;
      color: #64748b;
      font-style: italic;
      font-size: 11px;
    }

    .bubble::after {
      content: '';
      position: absolute;
      bottom: -6px;
      left: 50%;
      transform: translateX(-50%);
      border-width: 6px 6px 0;
      border-style: solid;
      border-color: #cbd5e1 transparent;
      display: block;
      width: 0;
    }

    .bubble.highlight::after {
      border-color: #0284c7 transparent;
    }

    .bubble.silent::after {
      border-color: #94a3b8 transparent;
    }

    /* Characters Container */
    .characters {
      display: flex;
      justify-content: space-around;
      align-items: center;
      width: 100%;
      padding: 4px 2px;
      gap: 4px;
    }

    .person {
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      min-width: 44px;
    }

    .avatar-wrapper {
      position: relative;
      width: 42px;
      height: 42px;
      background: #f8fafc;
      border: 1.5px solid #e2e8f0;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 4px;
    }

    .panel-card.active .person.active-role .avatar-wrapper {
      background: #ffffff;
      border-color: #0284c7;
      box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.25);
    }

    .avatar-face {
      font-size: 24px;
      line-height: 1;
    }

    .action-badge {
      position: absolute;
      top: -4px;
      right: -6px;
      background: #ffffff;
      border: 1.5px solid #cbd5e1;
      border-radius: 10px;
      font-size: 11px;
      width: 20px;
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }

    .person.active-role .action-badge {
      border-color: #0284c7;
      background: #e0f2fe;
    }

    .role-tag {
      font-size: 10px;
      font-weight: 700;
      color: #64748b;
      text-align: center;
      line-height: 1.2;
    }

    .person.active-role .role-tag {
      color: #0369a1;
    }

    .role-action {
      font-size: 9px;
      font-weight: 600;
      color: #94a3b8;
      text-align: center;
    }

    .person.active-role .role-action {
      color: #0284c7;
    }

    /* Caption footer */
    .panel-caption {
      font-size: 12px;
      font-weight: 700;
      text-align: center;
      color: #334155;
      margin-top: 4px;
      border-top: 1px solid #f1f5f9;
      padding-top: 6px;
      width: 100%;
    }

    .panel-card.active .panel-caption {
      color: #0369a1;
      border-color: #bae6fd;
    }

    /* Responsive adjustments */
    @media (max-width: 520px) {
      .flow-wrapper {
        flex-direction: column;
        gap: 6px;
      }

      .panel-card {
        min-height: auto;
        padding: 8px 10px;
        flex-direction: row;
        gap: 10px;
        align-items: center;
      }

      .step-badge {
        margin-bottom: 0;
        align-self: center;
        flex-shrink: 0;
      }

      .stage {
        flex-direction: row-reverse;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
        margin: 0;
      }

      .bubble {
        min-height: 44px;
        font-size: 11px;
        padding: 4px 6px;
        flex: 1;
      }

      .bubble::after {
        display: none;
      }

      .characters {
        width: auto;
        gap: 8px;
        flex-shrink: 0;
      }

      .panel-caption {
        display: none;
      }

      .flow-connector {
        flex-direction: row;
        width: 100%;
        height: 18px;
        padding: 0;
        gap: 6px;
      }

      .connector-arrow {
        transform: rotate(90deg);
        font-size: 15px;
      }
    }
  </style>
</head>
<body>
  <div class="stepper-container">
    
    <div class="controls">
      <div class="nav-group">
        <button class="btn-step active" data-step="0">1. Share Idea</button>
        <button class="btn-step" data-step="1">2. Wait & Signal</button>
        <button class="btn-step" data-step="2">3. Build On</button>
      </div>
      <button class="play-btn" id="playToggle" aria-label="Toggle Auto Play">
        <span id="playIcon">⏸</span> <span id="playText">Auto</span>
      </button>
    </div>

    
    <div class="flow-wrapper">
      
      <div class="panel-card active" data-step="0" tabindex="0" role="button" aria-label="Step 1: Leo speaks while Maya listens">
        <span class="step-badge">Step 1</span>
        <div class="stage">
          <div class="bubble highlight">
            "Polar bears have blubber!"
          </div>
          <div class="characters">
            <div class="person active-role">
              <div class="avatar-wrapper">
                <span class="avatar-face">👦</span>
                <span class="action-badge" title="Speaking">🗣️</span>
              </div>
              <span class="role-tag">Leo</span>
              <span class="role-action">Speaking</span>
            </div>
            <div class="person">
              <div class="avatar-wrapper">
                <span class="avatar-face">👧</span>
                <span class="action-badge" title="Listening actively">👂</span>
              </div>
              <span class="role-tag">Maya</span>
              <span class="role-action">Listening</span>
            </div>
          </div>
        </div>
        <div class="panel-caption">Listen Quietly</div>
      </div>

      
      <div class="flow-connector" aria-hidden="true">
        <span class="connector-arrow">➔</span>
        <span class="connector-label">Then</span>
      </div>

      
      <div class="panel-card" data-step="1" tabindex="0" role="button" aria-label="Step 2: Leo finishes and Maya raises hand">
        <span class="step-badge">Step 2</span>
        <div class="stage">
          <div class="bubble silent">
            (Waits calmly for Leo to finish...)
          </div>
          <div class="characters">
            <div class="person">
              <div class="avatar-wrapper">
                <span class="avatar-face">👦</span>
                <span class="action-badge" title="Finished speaking">✨</span>
              </div>
              <span class="role-tag">Leo</span>
              <span class="role-action">Finished</span>
            </div>
            <div class="person active-role">
              <div class="avatar-wrapper">
                <span class="avatar-face">👧</span>
                <span class="action-badge" title="Raising hand calmly">✋</span>
              </div>
              <span class="role-tag">Maya</span>
              <span class="role-action">Signals</span>
            </div>
          </div>
        </div>
        <div class="panel-caption">Signal to Speak</div>
      </div>

      
      <div class="flow-connector" aria-hidden="true">
        <span class="connector-arrow">➔</span>
        <span class="connector-label">Next</span>
      </div>

      
      <div class="panel-card" data-step="2" tabindex="0" role="button" aria-label="Step 3: Maya builds on Leo's idea">
        <span class="step-badge">Step 3</span>
        <div class="stage">
          <div class="bubble highlight">
            "Building on Leo's idea, they have black skin too!"
          </div>
          <div class="characters">
            <div class="person">
              <div class="avatar-wrapper">
                <span class="avatar-face">👦</span>
                <span class="action-badge" title="Listening and nodding">👍</span>
              </div>
              <span class="role-tag">Leo</span>
              <span class="role-action">Listening</span>
            </div>
            <div class="person active-role">
              <div class="avatar-wrapper">
                <span class="avatar-face">👧</span>
                <span class="action-badge" title="Speaking and adding idea">🗣️</span>
              </div>
              <span class="role-tag">Maya</span>
              <span class="role-action">Connecting</span>
            </div>
          </div>
        </div>
        <div class="panel-caption">Connect & Add</div>
      </div>
    </div>
  </div>

  <script>
    (function() {
      // Self-contained Step Controller
      class ComicStepPlayer {
        constructor({ cards, buttons, interval = 3200 }) {
          this.cards = Array.from(cards);
          this.buttons = Array.from(buttons);
          this.interval = interval;
          this.currentIndex = 0;
          this.timer = null;
          this.isPlaying = false;

          this.init();
        }

        init() {
          this.cards.forEach((card, idx) => {
            card.addEventListener('click', () => {
              this.goTo(idx);
              this.pause();
            });
            card.addEventListener('keydown', (e) => {
              if (e.key === 'Enter' || e.key === ' ') {
                e.preventDefault();
                this.goTo(idx);
                this.pause();
              }
            });
          });

          this.buttons.forEach((btn, idx) => {
            btn.addEventListener('click', () => {
              this.goTo(idx);
              this.pause();
            });
          });

          this.updateView();
          this.start();
        }

        goTo(index) {
          this.currentIndex = (index + this.cards.length) % this.cards.length;
          this.updateView();
        }

        next() {
          this.goTo(this.currentIndex + 1);
        }

        updateView() {
          this.cards.forEach((card, idx) => {
            card.classList.toggle('active', idx === this.currentIndex);
          });
          this.buttons.forEach((btn, idx) => {
            btn.classList.toggle('active', idx === this.currentIndex);
          });
        }

        start() {
          if (this.isPlaying) return;
          this.isPlaying = true;
          this.updatePlayBtn();
          this.timer = setInterval(() => this.next(), this.interval);
        }

        pause() {
          if (!this.isPlaying) return;
          this.isPlaying = false;
          this.updatePlayBtn();
          if (this.timer) {
            clearInterval(this.timer);
            this.timer = null;
          }
        }

        toggle() {
          if (this.isPlaying) {
            this.pause();
          } else {
            this.start();
          }
        }

        updatePlayBtn() {
          const playIcon = document.getElementById('playIcon');
          const playText = document.getElementById('playText');
          if (playIcon) playIcon.textContent = this.isPlaying ? '⏸' : '▶';
          if (playText) playText.textContent = this.isPlaying ? 'Auto' : 'Play';
        }
      }

      // Initialize player
      const cards = document.querySelectorAll('.panel-card');
      const buttons = document.querySelectorAll('.btn-step');
      const playToggle = document.getElementById('playToggle');

      const player = new ComicStepPlayer({
        cards: cards,
        buttons: buttons,
        interval: 3400
      });

      if (playToggle) {
        playToggle.addEventListener('click', () => {
          player.toggle();
        });
      }
    })();
  </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>Turn-Taking and Discussion Rules</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }

    body {
      background: transparent;
      color: #1e2945;
      padding: 8px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      width: 100%;
      min-height: 100%;
      user-select: none;
    }

    .comparison-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      width: 100%;
    }

    @media (max-width: 520px) {
      .comparison-grid {
        grid-template-columns: 1fr;
      }
    }

    .panel {
      border-radius: 12px;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      overflow: hidden;
      min-height: 270px;
    }

    .panel-chaos {
      background: #eef2ff;
      border: 1px solid #c7d2fe;
    }

    .panel-rules {
      background: #f0fdf4;
      border: 1px solid #bbf7d0;
    }

    .panel-header {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 15px;
      font-weight: 700;
      margin-bottom: 6px;
    }

    .chaos-title {
      color: #dc2626;
    }

    .rules-title {
      color: #16a34a;
    }

    .table-stage {
      position: relative;
      width: 190px;
      height: 190px;
      margin: auto;
    }

    .table {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 82px;
      height: 82px;
      border-radius: 50%;
      background: #e2e8f0;
      border: 2px dashed #cbd5e1;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 600;
      color: #64748b;
      text-align: center;
    }

    .kid {
      position: absolute;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      background: #ffffff;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
      transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
      cursor: pointer;
    }

    /* Kid Positions around table */
    .pos-top { top: 0; left: 50%; transform: translateX(-50%); }
    .pos-bottom { bottom: 0; left: 50%; transform: translateX(-50%); }
    .pos-left { left: 0; top: 50%; transform: translateY(-50%); }
    .pos-right { right: 0; top: 50%; transform: translateY(-50%); }

    /* Chaotic Speech Bubbles */
    .bubble-chaos {
      position: absolute;
      background: #ef4444;
      color: #ffffff;
      font-size: 11px;
      font-weight: 800;
      padding: 3px 7px;
      border-radius: 6px;
      pointer-events: none;
      animation: pulseJitter 2.2s infinite ease-in-out;
      box-shadow: 0 2px 5px rgba(239, 68, 68, 0.35);
      z-index: 10;
    }

    .bc-1 { top: 38px; left: 34px; transform: rotate(-8deg); animation-delay: 0s; }
    .bc-2 { top: 36px; right: 30px; transform: rotate(10deg); animation-delay: 0.4s; }
    .bc-3 { bottom: 42px; left: 32px; transform: rotate(6deg); animation-delay: 0.8s; }
    .bc-4 { bottom: 40px; right: 36px; transform: rotate(-12deg); animation-delay: 1.2s; }

    @keyframes pulseJitter {
      0%, 100% { transform: scale(1) translate(0, 0); }
      50% { transform: scale(1.08) translate(1px, -1px); }
    }

    /* Rules: Active Speaker */
    .kid.speaking {
      background: #dcfce7;
      box-shadow: 0 0 0 3px #22c55e, 0 4px 10px rgba(34, 197, 94, 0.25);
      transform: scale(1.1);
    }
    .pos-top.speaking { transform: translateX(-50%) scale(1.1); }
    .pos-bottom.speaking { transform: translateX(-50%) scale(1.1); }
    .pos-left.speaking { transform: translateY(-50%) scale(1.1); }
    .pos-right.speaking { transform: translateY(-50%) scale(1.1); }

    /* Rules: Idea Bubble */
    .idea-bubble {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: #ffffff;
      border: 2px solid #22c55e;
      color: #15803d;
      padding: 5px 10px;
      border-radius: 16px;
      font-size: 12px;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 4px;
      box-shadow: 0 3px 8px rgba(0,0,0,0.06);
      transition: all 0.3s ease;
      z-index: 5;
    }

    /* Listening Indicator */
    .ear-cue {
      position: absolute;
      font-size: 11px;
      background: #ffffff;
      border-radius: 50%;
      padding: 1px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
      bottom: -4px;
      right: -4px;
    }

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

    .btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      color: #334155;
      padding: 5px 12px;
      border-radius: 6px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      transition: background 0.2s;
    }

    .btn:active {
      background: #f1f5f9;
    }

    .step-badge {
      font-size: 12px;
      color: #16a34a;
      font-weight: 700;
    }
  </style>
</head>
<body>

  <div class="comparison-grid">
    
    <div class="panel panel-chaos">
      <div class="panel-header chaos-title">
        <span>✕</span> Without Rules
      </div>

      <div class="table-stage">
        <div class="table">No order</div>
        
        <div class="kid pos-top">😵‍💫</div>
        <div class="kid pos-right">😣</div>
        <div class="kid pos-bottom">😖</div>
        <div class="kid pos-left">😫</div>

        <div class="bubble-chaos bc-1">ME FIRST!</div>
        <div class="bubble-chaos bc-2">NO, WAIT!</div>
        <div class="bubble-chaos bc-3">LISTEN TO ME!</div>
        <div class="bubble-chaos bc-4">WHAT?!</div>
      </div>
    </div>

    
    <div class="panel panel-rules">
      <div class="panel-header rules-title">
        <span>✓</span> With Ground Rules
      </div>

      <div class="table-stage">
        <div class="table"></div>
        <div id="ideaBubble" class="idea-bubble">
          <span>💡</span> <span id="ideaText">Idea 1</span>
        </div>

        <div id="kid0" class="kid pos-top speaking" onclick="setSpeaker(0)">
          <span>👧</span>
        </div>
        <div id="kid1" class="kid pos-right" onclick="setSpeaker(1)">
          <span>👦</span>
          <div class="ear-cue">👂</div>
        </div>
        <div id="kid2" class="kid pos-bottom" onclick="setSpeaker(2)">
          <span>👧</span>
          <div class="ear-cue">👂</div>
        </div>
        <div id="kid3" class="kid pos-left" onclick="setSpeaker(3)">
          <span>👦</span>
          <div class="ear-cue">👂</div>
        </div>
      </div>
    </div>
  </div>

  
  <div class="controls">
    <button class="btn" id="nextBtn" onclick="nextTurn()">
      <span>Next Turn</span> <span>→</span>
    </button>
    <button class="btn" id="playBtn" onclick="toggleAuto()">
      <span id="playIcon">⏸</span> <span id="playLabel">Pause</span>
    </button>
    <span class="step-badge" id="turnIndicator">Turn: 1 / 4</span>
  </div>

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

    const kids = [
      { el: document.getElementById('kid0'), avatar: '👧', idea: 'Idea 1' },
      { el: document.getElementById('kid1'), avatar: '👦', idea: 'Idea 2' },
      { el: document.getElementById('kid2'), avatar: '👧', idea: 'Idea 3' },
      { el: document.getElementById('kid3'), avatar: '👦', idea: 'Idea 4' }
    ];

    const ideaText = document.getElementById('ideaText');
    const turnIndicator = document.getElementById('turnIndicator');
    const playIcon = document.getElementById('playIcon');
    const playLabel = document.getElementById('playLabel');

    function updateView() {
      kids.forEach((k, idx) => {
        if (idx === currentSpeaker) {
          k.el.className = `kid ${getPosClass(idx)} speaking`;
          k.el.innerHTML = `<span>${k.avatar}</span>`;
        } else {
          k.el.className = `kid ${getPosClass(idx)}`;
          k.el.innerHTML = `<span>${k.avatar}</span><div class="ear-cue">👂</div>`;
        }
      });

      ideaText.textContent = kids[currentSpeaker].idea;
      turnIndicator.textContent = `Turn: ${currentSpeaker + 1} / 4`;
    }

    function getPosClass(idx) {
      if (idx === 0) return 'pos-top';
      if (idx === 1) return 'pos-right';
      if (idx === 2) return 'pos-bottom';
      return 'pos-left';
    }

    function setSpeaker(idx) {
      currentSpeaker = idx;
      updateView();
    }

    function nextTurn() {
      currentSpeaker = (currentSpeaker + 1) % kids.length;
      updateView();
    }

    function startTimer() {
      stopTimer();
      timer = setInterval(nextTurn, 3000);
    }

    function stopTimer() {
      if (timer) {
        clearInterval(timer);
        timer = null;
      }
    }

    function toggleAuto() {
      isPlaying = !isPlaying;
      if (isPlaying) {
        startTimer();
        playIcon.textContent = '⏸';
        playLabel.textContent = 'Pause';
      } else {
        stopTimer();
        playIcon.textContent = '▶';
        playLabel.textContent = 'Play';
      }
    }

    // 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">
  <script src="{{VENDOR_CDN}}/classace-diagram.js"></script>
  <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;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100%;
      padding: 12px;
      gap: 12px;
    }

    .traffic-flow {
      display: flex;
      flex-direction: column;
      gap: 10px;
      width: 100%;
      max-width: 420px;
    }

    .step-card {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 10px 14px;
      background: #ffffff;
      border-radius: 12px;
      border: 2px solid #e2e8f0;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
      cursor: pointer;
      transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
      user-select: none;
      -webkit-tap-highlight-color: transparent;
    }

    .light-badge {
      width: 44px;
      height: 44px;
      min-width: 44px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      transition: box-shadow 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
      opacity: 0.45;
    }

    /* Red step */
    .step-card[data-step="0"] .light-badge {
      background: #ef4444;
      color: #ffffff;
    }
    .step-card[data-step="0"].active {
      border-color: #ef4444;
      background: #fef2f2;
      box-shadow: 0 0 0 1px #ef4444, 0 4px 12px rgba(239, 68, 68, 0.15);
    }
    .step-card[data-step="0"].active .light-badge {
      opacity: 1;
      box-shadow: 0 0 14px rgba(239, 68, 68, 0.7);
    }

    /* Yellow step */
    .step-card[data-step="1"] .light-badge {
      background: #f59e0b;
      color: #ffffff;
    }
    .step-card[data-step="1"].active {
      border-color: #f59e0b;
      background: #fffbeb;
      box-shadow: 0 0 0 1px #f59e0b, 0 4px 12px rgba(245, 158, 11, 0.18);
    }
    .step-card[data-step="1"].active .light-badge {
      opacity: 1;
      box-shadow: 0 0 14px rgba(245, 158, 11, 0.7);
    }

    /* Green step */
    .step-card[data-step="2"] .light-badge {
      background: #10b981;
      color: #ffffff;
    }
    .step-card[data-step="2"].active {
      border-color: #10b981;
      background: #ecfdf5;
      box-shadow: 0 0 0 1px #10b981, 0 4px 12px rgba(16, 185, 129, 0.18);
    }
    .step-card[data-step="2"].active .light-badge {
      opacity: 1;
      box-shadow: 0 0 14px rgba(16, 185, 129, 0.7);
    }

    .step-info {
      display: flex;
      flex-direction: column;
      gap: 2px;
      flex: 1;
    }

    .step-title {
      font-size: 15px;
      font-weight: 700;
      color: #1e2945;
    }

    .step-desc {
      font-size: 13px;
      color: #64748b;
      line-height: 1.25;
    }

    .step-card.active .step-desc {
      color: #334155;
    }

    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      margin-top: 4px;
    }

    .btn-ctrl {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      color: #334155;
      font-size: 13px;
      font-weight: 600;
      padding: 6px 14px;
      border-radius: 20px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: background 0.2s ease, border-color 0.2s ease;
      user-select: none;
    }

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

    .dots-nav {
      display: flex;
      gap: 8px;
      align-items: center;
    }

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

    .dot.active {
      transform: scale(1.25);
    }

    .dot[data-dot="0"].active { background: #ef4444; }
    .dot[data-dot="1"].active { background: #f59e0b; }
    .dot[data-dot="2"].active { background: #10b981; }
  </style>
</head>
<body>

  <div class="traffic-flow">
    
    <div class="step-card step active" data-step="0">
      <div class="light-badge">👂</div>
      <div class="step-info">
        <div class="step-title">1. Listen Attentively</div>
        <div class="step-desc">Keep eyes on speaker, brain active</div>
      </div>
    </div>

    
    <div class="step-card step" data-step="1">
      <div class="light-badge">✋</div>
      <div class="step-info">
        <div class="step-title">2. Wait to be Recognized</div>
        <div class="step-desc">Give a polite signal when you have an idea</div>
      </div>
    </div>

    
    <div class="step-card step" data-step="2">
      <div class="light-badge">💬</div>
      <div class="step-info">
        <div class="step-title">3. Take Your Turn</div>
        <div class="step-desc">Share your thought clearly</div>
      </div>
    </div>
  </div>

  <div class="controls">
    <button class="btn-ctrl" id="playBtn" aria-label="Toggle autoplay">
      <span id="playIcon">⏸</span> Pause
    </button>
    <div class="dots-nav">
      <span class="dot active" data-dot="0" title="Step 1"></span>
      <span class="dot" data-dot="1" title="Step 2"></span>
      <span class="dot" data-dot="2" title="Step 3"></span>
    </div>
  </div>

  <script>
    const dots = $$('.dot');
    const cards = $$('.step-card');
    const playBtn = $('#playBtn');
    const playIcon = $('#playIcon');

    function updateNav(idx) {
      dots.forEach((dot, i) => {
        dot.classList.toggle('active', i === idx);
      });
    }

    const player = new StepPlayer('.step', {
      interval: 3200,
      onChange: (idx) => {
        updateNav(idx);
      }
    });

    cards.forEach((card, idx) => {
      onTap(card, () => {
        player.goTo(idx);
      });
    });

    dots.forEach((dot, idx) => {
      onTap(dot, () => {
        player.goTo(idx);
      });
    });

    onTap(playBtn, () => {
      player.toggle();
      if (player.playing) {
        playBtn.innerHTML = '<span id="playIcon">⏸</span> Pause';
      } else {
        playBtn.innerHTML = '<span id="playIcon">▶</span> Auto-Play';
      }
    });

    player.start();
  </script>
</body>
</html>

Listening Actively and Facing the Speaker

Distinguishing Between Asking a Question and Sharing an Idea

Building on a Classmate's Ideas Using Linking Phrases

Asking Questions to Clarify Meaning During Presentations

Expressing Polite Agreement and Disagreement

Staying on Topic During Small-Group Tasks

Answering Questions with Multi-Word Explanations and Evidence

Collaborative Group Discussions and Conversational Skills

Hälsa och presentera sig själv

Samtala om familj och släkt

Berätta om fritid och intressen

Beskriva hemmet och närmiljön

Strategier för att uppfatta nyckelord i talat språk

Använda förförståelse för att dra slutsatser av tal

Följa och ge enkla muntliga instruktioner

Artigt samtalsskick och turtagning

Samtal och lyssnande i vardagen på romani chib

Lässtrategier: Använda bildstöd för ordförståelse

Förutspå handling utifrån titel och bokomslag

Stanna upp och reda ut obekanta ord

Hjälpmedel för ordförståelse: Ordböcker och digitala resurser

Hitta direkt uttalad information i enkla texter

Läsa mellan raderna: Upptäcka enkla ledtrådar

Koppla textens innehåll till egna upplevelser

Grundläggande lässtrategier och ordförståelse

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

Uttrycka tankar och känslor i samtal

Diskutera aktuella händelser och samhällsfrågor

Muntlig presentation: Planering, inledning och avslutning

Anpassa kroppsspråk, röst och hjälpmedel vid presentationer

Muntligt berättande: Från traditionell sägen till personligt minne

Språklig anpassning efter syfte, mottagare och sammanhang

Språkets makt och möjlighet att utöva inflytande

Debatt och argumentationsteknik i praktiken

Tala, samtala och argumentera på romani chib

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

Använda tidsord: Först, sedan, därefter och till sist

Skriva dagbok eller loggbok om en upplevelse

Skriva enkla texter med digitala verktyg

Läsa igenom sin text och göra enkla förbättringar

Ge och ta emot enkel kamratrespons

Kombinera text och bild till en färdig bok eller plansch

Skriva en berättelse med romska kulturinslag

Skrivprocessen och textbearbetning på romani chib

Listening to a Short News Article Read by the Teacher

Asking Clarifying Questions During Discussion

Making Relevant Comments That Build on a Message

Answering Questions With Appropriate Detail

Active Listening & Responding

Samtala om intressen, personer och platser

Samtalsregler: lyssna, vänta på sin tur och bygga vidare

Uttrycka och motivera egna åsikter i en diskussion

Samtala om aktuella händelser i närmiljön

Muntligt berättande: återberätta en upplevelse kronologiskt

Samtal, dialog och muntligt berättande på meänkieli

¿Quién habla y quién escucha?: el emisor y el receptor

El mensaje: ¿qué es lo que queremos comunicar?

El código: las palabras, los gestos y los idiomas que usamos

El canal: la voz, el papel, el teléfono y el aire

La situación comunicativa: dónde y cuándo hablamos

Barreras en la comunicación: el ruido y la distracción

Elementos del proceso de comunicación

Contributing Relevant Information to Group Discussion

Speaking Clearly at an Appropriate Pace

Sharing Ideas About a Topic With the Class

Using Descriptive Details When Telling

Using Transition Words When Telling a Story

Following Agreed-Upon Rules for Discussions

Building on Others' Ideas in Discussions

Distinguishing Between Asking and Telling

Using Social Communication in Everyday Situations

Sharing Ideas & Collaborative Discussion

Skriva en egen saga med tre händelser

Skriva en berättande text om en egen upplevelse

Skriva enkla dikter och rimramsor

Kombinera text och bild: Göra en egen liten bilderbok

Läsa igenom och ge kamratrespons på en berättelse

Bearbeta och förbättra texten med hjälp av råd och ordböcker

Publicera och framföra sin berättelse för andra

Kreativt skrivande och färdiga berättelser på meänkieli

El papel de quien escribe o habla y de quien lee o escucha

Semejanzas y diferencias entre quien crea el mensaje y quien lo recibe

La intención de informar: dar a conocer un hecho o noticia

La intención de divertir y entretener: contar un chiste o un cuento

La intención de convencer: pedir un favor o recomendar algo

La intención de expresar afecto y emociones: cartas y mensajes de felicitación

OGE.3.SL.1

Aligned learning resources

Related diagrams