Päivän Hiku sivustollesi.

Päivän Hiku on rauhallinen numeropeli, jossa on neljä uutta lautaa joka päivä helposta asiantuntijaan. Sen voi upottaa maksutta uutissivustolle tai verkkosivulle kahdella rivillä koodia.

Sääntö on lyhyt: luku kertoo, kuinka pitkälle se hyppää vaaka- tai pystysuunnassa. Kun se laskeutuu toiseen lukuun, pienempi vähennetään suuremmasta. Tavoitteena on saada kaikki luvut katoamaan. Laudat ovat samat kuin iPhonen Hiku-sovelluksessa.

Näin teet sen

Liitä alla oleva koodi kohtaan, jossa pelin pitää näkyä, esimerkiksi artikkeliin tai omalle pelisivulle.
Julkaise. Peli hakee päivän laudat itse ja säätää korkeutensa.

HTML

<div data-hiku data-lang="fi"></div>
<script src="https://hikupuzzle.com/daily/embed.js" async></script>

Skriptin tarvitsee olla sivulla vain kerran, vaikka sivulla olisi useita pelejä.

Kokeile ja kopioi

Valitse asetukset, katso miten peli muuttuu, ja kopioi koodi, kun olet tyytyväinen.

Koodi

Asetukset

Asetukset annetaan <div data-hiku>-elementin attribuutteina.

Attribuutti	Arvot	Mitä se tekee
`data-lang`	`nb`, `en`, `sv`, `da`, `fi`, `de`	Pelin kieli: norja, englanti, ruotsi, tanska, suomi tai saksa. Ilman tätä käytetään ympäröivän sivun kieltä (`<html lang="…">`), muuten norjaa.
`data-theme`	`light`, `dark`	Lukitsee värit. Ilman tätä peli seuraa lukijan vaaleaa tai tummaa tilaa.
`data-align`	`left`	Sijoittaa pelin vasemmalle. Ilman tätä peli on keskellä sille annettua tilaa eikä ole koskaan yli 480 pikseliä leveä.
`data-level`	`easy`, `medium`, `hard`, `expert`	Mikä päivän neljästä laudasta näytetään ensin. Ilman tätä peli aukeaa tasolla, jota lukija pelasi viimeksi, muuten Helppo-tasolla. Lukija voi aina vaihtaa.

Esimerkki, aina vaalea ja Keskitaso ensin:

HTML

<div data-hiku data-lang="fi" data-theme="light" data-level="medium"></div>
<script src="https://hikupuzzle.com/daily/embed.js" async></script>

Ilman skriptiä

Jos julkaisujärjestelmä ei salli skriptejä, pelin voi upottaa tavallisena iframe-kehyksenä. Silloin korkeus ei säädy itsestään, joten aseta se. 860 pikseliä riittää koko peliin myös ratkaistun laudan kanssa; peli ei ole koskaan yli 480 pikseliä leveä.

HTML ilman skriptiä

<iframe src="https://hikupuzzle.com/daily/?lang=fi"
  title="Päivän Hiku" loading="lazy"
  style="display:block;width:100%;max-width:480px;height:860px;border:0;margin:0 auto"></iframe>

Asetukset annetaan silloin osoitteessa: ?lang=sv, &theme=dark, &level=hard. Sijainti määräytyy kehyksen tyylistä; poista margin:0 auto, niin kehys on vasemmalla.

Tietosuoja ja ylläpito

Ei evästeitä eikä seurantaa. Meille ei lähetetä pelitietoja eikä tuloksia. Tulokset ja tähdet tallentuvat vain lukijan omaan selaimeen. App Store -linkki sisältää sen sivuston nimen, jolla peli on, jotta näemme App Store Connectissa, kuinka moni tuli kultakin sivulta yhteensä. Tieto menee vain Applelle ja vain, jos lukija avaa linkin. Laskemme näyttökerrat Cloudflare Web Analyticsilla ilman evästeitä ja seuraamatta yksittäisiä ihmisiä: näemme, kuinka moni avasi pelin ja millä sivustolla, emme sitä, kuka. Muuten palvelin vastaanottaa tavallisia teknisiä pyyntöjä, kun tiedostot latautuvat, kuten kaikilla verkkosivuilla.
Saavutettavuus. Peliä voi pelata ruudunlukijalla ja pelkällä näppäimistöllä: jokaisella ruudulla on nimi ja jokainen siirto luetaan ääneen. Se seuraa vaaleaa ja tummaa tilaa, poistaa animaatiot, jos niin on pyydetty, ja on tehty WCAG 2.2 AA -tason mukaan ja testattu axe-työkalulla. Se helpottaa saavutettavuusvaatimusten täyttämistä.
Eristetty peli. Itse peli toimii iframe-kehyksessä toisesta osoitteesta eikä voi lukea tai muuttaa ympäröivää sivua. Pieni latausskripti, embed.js, toimii sivullanne kuten muutkin ulkoiset skriptit: se luo kehyksen ja säätää sen korkeuden eikä tee muuta. Sen lähdekoodi on lyhyt ja luettavissa osoitteessa embed.js. Toimitukset, jotka eivät salli ulkoisia skriptejä, käyttävät iframe-versiota.
Kevyt. Ensimmäisellä kerralla ladataan noin 70 kt pakattuna. Kehys latautuu vasta, kun lukija lähestyy sitä.
Uudet laudat keskiyöllä lukijan aikavyöhykkeellä. Kirjasto riittää kolmeksi vuodeksi, ja laudat ovat samat kuin sovelluksessa.
Ylläpitopalvelu on Cloudflare. Palvelin näkee lukijan IP-osoitteen, kun tiedostot latautuvat, kuten kaikilla verkkosivuilla.

Teknisille toimituksille

Suositus tiukkoihin tietoturvavaatimuksiin

Käytä yllä olevaa iframe-versiota. Silloin sivullanne ei suoriteta meidän koodiamme, vain kehyksessä. Menetätte ainoastaan automaattisen korkeuden.

Content Security Policy

Latausskriptin kanssa tarvitaan molemmat; pelkän iframen kanssa vain jälkimmäinen:

CSP

script-src https://hikupuzzle.com;
frame-src https://hikupuzzle.com;

Lisää ne nykyisiin direktiiveihinne. Kehyksessä oleva peli lataa tiedostot samasta osoitteesta ja laskentaskriptin osoitteesta static.cloudflareinsights.com. Se tapahtuu kehyksen sisällä eikä koske teidän sääntöjänne.

Vakaus

Osoitteet …/daily/embed.js ja …/daily/ sekä yllä olevan taulukon attribuutit pysyvät. Uusia asetuksia lisätään muuttamatta nykyisiä.
Skripti ladataan async-määreellä eikä koskaan hidasta muuta sivua.
Jos Cloudflare ei ole käytettävissä, pelin paikka jää tyhjäksi. Ympäröivä sivu ei kärsi.

Ehdot

Päivän Hiku on maksuton uutissivustoilla, blogeissa ja muilla verkkosivuilla. Ainoa vaatimus on, että pelin linkki Hiku-sovellukseen pysyy ennallaan: älä piilota, poista tai peitä sitä.

Kerro meille osoitteeseen es@rubberduck.no, kun otatte sen käyttöön, niin ilmoitamme teille ennen muutoksia, jotka voivat koskea teitä.

Yhteystiedot

Kysyttävää, tai haluatko tietää lisää ennen käyttöönottoa? Lähetä sähköpostia osoitteeseen es@rubberduck.no.