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

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

    /* Step Selector Tabs */
    .steps-nav {
      display: flex;
      width: 100%;
      max-width: 540px;
      gap: 6px;
      margin-bottom: 12px;
    }

    .step-btn {
      flex: 1;
      border: 1px solid #e2e8f0;
      background: #f8fafc;
      color: #64748b;
      padding: 8px 4px;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      box-shadow: 0 0 0 0 rgba(0,0,0,0);
      transition: all 0.2s ease;
    }

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

    /* Main Flow Display Area */
    .flow-card {
      width: 100%;
      max-width: 540px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 16px 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 14px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.03);
    }

    /* Question Header */
    .question-box {
      background: #f1f5f9;
      border-radius: 20px;
      padding: 6px 16px;
      font-size: 15px;
      font-weight: 800;
      color: #0f172a;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    /* Branch Container */
    .branches-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      width: 100%;
    }

    .branch {
      border-radius: 10px;
      padding: 12px 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      justify-content: space-between;
      gap: 10px;
      cursor: pointer;
      transition: box-shadow 0.2s ease, transform 0.1s ease;
      min-height: 140px;
    }

    .branch:active {
      transform: scale(0.99);
    }

    /* Informal Branch (Green) */
    .branch.informal {
      background: #f0fdf4;
      border: 2px solid #86efac;
    }

    .branch.informal.selected {
      border-color: #16a34a;
      box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.25);
    }

    /* Formal Branch (Blue) */
    .branch.formal {
      background: #f0f9ff;
      border: 2px solid #7dd3fc;
    }

    .branch.formal.selected {
      border-color: #0284c7;
      box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.25);
    }

    .branch-icon {
      font-size: 28px;
      line-height: 1;
    }

    .branch-label {
      font-size: 14px;
      font-weight: 700;
      line-height: 1.3;
      color: #1e2945;
    }

    .arrow-down {
      font-size: 14px;
      color: #94a3b8;
      font-weight: bold;
    }

    /* Result Tags */
    .tag {
      padding: 5px 12px;
      border-radius: 6px;
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 0.5px;
      text-transform: uppercase;
    }

    .tag-informal {
      background: #22c55e;
      color: #ffffff;
    }

    .tag-formal {
      background: #0284c7;
      color: #ffffff;
    }

    /* Bottom Controls */
    .footer-ctrls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      margin-top: 10px;
    }

    .ctrl-btn {
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      padding: 6px 14px;
      font-size: 13px;
      font-weight: 600;
      color: #475569;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
    }

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

    @media (max-width: 400px) {
      .step-btn {
        font-size: 12px;
        padding: 6px 2px;
      }
      .question-box {
        font-size: 14px;
      }
      .branch-label {
        font-size: 13px;
      }
      .branch-icon {
        font-size: 24px;
      }
    }
  </style>
