Klimaquiz mit HTML, CSS und Javascript

Das Verständnis zur Grundidee und zum Ablauf der Kurse in unserem Classic-Format ist notwendige Voraussetzung zur Durchführung eines Kurses. Unsicher?

dann gehe nochmal eine Ebene höher und klicke dich dort durch
und lies dir unseren Blogeintrag zu unserem Mindset durch

Anforderungen an Inspirer

Ihr habt HTML, CSS und JS konzeptionell verstanden und könnt ihr Zusammenspiel anschaulich erklären. -> Bedeutet, ihr müsst nicht super flüssig schreiben können, aber auf Google sehr schnell finden, was ihr sucht (weil Ihr wisst, dass es dieses Konstrukt irgendwie so ähnlich gibt).

Ihr wisst, wie Repl mit mehreren Dateien funktioniert und könnt eine verständliche und hilfreiche Einführung dazu halten.
Ihr habt euch den Beispiel-Steckbrief und das Beispiel-Quiz mitsamt Code angeschaut und verstanden.

Ihr könnt mit 11 - 18-Jährigen so kommunizieren, dass sie sich ernst genommen fühlen.

Ihr könnt auch erfahreneren Teilnehmenden Aufgaben geben, die sie nicht unterfordern - das könnte bedeuten, dass ihr sie schon früher mit den Inhalten im Endprojekt eigenständig herumspielen lasst.

Dieser Kurs richtet sich an Programmier-Einsteiger*innen, die Lust haben mit ihrem neu erlerntem Coding-Wissen direkt einen real world-impact zu haben! Gemeinsam mit euch programmieren die Teilnehmenden ein Klimaquiz (Beispiel) und setzen sich hierbei sowohl mit Frontend Programmierung, als auch mit dem Klimawandel auseinander. Eine Auswahl an Fragen aus dem Kurs wird im Nachgang auch in der BEAT3° App veröffentlicht.

Am ersten Tag erstellen die Teilnehmenden eine kleine Steckbriefseite (Beispiel) über eine Person ihrer Wahl. Hierfür wird im Plenum kurz ein neues Konzept erklärt. Dieses können die Teilnehmenden in Pair Programming Sessions direkt im Anschluss selbst ausprobieren. Außerdem beschäftigen sich die Teilnehmden mit dem Klimawandel und überlegen sich eine oder mehrere Quizfragen zum Klimawandel, die sie am nächsten Tag gerne programmieren wollen.
Am zweiten Tag geht es in Pärchen an die Umsetzung der Quizzes. Zum Abschluss zeigen sich die Teilnehmenden ihre Quizzes noch gegenseitig.

Teamwork ist hier wichtig: Gebt Acht, dass die Teilnehmenden in den Pärchen auch wirklich gemeinsam, und nicht nur zu zweit nebeneinander her arbeiten. Außerdem sind HTML und CSS sehr visuell, nutzt das gerne aus! Es bietet sich an, eure Erklärungen möglichst anschaulich zu machen.

In diesem Konzept wechseln wir oft zwischen "WE INSPIRE" und "INSPIRE ME", um die einzelnen Inhaltsblöcke möglichst klein und verstädlich zu halten. Wichtig ist, dass alle die Chance haben, die einzelnen Inhalte zu verstehen.

Kennenlernen

Vorstellungsrunde mit Programmiererfahrung/Motivation

Ihr stellt euch vor und erzählt, wie ihr zur Hacker School und zum Coden gekommen seid.
Nun die Teilnehmer:

Wie heißt Du? (Achtet darauf, dass die Kinder sich nur mit Vornamen vorstellen – Datenschutz.)
Warum bist Du hier?
Hast Du schon mal programmiert?
Was willst Du lernen?

Tag 1

WE INSPIRE: Theoretischer Input

~15 Minuten

Stellt jetzt kurz vor, was der Plan für die nächsten zwei Tage ist (siehe oben). Dabei könnt ihr gerne auch den Beispiel-Steckbrief und das Beispiel-Quiz zeigen. Als nächstes solltet ihr noch kurz erklären, was HTML, CSS und JavaScript sind und wie sie zusammen funktionieren.

Mögliche Erklärung

