E-Learning-Module für Lehrkräfte

Geordnete Moodle-Vorlagen zu Mathematik, Informatik und Chemie mit Vorschau, Quelltext und Exportmöglichkeit.

Informatik · Q1

Selbstlern-Modul: Objektorientierung (Q1.1 Grundkurs)

Objektorientierte Programmierung

Hinweis für Moodle

In Moodle ein Text- und Medienfeld anlegen, über Ansicht → Quellcode wechseln, den Quelltext einfügen und anschließend Bilder/Abschnitte anpassen. Bildplatzhalter markieren Stellen, an denen eigenes Material, GeoGebra-Screenshots oder Buchausschnitte eingefügt werden können.

Vorschau

So wirkt das Modul ungefähr in Moodle

Selbstlern-Modul: Objektorientierung (Q1.1 Grundkurs)

Lehrkräfte-Hinweis zum Einsatz

Dieses Modul ist als Lehrkräfte-Ansicht vorbereitet. Die Inhalte können in Moodle als Text- und Medienfeld eingefügt und anschließend an Lerngruppe, Buchseite, Aufgabenstellung und vorhandene Materialien angepasst werden.

InformatikQ1Objektorientierte Programmierung

Einsatz: als Lernpfad, Übungsmodul, Wiederholung oder vorbereitete Unterrichtssequenz.
Anpassung: Abschnitte, Aufgaben und Lösungen können direkt im Quellcode ergänzt oder gekürzt werden.
Assets: Bildplatzhalter bewusst durch eigenes Material, GeoGebra-Screenshots oder lizenzrechtlich passende Abbildungen ersetzen.

Differenzierte Hilfen

Die Hilfen sind bewusst sichtbar als feste Sections angelegt, damit sie in Moodle ohne JavaScript, Buttons oder Aufklappfunktionen funktionieren.

Hilfe A – Einstieg

Formuliere zuerst in eigenen Worten, worum es in Selbstlern-Modul: Objektorientierung (Q1.1 Grundkurs) geht. Markiere Schlüsselbegriffe, bekannte Größen, Operatoren und unklare Stellen.

Hilfe B – Vorgehen

Arbeitsprozess strukturieren: Problem verstehen, Eingaben/Strukturen identifizieren, Lösung in kleine Teilschritte zerlegen und Ergebnis testen.

Hilfe C – Vertiefung

Vertiefung: Lösung erweitern, Fehlersuche dokumentieren, Code/Struktur erklären und eine alternative Umsetzung vergleichen.

Schritt-für-Schritt-Vorgehen / Erwartungshorizont

Diese Vorlage kann als Erwartungshorizont, Musterlösung oder Hilfekarte genutzt werden.

Aufgabe lesen und Zielprodukt bestimmen.
Eingaben, Daten, HTML-Struktur, Klassen oder Objekte identifizieren.
Lösung in kleine Teilschritte zerlegen.
Zwischenergebnisse testen, Fehler systematisch suchen und korrigieren.
Endergebnis erklären und mögliche Erweiterung notieren.

🖼️

[Platzhalter für ein Bild aus deinem Material/Software (z. B. GeoGebra)/Buch]

Hier würde passend sein: Logo.

Ursprünglicher interner Verweis: /img/hnr.png. Bitte selbst einfügen und Lizenzrechte beachten.

Selbstlern-Modul: Objektorientierung (Q1.1 Grundkurs)

🖼️

[Platzhalter für ein Bild aus deinem Material/Software (z. B. GeoGebra)/Buch]

Hier würde passend sein: Header.

Ursprünglicher interner Verweis: img/Student Guid-04.png. Bitte selbst einfügen und Lizenzrechte beachten.

🖼️

[Platzhalter für ein Bild aus deinem Material/Software (z. B. GeoGebra)/Buch]

Hier würde passend sein: Infobox.

Ursprünglicher interner Verweis: /img/Student Guid-06.png. Bitte selbst einfügen und Lizenzrechte beachten.

Arbeitsauftrag: Dieses Modul deckt die Q1.1-Vorgaben für den Grundkurs des KCGO (Vers. 2025) ab: Klassen/Objekte/Attribute/Methoden/Konstruktoren, Felder (Arrays), Listen mit Bibliotheksklassen, Geheimnisprinzip & Sichtbarkeit (get/set), UML-Klassendiagramm inkl. Assoziation/Aggregation.
Ablauf Bearbeite die verlinkten LearnJ-Abschnitte (eingebettet) und löse danach die Übungen, Quizze, KI-Aufgaben und „Selbst programmieren“-Aufgaben. Arbeite dich von oben nach unten sukzessive durch. Dieses Selbstlernmodul beinhaltet Stoff für circa 7 Unterrichtswochen. Mache zum Abschluss jeder Unterrichtswoche das Feedbackmodul (ganz unten).

Inhalte

Grundbegriffe der Objektorientierten Programmierung OOP (Klassen, Objekte, Methoden, Attribute)
Eigene Klassen & Konstruktoren
Arrays (Feld von Objekten) & ArrayList
Geheimnisprinzip, Sichtbarkeit, get-/set-Methoden
UML-Klassendiagramm, Assoziation & Aggregation

Hinweis Datenschutz: Dieses Modul bindet externe Inhalte (LearnJ & YouTube) per iframe ein. Wenn ein Inhalt nicht lädt, nutze die Direktlinks unter dem jeweiligen Frame.

Disclaimer: Achtung! In den Aufgaben wirst du dazu aufgefordert, KI-Sprachmodelle zu nutzen. Wenn du das nicht möchtest oder darfst, kannst du diese Aufgaben überspringen. Bitte kläre dies vorher mit deinen Erziehungsberechtigten und lies die Datenschutzerklärungen sowie AGB.

Warm-up: Was ist Objektorientierung?

Starte mit diesen Videos (max. 45 min). Notiere dir Merksätze zu den Themen: OOP, Klassen, Konstruktor, Objekte, Attribute.

🎬

[Platzhalter für ein Video/eine interaktive Einbettung]

Hier kann ein eigener Link, ein datenschutzkonformer Embed oder ein Screenshot aus deinem Material ergänzt werden.

Ursprünglicher Verweis: https://www.youtube.com/embed/2le2YYr3N7s

🎬

[Platzhalter für ein Video/eine interaktive Einbettung]

Hier kann ein eigener Link, ein datenschutzkonformer Embed oder ein Screenshot aus deinem Material ergänzt werden.

Ursprünglicher Verweis: https://www.youtube.com/embed/Hc3ddOTYzME?list=PLO-P6W97sI0QceALqhX21OTkeBVj5HkHM

🎬

[Platzhalter für ein Video/eine interaktive Einbettung]

Hier kann ein eigener Link, ein datenschutzkonformer Embed oder ein Screenshot aus deinem Material ergänzt werden.

Ursprünglicher Verweis: https://www.youtube.com/embed/IxwJIGEPXY4

🎬

[Platzhalter für ein Video/eine interaktive Einbettung]

Hier kann ein eigener Link, ein datenschutzkonformer Embed oder ein Screenshot aus deinem Material ergänzt werden.

Ursprünglicher Verweis: https://www.youtube.com/embed/kWO5K2ADQeg?list=PLXiSNHkWbOMkDnHZm_GsOL4za3rRzT-A3&index=27

1) Grundbegriffe: Klassen, Objekte, Attribute, Methoden

Bearbeite zuerst:

🎬

[Platzhalter für ein Video/eine interaktive Einbettung]

Hier kann ein eigener Link, ein datenschutzkonformer Embed oder ein Screenshot aus deinem Material ergänzt werden.

Ursprünglicher Verweis: https://www.learnj.de/doku.php?id=klassen1:grundbegriffe:start

Direktlink: learnj.de/doku.php?id=klassen1:grundbegriffe:start

Dann: Wende die Grundbegriffe im nächsten LearnJ-Teil an.

🎬

[Platzhalter für ein Video/eine interaktive Einbettung]

Hier kann ein eigener Link, ein datenschutzkonformer Embed oder ein Screenshot aus deinem Material ergänzt werden.

Ursprünglicher Verweis: https://www.learnj.de/doku.php?id=klassen1:anwenden:start

Direktlink: learnj.de/doku.php?id=klassen1:anwenden:start

Übung 1 – Begriffe zuordnen
Ordne zu (schreibe in die Felder):

„Bauplan“ →

„konkretes Exemplar“ →

„Eigenschaft“ →

„Fähigkeit/Aktion“ →

Prüfen

Lösung & Erläuterung

Bauplan → Klasse
konkretes Exemplar → Objekt (Instanz)
Eigenschaft → Attribut
Fähigkeit/Aktion → Methode

Eine Klasse beschreibt Struktur & Verhalten, ein Objekt ist eine erzeugte Instanz dieser Klasse.

KI-Aufgabe (Merksätze):

Formuliere vier prägnante Merksätze zu Klasse, Objekt, Attribut und Methode – jeweils mit einem Mini-Beispiel in Java. Prüfe mich danach mit zwei Rückfragen.

Zusatzvideo:

🎬

[Platzhalter für ein Video/eine interaktive Einbettung]

Hier kann ein eigener Link, ein datenschutzkonformer Embed oder ein Screenshot aus deinem Material ergänzt werden.

Ursprünglicher Verweis: https://www.youtube.com/embed/lWYWddhWUag?list=PLXiSNHkWbOMkDnHZm_GsOL4za3rRzT-A3&index=28

Weiter Hilfen:

Programmierenlernen HQ

2) Eigene Klassen & Konstruktoren

Bearbeite:

🎬

[Platzhalter für ein Video/eine interaktive Einbettung]

Hier kann ein eigener Link, ein datenschutzkonformer Embed oder ein Screenshot aus deinem Material ergänzt werden.

Ursprünglicher Verweis: https://www.learnj.de/doku.php?id=klassen1:eigene:start

Direktlink: learnj.de/doku.php?id=klassen1:eigene:start

Zusatz: Konstruktoren initialisieren Objekte. Name = Klassenname, kein Rückgabetyp.

/* Beispiel: einfache Klasse mit Konstruktor */ public class Person { private String name; private int alter; public Person(String name, int alter) { // Konstruktor this.name = name; this.alter = alter; } public void hallo() { System.out.println("Hi, ich bin " + name + " (" + alter + ")"); } }

Lücken-Code (Konstruktor) – fülle ___:

public class Buch { private String titel; private int seiten; public ___(___ t, ___ s) { this.titel = t; this.seiten = s; } }

Prüfen

Musterlösung & Erklärung

public class Buch { private String titel; private int seiten; public Buch(String t, int s) { this.titel = t; this.seiten = s; } }

Der Konstruktor heißt wie die Klasse und hat keinen Rückgabetyp. Parameter initialisieren die Attribute.

KI-Aufgabe (Lückentext):

Erzeuge einen kurzen Lückentext zu Java-Konstruktoren (5–7 Lücken) mit Lösungsvorschlägen. Frage mich danach die Lösungen nacheinander ab.

Vertiefungsvideo:

🎬

[Platzhalter für ein Video/eine interaktive Einbettung]

Hier kann ein eigener Link, ein datenschutzkonformer Embed oder ein Screenshot aus deinem Material ergänzt werden.

Ursprünglicher Verweis: https://www.youtube.com/embed/IxwJIGEPXY4

Weiter Hilfen:

w3schools Konstruktoren

3) Attribute deklarieren & verwenden

Bearbeite:

🎬

[Platzhalter für ein Video/eine interaktive Einbettung]

Hier kann ein eigener Link, ein datenschutzkonformer Embed oder ein Screenshot aus deinem Material ergänzt werden.

Ursprünglicher Verweis: https://www.learnj.de/doku.php?id=klassen2:attribute:start

Direktlink: learnj.de/doku.php?id=klassen2:attribute:start

Mini-Quiz Attribute

Quiz starten

KI-Aufgabe (Quizmaster):

Stelle mir nacheinander 5 Quizfragen (Multiple Choice) zu Java-Attributen wie ein Showmaster. Prüfe meine Antworten und erkläre kurz.

4) Objektreferenzen verstehen

Bearbeite:

🎬

[Platzhalter für ein Video/eine interaktive Einbettung]

Hier kann ein eigener Link, ein datenschutzkonformer Embed oder ein Screenshot aus deinem Material ergänzt werden.

Ursprünglicher Verweis: https://www.learnj.de/doku.php?id=klassen1:anwenden:objektreferenzen:start

Direktlink: learnj.de/doku.php?id=klassen1:anwenden:objektreferenzen:start

Übung – Alias-Effekt
Überlege, was ausgegeben wird:

public class Punkt { int x; Punkt(int x){ this.x = x; } void inc(){ x++; } } Punkt a = new Punkt(5); Punkt b = a; b.inc(); System.out.println(a.x);

Lösung

6. a und b referenzieren dasselbe Objekt; die Änderung über b wirkt sich auf a aus.

KI-Aufgabe (Wahr/Falsch):

Stelle mir 8 Wahr/Falsch-Aussagen zu Objektreferenzen (Alias-Effekt, null, Vergleich von Referenzen). Prüfe jede Antwort sofort und erkläre kurz.

5) Feld von Objekten (Array) & Liste von Objekten (ArrayList)

Arrays (Felder): feste Länge, schneller Zugriff per Index.

Person[] team = new Person[3]; team[0] = new Person("Ava", 17); team[1] = new Person("Bo", 18); team[2] = new Person("Cem", 16); for (int i = 0; i < team.length; i++) { team[i].hallo(); }

ArrayList (Bibliotheksklasse): dynamische Größe, Methoden wie add, remove, size.

import java.util.ArrayList; ArrayList<Person> liste = new ArrayList<>(); liste.add(new Person("Ava", 17)); liste.add(new Person("Bo", 18)); for (Person p : liste) { p.hallo(); }

Baustellen-Aufgabe (Array) – fülle ___:

int[] zahlen = new int[___]; for (int i = 0; i < ___; i++) { zahlen[i] = i*i; } System.out.println(zahlen[___]);

Prüfen

Lösung & Erklärung

int[] zahlen = new int[5]; for (int i = 0; i < zahlen.length; i++) { zahlen[i] = i * i; } System.out.println(zahlen[2]); // 4

zahlen.length liefert die Feldlänge (Index beginnt bei 0). ArrayList wäre dynamisch.

KI-Aufgabe (Lückentext):

Erstelle einen Lückentext zu Arrays vs. ArrayList (8–10 Lücken) mit Lösungsvorschlägen. Frage mich die Lücken einzeln ab.

Videos:

🎬

[Platzhalter für ein Video/eine interaktive Einbettung]

Hier kann ein eigener Link, ein datenschutzkonformer Embed oder ein Screenshot aus deinem Material ergänzt werden.

Ursprünglicher Verweis: https://www.youtube.com/embed/ryev3PMRFik

🎬

[Platzhalter für ein Video/eine interaktive Einbettung]

Hier kann ein eigener Link, ein datenschutzkonformer Embed oder ein Screenshot aus deinem Material ergänzt werden.

Ursprünglicher Verweis: https://www.youtube.com/embed/f9m4GbZbeqE?list=PLXiSNHkWbOMkDnHZm_GsOL4za3rRzT-A3&index=24

🎬

[Platzhalter für ein Video/eine interaktive Einbettung]

Hier kann ein eigener Link, ein datenschutzkonformer Embed oder ein Screenshot aus deinem Material ergänzt werden.

Ursprünglicher Verweis: https://www.youtube.com/embed/pifaJMSsRVY?list=PLXiSNHkWbOMkDnHZm_GsOL4za3rRzT-A3&index=25

🎬

[Platzhalter für ein Video/eine interaktive Einbettung]

Hier kann ein eigener Link, ein datenschutzkonformer Embed oder ein Screenshot aus deinem Material ergänzt werden.

Ursprünglicher Verweis: https://www.youtube.com/embed/EeshCeZJUzA?list=PLXiSNHkWbOMkDnHZm_GsOL4za3rRzT-A3&index=26

6) Geheimnisprinzip (Kapselung), Sichtbarkeit, Getter/Setter

Idee: Daten einer Klasse werden vor direktem Zugriff geschützt (private), Zugriff nur über Methoden (public).

public class Konto { private double saldo; // Geheimnisprinzip: nicht direkt von außen änderbar public double getSaldo() { // Getter return saldo; } public void einzahlen(double betrag) { // kontrollierter Setter/Mutator if (betrag > 0) saldo += betrag; } }

Check – Sichtbarkeiten

Attribut saldo in Konto:

Methode getSaldo():

Prüfen

Lösung & Erläuterung

saldo sollte private sein (Datenkapselung). Zugriff über public Methoden – getSaldo(), einzahlen() (mit Validierung).

KI-Aufgabe (Merksätze):

Formuliere vier Merksätze zum Geheimnisprinzip und zu Getter/Setter. Füge je ein Gegenbeispiel (schlechter Stil) und die bereinigte Variante an.

Videos:

🎬

[Platzhalter für ein Video/eine interaktive Einbettung]

Hier kann ein eigener Link, ein datenschutzkonformer Embed oder ein Screenshot aus deinem Material ergänzt werden.

Ursprünglicher Verweis: https://www.youtube.com/embed/jgDDEqyyizg

🎬

[Platzhalter für ein Video/eine interaktive Einbettung]

Hier kann ein eigener Link, ein datenschutzkonformer Embed oder ein Screenshot aus deinem Material ergänzt werden.

Ursprünglicher Verweis: https://www.youtube.com/embed/O6_pwT1EF3k

🎬

[Platzhalter für ein Video/eine interaktive Einbettung]

Hier kann ein eigener Link, ein datenschutzkonformer Embed oder ein Screenshot aus deinem Material ergänzt werden.

Ursprünglicher Verweis: https://www.youtube.com/embed/WKL0gObL6ks

🎬

[Platzhalter für ein Video/eine interaktive Einbettung]

Hier kann ein eigener Link, ein datenschutzkonformer Embed oder ein Screenshot aus deinem Material ergänzt werden.

Ursprünglicher Verweis: https://www.youtube.com/embed/O5MMDZnsZXA

🎬

[Platzhalter für ein Video/eine interaktive Einbettung]

Hier kann ein eigener Link, ein datenschutzkonformer Embed oder ein Screenshot aus deinem Material ergänzt werden.

Ursprünglicher Verweis: https://www.youtube.com/embed/N1l1DQ_0G14

7) UML-Klassendiagramm, Assoziation & Aggregation

Quick-Guide UML:

Klassendiagramm: Klassen (Name, Attribute, Methoden) & Beziehungen.
Assoziation: „kennt“-Beziehung.
Aggregation: Ganzes–Teil, Teil existiert auch unabhängig.
Komposition: starkes Ganzes–Teil, Teil existiert i. d. R. nur mit dem Ganzen.

