Bild nach Abfrage "erscheinen" lassen

[Sabine]

Hi!

Ich sag's gleich, ich bin eine JavaScript-Anfängerin! Nachdem ich nun das Archiv durchforstet habe und nach elends langen Recherchen frage ich euch:

Ich habe ein Formular, das ausgefüllt werden soll. Nachdem dann ein Button gedrückt wurde ("Korrigieren"), wird mit Hilfe einer Funktion ausgewertet, ob alles richtig ausgefüllt ist. Wenn nun alles stimmt,d.h. überall in den Ausgabefeldern "RICHTIG" steht, soll eine Gif-Animation oder FLASH-Animation (je nachdem, was leichter ist) erscheinen und da liegt das Problem, wie mach ich das?

Hier die url, damit ihr euch das mal ansehen könnt:
http://tullits.icb.at/test/roem.html

Besten Dank im Voraus

Sabine

[Griever]

Nun ja. Vielleicht setzt du folgendes ein:

<span id="gifanimation"><img src="transparent.gif" width=20 height=20></span>
<script type="text/javascript">
function animationanzeigen() {
  document.getElementById.innerHTML = "<img src="DieAnimation.gif" width=20 height=20>"
}
</script>

Das kannst du ja noch verarbeiten. Mehr darüber findest du bestimmt unter SelfHTML

[Sabine]

function animationanzeigen() {

Wo wird diese Funktion dann aufgerufen? Wenn man auf den Button "Korrigieren" klickt, wird die Funktion Antwort() aufgerufen, steht diese Funktion dann irgendwo im HTML-Text?

[Vinzenz Mai]

Hallo Sabine,

Ich sag's gleich, ich bin eine JavaScript-Anfängerin!

dann sorge bitte dafür, dass Du das nicht bleibst. Wir helfen hier gerne dabei, auch wenn es hin und wieder vorkommt, dass jemand ein Posting in den falschen Hals bekommt. Chraecker Heller formulierte es einmal so: "Uns gibt es nur mit Meinung und ungebetener Beratung."

Nachdem ich nun das Archiv durchforstet habe und nach elends langen Recherchen frage ich euch:

Sehr lobenswert (unless false :-))

Ich habe ein Formular, das ausgefüllt werden soll. Nachdem dann ein Button gedrückt wurde ("Korrigieren"), wird mit Hilfe einer Funktion ausgewertet, ob alles richtig ausgefüllt ist. Wenn nun alles stimmt,d.h. überall in den Ausgabefeldern "RICHTIG" steht, soll eine Gif-Animation oder FLASH-Animation (je nachdem, was leichter ist) erscheinen und da liegt das Problem, wie mach ich das?

1. Baue Dein GIF an geeigneter Stelle in Dein Dokument ein.
2. Nutze die display-Eigenschaft mit einem geeigneten Wert, damit das Bild nicht angezeigt wird.
3. Wenn Deine Prüfroutine vollen Erfolg meldet, ändere den Wert der display-Eigenschaft auf den Wert, damit das Bild angezeigt wird.

Anmerkung. Es könnte ratsam sein, Dein Bild in einen Container zu setzen. Wende oben angesprochene Methode auf den Container an.

Hier die url, damit ihr euch das mal ansehen könnt:
http://tullits.icb.at/test/roem.html

Eine schöne Idee, das gefällt mir.

Du könntest es für die Benutzer etwas komfortabler machen, z.B. im dritten Bereich (arabische -> römische Ziffern) könntest toUpperCase() verwenden und es den Benutzern ersparen groß zu schreiben (OK, es gibt Capslock).

Du könntest das noch ausbauen, indem Du Dir zwei Konvertierungsroutinen schreibst (römisch -> arabisch und umgekehrt) und die Werte der einzelnen Aufgaben per Zufallsgenerator ermitteln lassen.

Noch einen Schritt weiter könntest Du die Aufgabenstellung und -prüfung statt clientseitig serverseitig durchführen (sofern Dir eine serverseitige Technik zur Verfügung steht). Dann entfällt auch das Mogeln durch Anschauen des Quelltextes :-)

Freundliche Grüße

Vinzenz

PS: Validieren des HTML bzw. CSS kann auch nie schaden.

[Sabine]

HERZLICHEN DANK!