Insgesamt bilden HTML, CSS und JavaScript das sogenannte Frontend einer Webseite. Sie beschreiben also alles, was auf euren Rechnern, Handys und iPads ausgeführt wird, wenn ihr ins Internet geht. Grob gesagt kümmern sie sich um das Aussehen der Webseite.
Das Gegenstück hierzu ist das Backend. Das sind die Server, mit denen euer Computer im Internet redet. Die Server kümmern sich viel um Daten, aber damit setzen wir uns heute nicht weiter auseinander.
Also: HTML, CSS und JavaScript bilden das Frontend.
HTML wie das Skelett einer Webseite vorstellen. Vielleicht kennt ihr das, wenn eine Webseite falsch geladen hat und dann nur so schwarzer und blauer Text auf weißen Boden war. Das ist reines HTML. Nicht sehr schön, oder?
Um alles etwas schöner und benutzbarer zu machen, brauchen wir CSS. Es ist wie das Makeup einer Webseite und fügt Farben und neue Schriftarten hinzu. Außerdem sorgt es für die Positionierung der einzelnen Elemente auf der Webseite.
Und zu guter letzt haben wir noch JavaScript, das kommt morgen. Es ist ein bisschen wie das Gehirn unseres Frontends und fügt Logik hinzu. Dazu aber mehr morgen.

WE INSPIRE: Intro zu Repl.it und Text stylen

~10 Minuten

Teilt als nächstes euren Bildschirm und öffnet Repl.it. Erstellt ein neues Repl und wählt HTML, CSS, JS aus. Als nächstes könnt ihr einen kleinen Text eingeben. Fangt danach an, diesen Text mit <h>-, <i>-, <b>- und <u>-Tags zu stylen und über Paragraphen zu strukturieren.
Das könnte am Ende eures Live Codings so aussehen:

<h1>Greta Thunberg</h1>
<h2>Steckbrief</h2>
<p><b>Geburtstag</b> 3.Januar 2003 in Stockholm</p>
<p><b>Hobbies</b> Lesen, Zeit mit der Familie verbringen</p>
<p><b>Bekanntester Auftritt</b> Rede vor den <u>United Nations</u></p>
<h2>Zitat</h2>
<i>"Ihr habt mit euren leeren Worten meine Träume
und Kindheit gestohlen."</i>

INSPIRE ME: Pair programming

~15 Minuten

Die Teilnehmenden sollen nun - so wie ihr beim Live Coding gerade eben - gemeinsam einen kurzen Text in Repl.it schreiben und diesen dann über HTML-Tags stylen.
Teilt die Teilnehmenden hierfür in Paare ein. Unserer Erfahrung nach funktioniert das am Besten, wenn man Gleichaltrige und Teilnehmende mit einem ähnlichen Wissensstand zusammen matcht. Versucht, im ersten Pair Programming jeden Breakoutroom zu besuchen. So könnt ihr sicherstellen, dass kein*e Teilnehmer*in offene technische Probleme oder Verständnisfragen hat.

WE INSPIRE: Styling mit CSS

~10 Minuten

Erklärt nun, wie wir mit CSS in der stylesheet.css die Farbe vom Text, die Schriftart und die Hintergrundfarbe ändern können. Zeigt hierzu auch einen Colorpicker, über den man an die Hexcodes der Farben kommt.
Nach dem Live Coding könnte euer Stylesheet z.B. wie folgt aussehen:

body {
    font-family: Candara;
    background-color: #3644af;
    color: whitesmoke;
}
h1{
    color: #1ad366;
}
b {
    color: #00afef;
}
i {
    color: #1ad366;
}

INSPIRE ME: Pair Programming

~10 Minuten

Und wieder eine Pair Programming Session. Diesmal sollen die Teilnehmenden ihren Text von vorhin stylen, ihn also so bunt und kreativ gestalten, wie sie Lust drauf haben. Folgende Fonts unterstützt übrigens Repl.it nativ: https://replit.com/@legacy/Fonts
Achtet darauf, dass die Teilnehmenden in denselben Paaren wie in der letzten Session sind.

Pause + Energizer

30 + 10 Minuten

Nach allerspätestens 120 Minuten solltet ihr eine 30-minütige Pause einlegen. Empfangt die Teilnehmenden am Besten mit einem Energizer, das macht Spaß und hilft dem Gruppengefühl. Ideen hierfür findet ihr in der Einführung.

