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

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

    .app-wrap {
      width: 100%;
      max-width: 620px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
    }

    /* Sentence Container */
    .sentence-stage {
      position: relative;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: stretch;
      gap: 0px;
      transition: gap 0.45s cubic-bezier(0.2, 0.8, 0.25, 1);
    }

    .sentence-stage.sliced {
      gap: 18px;
    }

    /* Slices */
    .chunk {
      flex: 1;
      display: flex;
      flex-direction: column;
      border-radius: 12px;
      padding: 12px 10px;
      background: #f8fafc;
      border: 2px dashed #cbd5e1;
      transition: all 0.45s ease;
      position: relative;
    }

    .chunk-subject.active {
      background: #eff6ff;
      border: 2px solid #3b82f6;
      box-shadow: 0 4px 14px rgba(59, 130, 246, 0.12);
    }

    .chunk-predicate.active {
      background: #fffbeb;
      border: 2px solid #f59e0b;
      box-shadow: 0 4px 14px rgba(245, 158, 11, 0.12);
    }

    .sentence-text {
      font-size: 17px;
      font-weight: 700;
      line-height: 1.35;
      text-align: center;
      color: #334155;
      transition: color 0.3s ease;
    }

    .chunk-subject.active .sentence-text {
      color: #1d4ed8;
    }

    .chunk-predicate.active .sentence-text {
      color: #b45309;
    }

    /* Main Role Badges */
    .main-label {
      opacity: 0;
      transform: translateY(-6px);
      transition: all 0.35s ease;
      font-size: 13px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 8px;
      text-align: center;
    }

    .active .main-label {
      opacity: 1;
      transform: translateY(0);
    }

    .chunk-subject .main-label {
      color: #2563eb;
    }

    .chunk-predicate .main-label {
      color: #d97706;
    }

    /* Breakdown Sub-boxes */
    .sub-breakdown {
      display: flex;
      gap: 6px;
      margin-top: 10px;
      opacity: 0;
      transform: translateY(8px);
      transition: all 0.4s ease 0.1s;
    }

    .active .sub-breakdown {
      opacity: 1;
      transform: translateY(0);
    }

    .sub-pill {
      flex: 1;
      background: #ffffff;
      border-radius: 8px;
      padding: 6px 4px;
      text-align: center;
      font-size: 11px;
      font-weight: 600;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      line-height: 1.2;
    }

    .chunk-subject .sub-pill {
      border: 1px solid #bfdbfe;
      color: #1e40af;
    }

    .chunk-predicate .sub-pill {
      border: 1px solid #fde68a;
      color: #92400e;
    }

    .sub-pill small {
      font-size: 9px;
      font-weight: 500;
      opacity: 0.8;
      margin-top: 2px;
    }

    /* Slicer Blade Visual */
    .slicer-divider {
      position: absolute;
      left: 50%;
      top: 0;
      bottom: 0;
      width: 2px;
      transform: translateX(-50%);
      pointer-events: none;
      z-index: 10;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .blade-line {
      width: 2px;
      height: 100%;
      background: #94a3b8;
      transition: all 0.3s ease;
      opacity: 0.6;
    }

    .scissor-icon {
      position: absolute;
      top: -14px;
      font-size: 20px;
      background: #ffffff;
      border-radius: 50%;
      padding: 2px;
      transition: transform 0.45s ease, opacity 0.3s ease;
    }

    .sliced .scissor-icon {
      transform: translateY(18px) rotate(-30deg);
    }

    .sliced .blade-line {
      opacity: 0;
    }

    /* Control Button */
    .btn-slice {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 22px;
      font-size: 15px;
      font-weight: 700;
      color: #ffffff;
      background: #2563eb;
      border: none;
      border-radius: 9999px;
      cursor: pointer;
      box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
      transition: background-color 0.2s, box-shadow 0.2s;
    }

    .btn-slice:active {
      background: #1d4ed8;
      box-shadow: 0 2px 6px rgba(37, 99, 235, 0.3);
    }

    @media (max-width: 480px) {
      .sentence-text {
        font-size: 15px;
      }
      .main-label {
        font-size: 11px;
      }
      .sub-pill {
        font-size: 10px;
        padding: 4px 2px;
      }
      .sub-pill small {
        font-size: 8px;
      }
    }
  </style>
</head>
<body>

  <div class="app-wrap">
    <button id="sliceBtn" class="btn-slice">
      <span id="btnIcon">✂️</span> <span id="btnText">Slice Sentence</span>
    </button>

    <div id="stage" class="sentence-stage">
      
      <div id="subjectBox" class="chunk chunk-subject">
        <div class="main-label">Complete Subject</div>
        <div class="sentence-text">The speedy red race car</div>
        <div class="sub-breakdown">
          <div class="sub-pill">
            describing
            <small>The speedy red</small>
          </div>
          <div class="sub-pill">
            naming
            <small>race car</small>
          </div>
        </div>
      </div>

      
      <div class="slicer-divider">
        <div class="scissor-icon">✂️</div>
        <div class="blade-line"></div>
      </div>

      
      <div id="predicateBox" class="chunk chunk-predicate">
        <div class="main-label">Complete Predicate</div>
        <div class="sentence-text">zoomed across the finish line.</div>
        <div class="sub-breakdown">
          <div class="sub-pill">
            action
            <small>zoomed</small>
          </div>
          <div class="sub-pill">
            where
            <small>across the line</small>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script>
    const stage = document.getElementById('stage');
    const subjectBox = document.getElementById('subjectBox');
    const predicateBox = document.getElementById('predicateBox');
    const sliceBtn = document.getElementById('sliceBtn');
    const btnText = document.getElementById('btnText');
    const btnIcon = document.getElementById('btnIcon');

    let isSliced = false;

    function toggleSlice() {
      isSliced = !isSliced;

      if (isSliced) {
        stage.classList.add('sliced');
        subjectBox.classList.add('active');
        predicateBox.classList.add('active');
        btnText.textContent = 'Reset Sentence';
        btnIcon.textContent = '↺';
      } else {
        stage.classList.remove('sliced');
        subjectBox.classList.remove('active');
        predicateBox.classList.remove('active');
        btnText.textContent = 'Slice Sentence';
        btnIcon.textContent = '✂️';
      }
    }

    sliceBtn.addEventListener('click', toggleSlice);
  </script>
</body>
</html>

Identifying Complete Subjects and Predicates in Simple Sentences

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

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

    /* Tab switcher */
    .nav-tabs {
      display: flex;
      gap: 8px;
      background: #e2e8f0;
      padding: 4px;
      border-radius: 20px;
    }
    .tab-btn {
      border: none;
      background: transparent;
      padding: 6px 14px;
      font-size: 13px;
      font-weight: 600;
      color: #475569;
      border-radius: 16px;
      cursor: pointer;
      transition: all 0.25s ease;
    }
    .tab-btn.active {
      background: #ffffff;
      color: #0f172a;
      box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    }

    /* Puzzle Container */
    .puzzle-svg {
      width: 100%;
      height: auto;
      display: block;
      filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.05));
    }

    .piece {
      cursor: pointer;
      transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.25s ease, opacity 0.25s ease;
      transform-origin: center;
    }
    .piece:hover {
      filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.12));
    }

    .piece.dimmed {
      opacity: 0.38;
      filter: grayscale(0.2);
    }
    .piece.highlighted {
      filter: drop-shadow(0 8px 16px rgba(2, 132, 199, 0.25));
    }
    .piece-pred.highlighted {
      filter: drop-shadow(0 8px 16px rgba(234, 88, 12, 0.25));
    }

    /* Bottom Outcome Card */
    .summary-card {
      width: 100%;
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 14px;
      padding: 12px 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      text-align: center;
      box-shadow: 0 2px 8px rgba(0,0,0,0.04);
      transition: border-color 0.25s ease;
    }

    .sentence-display {
      font-size: 17px;
      line-height: 1.4;
    }
    .subj-text {
      color: #0284c7;
      font-weight: 700;
      border-bottom: 2px solid #38bdf8;
      padding-bottom: 1px;
    }
    .pred-text {
      color: #ea580c;
      font-weight: 700;
      border-bottom: 2px solid #fb923c;
      padding-bottom: 1px;
    }

    .badge-thought {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: #dcfce7;
      border: 1px solid #86efac;
      color: #15803d;
      font-size: 13px;
      font-weight: 700;
      padding: 4px 12px;
      border-radius: 20px;
      transition: all 0.25s ease;
    }
  </style>
