diff --git a/PLAN.md b/PLAN.md index caa85e5..ca086a4 100644 --- a/PLAN.md +++ b/PLAN.md @@ -35,15 +35,7 @@ tampiorama/ - A `/usr/local/bin/tampio` wrapper makes it callable as a plain command - Goal: `docker compose run --rm tampio` gives a working shell with no manual setup -## Open Questions - -- [ ] Docs language: bilingual FI/EN or English only? (bilingual fits the theme) -- [ ] Scope: curated examples repo, or also a GitHub Pages web showcase / playground? -- [ ] Hosting: GitHub (likely — standard for open source) -- [ ] Is Tampio working locally? The libvoikko dependency can be tricky; Docker is the primary path until confirmed. - ## Notes - Project name: **Tampiorama** -- libvoikko local setup not yet confirmed working — Docker is the primary path -- `docs/cheatsheet.md` should cover annotated grammar constructs (Finnish cases → parameter roles) as well as raw syntax +- `docs/cheatsheet.md` covers annotated grammar constructs (Finnish cases → parameter roles) as well as raw syntax diff --git a/README.md b/README.md index 643632f..581aa46 100644 --- a/README.md +++ b/README.md @@ -30,8 +30,8 @@ Open `http://localhost:9994/basics/index.html` for the full example index, or go | `http://localhost:9994/data-structures/lista.html` | List sorted ascending and descending | | `http://localhost:9994/data-structures/vektori.html` | Custom class, Euclidean length of [3,4] = 5 | | `http://localhost:9994/strings/merkkijono.html` | String length, concat, trim, split | -| `http://localhost:9994/async/nappi.html` | Click handlers, mutable counter | -| `http://localhost:9994/program/kasvutaulukko.html` | Factorial + Fibonacci table, interactive prompt | +| `http://localhost:9994/async/nappi.html` | Click handlers, mutable counter (visual tally) | +| `http://localhost:9994/program/kasvutaulukko.html` | Factorial and Fibonacci sequences for n=1..7 | ## What is Tampio? @@ -56,7 +56,11 @@ See [`docs/cheatsheet.md`](docs/cheatsheet.md) for a map of Finnish grammatical | `examples/data-structures/` | Built-in list operations, custom class | | `examples/strings/` | String length, concat, trim, split | | `examples/async/` | DOM click handlers, mutable state | -| `examples/program/` | Capstone combining recursion, lists, and click events | +| `examples/program/` | Capstone combining recursion and list iteration | + +## Testing + +See [`docs/testing.md`](docs/testing.md) for a step-by-step guide to verifying each example. ## Local Setup (without Docker) diff --git a/docs/testing.md b/docs/testing.md new file mode 100644 index 0000000..ad3cb48 --- /dev/null +++ b/docs/testing.md @@ -0,0 +1,97 @@ +# Testing the Examples + +## Build and serve + +```sh +make +python3 -m http.server 9994 --directory examples +``` + +Open `http://localhost:9994/basics/index.html` for the full index, or test each example directly below. + +--- + +## basics/hello.html + +`http://localhost:9994/basics/hello.html` + +- Page loads → browser alert says **Hei maailma!** + +--- + +## basics/factorial.html + +`http://localhost:9994/basics/factorial.html` + +- Page loads → prompt appears +- Enter `5` → alert shows **120** +- Enter `0` → alert shows **1** + +--- + +## basics/fibonacci.html + +`http://localhost:9994/basics/fibonacci.html` + +- Page loads → prompt appears +- Enter `10` → alert shows **55** +- Enter `1` → alert shows **1** + +--- + +## data-structures/lista.html + +`http://localhost:9994/data-structures/lista.html` + +- Right panel shows the list `[3, 1, 4, 1, 5]` +- Size: **5**, first element: **3** +- Ascending sort: **1 1 3 4 5** +- Descending sort: **5 4 3 1 1** + +--- + +## data-structures/vektori.html + +`http://localhost:9994/data-structures/vektori.html` + +- Dimension: **2** +- Sum: **7** +- Length (3-4-5 triangle): **5** + +--- + +## strings/merkkijono.html + +`http://localhost:9994/strings/merkkijono.html` + +- Merkkijono: **Hei, Tampio!** +- Pituus: **12** +- Yhdistetty: **Hei, Tampio! Vuosi 2026.** +- Siistitty: **'välilyönnit poistuvat'** +- Hedelmät: **omena banaani kiivi** + +--- + +## async/nappi.html + +`http://localhost:9994/async/nappi.html` + +- Two buttons visible: **+1** and **+10** +- Click **+1** → one `▪` dot appears +- Click **+10** → ten `▪` dots appear +- Dots accumulate across clicks + +--- + +## program/kasvutaulukko.html + +`http://localhost:9994/program/kasvutaulukko.html` + +- **Kertoma (n!)** section shows: `1 1 2 6 24 120 720` +- **Fibonacci-kani (fib(n))** section shows: `1 1 2 3 5 8 13` + +--- + +## Checking for errors + +Open browser DevTools (`F12` → Console) on any page and verify no red errors appear. The only expected output is from the examples themselves. diff --git a/examples/async/nappi.itp b/examples/async/nappi.itp index ce3c536..5ef45c2 100644 --- a/examples/async/nappi.itp +++ b/examples/async/nappi.itp @@ -6,11 +6,10 @@ # # State is stored in a "muuttuja" (variable object with an "arvo" field). # "kasvatetaan yhdellä" increments the stored value in place. -# "näytetään käyttäjälle" writes the current value to the page output. # # DOM utilities: # etsii elementin nimellä "id" tuloksenaan X = document.getElementById -# kirjoitetaan koodi "html" = element.innerHTML = +# kirjoitetaan koodi "html" = element.innerHTML += (append) # pyyhitään = element.innerHTML = "" # Global counter — persists across button clicks @@ -18,12 +17,13 @@ Olkoon kiva laskuri uusi muuttuja, jonka arvo on nolla. Kun nykyinen sivu avautuu, nykyinen sivu etsii elementin nimellä "output" tuloksenaan kiva alue, - kivalle alueelle kirjoitetaan koodi "