WE INSPIRE: Bilder und Links einfügen

~10 Minuten

Teilt wieder euren Bildschirm. Hier fügt ihr jetzt Bilder und Links ein. Vergesst nicht, auch zu zeigen, dass man Bilder auch über das stylesheet stylen - und so insbesondere deren Größe verändern - kann. Um das Bild von Greta so in den Code einzubinden, müsst ihr es vorher noch von eurem Rechner in Repl.it hochladen.
Eure index.html könnte jetzt wie folgt aussehen:

<h1>Greta Thunberg</h1>
<p><b>Geburtstag</b> 3.Januar 2003 in Stockholm</p>
<p><b>Hobbies</b> Lesen, Zeit mit der Familie verbringen,
spazieren gehen</p>
<p><b>bekanntester Auftritt</b> Rede vor den United Nations, zu sehen
<a href="https://www.youtube.com/watch?v=v33ro5lGHQg">hier</a>
<img src="Bild.jpg">
<i>"Ihr habt mit euren leeren Worten meine Träume und Kindheit
gestohlen."</i>
<p>Greta Thunberg ist eine schwedische Klimaschutzaktivistin.
Ihr Einsatz für eine an den Erkenntnissen der Wissenschaft
orientierte, konsequente Klimapolitik findet weltweit Beachtung.
Die von ihr initiierten „Schulstreiks für das Klima“ sind
inzwischen zur globalen Bewegung Fridays for Future (FFF)
gewachsen. Mit den Schulstreiks möchte sie erreichen, dass
Schweden das Klima-Übereinkommen von Paris einhält.
<a href="https://de.wikipedia.org/wiki/Greta_Thunberg">Quelle</a></p>

und eure stylesheet.css so:

body {
    font-family: Candara;
    background-color: #3644af;
    color: whitesmoke;
}
h1{
    color: #1ad366;
}
b {
    color: #00afef;
}
i {
    color: #1ad366;
}
a{
    color: #00afef;
}
img {
    width: 80%
}

INSPIRE ME: Pair Programming

10-15 Minuten

Die Teilnehmenden sollen nun ihre eigenen Steckbriefe um Bilder und Links ergänzen.

WE INSPIRE: Text-align, divs und Klassen

Optional, ~15 Minuten

Macht diese Live Coding Session nur, wenn ihr hierfür noch genug Zeit habt. Ihr könnt sie auch getrost weglassen. Möglicherweise lohnt es sich, sie sehr schnellen Gruppen in einem Breakoutroom zu zeigen.

Unser Steckbrief sieht ja schon fast so aus wie die Vorlage. Das Einzige, was noch etwas anders ist, ist der Ort, an dem der Text steht. Na dann sollten wir das mal ändern. Erklärt deshalb (grob) text-align.
Leider können wir so immer nur unseren kompletten Text anordnen. Wahrscheinlich wollen wir aber nur eine Sektion ausrichten. Hierfür können wir nun divs mit Klassen verwenden. Zeigt auch, wie man Klassen im stylesheet stylen kann.
Nach eurer Live Coding Session könnte eure index.html so aussehen:

<h1>Greta Thunberg</h1>
<div class="steckbrief">
    <p><b>Geburtstag</b> 3.Januar 2003 in Stockholm</p>
    <p><b>Hobbies</b> Lesen, Zeit mit der Familie verbringen,
    spazieren gehen</p>
    <p><b>bekanntester Auftritt</b> Rede vor den United Nations
    zu sehen <a href="https://www.youtube.com/watch?v=v33ro5lGHQg">hier
    </a>
</div>
<img src="Bild.jpg">
<div class="zitat">
    <i>"Ihr habt mit euren leeren Worten meine Träume und
    Kindheit gestohlen."</i>
</div>
<p>Greta Thunberg ist eine schwedische Klimaschutzaktivistin.
Ihr Einsatz für eine an den Erkenntnissen der Wissenschaft
orientierte, konsequente Klimapolitik findet weltweit Beachtung.
Die von ihr initiierten „Schulstreiks für das Klima“ sind
inzwischen zur globalen Bewegung Fridays for Future (FFF)
gewachsen. Mit den Schulstreiks möchte sie erreichen, dass
Schweden das Klima-Übereinkommen von Paris einhält.
<a href="https://de.wikipedia.org/wiki/Greta_Thunberg">Quelle</a></p>

