Die von crushcoder eingeführte Verwendung von jQuery kann ich nur sehr unterstützen. Allerdings ist die Einbindung direkt von der Die jQuery-Seite ungünstig, da sie nicht die schnellste ist und durch '-latest.js' ändert sich mit der Zeit die verwendete Version. Dennoch ist die Idee des externen Bezugs für ein Beispiel gut, daher empfehle ich den in
3 reasons why you should let Google host jQuery for you aufgezeigten Weg zu nutzen um schnell an eine bestimmte Version zu gelangen. Für ein Offline-Projekt kannst du die Bibliothek natürlich lokal mit dem Rest deiner Anwendung speichern und entsprechend einbinden.
Wenn ich das hier jetzt nehme; kann ich dann statt "Richtig" / "leider Falsch" auch BILDER anzeigen lassen?
Idealerweise verwendest du eine textuelle Antwort im Markup und ziehst CSS hinzu um sie zu formatieren, etwa:
|
Quellcode
|
1
2
3
4
5
|
<form class="question">
<input type="text" />
<button id="validate-result">Auswerten</button>
<p class="result">Ergebnis: <em></em></p>
</form>
|
Per jQuery kannst du dann das Ergebnis nach Überprüfung der Eingabedaten festlegen, formatieren und einblenden:
|
Quellcode
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
// Jedes Formular mit der Klasse "question" ansteuern.
$('form.question').each(function() {
var form = $(this);
// Klick-Aktion für Button festlegen.
form.find('button').click(function() {
// Eingabe holen.
var value = form.find('input:first').value;
// Beispielhafte Validierung, Ergebnis als Wahrheitswert.
var is_correct = (value == 12);
// Zielelement finden.
var result = form.find('.result em');
// Ergebnistext setzen.
result.text = (is_correct ? 'richtig' : 'falsch');
// Stil über Klassen festlegen.
result.addClass(is_correct ? 'right' : 'wrong');
result.removeClass(is_correct ? 'wrong' : 'right');
// Ergebnis einblenden.
form.find('.result').fadeIn();
});
});
|
So ungefähr, ungetestet.
Die CSS-Formatierung sieht dann etwa so aus (angenommen, die beiden Grafiken sind Icons der Größe 16x16 Pixel):
|
Quellcode
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
.right,
.wrong {
background-repeat: no-repeat;
font-weight: bold;
padding-left: 20px;
}
.right {
background-image: url('right.png');
color: #00ff00;
}
.wrong {
background-image: url('wrong.png');
color: #ff0000;
}}
|
In diesen Definitionen kannst du den text selbst auch ausblenden; wenn das Setzen der Textfarbe auf 'transparent' nicht ausreicht, muss ggf. ein inneres Element eingeführt werden, das dann absolut positioniert und um einige tausend Pixel nach Links oder oben aus dem sichtabren Bereich bewegt wird, damit es noch für Screenreader lesbar bleibt (im Gegensatz zu `display: none;`).