</head>
<body>

  
  <div class="steps-nav">
    <button class="step-btn active" onclick="setStep(0)">1. Person</button>
    <button class="step-btn" onclick="setStep(1)">2. Place</button>
    <button class="step-btn" onclick="setStep(2)">3. Purpose</button>
  </div>

  
  <div class="flow-card">
    <div class="question-box" id="stepQuestion">
      <span>👤</span> 1. Who is the Person?
    </div>

    <div class="branches-grid">
      
      <div class="branch informal selected" id="informalCard" onclick="selectTone('informal')">
        <div class="branch-icon" id="informalIcon">👫</div>
        <div class="branch-label" id="informalLabel">Friend / Sibling</div>
        <div class="arrow-down">↓</div>
        <div class="tag tag-informal">Informal</div>
      </div>

      
      <div class="branch formal" id="formalCard" onclick="selectTone('formal')">
        <div class="branch-icon" id="formalIcon">👨‍⚖️</div>
        <div class="branch-label" id="formalLabel">Principal / Judge</div>
        <div class="arrow-down">↓</div>
        <div class="tag tag-formal">Formal</div>
      </div>
    </div>
  </div>

  
  <div class="footer-ctrls">
    <button class="ctrl-btn" onclick="prevStep()">← Back</button>
    <button class="ctrl-btn" id="playBtn" onclick="togglePlay()">⏸ Auto</button>
    <button class="ctrl-btn" onclick="nextStep()">Next →</button>
  </div>

  <script>
    const data = [
      {
        question: "👤 1. Who is the Person?",
        infIcon: "👫",
        infText: "Friend / Sibling",
        forIcon: "👨‍🏫",
        forText: "Principal / Judge / Guest"
      },
      {
        question: "🏫 2. What is the Place?",
        infIcon: "⚽",
        infText: "Playground / Living Room",
        forIcon: "🏛️",
        forText: "Auditorium / Office"
      },
      {
        question: "🎯 3. What is the Purpose?",
        infIcon: "💬",
        infText: "Joking / Playing",
        forIcon: "📋",
        forText: "Presenting / Asking Help"
      }
    ];

    let currentStep = 0;
    let isPlaying = true;
    let autoInterval = null;

    function render() {
      const d = data[currentStep];
      document.getElementById('stepQuestion').textContent = d.question;
      document.getElementById('informalIcon').textContent = d.infIcon;
      document.getElementById('informalLabel').innerHTML = d.infText.replace(/\s\/\s/g, '<br>/ ');
      document.getElementById('formalIcon').textContent = d.forIcon;
      document.getElementById('formalLabel').innerHTML = d.forText.replace(/\s\/\s/g, '<br>/ ');

      const buttons = document.querySelectorAll('.step-btn');
      buttons.forEach((btn, idx) => {
        btn.classList.toggle('active', idx === currentStep);
      });
    }

    function setStep(idx) {
      currentStep = idx;
      render();
    }

    function nextStep() {
      currentStep = (currentStep + 1) % data.length;
      render();
    }

    function prevStep() {
      currentStep = (currentStep - 1 + data.length) % data.length;
      render();
    }

    function selectTone(tone) {
      document.getElementById('informalCard').classList.toggle('selected', tone === 'informal');
      document.getElementById('formalCard').classList.toggle('selected', tone === 'formal');
    }

    function startAuto() {
      if (autoInterval) clearInterval(autoInterval);
      autoInterval = setInterval(() => {
        nextStep();
      }, 3500);
    }

    function stopAuto() {
      if (autoInterval) {
        clearInterval(autoInterval);
        autoInterval = null;
      }
    }

    function togglePlay() {
      isPlaying = !isPlaying;
      const btn = document.getElementById('playBtn');
      if (isPlaying) {
        btn.textContent = '⏸ Auto';
        startAuto();
      } else {
        btn.textContent = '▶ Play';
        stopAuto();
      }
    }

    // Initialize
    render();
    startAuto();
  </script>
</body>
</html>

Recognizing Formal and Informal Language Situations

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

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

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

    .side-card {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      position: relative;
    }

    .informal-card {
      border-color: #fed7aa;
      background: #fffaf5;
    }

    .formal-card {
      border-color: #cbd5e1;
      background: #f8fafc;
    }

    .badge {
      display: inline-block;
      padding: 5px 12px;
      border-radius: 20px;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.2px;
      margin-bottom: 12px;
      color: #ffffff;
    }

    .badge-informal {
      background: #ea580c;
    }

    .badge-formal {
      background: #1e2945;
    }

    .scene-illustration {
      height: 70px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 40px;
      margin-bottom: 10px;
      user-select: none;
    }

    .speech-bubble {
      position: relative;
      background: #ffffff;
      border: 2px solid #1e2945;
      border-radius: 12px;
      padding: 10px 12px;
      font-size: 14px;
      font-weight: 600;
      line-height: 1.35;
      color: #1e2945;
      width: 100%;
      min-height: 54px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 4px rgba(30, 41, 69, 0.06);
    }

    .speech-bubble::before {
      content: '';
      position: absolute;
      top: -8px;
      left: 50%;
      transform: translateX(-50%);
      width: 0;
      height: 0;
      border-left: 7px solid transparent;
      border-right: 7px solid transparent;
      border-bottom: 8px solid #1e2945;
    }

    .speech-bubble::after {
      content: '';
      position: absolute;
      top: -5px;
      left: 50%;
      transform: translateX(-50%);
      width: 0;
      height: 0;
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;
      border-bottom: 6px solid #ffffff;
    }

    .informal-card .speech-bubble {
      border-color: #ea580c;
    }
    .informal-card .speech-bubble::before {
      border-bottom-color: #ea580c;
    }

    .formal-card .speech-bubble {
      border-color: #1e2945;
    }
    .formal-card .speech-bubble::before {
      border-bottom-color: #1e2945;
    }

    .tone-cue {
      margin-top: 8px;
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      opacity: 0.65;
    }
  </style>