Mapping Code → UML (Beispiel)

class Klasse { private java.util.List<Schueler> liste; // Aggregation: Klasse "hat" viele Schueler }

Notation: Klasse ◇── 0..* Schueler (hohler Rhombus auf Seite des „Ganzen“).

Lösungshinweise

Assoziation = „kennt“-Beziehung
Aggregation = Ganzes–Teil (Teil existiert eigenständig)
Komposition = Ganzes–Teil (Teil existiert i. d. R. nur mit dem Ganzen)

KI-Aufgabe (Quizmaster):

Stelle mir 6 Multiple-Choice-Fragen zu UML (Klassendiagramm, Assoziation, Aggregation, Komposition). Agiere als Showmaster, erkläre nach jeder Antwort kurz.

Videos:

🎬

[Platzhalter für ein Video/eine interaktive Einbettung]

Hier kann ein eigener Link, ein datenschutzkonformer Embed oder ein Screenshot aus deinem Material ergänzt werden.

Ursprünglicher Verweis: https://www.youtube.com/embed/zzwUH3vbNkc

🎬

[Platzhalter für ein Video/eine interaktive Einbettung]

Hier kann ein eigener Link, ein datenschutzkonformer Embed oder ein Screenshot aus deinem Material ergänzt werden.

Ursprünglicher Verweis: https://www.youtube.com/embed/8P4mTilZCf0

🎬

[Platzhalter für ein Video/eine interaktive Einbettung]

Hier kann ein eigener Link, ein datenschutzkonformer Embed oder ein Screenshot aus deinem Material ergänzt werden.

Ursprünglicher Verweis: https://www.youtube.com/embed/oaykwg2_TG8

🎬

[Platzhalter für ein Video/eine interaktive Einbettung]

Hier kann ein eigener Link, ein datenschutzkonformer Embed oder ein Screenshot aus deinem Material ergänzt werden.

Ursprünglicher Verweis: https://www.youtube.com/embed/sTM0EjAit7c

🎬

[Platzhalter für ein Video/eine interaktive Einbettung]

Hier kann ein eigener Link, ein datenschutzkonformer Embed oder ein Screenshot aus deinem Material ergänzt werden.

Ursprünglicher Verweis: https://www.youtube.com/embed/um4-oLgKs7g

🎬

[Platzhalter für ein Video/eine interaktive Einbettung]

Hier kann ein eigener Link, ein datenschutzkonformer Embed oder ein Screenshot aus deinem Material ergänzt werden.

Ursprünglicher Verweis: https://www.youtube.com/embed/Z6CrqPukPkY

Weiter Hilfen:

w3schools Aggregation

w3schools Vererbung

Feedbackmodul

Beantworte die Fragen und sende deine Antworten im Schulportal mit dem Betreff:
„Q1 GK HNR Feedback E-Learning-Modul OOP“.

Freitext: Welche Abschnitte hast du vollständig bearbeitet? ___________________
Freitext: Formuliere 2 Merksätze zu „Konstruktoren“ und 2 zu „Kapselung“.
Multiple-Choice: Welche Strukturen hast du verwendet?
☐ Klassen/Objekte ☐ Konstruktoren ☐ Arrays ☐ ArrayList ☐ Getter/Setter ☐ UML
Single-Choice: Wie schwierig waren die Array/ArrayList-Aufgaben?
○ sehr einfach ○ einfach ○ mittel ○ schwierig ○ sehr schwierig
Skala (1–5): Wie zufrieden bist du mit dem Modul?
1 … 5
Ja/Nein: Hast du alle Übungen und interaktiven Checks bearbeitet?
○ Ja ○ Nein
Zeitangabe: Geschätzte Arbeitszeit: ___ Minuten
Selbsteinschätzung (1–5): Wie sicher fühlst du dich jetzt?
1 … 5
Freitext: Was war am meisten hilfreich?
Offen: Verbesserungsvorschläge?

Copy-Paste

Moodle-Quelltext

<div style="font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; line-height:1.6; color:#1f2933; max-width:1100px; margin:0 auto;">
<h1 style="background:linear-gradient(135deg,#9f1239,#0f172a); color:white; padding:1rem 1.2rem; border-radius:14px; font-size:2rem;">Selbstlern-Modul: Objektorientierung (Q1.1 Grundkurs)</h1><section style="background:#f8fafc; border:1px solid #d9e2ec; border-radius:12px; padding:1rem; margin:1rem 0;"><h2 style="margin-top:0; color:#0f172a;">Lehrkräfte-Hinweis zum Einsatz</h2>
<p>Dieses Modul ist als <strong>Lehrkräfte-Ansicht</strong> vorbereitet. Die Inhalte können in Moodle als Text- und Medienfeld eingefügt und anschließend an Lerngruppe, Buchseite, Aufgabenstellung und vorhandene Materialien angepasst werden.</p>
<p><span style="display:inline-block; background:#e2e8f0; color:#334155; border-radius:999px; padding:0.2rem 0.6rem; font-size:0.85rem; font-weight:700; margin:0 0.35rem 0.35rem 0;">Informatik</span><span style="display:inline-block; background:#e2e8f0; color:#334155; border-radius:999px; padding:0.2rem 0.6rem; font-size:0.85rem; font-weight:700; margin:0 0.35rem 0.35rem 0;">Q1</span><span style="display:inline-block; background:#e2e8f0; color:#334155; border-radius:999px; padding:0.2rem 0.6rem; font-size:0.85rem; font-weight:700; margin:0 0.35rem 0.35rem 0;">Objektorientierte Programmierung</span></p>
<ul>
<li><strong>Einsatz:</strong> als Lernpfad, Übungsmodul, Wiederholung oder vorbereitete Unterrichtssequenz.</li>
<li><strong>Anpassung:</strong> Abschnitte, Aufgaben und Lösungen können direkt im Quellcode ergänzt oder gekürzt werden.</li>
<li><strong>Assets:</strong> Bildplatzhalter bewusst durch eigenes Material, GeoGebra-Screenshots oder lizenzrechtlich passende Abbildungen ersetzen.</li>
</ul></section><section style="background:#ecfeff; border-left:8px solid #0891b2; border-radius:12px; padding:1rem; margin:1rem 0;"><h2 style="margin-top:0; color:#0f172a;">Differenzierte Hilfen</h2>
<p>Die Hilfen sind bewusst sichtbar als feste Sections angelegt, damit sie in Moodle ohne JavaScript, Buttons oder Aufklappfunktionen funktionieren.</p>
<div style="background:white; border:1px solid #cbd5e1; border-radius:10px; padding:0.8rem 1rem; margin:0.8rem 0;"><h3 style="margin-top:0;">Hilfe A – Einstieg</h3><p>Formuliere zuerst in eigenen Worten, worum es in <strong>Selbstlern-Modul: Objektorientierung (Q1.1 Grundkurs)</strong> geht. Markiere Schlüsselbegriffe, bekannte Größen, Operatoren und unklare Stellen.</p></div>
<div style="background:white; border:1px solid #cbd5e1; border-radius:10px; padding:0.8rem 1rem; margin:0.8rem 0;"><h3 style="margin-top:0;">Hilfe B – Vorgehen</h3><p>Arbeitsprozess strukturieren: Problem verstehen, Eingaben/Strukturen identifizieren, Lösung in kleine Teilschritte zerlegen und Ergebnis testen.</p></div>
<div style="background:white; border:1px solid #cbd5e1; border-radius:10px; padding:0.8rem 1rem; margin:0.8rem 0;"><h3 style="margin-top:0;">Hilfe C – Vertiefung</h3><p>Vertiefung: Lösung erweitern, Fehlersuche dokumentieren, Code/Struktur erklären und eine alternative Umsetzung vergleichen.</p></div></section><section style="background:#f5f3ff; border-left:8px solid #6d28d9; border-radius:12px; padding:1rem; margin:1rem 0;"><h2 style="margin-top:0; color:#0f172a;">Schritt-für-Schritt-Vorgehen / Erwartungshorizont</h2><p>Diese Vorlage kann als Erwartungshorizont, Musterlösung oder Hilfekarte genutzt werden.</p><ol><li>Aufgabe lesen und Zielprodukt bestimmen.</li><li>Eingaben, Daten, HTML-Struktur, Klassen oder Objekte identifizieren.</li><li>Lösung in kleine Teilschritte zerlegen.</li><li>Zwischenergebnisse testen, Fehler systematisch suchen und korrigieren.</li><li>Endergebnis erklären und mögliche Erweiterung notieren.</li></ol></section>
<div class="header">
<div style="border:2px dashed #cbd5e1; background:#f8fafc; border-radius:12px; padding:1rem; margin:1rem 0; color:#475569; text-align:left;">
<div style="font-size:2rem; line-height:1; margin-bottom:0.4rem;">🖼️</div>
<strong>[Platzhalter für ein Bild aus deinem Material/Software (z. B. GeoGebra)/Buch]</strong>
<p style="margin:0.4rem 0 0;">Hier würde passend sein: Logo.</p>
<p style="margin:0.4rem 0 0; font-size:0.9rem;">Ursprünglicher interner Verweis: <code>/img/hnr.png</code>. Bitte selbst einfügen und Lizenzrechte beachten.</p>
</div>
<div class="title">Selbstlern-Modul: Objektorientierung (Q1.1 Grundkurs)</div>
<div style="border:2px dashed #cbd5e1; background:#f8fafc; border-radius:12px; padding:1rem; margin:1rem 0; color:#475569; text-align:left;">
<div style="font-size:2rem; line-height:1; margin-bottom:0.4rem;">🖼️</div>
<strong>[Platzhalter für ein Bild aus deinem Material/Software (z. B. GeoGebra)/Buch]</strong>
<p style="margin:0.4rem 0 0;">Hier würde passend sein: Header.</p>
<p style="margin:0.4rem 0 0; font-size:0.9rem;">Ursprünglicher interner Verweis: <code>img/Student Guid-04.png</code>. Bitte selbst einfügen und Lizenzrechte beachten.</p>
</div>
</div>
<section class="module-navigation">
<div style="font-weight:700; color:#0f172a; margin:0.8rem 0 0.4rem; padding:0.45rem 0.7rem; background:#e2e8f0; border-radius:8px;">←  Zum vorherigen Modul</div>
<div style="font-weight:700; color:#0f172a; margin:0.8rem 0 0.4rem; padding:0.45rem 0.7rem; background:#e2e8f0; border-radius:8px;">Zum nächsten Modul →</div>
</section>
<div class="infobox">
<div style="border:2px dashed #cbd5e1; background:#f8fafc; border-radius:12px; padding:1rem; margin:1rem 0; color:#475569; text-align:left;">
<div style="font-size:2rem; line-height:1; margin-bottom:0.4rem;">🖼️</div>
<strong>[Platzhalter für ein Bild aus deinem Material/Software (z. B. GeoGebra)/Buch]</strong>
<p style="margin:0.4rem 0 0;">Hier würde passend sein: Infobox.</p>
<p style="margin:0.4rem 0 0; font-size:0.9rem;">Ursprünglicher interner Verweis: <code>/img/Student Guid-06.png</code>. Bitte selbst einfügen und Lizenzrechte beachten.</p>
</div>
<div class="infotext">
<p class="arbeitsauftrag">
<strong>Arbeitsauftrag:</strong> Dieses Modul deckt die Q1.1-Vorgaben für den <strong>Grundkurs</strong> des KCGO (Vers. 2025) ab:
            Klassen/Objekte/Attribute/Methoden/Konstruktoren, <strong>Felder (Arrays)</strong>, <strong>Listen mit Bibliotheksklassen</strong>, <strong>Geheimnisprinzip &amp; Sichtbarkeit (get/set)</strong>, <strong>UML-Klassendiagramm</strong> inkl. <strong>Assoziation/Aggregation</strong>.<br/>
<span class="badge">Ablauf</span> Bearbeite die verlinkten <strong>LearnJ-Abschnitte</strong> (eingebettet) und löse danach die <em>Übungen, Quizze, KI-Aufgaben und „Selbst programmieren“-Aufgaben</em>. Arbeite dich von oben nach unten sukzessive durch. Dieses Selbstlernmodul beinhaltet Stoff für circa 7 Unterrichtswochen. Mache zum Abschluss<b> jeder Unterrichtswoche</b> das <a href="#feedback">Feedbackmodul</a> (ganz unten).
          </p>
<h2>Inhalte</h2>
<ol>
<li>Grundbegriffe der Objektorientierten Programmierung OOP (Klassen, Objekte, Methoden, Attribute)</li>
<li>Eigene Klassen &amp; <strong>Konstruktoren</strong></li>
<li><strong>Arrays</strong> (Feld von Objekten) &amp; <strong>ArrayList</strong></li>
<li><strong>Geheimnisprinzip</strong>, Sichtbarkeit, get-/set-Methoden</li>
<li>UML-Klassendiagramm, Assoziation &amp; Aggregation</li>
</ol>
<p class="disclaimer">
<strong>Hinweis Datenschutz:</strong> Dieses Modul bindet externe Inhalte (LearnJ &amp; YouTube) per <em>iframe</em> ein. Wenn ein Inhalt nicht lädt, nutze die Direktlinks unter dem jeweiligen Frame.
			<br/>
<br/>
<strong>Disclaimer: Achtung! </strong> In den Aufgaben wirst du dazu aufgefordert, KI-Sprachmodelle zu nutzen. Wenn du das nicht möchtest oder darfst, kannst du diese Aufgaben überspringen. Bitte kläre dies vorher mit deinen Erziehungsberechtigten und lies die Datenschutzerklärungen sowie AGB.