Mal schauen, was ich da so alles umsetzen kann. Die Idee mit dem Zufallsgenerator ist super. Hast mir wirklich weitergeholfen.

Danke

[Felix Riesterer]

Liebe Sabine,

Wenn nun alles stimmt,d.h. überall in den Ausgabefeldern "RICHTIG" steht, soll eine Gif-Animation oder FLASH-Animation

Hier die url, damit ihr euch das mal ansehen könnt:
http://tullits.icb.at/test/roem.html

da lässt sich etwas machen.

Ich schlage vor, dass Du die Eingabefelder (inputs) durch Grafiken ersetzt, denen Du dann ID-Attribute vergibst.

Beispiel:
<td><img src="transparent.gif" alt="bewertung" id="wert7" /></td>

In der Funktion Antwort() (oder Antwort1() etc.) kannst Du dann mit document.getElementById("wert7").src auf die Bilddatei des jeweiligen Bildes zugreifen (um sie z.B. zu ändern).

Beispiel:

function Antwort () {  
  var Ergebnis = (document.Formular.eingabe1.value == "68") ? "pfad/richtig.gif" : "pfad/falsch.gif";  
  document.getElementById("wert1").src = Ergebnis;  
// und so weiter...  
  var Ergebnis = (document.Formular.eingabe7.value == "xyz") ? "pfad/richtig.gif" : "pfad/falsch.gif";  
  document.getElementById("wert7").src = Ergebnis;  
// und so weiter...  
}

Dein Vorhaben sollte sich so realisieren lassen.

Es gäbe jetzt die möglichkeit Deinen Code eleganter und kürzer zu gestalten. Dazu böte sich die Verwendung von Schleifen und Arrays an. Wenn Du daran Interesse hast, dann können wir gerne weiter darüber diskutieren.

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Sabine]

Hallo Felix!
Erstmal danke für deinen Lösungsvorschlag, gefällt mir gut, vor allem weil er relativ leicht zu realisieren ist.

Es gäbe jetzt die möglichkeit Deinen Code eleganter und kürzer zu gestalten. Dazu böte sich die Verwendung von Schleifen und Arrays an. Wenn Du daran Interesse hast, dann können wir gerne weiter darüber diskutieren.

Danke für das Angebot, aber ich verzichte erstmal auf Schleifen und Arrays.

liebe Grüße

Sabine

[Vinzenz Mai]

Hallo Sabine,

Erstmal danke für deinen Lösungsvorschlag, gefällt mir gut, vor allem weil er relativ leicht zu realisieren ist.

ich habe erst jetzt verstanden, dass es Dir um das "RICHTIG" bzw. "FALSCH" ging :-( Ich dachte, wenn man alles richtig hat, dann gibt es zusätzlich unter dem Abschnitt eine entsprechende Animation ... (könntest Du als Idee aufgreifen :-))

Danke für das Angebot, aber ich verzichte erstmal auf Schleifen und Arrays.

Spätestens bei Verwendung des Zufallsgenerators zahlen sich die Schleifen und Arrays schnell aus. Zudem hast Du ein lohnendes Projekt, dass Dich motivieren könnte, Dich mit diesen Bereichen von Javascript zu beschäftigen.

Immerhin hast Du ja nur "erstmal" geschrieben. Mach' nur schön einen Schritt nach dem anderen.

Viel Erfolg

Vinzenz

[Felix Riesterer]

Liebe Sabine,

vergleiche mal Deinen Code mit meinem Beispielcode (der noch nicht getestet ist und fehlerhaft sein wird!):

