LU04a – Peer Review: Landingpage Alarado
Zeit: ca. 30 Minuten
Abgabe über: Moodle Peer Assessment
In diesem Teil bewerten Sie die Arbeit einer Mitschülerin oder eines Mitschülers anhand einer Bewertungsmatrix – und werden selbst bewertet. Sowohl Ihre Abgabe als auch Ihre Bewertung fliessen in die Modulnote (20%-Teil) ein.
Noch nicht fertig? Sie haben Zeit bis zur Pause, um Ihr Projekt zu vervollständigen und hochzuladen. Danach sofort mit dem Review starten.
Ihre Abgabe hochladen
Schritt 1 – Projektordner prüfen
Stellen Sie sicher, dass Ihr Ordner folgende Struktur enthält:
alarado/
├── index.html
├── (optional styles.css / script.js)
└── resources/
├── logo-light.svg
├── logo-dark.svg
├── hero-image-simple-homepage.png
└── ... (alle weiteren Bilder/SVGs)
Öffnen Sie index.html im Browser und prüfen Sie kurz: Sieht alles korrekt aus?
Schritt 2 – ZIP erstellen
Komprimieren Sie den gesamten Projektordner als ZIP-Datei. Benennen Sie die Datei:
alarado.zip
Schritt 3 – Upload auf Moodle
Öffnen Sie Moodle → Modul 291 → LU04 → Aufgabe «Abgabe Alarado Landingpage» und laden Sie Ihr ZIP hoch.
Peer Review durchführen
Schritt 4 – Zuweisung abwarten
Moodle weist Ihnen automatisch die Arbeit einer anderen Person zu. Sie sehen dies in der Peer-Assessment-Aufgabe, sobald Sie Ihre eigene Abgabe eingereicht haben.
Schritt 5 – ZIP herunterladen & öffnen
- ZIP auf Ihren Computer herunterladen
- ZIP entpacken
index.htmldirekt im Browser öffnen
Schritt 6 – Review durchführen
Gehen Sie die Bewertungsmatrix Kriterium für Kriterium durch. Öffnen Sie dazu auch die Browser-DevTools (F12 oder Cmd+Option+I), um Farben und Schriftgrössen präzise zu prüfen. Vergleichen Sie die Farben, Schriftgrössen und Schriftweights mit den Angeben im Figma-File.
Schritt 7 – Feedback & Note eintragen
Tragen Sie Ihre Punktzahl und Ihren Feedback-Text direkt in Moodle ein. Nutzen Sie die Vorlage weiter unten.
Bewertungsmatrix
Prüfen Sie jedes Kriterium sorgfältig. Total: 16 Punkte.
| Kriterium | Was wird geprüft? | Max. Punkte |
|---|---|---|
| Design-Treue | Entspricht das Layout dem Figma-Design? Sind alle Bereiche vorhanden und korrekt positioniert: Header (Logo, Nav, Toggle), Hero (H3, H1, P, Buttons, Icons), Hero-Bild rechts? | 0–3 |
| Farben | Stimmen die Hex-Werte der verwendeten Farben? #223344 (Text) · #f2f9fe (Hintergrund hell) · #263fa9 (Akzent) · #111729 (Hintergrund dunkel). Tipp: Im DevTools Elements-Panel nachschauen. | 0–2 |
| Typografie | Stimmen font-size und font-weight? h1: 4rem / 700 · h3: 0.875rem / 600 · p: 1.125rem / 500 · Nav-Links: 0.875rem / 600 | 0–2 |
| rem statt px | Sind alle font-size-Angaben in rem (nicht px)? Test: Im Browser Einstellungen → Schriftgrösse erhöhen. Skalieren alle Texte mit? | 0–2 |
| Responsiveness | Funktioniert der Breakpoint bei 1024px? Mobile: Bild oben / Text unten, Hamburger-Icon sichtbar, Navigation ausgeblendet, Toggle ausgeblendet. Tipp: DevTools → Device Toolbar. | 0–3 |
| Dark/Light Mode | Funktioniert der Toggle-Switch? Wechseln Hintergrundfarbe, Textfarbe und Logo (light ↔ dark) korrekt? Wird der Startzustand beim Laden korrekt gesetzt? | 0–2 |
| Code-Qualität | Werden CSS-Variablen (:root) für Farben, Schriftgrössen und Abstände eingesetzt? Ist der Code lesbar und strukturiert? | 0–2 |
| TOTAL | 16 |
Was bedeuten die Punkte?
Bei Kriterien mit 0–3 Punkten gilt:
| Punkte | Bedeutung |
|---|---|
| 0 | Nicht vorhanden oder völlig falsch umgesetzt |
| 1 | Ansatz vorhanden, aber grössere Fehler |
| 2 | Mehrheitlich korrekt, kleine Mängel |
| 3 | Vollständig und korrekt umgesetzt |
Bei Kriterien mit 0–2 Punkten: 0 = fehlt, 1 = teilweise, 2 = korrekt.
Checkliste für eine faire Bewertung
Bevor Sie die Note eintragen, prüfen Sie:
- Ich habe die Seite im Browser geöffnet und getestet
- Ich habe den Breakpoint bei 1024px mit den DevTools geprüft
- Ich habe die Farben mit den DevTools nachgeprüft (nicht nur optisch eingeschätzt)
- Ich habe die Schriftgrösse im Browser verändert und geprüft, ob rem korrekt skaliert
- Ich habe den Dark/Light Toggle mehrfach geklickt
- Mein Feedback ist konkret und begründet
- Ich habe keine AI verwendet für die Bewertung
Feedback-Vorlage
Vorlage für die Bewertung der einzelnen Kriterien.
Design-Treue (__/3): [Was war gut? Was fehlte oder war falsch positioniert?] Farben (__/2): [Stimmten die Hex-Werte? Falls nicht: Was war falsch?] Typografie (__/2): [Stimmten font-size und font-weight für alle Textelemente?] rem statt px (__/2): [Wurden rem verwendet? Skaliert der Text beim Vergrössern?] Responsiveness (__/3): [Funktioniert der Breakpoint? Ist die Mobile-Ansicht korrekt?] Dark/Light Toggle (__/2): [Funktioniert der Toggle? Wechselt Logo und Farben korrekt?] Code-Qualität (__/2): [CSS-Variablen vorhanden? Lesbarkeit und Struktur?] TOTAL: __ / 16 Allgemeines Feedback: [Was war besonders gut? Was würden Sie als erstes verbessern?]
Gutes Feedback ist konkret.
Statt «Die Farben sind falsch» → «Der Hintergrund hat den Wert #e0e8f0 statt #f2f9fe. Im Dark Mode fehlt die Hintergrundfarbe #111729.»
Wichtige Regeln
- Kein AI für die Bewertung! Ihr Feedback muss aus eigener Analyse stammen. Die Lehrperson prüft die Bewertungen nach.
- Fair und sachlich bleiben. Beurteilen Sie die Arbeit, nicht die Person. Seien Sie kritisch, aber konstruktiv. Übermässig tiefe oder hohe Noten werden von der Lehrperson korrigiert.
- Lehrperson-Review. Die Lehrperson schaut sich die Reviews durch. Noten werden angepasst, wenn sie auf falschen Annahmen basieren oder offensichtlich zu hoch/tief sind.