		  </p>
</div>
</div>
<div class="erklaerungen">
<section class="regel" id="videos-einstieg">
<h3>Warm-up: Was ist Objektorientierung?</h3>
<p>Starte mit diesen Videos (max. 45 min). Notiere dir Merksätze zu den Themen: OOP, Klassen, Konstruktor, Objekte, Attribute.</p>
<div class="video-grid">
<div style="border:2px dashed #cbd5e1; background:#f8fafc; border-radius:12px; padding:1rem; margin:1rem 0; color:#475569; text-align:left;">
<div style="font-size:2rem; line-height:1; margin-bottom:0.4rem;">🎬</div>
<strong>[Platzhalter für ein Video/eine interaktive Einbettung]</strong>
<p style="margin:0.4rem 0 0;">Hier kann ein eigener Link, ein datenschutzkonformer Embed oder ein Screenshot aus deinem Material ergänzt werden.</p>
<p style="margin:0.4rem 0 0; font-size:0.9rem;">Ursprünglicher Verweis: <code>https://www.youtube.com/embed/2le2YYr3N7s</code></p>
</div>
<div style="border:2px dashed #cbd5e1; background:#f8fafc; border-radius:12px; padding:1rem; margin:1rem 0; color:#475569; text-align:left;">
<div style="font-size:2rem; line-height:1; margin-bottom:0.4rem;">🎬</div>
<strong>[Platzhalter für ein Video/eine interaktive Einbettung]</strong>
<p style="margin:0.4rem 0 0;">Hier kann ein eigener Link, ein datenschutzkonformer Embed oder ein Screenshot aus deinem Material ergänzt werden.</p>
<p style="margin:0.4rem 0 0; font-size:0.9rem;">Ursprünglicher Verweis: <code>https://www.youtube.com/embed/Hc3ddOTYzME?list=PLO-P6W97sI0QceALqhX21OTkeBVj5HkHM</code></p>
</div>
<div style="border:2px dashed #cbd5e1; background:#f8fafc; border-radius:12px; padding:1rem; margin:1rem 0; color:#475569; text-align:left;">
<div style="font-size:2rem; line-height:1; margin-bottom:0.4rem;">🎬</div>
<strong>[Platzhalter für ein Video/eine interaktive Einbettung]</strong>
<p style="margin:0.4rem 0 0;">Hier kann ein eigener Link, ein datenschutzkonformer Embed oder ein Screenshot aus deinem Material ergänzt werden.</p>
<p style="margin:0.4rem 0 0; font-size:0.9rem;">Ursprünglicher Verweis: <code>https://www.youtube.com/embed/IxwJIGEPXY4</code></p>
</div>
<div style="border:2px dashed #cbd5e1; background:#f8fafc; border-radius:12px; padding:1rem; margin:1rem 0; color:#475569; text-align:left;">
<div style="font-size:2rem; line-height:1; margin-bottom:0.4rem;">🎬</div>
<strong>[Platzhalter für ein Video/eine interaktive Einbettung]</strong>
<p style="margin:0.4rem 0 0;">Hier kann ein eigener Link, ein datenschutzkonformer Embed oder ein Screenshot aus deinem Material ergänzt werden.</p>
<p style="margin:0.4rem 0 0; font-size:0.9rem;">Ursprünglicher Verweis: <code>https://www.youtube.com/embed/kWO5K2ADQeg?list=PLXiSNHkWbOMkDnHZm_GsOL4za3rRzT-A3&amp;index=27</code></p>
</div>
</div>
</section>
<section class="regel" id="grundbegriffe">
<h3>1) Grundbegriffe: Klassen, Objekte, Attribute, Methoden</h3>
<p><strong>Bearbeite zuerst:</strong></p>
<div class="iframe-wrap">
<div style="border:2px dashed #cbd5e1; background:#f8fafc; border-radius:12px; padding:1rem; margin:1rem 0; color:#475569; text-align:left;">
<div style="font-size:2rem; line-height:1; margin-bottom:0.4rem;">🎬</div>
<strong>[Platzhalter für ein Video/eine interaktive Einbettung]</strong>
<p style="margin:0.4rem 0 0;">Hier kann ein eigener Link, ein datenschutzkonformer Embed oder ein Screenshot aus deinem Material ergänzt werden.</p>
<p style="margin:0.4rem 0 0; font-size:0.9rem;">Ursprünglicher Verweis: <code>https://www.learnj.de/doku.php?id=klassen1:grundbegriffe:start</code></p>
</div>
</div>
<p class="inline-note">Direktlink: <a href="https://www.learnj.de/doku.php?id=klassen1:grundbegriffe:start" rel="noopener" target="_blank">learnj.de/doku.php?id=klassen1:grundbegriffe:start</a></p>
<p><strong>Dann:</strong> Wende die Grundbegriffe im nächsten LearnJ-Teil an.</p>
<div class="iframe-wrap">
<div style="border:2px dashed #cbd5e1; background:#f8fafc; border-radius:12px; padding:1rem; margin:1rem 0; color:#475569; text-align:left;">
<div style="font-size:2rem; line-height:1; margin-bottom:0.4rem;">🎬</div>
<strong>[Platzhalter für ein Video/eine interaktive Einbettung]</strong>
<p style="margin:0.4rem 0 0;">Hier kann ein eigener Link, ein datenschutzkonformer Embed oder ein Screenshot aus deinem Material ergänzt werden.</p>
<p style="margin:0.4rem 0 0; font-size:0.9rem;">Ursprünglicher Verweis: <code>https://www.learnj.de/doku.php?id=klassen1:anwenden:start</code></p>
</div>
</div>
<p class="inline-note">Direktlink: <a href="https://www.learnj.de/doku.php?id=klassen1:anwenden:start" rel="noopener" target="_blank">learnj.de/doku.php?id=klassen1:anwenden:start</a></p>
<div class="einfach">
<strong>Übung 1 – Begriffe zuordnen</strong><br/>
            Ordne zu (schreibe in die Felder):<br/>
