Wir wollen mit Hilfe unseres einfachen Code Editors einen eigenen Notenschlüsselrechner erstellen, damit du bei Proben und Leistungsnachweisen prüfen kannst, wie viele Punkte Du noch zur besseren Note benötigst 🙂

Den Rechner kannst du am Ende über einen Link einfach mit anderen teilen.

Wir erstellen zuerst die Grundstruktur mit HTML-Code. Codebeispiele und Anregungen kannst du hier finden: simplecss.unsere-schule.org

Video zu Aufgabe 1

1. Aufgabe

• Schau dir das Video zur Aufgabe 1 an.
• Öffne den Code Editor.
• Füge in der index.html-Datei eine Überschrift hinzu.
• Füge in der index.html-Datei eine Tabelle mit drei Spalten und sieben Zeilen ein.
• Jetzt benötigen wir noch ein Eingabefeld und einen Knopf zum Berechnen der Punkte.

Hast du alles in die index.html-Datei eingefügt, könnte deine Webseite so ähnlich ausschauen:

Version 1 des Notenschlüsselrechners

Jetzt wollen wir der Struktur, dem HTML-Code, mit Hilfe von JavaScript Leben einhauchen.

Um HTML-Elemente in JavaScript nutzen zu können, benötigen die Elemente eine eindeutige id (=Identifikation).

Video zu Aufgabe 2

2. Aufgabe

• Schau dir das Video zur Aufgabe 2 an.
• Gib dem Input-Feld die id=“maxPunkte“.
• Gib dem Button die id=“btnBerechnen“.
• Gib den Zellen der Tabelle, die die Punkte enthalten die ids „punkte1-6“.
• Füge dem Button ein „onclick“-Ereignis hinzu.
• Berechne die Punkte für jede Note und schreibe diese in die passenden Zellen der Tabelle.

Hilfreicher JavaScript Code:

//Element mit id="maxPunkte" wird ausgewählt und in Variable gespeichert:
var maxPunkte = document.querySelector("#maxPunkte");

//Eregnis onclick wird genutzt, damit beim Klicken in der Konsole "Hallo" erscheint:
btnBerechnen.onclick = function() {
	console.log("Hallo");
}

//Text wird in ein HTML-Element eingefügt
punkte1.innerText = punkteMax.value + " - " + (punkteMax.value * 0.9);

Version 2 des Notenschlüsselrechners

Gratulation. Jetzt hast du einen eigenen Notenschlüsselrechner erstellt, den du herunterladen oder über den Link speichern und mit anderen teilen kannst.

Weitere Anpassungen:

Der Notenschlüsselrechner ist bereits funktionsfähig, doch ist dir vielleicht aufgefallen, dass je nach Maximalpunktzahl die Punkte nicht auf ganze oder halbe Punkte gerundet werden:

Dies kann mit folgender Funktion zum richtigen Runden der Punkte korrigiert werden.

Logik: Die Funktion rundet den doppelten Wert auf eine ganze Zahl und teilt das Ergebnis durch 2. Dadurch entstehen immer ganze oder halbe Punkte. Z.B.: 20 / 2 = 10 oder 21 / 2 = 10,5.

Füge diese Funktion in die „script.js“-Datei ein und rufe diese beim Anzeigen der Punkte auf:

//Runded auf die nächste ganze oder halbe Zahl
function round(number) {
	const rounded = Math.round(number * 2) / 2;
	const isRounded = rounded !== number;
	if (isRounded) {
		return rounded;
	}
	return Math.round(number);
}

//Aufruf der Funktion bei der Anzeige der Punkte. Z.B.:
punkte2.innerText = round(punkteMax.value * 0.9) - 0.5 + " - " + round(punkteMax.value * 0.8);

Jetzt werden die Punkte richtig angezeigt:

Super! Du hast deinen eigenen Notenschlüsselrechner erstellt. Gerne kannst du diesen weiter anpassen und uns auch einen Link zu deinem Rechner an r.scheglmann@gmail.com schicken, um diesen hier als Beispiel zu veröffentlichen!

Beispiele:

Links:

• Code Editor
• simplecss.unsere-schule.org