und so eure stylesheet.css:

h1{
    color: #1ad366;
}
body {
    font-family: Candara;
    background-color: #3644af;
    color: whitesmoke;
    text-align: center;
}
.steckbrief {
    text-align: left;
}
.zitat {
    text-align: center;
    font-size: 1.3em;
    color: #1ad366;
}
img {
    width: 80%
}
a{
    color: #00afef;
}
b {
    color: #00afef;
}

INSPIRE ME: Pair Programming

Optional, ~10 Minuten

Die Teilnehmenden finalisieren ihre Steckbriefe.

INSPIRE ME: Gegenseitig Ergebnisse vorstellen

~10 Minuten

Spielt ein paar Runden "Chatroulette". Sortiert hierfür die Teilnehemden in zufällige Breakoutsessions ein. In den Breakoutsessions sollen sie sich nun gegenseitig ihre Steckbriefe zeigen und auch auf ihren Code eingehen.
Zeit pro Runde im Chatroulette: circa 2-3 Minuten.

Klimainput

~30 Minuten

Folgt.

Eigene Frage raussuchen

~20 Minuten

Folgt.

Abschluss Tag 1

~5 Minuten

Fragt die Teilnehmenden nach Feedback für den ersten Tag und schickt sie danach nach Hause :)

Tag 2

Ankommen

~10 Minuten

Wartet, bis alle gut im Zoom Raum angekommen sind.

WE INSPIRE: Webentwicklungstools erklären

~15 Minuten