</head>
<body>

  <div class="interactive-wrap">
    
    <div class="nav-tabs">
      <button class="tab-btn active" id="tabBoth">Both Parts</button>
      <button class="tab-btn" id="tabSubj">1. Subject</button>
      <button class="tab-btn" id="tabPred">2. Predicate</button>
    </div>

    
    <svg class="puzzle-svg" viewBox="0 0 540 180" xmlns="http://www.w3.org/2000/svg">
      
      <g id="pieceSubj" class="piece">
        
        <path d="M 16 10 
                 H 230 
                 C 230 40, 260 40, 260 65 
                 C 260 90, 230 90, 230 120 
                 V 170 
                 H 16 
                 C 10 170, 6 166, 6 160 
                 V 20 
                 C 6 14, 10 10, 16 10 Z" 
              fill="#e0f2fe" stroke="#0284c7" stroke-width="2.5" stroke-linejoin="round" />
        
        
        <rect x="22" y="24" width="138" height="24" rx="12" fill="#0284c7" />
        <text x="91" y="40" fill="#ffffff" font-size="11" font-weight="700" text-anchor="middle" letter-spacing="0.5">COMPLETE SUBJECT</text>
        
        
        <text x="24" y="75" fill="#0369a1" font-size="12" font-weight="600">Asks: Who or what?</text>
        
        
        <text x="24" y="112" fill="#0c4a6e" font-size="16" font-weight="800">"The funny clown"</text>
        <text x="24" y="142" fill="#0284c7" font-size="12" font-weight="500">✦ The actor of the sentence</text>
      </g>

      
      <g id="piecePred" class="piece">
        
        <path d="M 230 10 
                 H 524 
                 C 530 10, 534 14, 534 20 
                 V 160 
                 C 534 166, 530 170, 524 170 
                 H 230 
                 V 120 
                 C 230 90, 260 90, 260 65 
                 C 260 40, 230 40, 230 10 Z" 
              fill="#ffedd5" stroke="#ea580c" stroke-width="2.5" stroke-linejoin="round" />
        
        
        <rect x="278" y="24" width="152" height="24" rx="12" fill="#ea580c" />
        <text x="354" y="40" fill="#ffffff" font-size="11" font-weight="700" text-anchor="middle" letter-spacing="0.5">COMPLETE PREDICATE</text>
        
        
        <text x="278" y="75" fill="#c2410c" font-size="12" font-weight="600">Asks: What does it do?</text>
        
        
        <text x="278" y="112" fill="#7c2d12" font-size="16" font-weight="800">"juggled three balls."</text>
        <text x="278" y="142" fill="#ea580c" font-size="12" font-weight="500">✦ Action / verb + details</text>
      </g>
    </svg>

    
    <div class="summary-card" id="summaryCard">
      <div class="sentence-display">
        <span class="subj-text" id="dispSubj">The funny clown</span>
        <span class="pred-text" id="dispPred">juggled three bright balls.</span>
      </div>
      <div class="badge-thought" id="thoughtBadge">
        <span>✓</span> Complete Thought!
      </div>
    </div>
  </div>

  <script>
    const pieceSubj = document.getElementById('pieceSubj');
    const piecePred = document.getElementById('piecePred');
    const tabBoth = document.getElementById('tabBoth');
    const tabSubj = document.getElementById('tabSubj');
    const tabPred = document.getElementById('tabPred');
    const thoughtBadge = document.getElementById('thoughtBadge');
    const dispSubj = document.getElementById('dispSubj');
    const dispPred = document.getElementById('dispPred');

    function setFocus(mode) {
      // mode: 'both', 'subj', 'pred'
      [tabBoth, tabSubj, tabPred].forEach(t => t.classList.remove('active'));
      pieceSubj.classList.remove('highlighted', 'dimmed');
      piecePred.classList.remove('highlighted', 'dimmed');

      if (mode === 'subj') {
        tabSubj.classList.add('active');
        pieceSubj.classList.add('highlighted');
        piecePred.classList.add('dimmed');
        dispSubj.style.opacity = '1';
        dispPred.style.opacity = '0.35';
        thoughtBadge.innerHTML = '<span>✦</span> Focus: Who or what does it?';
        thoughtBadge.style.background = '#e0f2fe';
        thoughtBadge.style.borderColor = '#7dd3fc';
        thoughtBadge.style.color = '#0369a1';
      } else if (mode === 'pred') {
        tabPred.classList.add('active');
        piecePred.classList.add('highlighted');
        pieceSubj.classList.add('dimmed');
        dispSubj.style.opacity = '0.35';
        dispPred.style.opacity = '1';
        thoughtBadge.innerHTML = '<span>✦</span> Focus: What is the action/state?';
        thoughtBadge.style.background = '#ffedd5';
        thoughtBadge.style.borderColor = '#fdba74';
        thoughtBadge.style.color = '#c2410c';
      } else {
        tabBoth.classList.add('active');
        dispSubj.style.opacity = '1';
        dispPred.style.opacity = '1';
        thoughtBadge.innerHTML = '<span>✓</span> Complete Thought!';
        thoughtBadge.style.background = '#dcfce7';
        thoughtBadge.style.borderColor = '#86efac';
        thoughtBadge.style.color = '#15803d';
      }
    }

    tabBoth.addEventListener('click', () => setFocus('both'));
    tabSubj.addEventListener('click', () => setFocus('subj'));
    tabPred.addEventListener('click', () => setFocus('pred'));

    pieceSubj.addEventListener('click', () => {
      setFocus(tabSubj.classList.contains('active') ? 'both' : 'subj');
    });

    piecePred.addEventListener('click', () => {
      setFocus(tabPred.classList.contains('active') ? 'both' : 'pred');
    });
  </script>
