E-Learning-Module für Lehrkräfte

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

Informatik · E-Phase

Finde heraus, welche CSS-Anpassungen hier verarbeitet wurden!

Webentwicklung: HTML/CSS

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

Finde heraus, welche CSS-Anpassungen hier verarbeitet wurden!

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.

InformatikE-PhaseWebentwicklung: HTML/CSS

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 Finde heraus, welche CSS-Anpassungen hier verarbeitet wurden! 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.

Der Code für das html-Dokument lautet:

    
    <h1 class=ueberschrift> Finde heraus, welche CSS-Anpassungen hier verarbeitet wurden! </h1>
    <table class=tabelle>
        <tr>
            <th id=head>Schulfächer</th>
            <th id=head>Lehrkraft</th>
        </tr> 
            <td>Chemie, Informatik, Mathematik</td>
            <td>HNR</td>
        </tr>
        <tr>
            <td>Deutsch, Kunst</td>
            <td>OLE</td>
        </tr>
        <tr>
            <td>Deutsch, Ethik</td>
            <td>SCHP</td>
        </tr>
        <tr>
            <td>Sport, Biologie</td>
            <td>LIP</td>
        </tr>
    </table>

    <div id=container2>Gesamtschule Konradsdorf</div>

Schulfächer	Lehrkraft
Chemie, Informatik, Mathematik	HNR
Deutsch, Kunst	OLE
Deutsch, Ethik	SCHP
Sport, Biologie	LIP

Gesamtschule Konradsdorf

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 class="ueberschrift"> Finde heraus, welche CSS-Anpassungen hier verarbeitet wurden! </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;">E-Phase</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;">Webentwicklung: HTML/CSS</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>Finde heraus, welche CSS-Anpassungen hier verarbeitet wurden!</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>
<p id="container">Der Code für das html-Dokument lautet:
    <pre>
    <code>
    &lt;h1 class=ueberschrift&gt; Finde heraus, welche CSS-Anpassungen hier verarbeitet wurden! &lt;/h1&gt;
    &lt;table class=tabelle&gt;
        &lt;tr&gt;
            &lt;th id=head&gt;Schulfächer&lt;/th&gt;
            &lt;th id=head&gt;Lehrkraft&lt;/th&gt;
        &lt;/tr&gt; 
            &lt;td&gt;Chemie, Informatik, Mathematik&lt;/td&gt;
            &lt;td&gt;HNR&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;Deutsch, Kunst&lt;/td&gt;
            &lt;td&gt;OLE&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;Deutsch, Ethik&lt;/td&gt;
            &lt;td&gt;SCHP&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;Sport, Biologie&lt;/td&gt;
            &lt;td&gt;LIP&lt;/td&gt;
        &lt;/tr&gt;
    &lt;/table&gt;

    &lt;div id=container2&gt;Gesamtschule Konradsdorf&lt;/div&gt;
    </code>
    </pre>
</p>
<table class="tabelle">
<tr>
<th id="head">Schulfächer</th>
<th id="head">Lehrkraft</th>
</tr>
<td class="tabelle">Chemie, Informatik, Mathematik</td>
<td>HNR</td>
<tr>
<td class="tabelle">Deutsch, Kunst</td>
<td>OLE</td>
</tr>
<tr>
<td class="tabelle">Deutsch, Ethik</td>
<td>SCHP</td>
</tr>
<tr>
<td class="tabelle">Sport, Biologie</td>
<td>LIP</td>
</tr>
</table>
<div id="container">Gesamtschule Konradsdorf</div>
</div>