</head>
<body>

  <div class="comparison-grid">
    
    <div class="side-card informal-card">
      <span class="badge badge-informal">Informal (Casual)</span>
      <div class="scene-illustration" aria-hidden="true">
        👦 ⚽ 👧
      </div>
      <div class="speech-bubble">
        "Hey! Pass the ball!"
      </div>
      <div class="tone-cue">With Friends</div>
    </div>

    
    <div class="side-card formal-card">
      <span class="badge badge-formal">Formal (Official)</span>
      <div class="scene-illustration" aria-hidden="true">
        👨‍🏫 📋 🧑‍🎓
      </div>
      <div class="speech-bubble">
        "Good morning, Mr. Lopez. Here is my report."
      </div>
      <div class="tone-cue">With Teachers</div>
    </div>
  </div>

</body>
</html>

Läsa texter i digitala medier: Pekplatta och skärm

Läsa skyltar, korta meddelanden och instruktioner

Återberätta det viktigaste i en text med egna ord

Urskilja textens budskap och enkla lärdomar

Anpassa läsningen efter textens form och syfte

Ställa egna frågor till texten under läsning

Berätta vad man tyckte om boken och motivera

Textförståelse, olika medier och boksamtal

Choosing Appropriate Greetings for Adults and Peers

Using Polite Social Formulas: Please, Thank You, and Excuse Me

Introducing Yourself and Others Politely

Adapting Spoken Words for Different Audiences

Phone and Message Etiquette in Everyday Scenarios

Reflecting on Conversational Manners and Respectful Dialogue

Social Communication, Conversational Manners, and Language Registers

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

Skriva ett vykort eller ett brev

Skriva digitala meddelanden och enkla mejl

Läsa igenom och kontrollera sin egen text

Ge och ta emot enkel kamratrespons

Skriva en egen liten bok med text och bild

Skriva dikt med rim och upprepningar

Berätta om en upplevd händelse i dagboken

Vardagstexter, textbearbetning och kreativt skrivande

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

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

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

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

Skriva en berättelse med romska kulturinslag

Skrivprocessen och textbearbetning på romani chib

Romer: historia, kultur och romani chib

Romernas historia under andra världskriget: Porrajmos

Den romska medborgarrättsrörelsen och Vitboken

Sveriges nationella minoriteter och minoritetslagen

Organisationer som främjar romani chib och romsk kultur

Antiziganism och arbetet för lika rättigheter i dag

Aktuella samhällsfrågor och unga romers röster

Romskt samhällsliv, historia och minoritetsfrågor

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

Digitala hjälpmedel för stavningskontroll och översättning

Informationssökning i barnanpassade källor

Källkritik för unga: vem har skrivit och varför

Skapa en egen ordlista eller begreppskarta

Ordförrådets bredd: ordval för olika sammanhang

Språkliga verktyg, informationssökning och källkritik

Hälsningsfraser och artighetsord

Tilltalsord och hur vi talar till olika personer

Ord för känslor: glad, ledsen, arg och rädd

Ord för åsikter och tyckande

Familj, släkt och relationer

Kroppens delar och hälsa

Samtal, känslor och relationer på meänkieli

Hälsningsfraser och avsked

Artighetsfraser: Tacka, be om ursäkt och fråga lov

Tilltalsord och respektfullt bemötande

Fasta språkliga uttryck och ordspråk

Anpassa ton och ordval till situationen

Synonymer och motsatsord i text och tal

Lånord och språkkontakt genom tiderna

Artighet, fasta uttryck och språkbruk

¿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

Förbereda en kort presentation med stödord och bild

Framföra en presentation med tydlig röst och ögonkontakt

Språkets betydelse för att påverka och utöva inflytande

Dramatisering och rollspel på meänkieli

Utvärdera och reflektera över muntliga framträdanden

Muntliga presentationer och framträdanden på meänkieli

Årstider, väder och naturens skiftningar

Ord för tornedalsk mat och baktradition

Ord för fiske, jakt och skogsliv

Synonymer och motsatsord

Fasta talesätt och idiom i vardagligt tal

Ord för tid, veckodagar och klockan

Skolord och klassrumsfraser

Natur, kultur och omvärld på meänkieli

Ord för glädje, ledsenhet och ilska

Ord för rädsla, mod och trygghet

Uttrycka åsikter: Jag tycker, jag gillar och jag föredrar

Motivera en åsikt: Varför tycker jag så?

Ord för kunskap och tänkande: Veta, tro, förstå och kunna

Uttrycka känslor och åsikter på romani chib

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.6

Aligned learning resources

Related diagrams