", + kivalle alueelle kirjoitetaan koodi "

", nykyinen sivu etsii elementin nimellä "natti" tuloksenaan nätti nappi, nykyinen sivu etsii elementin nimellä "hieno" tuloksenaan hieno nappi, + nykyinen sivu etsii elementin nimellä "tally" tuloksenaan kaunis alue, nättiä nappia painettaessa käyköön niin, että kivan laskurin arvoa kasvatetaan yhdellä - ja kivan laskurin arvo näytetään käyttäjälle + ja kauniille alueelle kirjoitetaan koodi "▪ " ja hienoa nappia painettaessa käyköön niin, että kivan laskurin arvoa kasvatetaan kymmenellä - ja kivan laskurin arvo näytetään käyttäjälle. + ja kauniille alueelle kirjoitetaan koodi "▪▪▪▪▪▪▪▪▪▪ ". diff --git a/examples/program/kasvutaulukko.itp b/examples/program/kasvutaulukko.itp index 18205d6..beb2cd5 100644 --- a/examples/program/kasvutaulukko.itp +++ b/examples/program/kasvutaulukko.itp @@ -35,21 +35,11 @@ Pienen luvun kani on # n = 1 .. 7 Olkoon kiva lista uusi lista, jonka alkioita ovat yksi, kaksi, kolme, neljä, viisi, kuusi ja seitsemän eikä muuta. -# Mutable variable for the interactive prompt -Olkoon pieni muuttuja uusi muuttuja, jonka arvo on nolla. - # --- Page --- Kun nykyinen sivu avautuu, nykyinen sivu näyttää tekstin "

Kertoma (n!)

", nykyinen sivu näyttää kivan listan jokaisen alkion kertoman, nykyinen sivu näyttää tekstin "

Fibonacci-kani (fib(n))

", - nykyinen sivu näyttää kivan listan jokaisen alkion kanin, - nykyinen sivu näyttää tekstin "

", - nykyinen sivu etsii elementin nimellä "output" tuloksenaan kiva alue, - kivalle alueelle kirjoitetaan koodi "

Kokeile itse

", - nykyinen sivu etsii elementin nimellä "laske" tuloksenaan nätti nappi -ja nättiä nappia painettaessa käyköön niin, että - pieneen muuttujaan luetaan luku, - pienen muuttujan arvon kertoma näytetään käyttäjälle - ja pienen muuttujan arvon kani näytetään käyttäjälle. + nykyinen sivu näyttää kivan listan jokaisen alkion kanin +ja nykyinen sivu näyttää tekstin "

". diff --git a/examples/strings/merkkijono.itp b/examples/strings/merkkijono.itp index c2ad05a..7825b91 100644 --- a/examples/strings/merkkijono.itp +++ b/examples/strings/merkkijono.itp @@ -13,7 +13,7 @@ # Variables must be adjective + noun Olkoon mukava merkkijono teksti "Hei, Tampio!". -Olkoon pitkä merkkijono teksti "omena,banaani,kiivi". +Olkoon pitkä merkkijono teksti "omena, banaani, kiivi". Olkoon ylimääräinen merkkijono teksti " välilyönnit poistuvat ". Kun nykyinen sivu avautuu, @@ -24,7 +24,7 @@ Kun nykyinen sivu avautuu, nykyinen sivu näyttää tekstin "

Yhdistetty: ", nykyinen sivu näyttää mukavan merkkijonon yhdistettynä tekstiin " Vuosi 2026.", nykyinen sivu näyttää tekstin "

Siistitty: '", - nykyinen sivu näyttää ylimääräinen merkkijono siistittynä, - nykyinen sivu näyttää tekstin "'

Hedelmät (pilkulla erotettu): ", + nykyinen sivu näyttää ylimääräisen merkkijonon siistittynä, + nykyinen sivu näyttää tekstin "'

Hedelmät: ", nykyinen sivu näyttää pitkän merkkijonon jokaisen kentän ja nykyinen sivu näyttää tekstin "

".