<div class="check-row">
<label>„Bauplan“ →</label><input id="zu1" placeholder="...?" type="text"/>
</div>
<div class="check-row">
<label>„konkretes Exemplar“ →</label><input id="zu2" placeholder="...?" type="text"/>
</div>
<div class="check-row">
<label>„Eigenschaft“ →</label><input id="zu3" placeholder="...?" type="text"/>
</div>
<div class="check-row">
<label>„Fähigkeit/Aktion“ →</label><input id="zu4" placeholder="...?" type="text"/>
</div>
<div style="font-weight:700; color:#0f172a; margin:0.8rem 0 0.4rem; padding:0.45rem 0.7rem; background:#e2e8f0; border-radius:8px;">Prüfen</div>
<div class="inline-note" id="zu-out"></div>
</div>
<div class="solution" id="sol-zuordnung">
<h4>Lösung &amp; Erläuterung</h4>
<ul>
<li><strong>Bauplan</strong> → Klasse</li>
<li><strong>konkretes Exemplar</strong> → Objekt (Instanz)</li>
<li><strong>Eigenschaft</strong> → Attribut</li>
<li><strong>Fähigkeit/Aktion</strong> → Methode</li>
</ul>
<p>Eine <em>Klasse</em> beschreibt Struktur &amp; Verhalten, ein <em>Objekt</em> ist eine erzeugte Instanz dieser Klasse.</p>
</div>
<div class="ki-box">
<strong>KI-Aufgabe (Merksätze):</strong><br/>
<code>Formuliere vier prägnante Merksätze zu Klasse, Objekt, Attribut und Methode – jeweils mit einem Mini-Beispiel in Java. Prüfe mich danach mit zwei Rückfragen.</code>
</div>
<div class="editor" id="ed-objekt">
<div class="toolbar">
<span class="badge">Selbst programmieren</span>
<div style="font-weight:700; color:#0f172a; margin:0.8rem 0 0.4rem; padding:0.45rem 0.7rem; background:#e2e8f0; border-radius:8px;">Beispiel einfügen</div>
<div style="font-weight:700; color:#0f172a; margin:0.8rem 0 0.4rem; padding:0.45rem 0.7rem; background:#e2e8f0; border-radius:8px;">Struktur checken</div>
<a class="btn run-btn" href="https://onecompiler.com/java" target="_blank">Run in Browser ↗</a>
</div>
<textarea id="ta-objekt" placeholder="// Aufgabe:
  // 1) Definiere eine Klasse Auto mit Attribut 'farbe' (String) und Methode hupen().
  // 2) Erzeuge in main ein Auto-Objekt und rufe hupen()."></textarea>
</div>
<div class="inline-note" id="ed-objekt-out" style="margin:0 20px;"></div>
<div class="hilfestellung">
<strong>Zusatzvideo:</strong>
<div class="video-grid">
<div style="border:2px dashed #cbd5e1; background:#f8fafc; border-radius:12px; padding:1rem; margin:1rem 0; color:#475569; text-align:left;">
<div style="font-size:2rem; line-height:1; margin-bottom:0.4rem;">🎬</div>
<strong>[Platzhalter für ein Video/eine interaktive Einbettung]</strong>
<p style="margin:0.4rem 0 0;">Hier kann ein eigener Link, ein datenschutzkonformer Embed oder ein Screenshot aus deinem Material ergänzt werden.</p>
<p style="margin:0.4rem 0 0; font-size:0.9rem;">Ursprünglicher Verweis: <code>https://www.youtube.com/embed/lWYWddhWUag?list=PLXiSNHkWbOMkDnHZm_GsOL4za3rRzT-A3&amp;index=28</code></p>
</div>
</div>
<div>
<p>Weiter Hilfen:<p>
<p><a href="https://www.programmierenlernenhq.de/grundlagen-der-objektorientierten-programmierung-in-java/">Programmierenlernen HQ</a></p>
</p></p></div>
</div>
</section>
<section class="regel" id="eigene-klassen">
<h3>2) Eigene Klassen &amp; <span class="badge">Konstruktoren</span></h3>
<p><strong>Bearbeite:</strong></p>
<div class="iframe-wrap">
<div style="border:2px dashed #cbd5e1; background:#f8fafc; border-radius:12px; padding:1rem; margin:1rem 0; color:#475569; text-align:left;">
<div style="font-size:2rem; line-height:1; margin-bottom:0.4rem;">🎬</div>
<strong>[Platzhalter für ein Video/eine interaktive Einbettung]</strong>
<p style="margin:0.4rem 0 0;">Hier kann ein eigener Link, ein datenschutzkonformer Embed oder ein Screenshot aus deinem Material ergänzt werden.</p>
<p style="margin:0.4rem 0 0; font-size:0.9rem;">Ursprünglicher Verweis: <code>https://www.learnj.de/doku.php?id=klassen1:eigene:start</code></p>
</div>
</div>
<p class="inline-note">Direktlink: <a href="https://www.learnj.de/doku.php?id=klassen1:eigene:start" rel="noopener" target="_blank">learnj.de/doku.php?id=klassen1:eigene:start</a></p>
<p><strong>Zusatz:</strong> <em>Konstruktoren</em> initialisieren Objekte. Name = Klassenname, kein Rückgabetyp.</p>
<div class="codebox">
/* Beispiel: einfache Klasse mit Konstruktor */
public class Person {
  private String name;
  private int alter;

  public Person(String name, int alter) {   // Konstruktor
    this.name = name;
    this.alter = alter;
  }

  public void hallo() {
    System.out.println("Hi, ich bin " + name + " (" + alter + ")");
  }
}
          </div>
<div class="einfach">
<strong>Lücken-Code (Konstruktor)</strong> – fülle <code>___</code>:
            <div class="codebox" id="code-luecke">
public class Buch {
  private String titel;
  private int seiten;

  public ___(___ t, ___ s) {
    this.titel = t;
    this.seiten = s;
  }
}
            </div>
<div class="check-row">
<input id="in1" placeholder="Klassenname?" type="text"/>
<input id="in2" placeholder="Typ von t?" type="text"/>
<input id="in3" placeholder="Typ von s?" type="text"/>
<div style="font-weight:700; color:#0f172a; margin:0.8rem 0 0.4rem; padding:0.45rem 0.7rem; background:#e2e8f0; border-radius:8px;">Prüfen</div>
</div>
<div class="inline-note" id="konst-out"></div>
</div>
<div class="solution" id="sol-konstruktor">
<h4>Musterlösung &amp; Erklärung</h4>
<div class="codebox">public class Buch {
  private String titel;
  private int seiten;

  public Buch(String t, int s) {
    this.titel = t;
    this.seiten = s;
  }
}</div>
<p>Der Konstruktor heißt wie die Klasse und hat keinen Rückgabetyp. Parameter initialisieren die Attribute.</p>
</div>
<div class="ki-box">
<strong>KI-Aufgabe (Lückentext):</strong><br/>
<code>Erzeuge einen kurzen Lückentext zu Java-Konstruktoren (5–7 Lücken) mit Lösungsvorschlägen. Frage mich danach die Lösungen nacheinander ab.</code>
</div>
<div class="editor" id="ed-konstr">
<div class="toolbar">
<span class="badge">Selbst programmieren</span>
<div style="font-weight:700; color:#0f172a; margin:0.8rem 0 0.4rem; padding:0.45rem 0.7rem; background:#e2e8f0; border-radius:8px;">Beispiel einfügen</div>
<div style="font-weight:700; color:#0f172a; margin:0.8rem 0 0.4rem; padding:0.45rem 0.7rem; background:#e2e8f0; border-radius:8px;">Struktur checken</div>
<a class="btn run-btn" href="https://onecompiler.com/java" target="_blank">Run in Browser ↗</a>
</div>
<textarea id="ta-konstr" placeholder="// Aufgabe:
  // Schreibe eine Klasse Person mit privatem Attribut 'name' und Konstruktor Person(String name).
  // Ergänze eine Methode hallo(). Erzeuge zwei Personen in main."></textarea>