function Antwort(Aufgabenteil) {  
// Diese Funktion wird mit einem übergebenen Parameter aufgerufen,  
// der angibt, welcher Aufgabenteil korrigiert werden soll.  
// Aufruf im HTML-Quelltext (für Teil 2): onclick="Antwort(2)"  
var RichtigBild = "pfad/richtig.gif";  
var FalschBild = "pfad/falsch.gif";  
var Loesungen = {  
   // hier werden die Lösungen für alle Teile gespeichert  
          Teil1 : [  
                  "68",  
                  "831",  
                  "2 777",  
                  "1 929",  
                  "464",  
                  "1 039",  
                  "881",  
                  "3 333"  
                  ],  
  
          Teil2 : [  
                  1,  
                  0,  
                  1,  
                  1,  
                  0,  
                  0  
                  ],  
  
          Teil3 : [  
                  "CCXXXIX",  
                  "DXLIII",  
                  "MXXVI",  
                  "CMLXXIX",  
                  "MMCDXXXIV"  
                  ]  
           };  
  
// jetzt werden die Eingaben geprüft und korrigiert  
// input-Felder müssen eine ID nach folgendem Muster haben:  
// id="Teil3_Eingabe4" (für die vierte Aufgabe im dritten Aubgabenteil)  
for (var i = 0; i < Loesungen["Teil"+Aufgabenteil].length; i++) {  
   var Ergebnis = (document.getElementById("Teil"+Aufgabenteil+"_Eingabe"+i) == Loesungen["Teil"+Aufgabenteil].i);  
   document.getElementById("Teil"+Aufgabenteil+"_Wert"+i).src = Ergebnis ? RichtigBild : FalschBild;;  
   }  
}

Findest Du nicht auch, dass man hiermit sehr viel schneller neue Aufgaben entwickeln könnte?

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Sabine]

Findest Du nicht auch, dass man hiermit sehr viel schneller neue Aufgaben entwickeln könnte?

Doch, da muss ich dir zustimmen. Ich gehe den Code mal durch und werde ihn dann ausprobieren.

Vielen Dankd

[Felix Riesterer]

Liebe Sabine,

mittlerweile habe ich den Code getestet und verbessert. Hier kommt die funktionierende Version (winzige Änderungen an Deinem HTML sind nötig!)

function Antwort(Aufgabenteil) {  
// Diese Funktion wird mit einem übergebenen Parameter aufgerufen,  
// der angibt, welcher Aufgabenteil korrigiert werden soll.  
// Aufruf im HTML-Quelltext (für Teil 2): onclick="Antwort(2)"  
var RichtigBild = "pfad/richtig.gif";  
var FalschBild = "pfad/falsch.gif";  
var Loesungen = {  
   // hier werden die Lösungen für alle Teile gespeichert  
          Teil1 : [  
                  "68",  
                  "831",  
                  "2 777",  
                  "1 929",  
                  "464",  
                  "1 039",  
                  "881",  
                  "3 333" // letztes Element: hier darf kein Komma folgen!  
                  ],  
  
          Teil2 : [  
          // diese Werte sind für Radiobuttons (und benennen den jeweils richtig zu setzenden der verschiedenen möglichen, angefangen bei Radiobutton Nummer null)  
                  1,  
                  0,  
                  1,  
                  1,  
                  0,  
                  0  
                  ],  
  
          Teil3 : [  
                  "CCXXXIX",  
                  "DXLIII",  
                  "MXXVI",  
                  "CMLXXIX",  
                  "MMCDXXXIV"  
                  ]   // auch hier kein Komma, da (hier) letzter Teil!  
           };  
  
// Die Aufgabenteile müssen in Formularen sitzen, die entsprechend nummeriert sind  
// Teil 1: <form name="Formular1">  oder Teil 3: <form name="Formular3">  
// input-Felder müssen einen name-Wert nach folgendem Muster haben:  
// name="Teil3_Eingabe4" (für die vierte Aufgabe im dritten Aufgabenteil)  
// Bewertungsgrafiken müssen eine ID nach folgendem Muster haben:  
// id="Teil3_Wert4" (für die Bewertung der vierten Aufgabe im dritten Aubgabenteil)  
  
// jetzt werden die Eingaben geprüft und korrigiert  
    for (var i = 0; i < Loesungen["Teil"+Aufgabenteil].length; i++) {  
        var Ergebnis;  
        // Radiobuttons oder Textinputs?  
        if (document["Formular"+Aufgabenteil]["Teil"+Aufgabenteil+"_Eingabe"+(i+1)].length > 1) {  
            // Radiobuttons  
            Ergebnis = document["Formular"+Aufgabenteil]["Teil"+Aufgabenteil+"_Eingabe"+(i+1)][Loesungen["Teil"+Aufgabenteil][i]].checked;  
        } else {  
            // Textinputs  
            Ergebnis = (document["Formular"+Aufgabenteil]["Teil"+Aufgabenteil+"_Eingabe"+(i+1)].value.toLowerCase() == Loesungen["Teil"+Aufgabenteil][i].toLowerCase());  
        }  
        // Bewertungsgrafik setzen  
        document.getElementById("Teil"+Aufgabenteil+"_Wert"+(i+1)).src = Ergebnis ? RichtigBild : FalschBild;  
    }  
}  

