Merge pull request 'testing_and_fixes' (#5) from testing_and_fixes into main
Reviewed-on: http://localhost:44481/katariina-jarvenmaki/Tampiorama/pulls/5
This commit is contained in:
@@ -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
|
||||
|
||||
@@ -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)
|
||||
|
||||
|
||||
@@ -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.
|
||||
@@ -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 "<p><button id='natti'>+1</button> <button id='hieno'>+10</button></p>",
|
||||
kivalle alueelle kirjoitetaan koodi "<p><button id='natti'>+1</button> <button id='hieno'>+10</button></p><p id='tally'></p>",
|
||||
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 "▪▪▪▪▪▪▪▪▪▪ ".
|
||||
|
||||
@@ -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 "<h2>Kertoma (n!)</h2><p>",
|
||||
nykyinen sivu näyttää kivan listan jokaisen alkion kertoman,
|
||||
nykyinen sivu näyttää tekstin "</p><h2>Fibonacci-kani (fib(n))</h2><p>",
|
||||
nykyinen sivu näyttää kivan listan jokaisen alkion kanin,
|
||||
nykyinen sivu näyttää tekstin "</p>",
|
||||
nykyinen sivu etsii elementin nimellä "output" tuloksenaan kiva alue,
|
||||
kivalle alueelle kirjoitetaan koodi "<h2>Kokeile itse</h2><p><button id='laske'>Syötä luku →</button></p>",
|
||||
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 "</p>".
|
||||
|
||||
@@ -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 "</p><p>Yhdistetty: ",
|
||||
nykyinen sivu näyttää mukavan merkkijonon yhdistettynä tekstiin " Vuosi 2026.",
|
||||
nykyinen sivu näyttää tekstin "</p><p>Siistitty: '",
|
||||
nykyinen sivu näyttää ylimääräinen merkkijono siistittynä,
|
||||
nykyinen sivu näyttää tekstin "'</p><p>Hedelmät (pilkulla erotettu): ",
|
||||
nykyinen sivu näyttää ylimääräisen merkkijonon siistittynä,
|
||||
nykyinen sivu näyttää tekstin "'</p><p>Hedelmät: ",
|
||||
nykyinen sivu näyttää pitkän merkkijonon jokaisen kentän
|
||||
ja nykyinen sivu näyttää tekstin "</p>".
|
||||
|
||||
Reference in New Issue
Block a user