</div>
<div class="inline-note" id="ed-konstr-out" style="margin:0 20px;"></div>
<div class="hilfestellung">
<strong>Vertiefungsvideo:</strong>
<div class="video-grid">
<div style="border:2px dashed #cbd5e1; background:#f8fafc; border-radius:12px; padding:1rem; margin:1rem 0; color:#475569; text-align:left;">
<div style="font-size:2rem; line-height:1; margin-bottom:0.4rem;">🎬</div>
<strong>[Platzhalter für ein Video/eine interaktive Einbettung]</strong>
<p style="margin:0.4rem 0 0;">Hier kann ein eigener Link, ein datenschutzkonformer Embed oder ein Screenshot aus deinem Material ergänzt werden.</p>
<p style="margin:0.4rem 0 0; font-size:0.9rem;">Ursprünglicher Verweis: <code>https://www.youtube.com/embed/IxwJIGEPXY4</code></p>
</div>
<div>
<p>Weiter Hilfen:<p>
<p><a href="https://w3schools.tech/de/tutorial/java/java_constructors">w3schools Konstruktoren</a></p>
</p></p></div>
</div>
</div>
</section>
<section class="regel" id="attribute">
<h3>3) Attribute deklarieren &amp; verwenden</h3>
<p><strong>Bearbeite:</strong></p>
<div class="iframe-wrap">
<div style="border:2px dashed #cbd5e1; background:#f8fafc; border-radius:12px; padding:1rem; margin:1rem 0; color:#475569; text-align:left;">
<div style="font-size:2rem; line-height:1; margin-bottom:0.4rem;">🎬</div>
<strong>[Platzhalter für ein Video/eine interaktive Einbettung]</strong>
<p style="margin:0.4rem 0 0;">Hier kann ein eigener Link, ein datenschutzkonformer Embed oder ein Screenshot aus deinem Material ergänzt werden.</p>
<p style="margin:0.4rem 0 0; font-size:0.9rem;">Ursprünglicher Verweis: <code>https://www.learnj.de/doku.php?id=klassen2:attribute:start</code></p>
</div>
</div>
<p class="inline-note">Direktlink: <a href="https://www.learnj.de/doku.php?id=klassen2:attribute:start" rel="noopener" target="_blank">learnj.de/doku.php?id=klassen2:attribute:start</a></p>
<div class="einfach">
<strong>Mini-Quiz Attribute</strong>
<div class="quiz" id="quiz-attr"></div>
<div style="font-weight:700; color:#0f172a; margin:0.8rem 0 0.4rem; padding:0.45rem 0.7rem; background:#e2e8f0; border-radius:8px;">Quiz starten</div>
</div>
<div class="ki-box">
<strong>KI-Aufgabe (Quizmaster):</strong><br/>
<code>Stelle mir nacheinander 5 Quizfragen (Multiple Choice) zu Java-Attributen wie ein Showmaster. Prüfe meine Antworten und erkläre kurz.</code>
</div>
<div class="editor" id="ed-attr">
<div class="toolbar">
<span class="badge">Selbst programmieren</span>
<div style="font-weight:700; color:#0f172a; margin:0.8rem 0 0.4rem; padding:0.45rem 0.7rem; background:#e2e8f0; border-radius:8px;">Beispiel einfügen</div>
<div style="font-weight:700; color:#0f172a; margin:0.8rem 0 0.4rem; padding:0.45rem 0.7rem; background:#e2e8f0; border-radius:8px;">Struktur checken</div>
<a class="btn run-btn" href="https://onecompiler.com/java" target="_blank">Run in Browser ↗</a>
</div>
<textarea id="ta-attr" placeholder="// Aufgabe:
  // Lege eine Klasse Spieler mit Attribut punkte (int) an. Erzeuge 2 Spieler und erhöhe deren Punkte."></textarea>
</div>
<div class="inline-note" id="ed-attr-out" style="margin:0 20px;"></div>
</section>
<section class="regel" id="objektreferenzen">
<h3>4) Objektreferenzen verstehen</h3>
<p><strong>Bearbeite:</strong></p>
<div class="iframe-wrap">
<div style="border:2px dashed #cbd5e1; background:#f8fafc; border-radius:12px; padding:1rem; margin:1rem 0; color:#475569; text-align:left;">
<div style="font-size:2rem; line-height:1; margin-bottom:0.4rem;">🎬</div>
<strong>[Platzhalter für ein Video/eine interaktive Einbettung]</strong>
<p style="margin:0.4rem 0 0;">Hier kann ein eigener Link, ein datenschutzkonformer Embed oder ein Screenshot aus deinem Material ergänzt werden.</p>
<p style="margin:0.4rem 0 0; font-size:0.9rem;">Ursprünglicher Verweis: <code>https://www.learnj.de/doku.php?id=klassen1:anwenden:objektreferenzen:start</code></p>
</div>
</div>
<p class="inline-note">Direktlink: <a href="https://www.learnj.de/doku.php?id=klassen1:anwenden:objektreferenzen:start" rel="noopener" target="_blank">learnj.de/doku.php?id=klassen1:anwenden:objektreferenzen:start</a></p>
<div class="einfach">
<strong>Übung – Alias-Effekt</strong><br/>
            Überlege, was ausgegeben wird:
            <div class="codebox">
public class Punkt {
  int x;
  Punkt(int x){ this.x = x; }
  void inc(){ x++; }
}

Punkt a = new Punkt(5);
Punkt b = a;
b.inc();
System.out.println(a.x);
            </div>
<section style="background:#eef6d6; border-left:8px solid #8aa33d; border-radius:12px; padding:1rem; margin:1rem 0;"><h3 style="margin-top:0; color:#0f172a;">Lösung</h3>
<p><code>6</code>. <code>a</code> und <code>b</code> referenzieren dasselbe Objekt; die Änderung über <code>b</code> wirkt sich auf <code>a</code> aus.</p>
</section>
</div>
<div class="ki-box">
<strong>KI-Aufgabe (Wahr/Falsch):</strong><br/>
<code>Stelle mir 8 Wahr/Falsch-Aussagen zu Objektreferenzen (Alias-Effekt, null, Vergleich von Referenzen). Prüfe jede Antwort sofort und erkläre kurz.</code>
</div>
<div class="editor" id="ed-ref">
<div class="toolbar">
<span class="badge">Selbst programmieren</span>
<div style="font-weight:700; color:#0f172a; margin:0.8rem 0 0.4rem; padding:0.45rem 0.7rem; background:#e2e8f0; border-radius:8px;">Beispiel einfügen</div>
<div style="font-weight:700; color:#0f172a; margin:0.8rem 0 0.4rem; padding:0.45rem 0.7rem; background:#e2e8f0; border-radius:8px;">Struktur checken</div>
<a class="btn run-btn" href="https://onecompiler.com/java" target="_blank">Run in Browser ↗</a>
</div>
<textarea id="ta-ref" placeholder="// Aufgabe:
  // Erzeuge zwei Referenzen auf dasselbe Objekt und demonstriere den Alias-Effekt mit einer Methode inc()."></textarea>
</div>
<div class="inline-note" id="ed-ref-out" style="margin:0 20px;"></div>
</section>
<section class="regel" id="arrays-listen">
<h3>5) Feld von Objekten (Array) &amp; Liste von Objekten (ArrayList)</h3>
<p><strong>Arrays (Felder):</strong> feste Länge, schneller Zugriff per Index.</p>
<div class="codebox">
Person[] team = new Person[3];
team[0] = new Person("Ava", 17);
team[1] = new Person("Bo", 18);
team[2] = new Person("Cem", 16);

for (int i = 0; i &lt; team.length; i++) {
  team[i].hallo();
}
          </div>
<p><strong>ArrayList (Bibliotheksklasse):</strong> dynamische Größe, Methoden wie <code>add</code>, <code>remove</code>, <code>size</code>.</p>
<div class="codebox">
import java.util.ArrayList;

ArrayList&lt;Person&gt; liste = new ArrayList&lt;&gt;();
liste.add(new Person("Ava", 17));
liste.add(new Person("Bo", 18));
for (Person p : liste) {
  p.hallo();
}
          </div>
<div class="einfach">
<strong>Baustellen-Aufgabe (Array)</strong> – fülle <code>___</code>:
            <div class="codebox">
int[] zahlen = new int[___];
for (int i = 0; i &lt; ___; i++) {
  zahlen[i] = i*i;
}
System.out.println(zahlen[___]);
            </div>
<div class="check-row">
<input id="arr1" placeholder="Länge?" type="text"/>
<input id="arr2" placeholder="Schleifenbedingung?" type="text"/>
<input id="arr3" placeholder="Index?" type="text"/>
<div style="font-weight:700; color:#0f172a; margin:0.8rem 0 0.4rem; padding:0.45rem 0.7rem; background:#e2e8f0; border-radius:8px;">Prüfen</div>
</div>
<div class="inline-note" id="arr-out"></div>
</div>
<div class="solution" id="sol-array">
<h4>Lösung &amp; Erklärung</h4>
<div class="codebox">int[] zahlen = new int[5];
for (int i = 0; i &lt; zahlen.length; i++) {
  zahlen[i] = i * i;
}
System.out.println(zahlen[2]); // 4</div>
<p><code>zahlen.length</code> liefert die Feldlänge (Index beginnt bei 0). <code>ArrayList</code> wäre dynamisch.</p>
</div>
<div class="ki-box">
<strong>KI-Aufgabe (Lückentext):</strong><br/>
<code>Erstelle einen Lückentext zu Arrays vs. ArrayList (8–10 Lücken) mit Lösungsvorschlägen. Frage mich die Lücken einzeln ab.</code>
</div>
<div class="editor" id="ed-array">
<div class="toolbar">
<span class="badge">Selbst programmieren</span>
<div style="font-weight:700; color:#0f172a; margin:0.8rem 0 0.4rem; padding:0.45rem 0.7rem; background:#e2e8f0; border-radius:8px;">Beispiel einfügen</div>
<div style="font-weight:700; color:#0f172a; margin:0.8rem 0 0.4rem; padding:0.45rem 0.7rem; background:#e2e8f0; border-radius:8px;">Struktur checken</div>
<a class="btn run-btn" href="https://onecompiler.com/java" target="_blank">Run in Browser ↗</a>
</div>
<textarea id="ta-array" placeholder="// Aufgabe:
  // 1) Lege ein int-Array mit 4 Elementen an und fülle es.
  // 2) Lege eine ArrayList&lt;String&gt; an, füge 3 Namen hinzu und gib sie mit for-each aus."></textarea>
