Gif in Webseite einbauen

[Christin]

Halli hallo,

kurz vorab: unsere Webseite läuft derzeit über Typo3. Daher kann ich nur einzelne HTML-Elemente selber schreiben und muss leider auch den unschönen Weg gehen und die CSS-Anweisungen mehr oder weniger ins HTML-Dokument packen.

Für eine unserer Online-Schulungen würde ich bei der Beantwortung von Fragen gerne ein GIF auf derselben Seite einblenden, ohne dass der Rest verschwindet, also eine Art Popup, für "richtig/falsch gemacht". Ich kann den Button insofern verlinken, dass mir das GIF im neuen Fenster erscheint, aber eben nicht auf der selben Seite mit dem Text von zuvor im Hintergrund.

Hat jemand einen Rat für mich?

Liebe Grüße Chrissi

[Rolf B]

Hallo Christin,

wie werden denn die Fragen beantwortet? Eine Frage, 5 Buttons mit Antworten, und man muss den richtigen drücken? Und der Server leitet je nach Button auf "Super!" oder "Blödsinn!" weiter?

Lösung 1: Eine zweite Seite, die wie die Frageseite aussieht und in der das GIF überlagert ist (jajaja, ich hör das Buuuuuh! schon)

Lösung 2: Javascript, einen click-Handler auf den Button legen und das GIF bei Klick einblenden. Wenn Du das vom Know-How her nicht kannst: Beauftrage jemanden, der es kann, und der Zugriff auf euer System hat (was für die Forenteilnehmer nicht gilt)

Ein solcher Click-Handler hat natürlich den Nachteil, dass ein "schlauer" Anwender in den Quelltext der Seite schaut und guckt, worauf der click-Handler registriert ist bzw. welchen Button der Click-Handler als korrekt akzeptiert. Da muss man schon ein bisschen Verschleierungstechnik einsetzen (was aber bereits gegen einen User mit mittelmäßigen JS-Kenntnissen nichts mehr hilft).

Rolf

[Felix Riesterer]

Liebe Christin,

Für eine unserer Online-Schulungen würde ich bei der Beantwortung von Fragen gerne ein GIF auf derselben Seite einblenden, ohne dass der Rest verschwindet, also eine Art Popup, für "richtig/falsch gemacht".

das ist eine schöne Idee, aber um Dir helfen zu können, müsstest Du schon genauer beschreiben, mit welchem HTML-Gerüst man es da im Speziellen zu tun hat. Weißt Du, meine Glaskugel ist schon wieder in der Reparatur, seit ich den Wetterbericht...

Ich kann den Button insofern verlinken,

Wie genau verlinkt man einen Button? Ist der ein <button>, oder ein <img>? Du siehst, hier braucht es Quelltext-Beispiele, wenn man Dir wirklich helfen soll.

Liebe Grüße

Felix Riesterer

[Christin]

Hallo,

und vielen lieben Dank für eure Hilfe! Manchmal hilft das Reden über das Problem allein schon weiter. :D Ich habe letzten Endes zwei weitere Seiten gebaut mit je entsprechendem GIF, einmal für "richtig" und einmal für "falsch". Zu diesen zwei Seiten habe ich dann die Antwortmöglichkeiten jeweils verlinkt. Der Befehl "javascript:history.go(-2)" hat mir dann letzten Endes auch weitergeholfen, dass bei einer Falschbeantwortung auf die Seite vor der Fragestellung verwiesen wird, also zu der Seite, aus der die richtige Antwort hervorgehen sollte.

Selbiges suche ich gerade noch für die "richtig gemacht"-Seite, die auf die nächste Seite verweisen soll, weil der Browser ja eigentlich nicht wissen kann, was als Nächstes kommt. Mit go und forward bin ich nicht weitergekommen.🤔

Schön, dass es hier so eine tolle Community gibt.😊

Viele Grüße Chrissi

[Rolf B]

Hallo Christin,

wenn Du es unbedingt so machen willst, müsstest Du der "richtig" Seite die Folgeseite als Parameter übergeben.

<a href="/seiten/richtig.html?weiter=/seiten/aufgabe_droelf.html">Die Lösung ist dreizehn</a>

Auf der "richtig.html" Seite brauchst Du dann etwas JavaScript.

