Hiku des Tages auf Ihrer Website.
Hiku des Tages ist ein ruhiges Zahlenrätsel mit vier neuen Brettern jeden Tag, von leicht bis Experte. Es lässt sich kostenlos in eine Nachrichtenseite oder Website einbinden, mit zwei Zeilen Code.
Die Regel ist kurz: Die Zahl sagt, wie weit sie springt, waagerecht oder senkrecht. Landet sie auf einer anderen Zahl, wird die kleinere von der größeren abgezogen. Ziel ist, alle Zahlen verschwinden zu lassen. Die Bretter sind dieselben wie in der Hiku-App für iPhone.
So geht es
- Fügen Sie den Code unten dort ein, wo das Spiel erscheinen soll, zum Beispiel in einem Artikel oder auf einer eigenen Rätselseite.
- Veröffentlichen. Das Spiel lädt die Bretter des Tages selbst und passt seine Höhe an.
<div data-hiku data-lang="de"></div>
<script src="https://hikupuzzle.com/daily/embed.js" async></script>
Das Skript muss nur einmal pro Seite stehen, auch wenn die Seite mehrere Spiele enthält.
Ausprobieren und kopieren
Wählen Sie die Einstellungen, sehen Sie, wie sich das Spiel ändert, und kopieren Sie den Code, wenn alles passt.
Optionen
Die Optionen werden als Attribute am <div data-hiku> gesetzt.
| Attribut | Werte | Wirkung |
|---|---|---|
data-lang | nb, en, sv, da, fi, de | Sprache des Spiels: Norwegisch, Englisch, Schwedisch, Dänisch, Finnisch oder Deutsch. Ohne diese Angabe gilt die Sprache der umgebenden Seite (<html lang="…">), sonst Norwegisch. |
data-theme | light, dark | Legt die Farben fest. Ohne diese Angabe folgt das Spiel dem hellen oder dunklen Modus des Lesers. |
data-align | left | Setzt das Spiel nach links. Ohne diese Angabe steht es zentriert im verfügbaren Platz und ist nie breiter als 480 Pixel. |
data-level | easy, medium, hard, expert | Welches der vier Bretter des Tages zuerst erscheint. Ohne diese Angabe öffnet das Spiel mit dem Level, das der Leser zuletzt gespielt hat, sonst mit Leicht. Der Leser kann jederzeit wechseln. |
Beispiel, immer hell und mit Mittel zuerst:
<div data-hiku data-lang="de" data-theme="light" data-level="medium"></div>
<script src="https://hikupuzzle.com/daily/embed.js" async></script>
Ohne Skript
Erlaubt Ihr Redaktionssystem keine Skripte, binden Sie das Spiel als einfaches iframe ein. Die Höhe passt sich dann nicht selbst an, also legen Sie sie fest. 860 Pixel reichen für das ganze Spiel, auch mit gelöstem Brett; das Spiel ist nie breiter als 480 Pixel.
<iframe src="https://hikupuzzle.com/daily/?lang=de"
title="Hiku des Tages" loading="lazy"
style="display:block;width:100%;max-width:480px;height:860px;border:0;margin:0 auto"></iframe>
Die Optionen stehen dann in der Adresse: ?lang=sv, &theme=dark, &level=hard. Die Ausrichtung ergibt sich aus dem Stil des Rahmens; entfernen Sie margin:0 auto, um ihn links auszurichten.
Datenschutz und Betrieb
- Keine Cookies und kein Tracking. Es werden keine Spieldaten oder Ergebnisse an uns gesendet. Ergebnisse und Sterne werden nur im Browser des Lesers gespeichert. Der Link zum App Store enthält den Namen der Website, auf der das Spiel steht, damit wir in App Store Connect sehen, wie viele insgesamt von jeder Seite kamen. Diese Angabe erhält nur Apple, und nur wenn der Leser dem Link folgt. Wir zählen Aufrufe mit Cloudflare Web Analytics, ohne Cookies und ohne einzelne Personen zu verfolgen: Wir sehen, wie viele das Spiel geöffnet haben und auf welcher Website, nicht wer. Ansonsten erhält der Hoster beim Laden der Dateien übliche technische Anfragen, wie bei jeder Website.
- Barrierefreiheit. Das Spiel lässt sich mit Screenreader und allein mit der Tastatur spielen: Jedes Feld hat einen Namen, und jeder Zug wird vorgelesen. Es folgt hellem und dunklem Modus, schaltet Animationen ab, wenn weniger Bewegung gewünscht ist, und ist nach WCAG 2.2 Stufe AA gebaut und mit dem Werkzeug axe geprüft. Das erleichtert Ihnen, Anforderungen an Barrierefreiheit wie den European Accessibility Act zu erfüllen.
- Isoliertes Spiel. Das Spiel selbst läuft in einem
iframevon einer anderen Adresse und kann die umgebende Seite weder lesen noch beeinflussen. Das kleine Ladeskriptembed.jsläuft auf Ihrer Seite wie andere externe Skripte: Es erstellt den Rahmen und passt die Höhe an, sonst nichts. Der Quelltext ist kurz und unter embed.js einsehbar. Redaktionen, die keine externen Skripte erlauben, nutzen die iframe-Variante. - Leicht. Beim ersten Mal werden etwa 70 kB komprimiert geladen. Der Rahmen lädt erst, wenn der Leser sich ihm nähert.
- Neue Bretter um Mitternacht in der Zeitzone des Lesers. Die Bibliothek reicht für drei Jahre, und die Bretter sind dieselben wie in der App.
- Gehostet bei Cloudflare. Der Hoster sieht beim Laden der Dateien die IP-Adresse des Lesers, wie bei jeder Website.
Für technische Teams
Empfohlen bei strengen Sicherheitsanforderungen
Nutzen Sie die iframe-Variante oben. Dann läuft kein Code von uns auf Ihrer Seite, nur im Rahmen. Sie verzichten lediglich auf die automatische Höhe.
Content Security Policy
Mit dem Ladeskript werden beide benötigt, mit reinem iframe nur die zweite:
script-src https://hikupuzzle.com;
frame-src https://hikupuzzle.com;
Ergänzen Sie Ihre bestehenden Direktiven. Das Spiel im Rahmen lädt Dateien von derselben Adresse und das Zählskript von static.cloudflareinsights.com. Das geschieht im Rahmen und berührt Ihre Richtlinie nicht.
Stabilität
- Die Adressen
…/daily/embed.jsund…/daily/sowie die Attribute in der Tabelle oben bleiben bestehen. Neue Optionen kommen hinzu, ohne bestehende zu ändern. - Das Skript lädt mit
asyncund hält den Rest der Seite nie auf. - Ist Cloudflare nicht erreichbar, bleibt der Platz für das Spiel leer. Die umgebende Seite ist nicht betroffen.
Bedingungen
Hiku des Tages ist kostenlos nutzbar auf Nachrichtenseiten, Blogs und anderen Websites. Einzige Bedingung: Der Link zur Hiku-App im Spiel bleibt, wie er ist. Bitte nicht ausblenden, entfernen oder überdecken.
Geben Sie uns gern unter es@rubberduck.no Bescheid, wenn Sie es einsetzen. Dann informieren wir Sie vor Änderungen, die Sie betreffen könnten.
Kontakt
Fragen, oder möchten Sie vor dem Einsatz mehr wissen? Schreiben Sie an es@rubberduck.no.