Schreib doch mal, ob das bei Dir funktioniert hat!

Nebenbei: Das Nachschauen könnte man ein kleines Bisschen erschweren, indem man dieses Javascript in eine externe Javascript-Datei auslagert...

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Sabine]

Lieber Felix!

// jetzt werden die Eingaben geprüft und korrigiert
    for (var i = 0; i < Loesungen["Teil"+Aufgabenteil].length; i++) {
        var Ergebnis;
        // Radiobuttons oder Textinputs?
        if (document["Formular"+Aufgabenteil]["Teil"+Aufgabenteil+"_Eingabe"+(i+1)].length > 1) {
            // Radiobuttons
            Ergebnis = document["Formular"+Aufgabenteil]["Teil"+Aufgabenteil+"_Eingabe"+(i+1)][Loesungen["Teil"+Aufgabenteil][i]].checked;
        } else {
            // Textinputs
            Ergebnis = (document["Formular"+Aufgabenteil]["Teil"+Aufgabenteil+"_Eingabe"+(i+1)].value.toLowerCase() == Loesungen["Teil"+Aufgabenteil][i].toLowerCase());
        }

> Schreib doch mal, ob das bei Dir funktioniert hat!  
  
Ja und Nein. Es funktioniert leider nur teilweise, irgendwas habe ich bei den Radiobuttons falsch gemacht, ich weiß aber nicht genau was. Mit den Textinputs geht alles ok. Vielleicht kannst du mir ja sagen, ob es am html-text liegt, kann sein, dass ich die name="" falsch eingegeben habe.  
  
[zum Ansehen](http://tullits.icb.at/test/roem.html)  
  
Liebe Grüße Sabine

[Felix Riesterer]

Liebe Sabine,

irgendwas habe ich bei den Radiobuttons falsch gemacht, ich weiß aber nicht genau was.

lass mich mal nachsehen...

<td align="center"> <input type="Radio" name="Teil2_Eingabe1" value="richtig"> </td>  
<td align="center"> <input type="Radio" name="radio1" value="falsch"> </td>  
<td align="center"> <img src="leer.gif" width="20" height="20" border="0" alt="bewertung" id="Teil2_Wert1"></td>

Damit die Radiobuttons als Gruppe zusammenwirken, müssen sie denselben Namen tragen. In Deinem Quelltext hat das erste Radio-input name="Teil2_Eingabe1", das dazugehörige zweite aber name="radio1"... Wenn Du hier den Namen aus dem ersten Radio-input wiederholst, dann klappt es!

Übrigens: Auf Deiner Startseite sind die Entitäten für deutsche Umlaute ohne abschließendes Semikolon notiert ("Dies wird sich hoffentlich bald &aumlndern!!", anstatt "Dies wird sich hoffentlich bald ändern!!"), wodurch sie in meinem Firefox nicht korrekt angezeigt werden. Vielleicht interessiert Dich das. ;-)

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Felix Riesterer]

Habe noch etwas vergessen:

Rein von der intuitiven Wahrnehmung hätte ich die "Richtig"-Grafiken in grün, die "Falsch"-Grafiken in rot gehalten, also genau umgekehrt.

Das Drücken der Tabulator-Taste bringt mich _nicht_ in das jeweils nächste Feld, sondern katapultiert mich in das Eingabefeld von Aufgabenteil3, welches denselben Tabindex besitzt, wie das Feld, welches ich zuletzt ausgefüllt habe!

Das liegt daran, dass Du die Werte für den Tabindex nicht einmalig vergibst. Wenn ein <input> den Tabindex="1" hat, dann darf nur dieses <input> diesen Tabindex haben, wie bei einer ID, die auch dokumentenweit einmalig vergeben werden darf. Wenn Du die Felder tatsächlich fortlaufend im Tabindex nummerierst, dann reagieren Browser beim Drücken der Tab-Taste so, wie Du es beabsichtigt hast!

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Sabine]

