Kristoffer Brabrand
Senior developer @ Behalf
losen
Agenda
- Overordnet forklaring av idéen
- Gjennomgang av byggeklosser
- Noen praktiske tips
- Vi lager veiviser
- Steg for å endre/oppdatere DiBKs veivisere
Konseptet: et stort tre med mange grener, der du gjør valg og ender opp et sted
(noen spilte kanskje tekstbaserte rollespill way back when)
Med andre ord: veiviseren kan forandre seg når brukeren gjør valg
"Skjemaet"
En strukturert beskrivelse av tingene som utgjør veiviseren og avhengigheter mellom disse
{
"meta": {
"title": "Burde du få deg katt?",
"footer": "Your footer here!"
},
"schema": [
{
"id": "relation",
"type": "Page",
"heading": "Forhold til katter",
"lead": "Før vi bestemmer hvilken katt som passer best for deg, må vi avgjøre om du kan ha katt i det hele tatt. Vennligst svar så sannferdig du klarer.",
"children": [
{
"id": "preferences.love",
"property": "preferences.love",
"type": "Radio",
"heading": "Er du glad i katter?",
"text": "Svar helt ærlig. Dette er viktig både for katten og deg.",
"options": [
{
"id": "preferences.love.yes",
"type": "Answer",
"heading": "Ja",
"value": "ja"
},
{Byggeklossene
Sider
Den største og øverste. Kan inneholde alt bortsett fra sider.
Forgreninger
"If this then that" – måten å lage grener i veiviser-treet
Spørsmål
Ulike typer input som veiviseren sparer på og kan "reagere" på
Tekst og bilder
Tekst og bilder, for å forklare ting eller for å gi tilbakemelding til brukeren.
Resultatsider
Slutten på en veiviser.
og bit.ly/losen-eksempel-tom
debug-modus
Legg til ?debug i urlen
Oppgaver
1: myk start
Endre tittelen på siden «Din optimale katt» til noe enda mer treffende 🙃
2: «vis hvis» 👀
Lag en tom veiviser med én side som har et par spørsmål, hvor den andre spørsmålet vises hvis man har svart på det første.
3: «blindvei» ✋
Legg til en ny side i veiviseren som vises dersom man har svart på begge spørsmålene på side 1. Legg også til en resultatside som vises dersom man har svart ett av alternativene på spørsmål 2. Legg merke til hvordan side 2 "forsvinner" og veiviseren stopper når det dukker opp en resultatside.
4: «forgrening»
Legg til en forgrening (Branch) på side 2, som viser ett sett med spørsmål dersom man har svart en ting, og et annet sett spørsmål dersom man har svart noe annet på ett av spørsmålene.
Steg for å oppdatere
en eksisterende veiviser
1. Last ned veiviseren
2. Start den lokalt
3. Gjør endringer
4. Lag PR til repo på github
4. Bygg veiviseren
5. Last opp oppdatert js-fil
6. 🚀
Takk 🙏
losen introduksjon
By Kristoffer Brabrand
