• 24.04.2024, 14:15
  • Registrieren
  • Anmelden

  • Sie sind nicht angemeldet.

 

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

Lieber Besucher, herzlich willkommen bei: Aqua Computer Forum. Falls dies Ihr erster Besuch auf dieser Seite ist, lesen Sie sich bitte die Hilfe durch. Dort wird Ihnen die Bedienung dieser Seite näher erläutert. Darüber hinaus sollten Sie sich registrieren, um alle Funktionen dieser Seite nutzen zu können. Benutzen Sie das Registrierungsformular, um sich zu registrieren oder informieren Sie sich ausführlich über den Registrierungsvorgang. Falls Sie sich bereits zu einem früheren Zeitpunkt registriert haben, können Sie sich hier anmelden.

Sonni

Senior Member

Beiträge: 838

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

Freitag, 27. Februar 2009, 19:54

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?

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

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »Sonni« (3. März 2009, 14:33)

crushcoder

God

Beiträge: 3 570

Sonntag, 1. März 2009, 13:42

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:

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

Beiträge: 838

Dienstag, 3. März 2009, 14:24

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?

Quellcode

 
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>

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »Sonni« (3. März 2009, 14:26)

Y0Gi

God

Beiträge: 12 708

Dienstag, 3. März 2009, 15:48

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.

Zitat

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

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »Y0Gi« (3. März 2009, 16:12)

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

Ähnliche Themen