Lieber Felix!

In Deinem Quelltext hat das erste Radio-input name="Teil2_Eingabe1", das dazugehörige zweite aber name="radio1"...

Das kommt davon, wenn man schnell schnell macht und nicht genau schaut, eh klar, dass es dann nicht funktioniert!

Übrigens: Auf Deiner Startseite sind die Entitäten für deutsche Umlaute ohne abschließendes Semikolon notiert

Ich weiß, aber das wird sich mit Sicherheit ändern. Das ist die alte Version meiner Homepage, die ich in ca. 2 Stunden mal schnell gemacht habe, weils dringend war. Jetzt will ich's ordentlich machen, und da passiert mir sowas mit Sicherheit nicht! Dieses Übungsblatt ist nur ein winzig kleiner Teil meines Projektes!

Herzlichen Dank für deine Infos

Sabine

[Vinzenz Mai]

Hallo Sabine,

Jetzt will ich's ordentlich machen, und da passiert mir sowas mit Sicherheit nicht!

es wäre eine gute Idee, eine vernünftige Zeichenkodierung zu verwenden. Dann kannst Du auf die meisten Entities verzichten und Dein Quelltext ist viel schöner (lesbar).

Dieses Übungsblatt ist nur ein winzig kleiner Teil meines Projektes!

Eine Zwischenfrage: Stehen Dir serverseitige Techniken zur Verfügung?

Freundliche Grüße

Vinzenz

[Sabine]

Hallo Vinzenz!

Eine Zwischenfrage: Stehen Dir serverseitige Techniken zur Verfügung?

Da muss ich mich beim Provider noch informieren - ich nehme mal an, du spielst auf PHP an - oder täusche ich mich?

lg

Sabine

[Vinzenz Mai]

Hallo Sabine,

Eine Zwischenfrage: Stehen Dir serverseitige Techniken zur Verfügung?
Da muss ich mich beim Provider noch informieren - ich nehme mal an, du spielst auf PHP an - oder täusche ich mich?

nein, nicht speziell. Es könnte auch SSI, Perl, Python, JSP, ASP (mit VBScript oder C#) oder sonst was sein. Es wäre interessant zu wissen.

Falls Dir eine serverseitige Technik zur Verfügung steht, könntest Du Dir bestimmt manches erleichtern. Und eine hübsche Frageseite, bei der sich nicht einfach durch In-den-Quellcode-schauen die Lösung finden lässt, macht doch mehr daher. Zudem könntest Du dazulernen, das ist auch nicht verkehrt :-)

Freundliche Grüße

Vinzenz

[Sabine]

Hallo Vinzenz,

Und eine hübsche Frageseite, bei der sich nicht einfach durch In-den-Quellcode-schauen die Lösung finden lässt, macht doch mehr daher.

Sicher, aber das kann ich verhindern - wie ich hier gelernt habe - indem ich das alles in eine externe Datei schreibe!

»»Zudem könntest Du dazulernen, das ist auch nicht verkehrt :-)

Und wieder hast du recht, das Problem ist nur der Faktor Zeit. Hätte ich den ganzen Tag nix zu tun, könnte ich mich stundenlang mit solchen "kleinigkeiten" herumschlagen :) Trotz allem will ich ja lernen, sonst würde ich keine Fragen stellen.

schönen Abend

Sabine

[Vinzenz Mai]

Hallo Sabine,

Und eine hübsche Frageseite, bei der sich nicht einfach durch In-den-Quellcode-schauen die Lösung finden lässt, macht doch mehr daher.

Sicher, aber das kann ich verhindern - wie ich hier gelernt habe - indem ich das alles in eine externe Datei schreibe!

nicht wirklich :-) Du machst es ein wenig schwieriger. Du kannst die Lösung nicht direkt einsehen, aber über den Verweis zur externen Javascript-Datei diese finden, Dir anzeigen lassen ...

Zudem könntest Du dazulernen, das ist auch nicht verkehrt :-)

Und wieder hast du recht, das Problem ist nur der Faktor Zeit.

Dieses Problem stellt sich wohl jedem; aber ein paar Kleinigkeiten, die man dazugelernt hat, können sich innerhalb kurzer Zeit amortisieren.

Freundliche Grüße

Vinzenz