Lieber Jenni,
fangen wir mal mit den Grundlagen an.
<html>
<head>
<title>Hunderterfeld</title>
</head>
Da fehlt eine Angabe zum Doctype und zur verwendeten Zeichenkodierung. Ich repariere das mal ganz schnell:
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Hunderterfeld</title>
</head>
Wenn Du diese HTML-Datei mit einem vernünftigen Editor speicherst, dort als Kodierung auch "UTF-8" angibst, dann sollten alle deutschen Sonderzeichen auch korrekt wie im Quelltext notiert angezeigt werden.
<body onload="Ergebnis()">
Das sollte besser gehen. Vor allem dann, wenn Du weitere solche Lernspiele erstellen willst, solltest Du Dein JavaScript so schreiben, dass Du nur eines programmierst, welches dann in einer eigenen Textdatei (z.B. "spiel.js") abgespeichert und von allen Seiten mit Lernspiel eingebunden wird.
<center><h1>Wie viele Punkte sind das?</h1></<center>
Das <center>-Element lässt Du bitte unbedingt weg! Das Warum kannst Du gerne im Kapitel zu CSS-basierten Layouts nachlesen, wenn Du viel Zeit übrig hast.
<img src="bild1.png">
Es wird aus der Sicht von JavaScript schwierig zu verstehen, welche Deiner Elemente für Dein Lernspiel wie zu behandeln sind, wenn Du sie nicht in eine passende Struktur verpackst, die von Deinem JavaScript "verstanden" wird.
Besser vielleicht so:
<form class="lernspiel">
<p>
<img src="bild1.png" alt="sieben schwarze Punkte">
<input type="number" data-richtig="7">
</p>
<p>
<img src="bild2.png" alt="drei gelbe Punkte">
<input type="number" data-richtig="3">
</p>
</form>
In dieser Struktur wird sofort sichtbar, dass Du ein Bild und ein zugehöriges Zahleneingabefeld in jeweils einem Textabsatz gruppierst. Um es dem JavaScript später so leicht wie möglich zu machen, vergeben wir dem <input> ein spezielles Attribut, welches wir "richtig" nennen. In HTML5 kann man beliebige Attribute notieren, wenn der Attributname mit "data-" beginnt, daher ist der vollständige Attributname "data-richtig". Der Wert dieses Attributes ist dann die erwartete richtige Lösung.
<script>
function timeout(){
Ja, hier wird es jetzt spannend. Da wir ein wiederverwendbares JavaScript schreiben wollen, sollten wir es anders aufziehen. Hier im Wiki gibt es ein Tutorial, in dem beschrieben wird, wie man das besser machen kann.
Daher soll der Aufwand jetzt nicht ins Unermessliche steigen...
Tut mir leid, aber Dein Vorhaben ist nicht so einfach, als dass eine Schnellschusslösung wirklich zielführend ist. Wenn Du das so erstellen willst, wie Du das beschrieben hast, vor allem mit dem Gedanken, mehrere solcher Lernspiele zu bauen, dann solltest Du den JavaScript-Teil wirklich nur einmal machen müssen und den Rest über vernünftiges HTML regeln!
Bist Du bereit, Dich etwas mehr in die Sache zu vertiefen?
Liebe Grüße,
Felix Riesterer.
TS
Rolf B
hmm
Gunnar Bittersmann
JürgenB
Tabellenkalk
marctrix
MudGuard
Auge
Matthias Apsel