</body>
</html>

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

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

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

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

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

What Are Coordinating Conjunctions?

Joining Compound Subjects With and/or

Joining Compound Predicates With and/or

Using But and So to Connect Ideas

Choosing the Right Conjunction for Your Sentence

Using Coordinating Conjunctions

What Is a Simple Sentence?

What Is a Compound Sentence?

Joining Clauses With 'and'

Joining Clauses With 'but' and 'or'

Choosing the Right Coordinating Conjunction

Building Compound Sentences

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

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

Synonymer och motsatsord (antonymer)

Bygga nya ord: Sammansatta ord och ändelser

Lånord i romani chib: Spår från språkets långa resa

Skapa en egen illustrerad ordbok

Ordkunskap och ordbildning i romani chib

Samla fakta och stödord om ett välbekant ämne

Skriva en tydlig rubrik och underrubriker

Skriva enkel faktatext om ett djur: Utseende, boplats och föda

Skriva en beskrivande text om min hemort eller skola

Skriva en instruktion: Hur man gör något steg för steg

Skriva ett enkelt recept på meänkieli: Ingredienser och tillvägagångssätt

Använda verb i imperativ (uppmaningsform) i instruktioner

Skriva bildtexter som förklarar en bild eller ett foto

Skriva enkla faktatexter och instruktioner på meänkieli