</div>
<div class="inline-note" id="ed-array-out" style="margin:0 20px;"></div>
<div class="hilfestellung">
<strong>Videos:</strong>
<div class="video-grid">
<div style="border:2px dashed #cbd5e1; background:#f8fafc; border-radius:12px; padding:1rem; margin:1rem 0; color:#475569; text-align:left;">
<div style="font-size:2rem; line-height:1; margin-bottom:0.4rem;">🎬</div>
<strong>[Platzhalter für ein Video/eine interaktive Einbettung]</strong>
<p style="margin:0.4rem 0 0;">Hier kann ein eigener Link, ein datenschutzkonformer Embed oder ein Screenshot aus deinem Material ergänzt werden.</p>
<p style="margin:0.4rem 0 0; font-size:0.9rem;">Ursprünglicher Verweis: <code>https://www.youtube.com/embed/ryev3PMRFik</code></p>
</div>
<div style="border:2px dashed #cbd5e1; background:#f8fafc; border-radius:12px; padding:1rem; margin:1rem 0; color:#475569; text-align:left;">
<div style="font-size:2rem; line-height:1; margin-bottom:0.4rem;">🎬</div>
<strong>[Platzhalter für ein Video/eine interaktive Einbettung]</strong>
<p style="margin:0.4rem 0 0;">Hier kann ein eigener Link, ein datenschutzkonformer Embed oder ein Screenshot aus deinem Material ergänzt werden.</p>
<p style="margin:0.4rem 0 0; font-size:0.9rem;">Ursprünglicher Verweis: <code>https://www.youtube.com/embed/f9m4GbZbeqE?list=PLXiSNHkWbOMkDnHZm_GsOL4za3rRzT-A3&amp;index=24</code></p>
</div>
<div style="border:2px dashed #cbd5e1; background:#f8fafc; border-radius:12px; padding:1rem; margin:1rem 0; color:#475569; text-align:left;">
<div style="font-size:2rem; line-height:1; margin-bottom:0.4rem;">🎬</div>
<strong>[Platzhalter für ein Video/eine interaktive Einbettung]</strong>
<p style="margin:0.4rem 0 0;">Hier kann ein eigener Link, ein datenschutzkonformer Embed oder ein Screenshot aus deinem Material ergänzt werden.</p>
<p style="margin:0.4rem 0 0; font-size:0.9rem;">Ursprünglicher Verweis: <code>https://www.youtube.com/embed/pifaJMSsRVY?list=PLXiSNHkWbOMkDnHZm_GsOL4za3rRzT-A3&amp;index=25</code></p>
</div>
<div style="border:2px dashed #cbd5e1; background:#f8fafc; border-radius:12px; padding:1rem; margin:1rem 0; color:#475569; text-align:left;">
<div style="font-size:2rem; line-height:1; margin-bottom:0.4rem;">🎬</div>
<strong>[Platzhalter für ein Video/eine interaktive Einbettung]</strong>
<p style="margin:0.4rem 0 0;">Hier kann ein eigener Link, ein datenschutzkonformer Embed oder ein Screenshot aus deinem Material ergänzt werden.</p>
<p style="margin:0.4rem 0 0; font-size:0.9rem;">Ursprünglicher Verweis: <code>https://www.youtube.com/embed/EeshCeZJUzA?list=PLXiSNHkWbOMkDnHZm_GsOL4za3rRzT-A3&amp;index=26</code></p>
</div>
</div>
</div>
</section>
<section class="regel" id="kapselung">
<h3>6) Geheimnisprinzip (Kapselung), Sichtbarkeit, Getter/Setter</h3>
<p><strong>Idee:</strong> Daten einer Klasse werden vor direktem Zugriff geschützt (<code>private</code>), Zugriff nur über Methoden (<code>public</code>).</p>
<div class="codebox">
public class Konto {
  private double saldo;              // Geheimnisprinzip: nicht direkt von außen änderbar

  public double getSaldo() {         // Getter
    return saldo;
  }
  public void einzahlen(double betrag) {  // kontrollierter Setter/Mutator
    if (betrag &gt; 0) saldo += betrag;
  }
}
          </div>
<div class="einfach">
<strong>Check – Sichtbarkeiten</strong><br/>
<div class="check-row">
<span>Attribut <code>saldo</code> in <code>Konto</code>:</span>
<select id="vis1">
<option value="">– bitte wählen –</option>
<option>public</option><option>private</option><option>protected</option>
</select>
</div>
<div class="check-row">
<span>Methode <code>getSaldo()</code>:</span>
<select id="vis2">
<option value="">– bitte wählen –</option>
<option>public</option><option>private</option><option>protected</option>
</select>
</div>
<div style="font-weight:700; color:#0f172a; margin:0.8rem 0 0.4rem; padding:0.45rem 0.7rem; background:#e2e8f0; border-radius:8px;">Prüfen</div>
<div class="inline-note" id="vis-out"></div>
</div>
<div class="solution" id="sol-kapsel">
<h4>Lösung &amp; Erläuterung</h4>
<p><strong>saldo</strong> sollte <code>private</code> sein (Datenkapselung). Zugriff über <code>public</code> Methoden – <code>getSaldo()</code>, <code>einzahlen()</code> (mit Validierung).</p>
</div>
<div class="ki-box">
<strong>KI-Aufgabe (Merksätze):</strong><br/>
<code>Formuliere vier Merksätze zum Geheimnisprinzip und zu Getter/Setter. Füge je ein Gegenbeispiel (schlechter Stil) und die bereinigte Variante an.</code>
</div>
<div class="editor" id="ed-kapsel">
<div class="toolbar">
<span class="badge">Selbst programmieren</span>
<div style="font-weight:700; color:#0f172a; margin:0.8rem 0 0.4rem; padding:0.45rem 0.7rem; background:#e2e8f0; border-radius:8px;">Beispiel einfügen</div>
<div style="font-weight:700; color:#0f172a; margin:0.8rem 0 0.4rem; padding:0.45rem 0.7rem; background:#e2e8f0; border-radius:8px;">Struktur checken</div>
<a class="btn run-btn" href="https://onecompiler.com/java" target="_blank">Run in Browser ↗</a>
</div>
<textarea id="ta-kapsel" placeholder="// Aufgabe:
  // Erstelle eine Klasse Konto mit privatem double saldo, getSaldo(), einzahlen(double).
  // Erzeuge 2 Konten und teste die Methoden."></textarea>
</div>
<div class="inline-note" id="ed-kapsel-out" style="margin:0 20px;"></div>
<div class="hilfestellung">
<strong>Videos:</strong>
<div class="video-grid">
<div style="border:2px dashed #cbd5e1; background:#f8fafc; border-radius:12px; padding:1rem; margin:1rem 0; color:#475569; text-align:left;">
<div style="font-size:2rem; line-height:1; margin-bottom:0.4rem;">🎬</div>
<strong>[Platzhalter für ein Video/eine interaktive Einbettung]</strong>
<p style="margin:0.4rem 0 0;">Hier kann ein eigener Link, ein datenschutzkonformer Embed oder ein Screenshot aus deinem Material ergänzt werden.</p>
<p style="margin:0.4rem 0 0; font-size:0.9rem;">Ursprünglicher Verweis: <code>https://www.youtube.com/embed/jgDDEqyyizg</code></p>
</div>
<div style="border:2px dashed #cbd5e1; background:#f8fafc; border-radius:12px; padding:1rem; margin:1rem 0; color:#475569; text-align:left;">
<div style="font-size:2rem; line-height:1; margin-bottom:0.4rem;">🎬</div>
<strong>[Platzhalter für ein Video/eine interaktive Einbettung]</strong>
<p style="margin:0.4rem 0 0;">Hier kann ein eigener Link, ein datenschutzkonformer Embed oder ein Screenshot aus deinem Material ergänzt werden.</p>
<p style="margin:0.4rem 0 0; font-size:0.9rem;">Ursprünglicher Verweis: <code>https://www.youtube.com/embed/O6_pwT1EF3k</code></p>
</div>
<div style="border:2px dashed #cbd5e1; background:#f8fafc; border-radius:12px; padding:1rem; margin:1rem 0; color:#475569; text-align:left;">
<div style="font-size:2rem; line-height:1; margin-bottom:0.4rem;">🎬</div>
<strong>[Platzhalter für ein Video/eine interaktive Einbettung]</strong>
<p style="margin:0.4rem 0 0;">Hier kann ein eigener Link, ein datenschutzkonformer Embed oder ein Screenshot aus deinem Material ergänzt werden.</p>
<p style="margin:0.4rem 0 0; font-size:0.9rem;">Ursprünglicher Verweis: <code>https://www.youtube.com/embed/WKL0gObL6ks</code></p>
</div>
<div style="border:2px dashed #cbd5e1; background:#f8fafc; border-radius:12px; padding:1rem; margin:1rem 0; color:#475569; text-align:left;">
<div style="font-size:2rem; line-height:1; margin-bottom:0.4rem;">🎬</div>
<strong>[Platzhalter für ein Video/eine interaktive Einbettung]</strong>
<p style="margin:0.4rem 0 0;">Hier kann ein eigener Link, ein datenschutzkonformer Embed oder ein Screenshot aus deinem Material ergänzt werden.</p>
<p style="margin:0.4rem 0 0; font-size:0.9rem;">Ursprünglicher Verweis: <code>https://www.youtube.com/embed/O5MMDZnsZXA</code></p>
</div>
<div style="border:2px dashed #cbd5e1; background:#f8fafc; border-radius:12px; padding:1rem; margin:1rem 0; color:#475569; text-align:left;">
<div style="font-size:2rem; line-height:1; margin-bottom:0.4rem;">🎬</div>
<strong>[Platzhalter für ein Video/eine interaktive Einbettung]</strong>
<p style="margin:0.4rem 0 0;">Hier kann ein eigener Link, ein datenschutzkonformer Embed oder ein Screenshot aus deinem Material ergänzt werden.</p>
<p style="margin:0.4rem 0 0; font-size:0.9rem;">Ursprünglicher Verweis: <code>https://www.youtube.com/embed/N1l1DQ_0G14</code></p>
</div>
</div>
</div>
</section>
<section class="regel" id="uml">
<h3>7) UML-Klassendiagramm, Assoziation &amp; Aggregation</h3>
<p><strong>Quick-Guide UML:</strong></p>
<ul>
<li><strong>Klassendiagramm</strong>: Klassen (Name, Attribute, Methoden) &amp; Beziehungen.</li>
<li><strong>Assoziation</strong>: „kennt“-Beziehung.</li>
<li><strong>Aggregation</strong>: Ganzes–Teil, Teil existiert auch unabhängig.</li>
<li><strong>Komposition</strong>: starkes Ganzes–Teil, Teil existiert i. d. R. nur mit dem Ganzen.</li>
</ul>
<div class="einfach">
<strong>Mapping Code → UML (Beispiel)</strong>
<div class="codebox">
class Klasse {
  private java.util.List&lt;Schueler&gt; liste;   // Aggregation: Klasse "hat" viele Schueler
}
            </div>