Öffnet eine Webseite ohne JavaScript Framework (z.B. https://codepen.io/ibanez182/full/LZPgrY oder https://www.wcs.org/96-elephants). Danach öffnet ihr die Webentwicklungstools und zeigt, wie man sich durch diese Seite navigieren kann. Z.B. könnt ihr ihnen zeigen, wo die Webseite <h1>- oder <image>-Tags benutzt.

WE INSPIRE: Webseite mit den Webentwicklungstools verändern

~25 Minuten

Öffnet Spiegel oder die Website der Hacker School und fangt an, die Überschriften mit Hilfe der Entwicklertools zu verändern. Ihr könnt auch Farben ändern oder Dinge hinzufügen, tobt euch aus.
Vergesst nicht, zu erwähnen, dass die Änderungen nur lokal auf dem Rechner stattfinden und beim Neuladen der Seite wieder verschwinden.
Anschließend können die Teilnehmenden in einer kurzen Pair Programming Session selbst Webseiten verändern und sie sich danach gegenseitig in einer weiteren Runde Chatroulette zeigen.

WE INSPIRE: Buttons erklären

~5 Minuten

Erstellt ein neues Repl, in dem ihr das Klimaquiz anlegen wollt. Für ein Quiz brauchen wir jetzt aber etwas Neues: richtige Knöpfe. Glücklicherweise kann HTML das schon von alleine. Erstellt also vier <buttons>, jeweils mit einer Antwortmöglichkeit eurer Frage. Nach der Live Coding Session könnte eure index.html wie folgt aussehen:

<h1>Mein erstes Klimaquiz </h1>
<p>Was denkst du, wie viele Vögel werden jedes Jahr
durch Windräder getötet?</p>
<button>
    Ein bis zwei Vögel
</button>
<button>
    13 bis 15 Vögel
</button>
<button>
    40 bis 50 Vögel
</button>
<button>
    etwa 150 Vögel.
</button>

INSPIRE ME: Klimaquiz (ohne Logik) erstellen

~25 Minuten

Lasst die Teilnehmenden ihre eigenen Klimaquize erstellen. Hierbei können sie sollen sie möglichst kreativ mit Farben, Schriftarten und Bildern sein. Außerdem brauchen sie verschiedene Knöpfe mit Antwortmöglichkeiten.
Springt während der Session von Gruppe zu Gruppe, um mögliche Fragen zu klären. Achtet außerdem darauf, dass alle Gruppen nicht an zwei verschiedenen Fragen arbeiten, sondern dass es pro Gruppe nur ein Repl und eine Frage gibt, die gerade bearbeitet wird.

Pause + Energizer

30 + 10 Minuten

Selbsterklärend

WE INSPIRE: onClick und alert erklären

~10 Minuten

Erklärt, wie man mit einem Knopfdruck eine JavaScript-Funktion aufrufen kann. In eurer ersten JavaScript-Funktion kann einfach nur ein alert() aufgerufen werden. Je nach Browser muss man, damit das bei Repl.it gut klappt, eventuell die Seite in einem seperaten Tab öffnen.
Nach der Live Coding Session könnte eure index.html wie folgt aussehen:

<h1>Mein erstes Klimaquiz </h1>
<p>Was denkst du, wie viele Vögel werden jedes Jahr durch
Windräder getötet?</p>
<button onclick="antwortEingeben()">
    Ein bis zwei Vögel
</button>
<button onclick="antwortEingeben()">
    13 bis 15 Vögel
</button>
<button onclick="antwortEingeben()">
    40 bis 50 Vögel
</button>
<button onclick="antwortEingeben()">
    etwa 150 Vögel.
</button>

und die script.js so:

function antwortEingeben() {
    alert("Antwort 1 (ein bis zwei Vögel) ist richtig");
}

WE INSPIRE: JavaScript if und else einfügen

Optional, ~10 Minuten

Abhängig davon, welche Antwort eingegeben wurde, wollen wir nun einen anderen Alert ausgeben (damit wir automatisch wissen, ob wir richtig lagen). Dafür brauchen wir eine "Wenn ..., Dann ..."-Beziehung, also fügen wir einen if- und einen else-Fall in unsere Funktion ein.
Nach dem Live Coding könnte die script.js wie folgt aussehen:

function antwortEingeben() {
    if (event.target.value === "1") {
        alert("Richtig :)");
    }
    else {
        alert("Falsch :(");
    }
}

Und die index.html so:

<h1>Mein erstes Klimaquiz </h1>
<p>Was denkst du, wie viele Vögel werden jedes Jahr durch
Windräder getötet?</p>
<button onclick="antwortEingeben()" value="1">
    Ein bis zwei Vögel
</button>
<button onclick="antwortEingeben()" value="2">
    13 bis 15 Vögel
</button>
<button onclick="antwortEingeben()" value="3">
    40 bis 50 Vögel
</button>
<button onclick="antwortEingeben()" value="4">
    etwa 150 Vögel.
</button>

INSPIRE ME: Pair Programming

Optional, ~10 Minuten

Die Teilnehmenden sollen nun ihr eigenes Quiz auch so anpassen, dass abhängig davon, welcher Knopf gedrückt wurde, sich der Alert verändert.

INSPIRE ME: Stylen von eigenem Quiz

~30 Minuten

Jetzt geht es ans Aussehen: Die Teilnehmenden können ihr eigenes Quiz stylen und sich hierbei wieder möglichst kreativ ausleben.
Ideen: eigene Schriftart, eigene Farben, eigene Bilder - und falls sie eine externe Quelle verwendet haben, eine Quellenangabe.

Besonders Schnelle können danach noch probieren, ob sie den Style von Objekten - je nachdem, welche Antwort eingegeben wurde - anpassen können. Im Beispiel wird die Hintergrundfarbe rot, falls die Antwort falsch ist und grün sonst.

INSPIRE ME: Quizzes der Anderen spielen

~20 Minuten

Zum Abschluss spielen die Teilnehmenden noch ein paar Runden Chatroulette. Hierbei können sie die Quizzes der anderen Teilnehmenden spielen.

Abschluss und Feedback

~15 Minuten

Verabschiedet euch von euren Teilnehmenden und bittet nochmal um Feedback, auch über den offiziellen Feedbackbogen.
Wenn Teinehmenden gerne ihre Fragen in der BEAT3°-App veröffentlicht sehen möchten, schreibt die Fragen, Antwortmöglichkeiten und die richtige Antwort auf und schickt sie an info@beat3.net mit dem Betreff "Hacker School Quizfragen_Datum".

Wie geht's weiter?

~5 Minuten

Zu guter Letzt teilt mit den Teilnehmenden Ressourcen, wie sie weiter programmieren lernen können.
Wir haben hierfür auch eine Website erstellt, auf der wir unsere besten Ressourcen gesammelt haben. Ihr könnt aber auch total gerne Ressouren teilen, die ihr gut findet, oder die euch selbst schon geholfen haben.

← How to work with Microbit

Meteoritenalarm →