# Office-klas — Leerlijn

**Doelgroep:** 10-14 jaar (groep 7-8 + onderbouw VO)
**Aanpak:** in-browser simulatie met automatische feedback + optionele uitstap naar echt Office
**Werkt op:** Chromebooks én Windows-laptops (browser-first, accountloos)
**Tech-basis:** lijn van robo-klas / hydro-klas / media-klas

## Architectuur

Vijf modules onder één portaal. Inlogcode-systeem identiek aan robo-klas v56.

**Map:** `C:\Users\Bedrijf\Documents\Claude\Projects\Office-klas.com\`

```
office-klas.com (of subdomein van media-klas)
├── index.html                    → portaal met alle lessen
├── _word-ui-template.html        → master Word-UI (één bestand voor alle typ-lessen)
├── les-1-1-bestand-openen.html   → Les 1.1 (eigen UI: Office-launcher)
├── les-1-2-taakbalk-en-lint.html → Les 1.2 (eigen UI: ribbon-explorer)
├── les-1-3-de-cursor.html        → Les 1.3 (eigen UI: cursor-demo)
├── les-1-4-alineas.html          → redirect naar template#1.4
├── les-1-5-eerste-tekst.html     → redirect naar template#1.5
├── les-1-6-documenten-opmaken.html → redirect naar template#1.6
├── les-1-7-uitnodiging-maken.html → redirect naar template#1.7
└── mascotte-voorstel.html        → Pixel design-preview
```

**Slimme architectuur:** lessen 1.4–1.8 (en alle volgende typ-lessen) gebruiken het master template via URL-hash. Eén fix in `_word-ui-template.html` komt automatisch in alle lessen door. Lessen 1.1–1.3 hebben hun eigen UI omdat ze gáán over wat vóór "in Word werken" komt.

## Word-klas — Module-opbouw (3 niveaus)

**Drie-laagse leercurve:** Basis (1.1–1.8) → Vervolg (1.9–1.13) → Uitdaging (1.14–1.23). Elk niveau eindigt met een capstone-opdracht waarin alle vaardigheden uit dat niveau samenkomen.

### 📘 Basis (lessen 1.1–1.8) — Word leren kennen

| Les | Onderwerp | Missies | Bestand | Status |
|-----|-----------|---------|---------|--------|
| 1.1 | **Word starten** — bestand openen, sjablonen verkennen | Word vinden op M365-startpagina, 3 sjablonen verkennen, voorbeeld bekijken, leeg document openen | `les-1-1-bestand-openen.html` | ✅ |
| 1.2 | **De taakbalk en het lint** — interface verkennen | titelbalk, alle 5 tabbladen, ribbon-content per tab, knoppen herkennen | `les-1-2-taakbalk-en-lint.html` | ✅ |
| 1.3 | **De cursor** — wat is dat knipperend streepje | cursor zien, verplaatsen door klikken, muis-vormen ontdekken, pijltjestoetsen, einde-van-zin | `les-1-3-de-cursor.html` | ✅ |
| 1.4 | **Toetsenbord oefenen** | meest gebruikte letters (e n a t i r o d s l), cijfers 0-9, leestekens, twee zinnen overtypen, opslaan | `les-1-4-toetsenbord.html` → template#1.4 | ✅ |
| 1.5 | **Alinea's en doortypen** — wanneer Enter, wanneer doortypen, auto-hoofdletter | doortypen ervaren, 2 alinea's met Enter (auto-hoofdletter), 3 alinea's schrijven, **opslaan** | `les-1-5-alineas.html` → template#1.5 | ✅ |
| 1.6 | **Eerste tekst en opmaak** — typen, vetdruk, kopjes, lijsten + opslaan | naam typen, vetgedrukt, Kop 1, opsomming met 3 dingen, **document opslaan** | `les-1-6-eerste-tekst.html` → template#1.6 | ✅ |
| 1.7 | **Documenten opmaken** — uitlijning, lettergrootte, lettertype, kleur, markering | titel centreren, lettergrootte 36, lettertype wijzigen, kleur, markering, **opslaan** | `les-1-7-documenten-opmaken.html` → template#1.7 | ✅ |
| 1.8 | **🎯 Mini-eindopdracht: Een uitnodiging maken** | titel invullen, titel groot+gecentreerd, datum/tijd/adres, titel kleuren, ondertekenen, **opslaan in eigen map** | `les-1-8-uitnodiging-maken.html` → template#1.8 | ✅ |

### 📗 Vervolg (lessen 1.9–1.13) — Documenten verrijken

| Les | Onderwerp | Missies | Bestand | Status |
|-----|-----------|---------|---------|--------|
| 1.9 | **Afbeeldingen invoegen** | dier-poster maken, foto plaatsen, formaat aanpassen, tekstomloop, onderschrift, opslaan | `les-1-9-afbeeldingen.html` → template#1.9 | ✅ |
| 1.10 | **Lijsten en tabellen** | weekrooster: opsomming, genummerde lijst, tabel 3×4, tab-navigatie, vetgedrukte rij, opslaan | `les-1-10-lijsten-tabellen.html` → template#1.10 | ✅ |
| 1.11 | **Spelling en grammatica** | tekst met 5 fouten zoeken en corrigeren (vertelen→vertellen, veul→veel, etc.) | `les-1-11-spelling.html` → template#1.11 | ✅ |
| 1.12 | **Document delen en opslaan** | opslaan in OneDrive, nieuwe map "Schoolwerk", hernoemen, exporteren als PDF | `les-1-12-delen-opslaan.html` → template#1.12 | ✅ |
| 1.13 | **🎯 Vervolg-eindopdracht: Vrij werkstuk** | eigen onderwerp, titelpagina, h2-kopjes, inleiding (3 zinnen), uitleg (4 zinnen), afbeelding, opsomming, opslaan | `les-1-13-eindopdracht.html` → template#1.13 | ✅ |

### 📕 Uitdaging (lessen 1.14–1.23) — Pro-niveau

| Les | Onderwerp | Missies | Bestand | Status |
|-----|-----------|---------|---------|--------|
| 1.14 | **Selecteren en bewerken** | dubbelklik, driedubbelklik, Ctrl+A, Ctrl+C/V/X, Ctrl+Z (undo) | `les-1-14-selecteren.html` → template#1.14 | ✅ |
| 1.15 | **Sneltoetsen en uitlijning** | Ctrl+B/I/U, Ctrl+E/R (centreren/rechts), Ctrl+S | `les-1-15-sneltoetsen.html` → template#1.15 | ✅ |
| 1.16 | **Zoeken en vervangen** | Ctrl+F zoeken, Ctrl+H vervangen, alle vervangen-knop | `les-1-16-zoek-vervang.html` → template#1.16 | ✅ |
| 1.17 | **Pagina-instellingen** | A4/A5 wisselen, staand/liggend, smalle marges | `les-1-17-pagina-instellingen.html` → template#1.17 | ✅ |
| 1.18 | **Koptekst, voettekst, paginanummers** | koptekst toevoegen + naam, voettekst + datum, paginanummer-marker | `les-1-18-kop-voet.html` → template#1.18 | ✅ |
| 1.19 | **Hyperlinks en symbolen** | klikbare hyperlink, € © ♥ via Symbool-knop | `les-1-19-hyperlinks-symbolen.html` → template#1.19 | ✅ |
| 1.20 | **Tekst in kolommen** | 2 kolommen, 3 kolommen, terug naar 1 | `les-1-20-kolommen.html` → template#1.20 | ✅ |
| 1.21 | **Inhoudsopgave maken** | TOC genereren uit kopjes, nieuw kopje toevoegen | `les-1-21-inhoudsopgave.html` → template#1.21 | ✅ |
| 1.22 | **SmartArt en grafiek** | proces-diagram, staafdiagram, cirkeldiagram | `les-1-22-smartart-grafiek.html` → template#1.22 | ✅ |
| 1.23 | **🎯 Uitdaging-eindopdracht: Mini-tijdschrift** | tijdschrift-naam, kop+voet, hoofdartikel (5+ zinnen), 3 berichten lijst, foto, 2-koloms layout, opslaan | `les-1-23-tijdschrift.html` → template#1.23 | ✅ |

### Verplichte opslaan-stap

Iedere typ-les eindigt met een verplichte missie: **"Sla je document op via Bestand → Opslaan als"**. De les is pas afgerond als de leerling daadwerkelijk heeft opgeslagen (eventueel met nieuwe map). Dit is een vaardigheid die niet vaak genoeg geoefend kan worden.

## Outlook-klas

Eigen master-template `_outlook-ui-template.html` met **echte mail-simulatie**: drie-koloms layout (mappen / mailbox / leesvenster), nieuwe-mail-overlay, dier-personages als afzenders (Olifant Otto, Kikker Kasper, Beer Bram, Juf Vos Vera), spam-mail in de inbox.

### 📘 Basis (lessen 2.1–2.3) — Mailen onder de knie krijgen

| Les | Onderwerp | Missies | Bestand | Status |
|-----|-----------|---------|---------|--------|
| 2.1 | **De inbox** | mail openen, afzender herkennen, archiveren, spam herkennen, spam verwijderen | `les-2-1-de-inbox.html` → template#2.1 | ✅ |
| 2.2 | **Een mail beantwoorden** | reply-knop, aanhef, antwoord (≥2 zinnen), afsluiting met naam, verzenden | `les-2-2-mail-beantwoorden.html` → template#2.2 | ✅ |
| 2.3 | **Een nette mail schrijven** | nieuwe mail, ontvanger-adres, onderwerp (≥3 woorden), aanhef, body (≥3 zinnen), afsluiting, verzenden | `les-2-3-nette-mail.html` → template#2.3 | ✅ |

### 📗 Vervolg (te bouwen)

| Les | Onderwerp |
|-----|-----------|
| 2.4 | CC en BCC — privacy van adressen |
| 2.5 | Bijlagen — controleren wat je verstuurt |
| 2.6 | Mappen en regels — eigen postvak organiseren |

### 📕 Uitdaging (te bouwen)

| Les | Onderwerp |
|-----|-----------|
| 2.7 | Spam en phishing herkennen — diepere les |
| 2.8 | Agenda en uitnodigingen |
| 2.9 | Eindopdracht — een complete mailwisseling |

## PowerPoint-klas

Eigen master-template `_powerpoint-ui-template.html` met **echte slide-editor**: 16:9 canvas, slides-paneel links, lint met layouts (titel/bullets), inline contenteditable per slide-element.

### 📘 Basis (lessen 3.1–3.3) — Een eerste presentatie

| Les | Onderwerp | Missies | Bestand | Status |
|-----|-----------|---------|---------|--------|
| 3.1 | **Eerste slide** | titel typen, ondertitel met dieren-naam, slide bewonderen | `les-3-1-eerste-slide.html` → template#3.1 | ✅ |
| 3.2 | **Slides toevoegen en ordenen** | nieuwe slide via knop, titel toevoegen, derde slide, springen tussen slides, slide verwijderen | `les-3-2-slides-toevoegen.html` → template#3.2 | ✅ |
| 3.3 | **Bullets en opmaak** | open slide 2, 3 bullets typen, bullet vetgedrukt maken, presentatie hernoemen | `les-3-3-bullets-opmaak.html` → template#3.3 | ✅ |

### 📗 Vervolg (te bouwen)

| Les | Onderwerp |
|-----|-----------|
| 3.4 | Afbeeldingen op slides |
| 3.5 | Eenvoudige overgangen |
| 3.6 | Mini-eindopdracht — presentatie over jezelf |

### 📕 Uitdaging (te bouwen)

| Les | Onderwerp |
|-----|-----------|
| 3.7 | Animaties en timing |
| 3.8 | Presenteren — sneltoetsen, presenter view |
| 3.9 | Eindopdracht — uitgebreide presentatie |

## O365-hub (te bouwen)

Eén pagina die navigatie tussen alle apps simuleert.

| Les | Onderwerp |
|-----|-----------|
| 5.1 | Office.com startpagina — tegels herkennen |
| 5.2 | OneDrive — bestand opslaan en terugvinden |
| 5.3 | Bestanden delen — uitleg over rechten |
| 5.4 | Versies en automatisch opslaan |
| 5.5 | Teams in vogelvlucht — chat vs vergadering |
| 5.6 | Wachtwoorden en veiligheid |
| 5.7 | Eindopdracht |

## Pedagogisch principe per missie

Elke missie volgt hetzelfde patroon (afgeleid van Boekje 1 van De Poort):

1. **Vraag** — duidelijk in dier-persoonlijke taal (Pixel zegt: "Hoi Tijger Theo! Begin met je naam te typen")
2. **Hint** — verschijnt na 25 seconden inactiviteit
3. **Auto-check** — DOM-controle, geen "ik klik klaar"-knop
4. **Bevestiging** — visuele celebratie + toast + volgende missie
5. **Uitstap-bonus** — aan het eind: "doe dit nu in echt Word — open office.com"

## Geen extensie, geen iframe, geen account

Alle modules werken zonder Microsoft-licentie en zonder browserextensie. De "echte Office"-uitstap is altijd optioneel.

## Master template — uitgebreide functionaliteit

Het Word-UI-template (`_word-ui-template.html`) heeft echte werkende functies:

- **Multi-page** — content stroomt automatisch over meerdere pagina's
- **Pagina-formaten** A3/A4/A5/A6 + staand/liggend + smal/normaal/breed marges
- **Volledig lint** met 9 tabbladen (Bestand, Start, Invoegen, Tekenen, Ontwerpen, Indeling, Verwijzingen, Controleren, Beeld, Help)
- **File browser** met echte mappenstructuur (OneDrive, Documenten, Bureaublad), Nieuwe map maken
- **Opslaan persisteert in localStorage** — leerlingen kunnen documenten openen om verder te werken
- **Tabel** met grid-picker + Tab-toets navigatie + nieuwe rij
- **Afbeelding** met click-context (achter/voor/rondom tekst, resize, verwijderen)
- **Tekstvak** met right-click context menu
- **Inhoudsopgave** uit koppen
- **Zoek/Vervang** met live highlight
- **Liniaal** met klikbare tab stops
- **Pagina-rand**, watermerk, achtergrondkleur, thema's
- **SmartArt** (proces, cyclus, hiërarchie, lijst, venn)
- **Grafiek** (staaf, lijn, cirkel)
- **3D-modellen** (CSS 3D-transform kubus)
- **Print** echt werkend met @media print stijlen
- **Voorlezen**, spellingcontrole, vertalen, synoniemen