JavaScript - Interaktive Rechenaufgaben ?
Hallo,
ich soll bei JavaScript einen eine Übungsseite mit einem Kopfrechentrainer gestalten. (siehe Bild). - Ich bin jetzt soweit gekommen, dass die zufällige Aufgabe angezeigt wird. Ab dem Punkt wo man das Ergebnis im dritten Feld eintragen soll und anschließend eine Rückmeldung bekommt scheiterts.
Kann mir jemand sagen, wie ich jetzt weiter vorgehen muss?
LG lolnuss
1 Antwort
Ungefähr so: Die Id's stimmen natürlich nicht.
let sum_alle_ergebnisse = 0;
let sum_richtige_ergebnisse = 0;
document.getElementById("button").onclick = () => {
const input1 = document.getElementById("input1");
const input2 = document.getElementById("input2");
const berechnetes_ergebnis = parseFloat(input1.value) + parseFloat(input2.value);
const user_ergebnis = document.getElementById("ergebnis_feld");
sum_alle_ergebnisse++;
if(user_ergebnis == berechnetes_ergebnis) {
sum_richtige_ergebnisse++;
}
alert("Du hast "+sum_richtige_ergebnisse+ "von "+sum_alle_ergebnisse+" Ergebnisse richtig.");
};
Die ganze Logik mit dem Erstellen der zufälligen Zahlen fehlt halt.
Hab nur das ergänzt, was dir noch fehlt.
Kannst du mir noch erklären, was das 'const' bedeuten soll?
Mit const werden (lokale) Variablen deklariert, die ihren Wert nicht mehr ändern.
An sich könnte man den obigen Code noch etwas ändern:
const input1 = document.getElementById("input1");
const input2 = document.getElementById("input2");
const user_ergebnis = document.getElementById("ergebnis_feld");
document.getElementById("button").addEventListener("click", () => {
const berechnetes_ergebnis = parseFloat(input1.value) + parseFloat(input2.value);
++sum_alle_ergebnisse;
if (user_ergebnis.value == berechnetes_ergebnis) {
++sum_richtige_ergebnisse;
}
alert("Du hast " + sum_richtige_ergebnisse + " von " + sum_alle_ergebnisse + " Ergebnisse richtig.");
});
Die Werte der Variablen, die auf die Eingabefelder zeigen, müssen sich nach ihrer Initialisierung nicht mehr ändern (die Eingabefelder bleiben die komplette Besuchszeit des Nutzers ja gleich). Daher können sie ruhig als konstant deklariert werden und ebenso global. Im obigen Code-Snippet würde der Browser bei jedem Buttonklick die Felder neu suchen und die dazugehörigen Variablen erzeugen müssen.
Ich habe weitere Änderungen vorgenommen.
1) Die addEventListener-Methode wird verwendet, statt onclick. Das erlaubt für zukünftige Anforderungen mehr Flexibilität, da bei Bedarf weitere Listener angehängt werden könnten. Das Setzen von onclick hingegen ist überschreibend.
2) Die Variable user_ergebnis zeigt auf ein Eingabefeld. Da aber mit dem Wert verglichen werden soll, der in dem Feld steht (nicht mit dem Feld selbst), muss bei der Prüfung das value-Property aufgerufen werden.
if (user_ergebnis.value == berechnetes_ergebnis) {
@regex9 Kannst du evtl. mein jetziges Programm überarbeiten? Hab wahrscheinlich irgendwo einen Fehler gemacht, denn er funktioniert bei mir noch nicht, wie erwünscht
<html>
<head>
<title>Kopfrechnen</title>
</head>
<body background="Hintergrund.jpg">
<script language="JavaScript">
<!--
function additionsaufgabe()
{
var min = 1;
var max = 1000;
var summand1 = Math.floor(Math.random() * (max - min)) + 1;
var summand2 = Math.floor(Math.random() * (max - min)) + 1;
var summe
document.addition.zufallszahl1.value=summand1;
document.addition.zufallszahl2.value=summand2;
summe=document.addition.eingabe.value;
}
//-->
</script>
<script language="JavaScript">
<!--
function ausgabe()
{
sum_alle_ergebnisse = 0;
sum_richtige_ergebnisse = 0;
document.getElementByValue("Auswerten").onclick =()
const input type 1 = document.getElementById("zufallszahl1");
const input type 2 = document.getElementById("zufallszahl2");
const user_ergebnis = document.getElementById("ergebnis");
document.getElementById("button").addEventListener("click", () => {
const berechnetes_ergebnis = parseFloat(zufallszahl1.value) + parseFloat(zufallszahl2.value);
const user_ergebnis = document.getElementById("eingabe");
sum_alle_ergebnisse++;
if(user_ergebnis == berechnetes_ergebnis) {
sum_richtige_ergebnisse++;
}
alert("Du hast "+sum_richtige_ergebnisse+ "von "+sum_alle_ergebnisse+" Ergebnisse richtig.");
};
}
//-->
</script>
<h2><font face="Calibri"><font color="#000000"><div align="center">Kopfrechentrainer</div></font></font></h2>
<div align="center"><font face="Calibri"><font size="+1">Du kannst hier Additionsaufgaben Lösen</font></font></div>
<div align="center"><font face="Calibri"><font size="+1">Beim Klick auf den Button wird dir eine Aufgabe gestellt</font></font></div>
<form name="addition">
<br><br>
<div align="center"><font face="Calibri"><font size="+1"><b>BEREIT?</b></font></font></div>
<br><br>
<P align="center">
<input type="button" value="Neue Aufgabe" onClick="additionsaufgabe()">
</P>
<form name="addition">
<P align="center">
<input type 1="text" id="zufallszahl1" value="" size="20">
<input type 2="text" id="zufallszahl2" value="" size="20">
<input type="text" id="eingabe" value="" size="20">
<input type="button" value="Ergebnis">
<input type="button" value="Auswerten" onClick="ausgabe()">
</P>
</form>
</body>
</html>
Das ging schnell, vielen Dank!