Quiz-Bild erstellen

[Ankaa]

Hi,

der Titel ist vielleicht etwas irre-führend, ich weiß aber nicht, wie ich es besser kurz und knapp formulieren soll. Und zwar habe ich folgendes vor: Ich habe ein Bild, und wenn auf diesem Bild drei Bereiche nacheinander (Reihenfolge egal) angeklickt werden, wird die nächste Seite geladen.

Klingt erstmal einfach, ich hab aber nicht so richtig eine Idee, wie ich es umsetzen kann. Mir fehlt leider die nötige Erfahrung mit Java und Co. Mein erster Gedanke war Flash/ActionScript, da hab ich mich vor Jahren mal ein wenig reingearbeitet gehabt, aber irgendwie muss das doch auch anders gehen?

Hat jemand eine Idee? Vielleicht ein Tutorial, was die Grundidee aufgreift, die ich dann ausbauen kann (die da wäre: Ein Bereich auf einem Bild wird angeklickt und es passiert was). Mit welchen von den vielen Webprogrammierungsmöglichkeiten lässt sich sowas denn umsetzen?

Ich habe Verständnis von Programmierung, beherrsche HTML und CSS, aber mit z.B. Java und anderen modernen Web-Programmiersprachen hab ich mich nie beschäftigt, deshalb weiß ich eben gerade nicht, was möglich ist.

 

[DubiDuh]

Aus Gründen der Sicherheit muss die Validierung der geklickten Stellen auf dem Server passieren, da der Client sonst den Algorithmus/die relevanten Stellen herausfinden kann. Daher würde ich die drei angeklickten Bereiche in einem Array speichern (JavaScript) und via AJAX an den Authentifizierungsserver senden. Dort validiere ich, ob die angeklickten Bereiche den geforderten entsprechen und sende ein true oder false zurück. Dann kannst du via JS auf die Antwort reagieren und deine Applikationslogik weiterlaufen lassen.

 

[Mitglied 189256]

Das ist etwaskompliziert. Fangen wir mal mit der Frage an, wofür du das brauchst. Und nebenbei: Dafür nutzt man dann nicht Java, sondern JavaScript

 

[Ankaa]

Vielen Dank für eure Antworten

Der Sicherheitsaspekt ist vernachlässigbar, da es sich um eine einmalige Anwendung meines Mannes handeln wird Ich bastel für ihn zur Zeit eine Homepage, wo er sich durch mehrere "Fragen" klicken muss (eine Art Geschichte).

Verzeiht die Verwechslung von JS und Java, wie gesagt, damit hab ich mich bisher nie tiefgründig beschäftigen müssen. Ich hab zwar immer mal JavaScripte in meine Homepages eingebaut, aber halt nie selber schreiben oder den Code im Detail analysieren müssen.

 

[Ankaa]

Was mir gerade eingefallen ist und eventuell eine Möglichkeit wäre:

Ich könnte das Bild ja in verschiedene Einzel-Bilder zerteilen und diese dann mit fester Position in die Website einbauen. Dann brauch ich keine Abfrage der Position auf einem Bild sondern nur, ob das Einzelbild angeklickt wurde oder nicht (und wenn alle 3 dann "true" zurückgeben, gehts weiter). Macht das Sinn oder hab ich einen Denkfehler?

Das ganze muss wirklich nicht super schön und kompliziert (und eben sicher) werden, hauptsache es funktioniert

 

[Mitglied 189256]

Einzelbilder sollten die letzte Möglichkeit sein, da so wesentlich mehr http-Requests benötigt werden. Die beste Möglichkeit sind Image-Maps. http://de.selfhtml.org/html/grafiken/verweis_sensitive.htm

Edit: Mit JavaScript kann man sich dann einen kleinen Zähler bauen, der guckt, wann verschiedene Teile angeklickt wurden.

 

[mkr*]

Wie Mief schon sagte sind Imagemaps hierfür die beste Lösung. Wir haben für einen Kunden mal eine Art Bodynavigator gebaut. Das Bild war dann ein Körper, wie man von den Bildern aus Arztpraxen kennt und an einzelnen Stellen waren dann Bereiche, in denen dann man dann klicken kann und Informationen zu der geklickten Region erhält. Das ganze könntest du auch auf deine Bedürfnisse anpassen.

Ein anderer Ansatz wäre die Realisierung mit svg: Klick mich.

 

[Ankaa]

Danke, ich schau mir beides mal an.

Habt ihr einen Link für ein Beispiel für den erwähnten Zähler? Wie gesagt, ich habe keine Ahnung von JS und fürchte, ich krieg das nicht selber hin von scratch zu programmieren.

Danke

 

[Ankaa]

So, ich hab mal versucht zu basteln:

<script>
    var x = 0;

    function zaehler(x) {
    x= x + 1;
    alert(x);       
}

if (x>=3) {location.href = 'test2.html';}

</script>

  <img src="karte.png" width="1000" height="500" border="0" alt="Karte" usemap="#Landkarte">
  <map name="Landkarte">
    <area shape="rect" coords="120,90,180,150"  href="javascript:zaehler()">
</map>

Das funktioniert soweit, bis auf das Hochzählen der X-Variable. Ich krieg beim Alert nur "NaN" zurück. Wie muss ich denn X neu definieren innerhalb der Funktion? Mit var? Mit return? Ganz anders?

 

[Ankaa]

Niemand?

 

[DubiDuh]

Nimm das x aus der Funktion raus:

Aus

function(x)

mach

function()

also insgesamt so:

<script>
var x = 0;
function zaehler() {
    x= x + 1;
    alert(x);
    if (x>=3) {location.href = 'test2.html';}
}
</script>

Warum das Ganze? Wenn du in die Klammern der Funktion das x reinschreibst, erwartet die Funktion einen Parameter der dann x heißt. Da du die Funktion aber mit "zaehler()" aufrufst, übergibst du keinen Parameter, also ist x = undefined. undefined + 1 ist nicht gültig und wird zu NaN.

 

[Ankaa]

Danke, habs grad selber hinbekommen und erst jetzt deine Antwort gesehen

Nochmal vielen Dank euch alle für eure Hilfe, jetzt tut es genau das,was ich will

 

[Ankaa]

€dit: Nevermind, manchmal sollte man doch erstmal den Kopf anschalten bevor man fragt