<script>
function weiter() {
   let searchParms = new URLSearchParams(location.search);
   let weiter = searchParms.get("weiter");
   if (weiter.startsWith("/") && !weiter.startsWith("//")
      location = weiter;
}
</script>

Auf den Weiter-Button legst Du dann onclick="javascript:weiter()". Die Funktion greift den weiter-Parameter ab und schickt den User dorthin. Die Abfrage auf startsWith soll dafür sorgen, dass der Wert in Weiter mit genau einem / beginnen muss, d.h. sie akzeptiert nur Adressen innerhalb deiner eigenen Seite. Das ist trivial abgefragt, das geht sicherlich wasserdichter, aber (a) weiß ich nicht ob es wirklich nötig ist und (b) bist Du wohl eher keine Javacript-Expertin, deshalb will ich Dich nicht überfordern.

Die bessere Lösung wäre ein Popup von "richtig" oder "falsch" auf der Seite, wo man die Auswahl trifft. Das braucht aber etwas mehr JavaScript.

Rolf

[Christin]

Hallo Rolf,

lieben Dank dir. Die Seite mit dem GIF sollte häufiger aufrufbar sein, da es auch mehrere Fragen gibt, die alle hoffentlich auch richtig beantwortet werden. Das heißt, die GIF-Seite wird mit einem Klick auf "weiter" nicht immer auf ein- und dieselbe Seite verwiesen. Bräuchte ich also hierfür vorab eine Definition, in der ich einmal festlege, welche Reihenfolge die gesamten Seiten eigentlich haben?

Bin wirklich keine Javascript-Expertin, scheue mich aber nicht davor, Neues zu lernen und freue mich über eure Hilfestellungen. :)

Liebe Grüße Chrissi

[Rolf B]

Hallo Christin,

ich meine das so: Du hast die Frageseite, auf der Buttons zum Antworten geklickt werden.

Normalerweise würde man das so machen, dass die Entscheidung richtig/falsch am Server getroffen wird, so dass der Anwender dem Button nicht ansehen kann - auch mit Debug-Werkzeugen des Browsers nicht - ob die Antwort richtig oder falsch ist. Aber das bekommt ihr ja mit Typo3 offenbar nicht hin.

Ich verstehe Dich so, dass Du auf der Frageseite 2 oder mehr Antwortmöglichkeiten hast, und jeder Antwortmöglichkeit einen Link zuordnen willst. Dieser führt dann entweder auf die "Richtig" oder "Falsch" Seite.

Mal angenommen, der Link zur "richtig" Seite wäre /seiten/quiz/richtig.html. Es ist vielleicht nicht HTML, sondern irgendwas von Typo3, also eine .php Seite oder was anderes.

Du müsstest nun den Link um die Weiter-Adresse erweitern, passend zur jeweiligen Frageseite. Auf der Seite frage_zwoelf.html wäre es dann z.B. /seiten/quiz/richtig.html?weiter=/seiten/quiz/frage_droelf.html.

GUT ist es nicht, man kann als Anwender leicht sehen, wohin ein Link führt. Wenn Du das nicht verschleiern kannst, ist dieses Verfahren zu durchsichtig.

Kannst Du eigenes JavaScript auf die Seite legen? In dem Fall wäre ein Click-Handler für die Antwortbuttons sinnvoll, der sich um "richtig/falsch" kümmert.

Rolf

[Felix Riesterer]

Liebe Christin,

Der Befehl "javascript:history.go(-2)" hat mir dann letzten Endes auch weitergeholfen,

ich glaube, dass der mehr Fragen aufwirft, als er Lösungen bietet.

weil der Browser ja eigentlich nicht wissen kann, was als Nächstes kommt. Mit go und forward bin ich nicht weitergekommen.🤔

Da haben wir es schon.

Was mich immer wieder ärgert, ist die beharrliche Schweigsamkeit von Fragenden, wenn man nach Code-Beispielen (oder wie ich es formuliert habe: HTML-Gerüst) fragt. Wenn Du wirkliche Hilfe erhalten möchtest, musst Du schon mehr preisgeben, als fabulöse JavaScript-Magie. Zeig doch mal her! Poste doch mal einen Link auf eine solche Quiz-Seite!

Liebe Grüße

Felix Riesterer