Meänkielis rötter: Ett finsk-ugriskt språk

Tornedalens historia och gränsdragningen 1809

Hur meänkieli blev ett eget erkänt språk år 2000

Likheter och skillnader mellan olika varieteter

Tornedalsvarieteten och Gällivarevarieteten

Lånord i meänkieli från svenskan och andra språk

Meänkieli i vardagen i dag: Radio, TV och böcker

Unga som talar meänkieli: Språkets framtid

Skyltar och tvåspråkighet i förvaltningsområdet för meänkieli

Meänkielis historia, varieteter och samhälle

Använda meänkieli-svenska ordböcker på nätet

Undersöka ord med flera betydelser i ordboken

Läsa korta faktatexter och reportage från meänkieli-områden

Kulturella ord och uttryck som är unika för meänkieli

Språkråd och hur nya ord skapas på meänkieli

Min språkresa: Reflektion om mitt lärande i meänkieli

Ordboksarbete, ordkunskap och textläsning i meänkieli

What Do Adjectives Do? Describing Nouns

What Do Adverbs Do? Describing Verbs

Adjective or Adverb? Choosing the Right Word

Using Adjectives to Make Sentences More Interesting

Using Adverbs to Tell How, When, and Where

Building Strong Simple Sentences

Expanding Simple Sentences with More Details

Rearranging Sentences: Different Ways to Say It

Joining Two Sentences with And, But, and Or

Writing Your Own Compound Sentences

Review: Adjectives, Adverbs, and Sentence Building

Grammar: Adjectives, Adverbs, and Building Sentences

OGE.3.L.4

OGE.3.L.4

Aligned learning resources

Related diagrams