• 20.11.2025, 19:07
  • Register
  • Login

  • You are not logged in.

 

Javascript Problem - Ist es möglich hier ein Bild auszugeben?

Sonni

Senior Member

Javascript Problem - Ist es möglich hier ein Bild auszugeben?

Friday, February 27th 2009, 7:54pm

Hey

wir wollen ein digitales Mathe-Lern-Buch erstellen.
Vorlage bekommen wir von unserer Schülerfirma als Buch.

Ich dacht man kann dies ja dann als html-Seite umsetzen.
Meine Vorstellung ist das dies so ausieht:



Wie ich den Haken bzw das rote X hinbekomme weis ich nicht.
Ich wollte es daher mit einer leichten JavaScriptabfrage versuchen.
VORWEG: Ich hab bisher keine Ahnung von Javascript; html Kentnisse sind aber schon vorhanden.

Jedoch scheitere ich daran, wenn ich den Code in eine html-Tabelle schreibe:
Funktioniert das etwa nicht, oder was mache ich falsch?

Source code

 
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
27
28
29
30
31
32
33
34
35
36

<table width="400" border="1">
  <tr>
	<td><b>Aufgabe</b></td>
	<td><b>Lösung</b></td>
  </tr>
  <tr>
	<td>7 + 5 = </td>
	<td>
		<script type="text/javascript">
		function Antwort () {
  		var Ergebnis = (document.Formular.Eingabe.value == "12") ? "RICHTIG!" : "leider FALSCH!";
  		document.Formular.Eingabe.value = Ergebnis;
		}
		</script>
		<form name="Formular">
		<input type="text" name="Eingabe" size="20">
		<input type="button" value="OK" onclick="Antwort()">
		</form>
	</td>
  <tr>
	<td>20 - 4 = </td>
	<td>
		<script type="text/javascript">
		function Antwort () {
		var Ergebnis = (document.Formular.Eingabe.value == "16") ? "RICHTIG!" : "leider FALSCH!";
		document.Formular.Eingabe.value = Ergebnis;
		}
		</script>
		<form name="Formular">
		<input type="text" name="Eingabe" size="20">
		<input type="button" value="OK" onclick="Antwort()">
		</form>
	</td>

  </tr>
</table>

This post has been edited 1 times, last edit by "Sonni" (Mar 3rd 2009, 2:33pm)

crushcoder

God

Sunday, March 1st 2009, 1:42pm

Die Selektierung mit "document.Formular.Eingabe" funktioniert so nicht.
Schon deshalb nicht weil das keine eindeutige Bezeichnung ist. Es gibt ja schon zwei Felder mit dem name Eingabe.

Sowas findet man übrigens recht schnell mit dem Firefox und dem "Web Developer" Plugin.
Es gibt auch Plugins um Javascript zu debuggen, also um schrittweise durch den eigenen Code zu gehen und alle Änderungen von Variablen mitzubekommen.

Ich würde hier übrigens anders vorgehen, denn Javascript kann im Gegensatz zu den Benutzern der Seite, schon rechnen.
Man kann also den Ausdruck "7 + 5" und "20 - 4" von Javascript mit "eval('7 + 5') rechnen lassen und dann das Ergebnis mit der Eingabe vergleichen.

Mal kurz umgesetzt mit jQuery, das ist eine Library die besonders die Selektierung der Elemente vereinfacht:

Source code

 
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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script>
  	jQuery(document).ready(function($) {
	    $("tr.aufgabe form input[name='Eingabe']").change(function(event) {
	    	antwort = this.value;
	    	aufgabe = $(this).parents("tr").find("td:first").text();
	    	loesung = eval(aufgabe);
	    	if (antwort != loesung) {
				this.value = "Leider FALSCH!";
	    	}
	    	else {
	    		this.value = "RICHTIG!";
	    	}
	    });
	});
  </script>
</head>


    <body>
<table width="400" border="1">
  <tr>
	<td><b>Aufgabe</b></td>
	<td></td>
	<td><b>Lˆsung</b></td>
  </tr>
  <tr class="aufgabe">
	<td>7 + 5</td>
	<td> = </td>
	<td>
		<form name="Formular">
		<input type="text" name="Eingabe" size="20">
		</form>
	</td>
  <tr class="aufgabe">
	<td>20 - 4</td>
	<td> = </td>
	<td>
		<form name="Formular">
		<input type="text" name="Eingabe" size="20">
		</form>
	</td>

  </tr>
</table>
    </body>
</html>


Ich hab auch die Buttons weggelassen. Stattdessen wird die Funktion oben immer aufgerufen wenn sich etwas um Eingabefeld geändert hat.

Zitat von »Microsoft-Sprecher Thomas Baumgärtner«

Gott hat die Welt ja nur in sieben Tagen erschaffen können, weil es keine installierte Basis gab.

Sonni

Senior Member

Tuesday, March 3rd 2009, 2:24pm

Hi

Danke erstmal für dein Hilfe.
Kann Javascript aber auch Arabische Zahlen in Römische umwandeln?
Oder Potenze etc..
Sowas brauche ich leider auch noch :(

Eine Frage hab ich dann doch noch:
Wenn ich das hier jetzt nehme; kann ich dann statt "Richtig" / "leider Falsch" auch BILDER anzeigen lassen?
Wenn ja, wie geht das?

Source code

 
1
2
3
4
5
6
7
8
9
10
11

<script type="text/javascript">
function Antwort () {
  var Ergebnis = (document.Formular.Eingabe.value == "12") ? "RICHTIG!" : "leider FALSCH!";
  document.Formular.Eingabe.value = Ergebnis;
}
</script>
<form name="Formular">
<input type="text" name="Eingabe" size="20">
<input type="button" value="OK" onclick="Antwort()">
<input type="text" name="Ausgabe1" size="20" />
</form>

This post has been edited 1 times, last edit by "Sonni" (Mar 3rd 2009, 2:26pm)

Y0Gi

God

Tuesday, March 3rd 2009, 3:48pm

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.

Quoted

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:

Source code

 
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:

Source code

 
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):

Source code

 
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;`).

This post has been edited 1 times, last edit by "Y0Gi" (Mar 3rd 2009, 4:12pm)

This is my sick nature. – NorthCon // LANresort Bispingen // BYCEPS (LAN party software platform) // OrgaTalk (LAN party orga board)

Similar threads