Riferimento rapido¶
Checklist operativa per chi conosce già il manuale e vuole un promemoria dei passaggi essenziali.
Avviare il server locale¶
Windows (doppio clic sugli script batch):
start-navigator.bat→ apre il Navigatorstart-scenario-editor.bat→ apre lo Scenario Editorstart-theme-editor.bat→ apre il Theme Editor
Manuale (Mac/Linux o senza script):
python -m http.server 8000
Indirizzi:
- Navigator:
http://localhost:8000/choicemap.html - Scenario Editor:
http://localhost:8000/scenario-editor.html - Theme Editor:
http://localhost:8000/theme-editor.html
Creare uno scenario¶
- New → crea scenario vuoto
- Settings → titolo, descrizione, autore
- Selezionare nodo → scrivere Content
- + Add Choice → testo pulsante + nodo destinazione
- Ripetere per tutti i nodi
- Map → verificare struttura (no bordi rossi = ok)
- Save → scarica il file JSON
Modificare uno scenario esistente¶
- Open → selezionare file JSON
- Modificare nodi e scelte
- Save
Personalizzare il tema¶
- Aprire Theme Editor
- Brand → logo, nome azienda, sito web
- Typography → scegliere font
- Colors → sfondo, testo, pulsanti, mappa
- Verificare nell'anteprima
- Save → scarica il file JSON
Configurare config.json¶
{
"scenario": "nome-scenario.json",
"theme": "nome-tema.json",
"showCredits": false
}
Testare in locale¶
- Aggiornare config.json con i nomi file corretti
- Ricaricare il Navigator (Ctrl+Shift+R)
- Percorrere tutto lo scenario verificando i percorsi
Pubblicare¶
File necessari (solo questi):
choicemap.htmlconfig.jsondefaults.json- File JSON dello scenario
- File JSON del tema (se personalizzato)
- Cartella risorse (se usate)
Non includere: scenario-editor.html, theme-editor.html, shared-styles.css
GitHub Pages:
- Creare repository
- Caricare i file necessari
- Settings → Pages → attivare da branch main
- URL:
https://nomeutente.github.io/nome-repo/choicemap.html
Codice colori mappa (Scenario Editor)¶
| Colore bordo | Significato |
|---|---|
| Verde | Nodo iniziale (START) |
| Arancione | Nodo terminale (END) |
| Rosso | Nodo orfano (problema!) |
| Viola | Nodo selezionato |
Collegamenti arancioni = loop (tornano indietro).
Markdown nel contenuto¶
# Titolo grande
## Sottotitolo
**grassetto**
*corsivo*
- elemento lista
> citazione
Troubleshooting veloce¶
| Problema | Soluzione |
|---|---|
| Pagina bianca aprendo HTML | Avviare il server locale |
| Modifiche non visibili | Ctrl+Shift+R per forzare refresh |
| Porta 8000 occupata | Usare altra porta: python -m http.server 8080 |
| Nodi orfani (bordo rosso) | Collegarli o eliminarli |