Maddin Nastelge: Captcha - In den Offenen Kreis klicken - Tutorial

Schönen guten Tag liebes Forum,

ich bin verzweifelt auf der Suche nach einem verständlichem Tutorial für eine Captcha-Abfrage mit einem Bild, in dem mehrere geschlossene Kreise sind. Exakt ein Kreis muss aber immer dabei sein, der an einer Stelle (zu einem Drittel) offen ist. Auf diesen Kreis soll man klicken können. Er dient dann als Submit-Button eines Formulars.

Kennt jemand so ein Tut.?
Ich finde nichts brauchbares...
Liebe Grüße,
Maddin

  1. Schönen guten Tag liebes Forum,

    ich bin verzweifelt auf der Suche nach einem verständlichem Tutorial für eine Captcha-Abfrage mit einem Bild, in dem mehrere geschlossene Kreise sind. Exakt ein Kreis muss aber immer dabei sein, der an einer Stelle (zu einem Drittel) offen ist. Auf diesen Kreis soll man klicken können. Er dient dann als Submit-Button eines Formulars.

    Kennt jemand so ein Tut.?

    Wozu? Hast du Probleme mit der Grafikprogrammierung in einer entsprechenden Programmiersprache? Dann sag das auch und lies dir die Dokumentation durch.

    Falls es dir nur um die Logik geht:

    Du nimmst eine Grafik, nimmst einen Hintergrund, zeichnest eine Anzahl an geschlossenen Kreisen, zeichnest einen teilweise offnen Kreis und überprüfst beim Klick mittels Pythagoras, ob die Entfernung des Klicks zum Mittelpunkt des Kreises kleiner als der Radius ist. Fertig. Wo ist das Problem?

    1. Du nimmst eine Grafik, nimmst einen Hintergrund, zeichnest eine Anzahl an geschlossenen Kreisen, zeichnest einen teilweise offnen Kreis und überprüfst beim Klick mittels Pythagoras, ob die Entfernung des Klicks zum Mittelpunkt des Kreises kleiner als der Radius ist. Fertig. Wo ist das Problem?

      Dort liegt das Problem:
      Ich weiß nicht genau, wie das mit der Überprüfung laufen soll...
      Auch nicht, wie ich prüfe, wo der Klick gelandet ist. Da tut sich mir noch eine Frage auf: Läuft das nur mit JS?
      Da deine Antwort mit so viel Freude herüber kam - ich fragte lediglich nach einem Tutorial dafür, um mir genau diese Logik anschauen + verstehen zu können.
      Deine 4 Zeilen bringen mich da nicht viel weiter...
      lG Maddin

      1. Hello,

        Dort liegt das Problem:
        Ich weiß nicht genau, wie das mit der Überprüfung laufen soll...
        Auch nicht, wie ich prüfe, wo der Klick gelandet ist.

        Da gibt es einen ganz einfachen Trick:

        Bestimme im Backend einfach die Farbe des getroffenen Pixels in dem erzeugten Bild und vergleiche, ob es die erlaubte ist :-)

        Da tut sich mir noch eine Frage auf: Läuft das nur mit JS?

        Das habe ich jetzt einfach mal überlesen :-)

        Liebe Grüße aus dem schönen Oberharz

        Tom vom Berg

        --
        Nur selber lernen macht schlau
        http://bergpost.annerschbarrich.de
      2. »» Du nimmst eine Grafik, nimmst einen Hintergrund, zeichnest eine Anzahl an geschlossenen Kreisen, zeichnest einen teilweise offnen Kreis und überprüfst beim Klick mittels Pythagoras, ob die Entfernung des Klicks zum Mittelpunkt des Kreises kleiner als der Radius ist. Fertig. Wo ist das Problem?

        Dort liegt das Problem:

        Wir kommen der Sache näher =)

        Ich weiß nicht genau, wie das mit der Überprüfung laufen soll...

        Du merkst dir in der Session, wo der Mittelpunkt des offenen Kreises liegt (dies speicherst du beim Erstellen des Bildes). Danach berechnest du einfach sqrt[ (Mausklick.X - Kreismittelpunkt.X)² + (Mausklick.Y - Kreismittelpunkt.Y)² ] und guckst, ob das kleiner als der Radius des Kreises ist. Falls ja, war der Klick innerhalb des Kreises.

        Auch nicht, wie ich prüfe, wo der Klick gelandet ist. Da tut sich mir noch eine Frage auf: Läuft das nur mit JS?

        Jein. Mit Javascript wäre es am besten. Du guckst dir an, wo die Grafik auf der Seite liegt, guckst dann, wohin auf der gesamten Seite geklickt wurde und kannst somit bestimmen, wohin auf der Grafik geklickt wurde.
        Das funktioniert dann natürlich nur mit aktiviertem Javascript.
        Eine Alternative wäre das Benutzen von Imagemaps im Bild. Das geht dann vielleicht nicht Pixelweise, sollte aber dennoch ausreichen.

        Da deine Antwort mit so viel Freude herüber kam

        Aber, aber, damit musst du nunmal bei einer solch ungenauen Antwort rechnen.

        • ich fragte lediglich nach einem Tutorial dafür, um mir genau diese Logik anschauen + verstehen zu können.

        Dafür brauchts kein Tutorial, das macht man normalerweise in 10-20 Minuten.

        1. Hallo,

          Jein. Mit Javascript wäre es am besten. Du guckst dir an, wo die Grafik auf der Seite liegt, guckst dann, wohin auf der gesamten Seite geklickt wurde und kannst somit bestimmen, wohin auf der Grafik geklickt wurde.
          Das funktioniert dann natürlich nur mit aktiviertem Javascript.
          Eine Alternative wäre das Benutzen von Imagemaps im Bild. Das geht dann vielleicht nicht Pixelweise, sollte aber dennoch ausreichen.

          noch besser wäre wohl die Verwendung eines graphischen Submit-Buttons (<input type="image">), bei dem man die Klickkoordinaten serverseitig auswertet. Dann ist man vollkommen unabhängig von clientseitigen Gegebenheiten und kann trotzdem pixelgenau prüfen (wenn's nötig ist).

          »» - ich fragte lediglich nach einem Tutorial dafür, um mir genau diese Logik anschauen + verstehen zu können.
          Dafür brauchts kein Tutorial, das macht man normalerweise in 10-20 Minuten.

          Ungefähr 10% davon, um "diese Logik verstehen zu können".

          Ciao,
           Martin

          --
          F: Was ist schlimmer: Alzheimer oder Parkinson?
          A: Parkinson. Lieber mal ein Bier vergessen zu zahlen, als eins verschütten.
          1. Hallo,

            »» Jein. Mit Javascript wäre es am besten. Du guckst dir an, wo die Grafik auf der Seite liegt, guckst dann, wohin auf der gesamten Seite geklickt wurde und kannst somit bestimmen, wohin auf der Grafik geklickt wurde.
            »» Das funktioniert dann natürlich nur mit aktiviertem Javascript.
            »» Eine Alternative wäre das Benutzen von Imagemaps im Bild. Das geht dann vielleicht nicht Pixelweise, sollte aber dennoch ausreichen.

            noch besser wäre wohl die Verwendung eines graphischen Submit-Buttons (<input type="image">), bei dem man die Klickkoordinaten serverseitig auswertet. Dann ist man vollkommen unabhängig von clientseitigen Gegebenheiten und kann trotzdem pixelgenau prüfen (wenn's nötig ist).

            Ja, dies ist allerdings besser.

            @OP: [url:http://de.selfhtml.org/html/formulare/anzeige/input_image.htm@title=Hier eine Beispielseite]. Nach dem Klicken siehst du auch, wie der X- und Y-Wert in der URL übergeben werden.

            »» »» - ich fragte lediglich nach einem Tutorial dafür, um mir genau diese Logik anschauen + verstehen zu können.
            »» Dafür brauchts kein Tutorial, das macht man normalerweise in 10-20 Minuten.

            Ungefähr 10% davon, um "diese Logik verstehen zu können".

            ;)