<p>Notation: <em>Klasse</em> ◇── 0..* <em>Schueler</em> (hohler Rhombus auf Seite des „Ganzen“).</p>
</div>
<div class="solution" id="sol-uml">
<h4>Lösungshinweise</h4>
<ul>
<li>Assoziation = „kennt“-Beziehung</li>
<li>Aggregation = Ganzes–Teil (Teil existiert eigenständig)</li>
<li>Komposition = Ganzes–Teil (Teil existiert i. d. R. nur mit dem Ganzen)</li>
</ul>
</div>
<div class="ki-box">
<strong>KI-Aufgabe (Quizmaster):</strong><br/>
<code>Stelle mir 6 Multiple-Choice-Fragen zu UML (Klassendiagramm, Assoziation, Aggregation, Komposition). Agiere als Showmaster, erkläre nach jeder Antwort kurz.</code>
</div>
<div class="hilfestellung">
<strong>Videos:</strong>
<div class="video-grid">
<div style="border:2px dashed #cbd5e1; background:#f8fafc; border-radius:12px; padding:1rem; margin:1rem 0; color:#475569; text-align:left;">
<div style="font-size:2rem; line-height:1; margin-bottom:0.4rem;">🎬</div>
<strong>[Platzhalter für ein Video/eine interaktive Einbettung]</strong>
<p style="margin:0.4rem 0 0;">Hier kann ein eigener Link, ein datenschutzkonformer Embed oder ein Screenshot aus deinem Material ergänzt werden.</p>
<p style="margin:0.4rem 0 0; font-size:0.9rem;">Ursprünglicher Verweis: <code>https://www.youtube.com/embed/zzwUH3vbNkc</code></p>
</div>
<div style="border:2px dashed #cbd5e1; background:#f8fafc; border-radius:12px; padding:1rem; margin:1rem 0; color:#475569; text-align:left;">
<div style="font-size:2rem; line-height:1; margin-bottom:0.4rem;">🎬</div>
<strong>[Platzhalter für ein Video/eine interaktive Einbettung]</strong>
<p style="margin:0.4rem 0 0;">Hier kann ein eigener Link, ein datenschutzkonformer Embed oder ein Screenshot aus deinem Material ergänzt werden.</p>
<p style="margin:0.4rem 0 0; font-size:0.9rem;">Ursprünglicher Verweis: <code>https://www.youtube.com/embed/8P4mTilZCf0</code></p>
</div>
<div style="border:2px dashed #cbd5e1; background:#f8fafc; border-radius:12px; padding:1rem; margin:1rem 0; color:#475569; text-align:left;">
<div style="font-size:2rem; line-height:1; margin-bottom:0.4rem;">🎬</div>
<strong>[Platzhalter für ein Video/eine interaktive Einbettung]</strong>
<p style="margin:0.4rem 0 0;">Hier kann ein eigener Link, ein datenschutzkonformer Embed oder ein Screenshot aus deinem Material ergänzt werden.</p>
<p style="margin:0.4rem 0 0; font-size:0.9rem;">Ursprünglicher Verweis: <code>https://www.youtube.com/embed/oaykwg2_TG8</code></p>
</div>
<div style="border:2px dashed #cbd5e1; background:#f8fafc; border-radius:12px; padding:1rem; margin:1rem 0; color:#475569; text-align:left;">
<div style="font-size:2rem; line-height:1; margin-bottom:0.4rem;">🎬</div>
<strong>[Platzhalter für ein Video/eine interaktive Einbettung]</strong>
<p style="margin:0.4rem 0 0;">Hier kann ein eigener Link, ein datenschutzkonformer Embed oder ein Screenshot aus deinem Material ergänzt werden.</p>
<p style="margin:0.4rem 0 0; font-size:0.9rem;">Ursprünglicher Verweis: <code>https://www.youtube.com/embed/sTM0EjAit7c</code></p>
</div>
<div style="border:2px dashed #cbd5e1; background:#f8fafc; border-radius:12px; padding:1rem; margin:1rem 0; color:#475569; text-align:left;">
<div style="font-size:2rem; line-height:1; margin-bottom:0.4rem;">🎬</div>
<strong>[Platzhalter für ein Video/eine interaktive Einbettung]</strong>
<p style="margin:0.4rem 0 0;">Hier kann ein eigener Link, ein datenschutzkonformer Embed oder ein Screenshot aus deinem Material ergänzt werden.</p>
<p style="margin:0.4rem 0 0; font-size:0.9rem;">Ursprünglicher Verweis: <code>https://www.youtube.com/embed/um4-oLgKs7g</code></p>
</div>
<div style="border:2px dashed #cbd5e1; background:#f8fafc; border-radius:12px; padding:1rem; margin:1rem 0; color:#475569; text-align:left;">
<div style="font-size:2rem; line-height:1; margin-bottom:0.4rem;">🎬</div>
<strong>[Platzhalter für ein Video/eine interaktive Einbettung]</strong>
<p style="margin:0.4rem 0 0;">Hier kann ein eigener Link, ein datenschutzkonformer Embed oder ein Screenshot aus deinem Material ergänzt werden.</p>
<p style="margin:0.4rem 0 0; font-size:0.9rem;">Ursprünglicher Verweis: <code>https://www.youtube.com/embed/Z6CrqPukPkY</code></p>
</div>
</div>
<div>
<p>Weiter Hilfen:<p>
<p><a href="https://w3schools.tech/de/tutorial/java/java_constructors">w3schools Aggregation</a></p>
<p><a href="https://w3schools.tech/de/tutorial/java/java_inheritance">w3schools Vererbung</a></p>
</p></p></div>
</div>
</section>
</div>
<div class="feedbackbox" id="feedback">
<h2>Feedbackmodul</h2>
<p>Beantworte die Fragen und sende deine Antworten im Schulportal mit dem Betreff:<br/>
<strong>„Q1 GK HNR Feedback E-Learning-Modul OOP“</strong>.</p>
<ol>
<li><strong>Freitext:</strong> Welche Abschnitte hast du vollständig bearbeitet? ___________________</li>
<li><strong>Freitext:</strong> Formuliere 2 Merksätze zu „Konstruktoren“ und 2 zu „Kapselung“.</li>
<li><strong>Multiple-Choice:</strong> Welche Strukturen hast du verwendet?<br/>
            ☐ Klassen/Objekte ☐ Konstruktoren ☐ Arrays ☐ ArrayList ☐ Getter/Setter ☐ UML
          </li>
<li><strong>Single-Choice:</strong> Wie schwierig waren die Array/ArrayList-Aufgaben?<br/>
            ○ sehr einfach ○ einfach ○ mittel ○ schwierig ○ sehr schwierig
          </li>
<li><strong>Skala (1–5):</strong> Wie zufrieden bist du mit dem Modul?<br/>
            1 … 5
          </li>
<li><strong>Ja/Nein:</strong> Hast du alle Übungen und interaktiven Checks bearbeitet?<br/>
            ○ Ja ○ Nein
          </li>
<li><strong>Zeitangabe:</strong> Geschätzte Arbeitszeit: ___ Minuten</li>
<li><strong>Selbsteinschätzung (1–5):</strong> Wie sicher fühlst du dich jetzt?<br/>
            1 … 5
          </li>
<li><strong>Freitext:</strong> Was war am meisten hilfreich?</li>
<li><strong>Offen:</strong> Verbesserungsvorschläge?</li>
</ol>
</div>
</div>