Interaktive Bilder

von

Shortcode: [Interaktive _Karte]

Fehler: Geo-Daten leer.

  mit dem Picker die koorcinaten suchen-> dann ins ACF Feld geo_daten einfügen | vor und nach dem Datenpaket mit [ [{„name“:“das Brot“,“punkte“:[{„x“:4,“y“:198},{„x“:406,“y“:206},{„x“:413,“y“:439},{„x“:4,“y“:469}]}, ] umschließen. das letzte Komma in den JSON Daten muss immer gelöscht werden

Basierend auf dem PHP- und JavaScript-Code des Moduls werden drei Hauptdatenquellen benötigt, die im WordPress-Backend (über ACF – Advanced Custom Fields) für den Beitrag oder die Seite gepflegt werden müssen:

  1. bild_url_interaktiv (Das Bild)
    • Typ: Bild-URL oder Bild-ID (je nach ACF-Konfiguration).
    • Anforderung: Es muss ein gültiges Bild bereitgestellt werden, das als visuelle Grundlage dient ($bild_url). Das Skript liest zudem die natürliche Bildbreite und -höhe aus (naturalWidth / naturalHeight), um Klicks exakt auf die Koordinaten des Bildes umzurechnen.
  2. geo_daten (Die geografischen Koordinaten & Objekte für Phase 0 & 1)
    • Typ: JSON-Array oder ein Feld, das als Array/JSON interpretiert werden kann.
    • Anforderung: Diese Daten definieren die klickbaren Bereiche (Polygone) auf dem Bild. Jedes Objekt darin benötigt mindestens:
      • Einen Namen (name), der das Objekt beschreibt (wird auch für die Sprachausgabe und Silbentrennung via ' genutzt).
      • Ein Array von Punkten (punkte), die jeweils aus X- und Y-Koordinaten bestehen ({x, y}), um das Polygon auf dem Bild aufzuspannen. Das Skript prüft über die Funktion pointInPoly, ob ein Klick innerhalb dieser Grenzen liegt.


        Die Bilddaten kann man leicht als polygone mit dem https://typischdeutsch.org/picker/ generieren
  3. uebungs_daten (Die Aufgaben für Phase 2 und 3)
    • Typ: Textfeld oder Textarea (mehrzeilig).
    • Anforderung: Die Daten müssen zeilenbasiert eingetragen werden. Jede Zeile repräsentiert eine Aufgabe und muss zwingend das Trennzeichen | enthalten, um Frage und Antwort voneinander zu trennen.
      • Format pro Zeile: Frage | Antwort
      • Beispiel: Wo ist der Tisch? | Das ist *der* Tisch.
      • Im Code werden Zeilen ohne | ignoriert. Zudem werden Teile in Sternchen (*...*) in der Antwort (Phase 2) im Frontend visuell hervorgehoben (z. B. gelb markiert).

Schreibe einen Kommentar

Gespeichert! ⭐