Vai al contenuto

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 Navigator
  • start-scenario-editor.bat → apre lo Scenario Editor
  • start-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

  1. New → crea scenario vuoto
  2. Settings → titolo, descrizione, autore
  3. Selezionare nodo → scrivere Content
  4. + Add Choice → testo pulsante + nodo destinazione
  5. Ripetere per tutti i nodi
  6. Map → verificare struttura (no bordi rossi = ok)
  7. Save → scarica il file JSON

Modificare uno scenario esistente

  1. Open → selezionare file JSON
  2. Modificare nodi e scelte
  3. Save

Personalizzare il tema

  1. Aprire Theme Editor
  2. Brand → logo, nome azienda, sito web
  3. Typography → scegliere font
  4. Colors → sfondo, testo, pulsanti, mappa
  5. Verificare nell'anteprima
  6. Save → scarica il file JSON

Configurare config.json

{
    "scenario": "nome-scenario.json",
    "theme": "nome-tema.json",
    "showCredits": false
}

Testare in locale

  1. Aggiornare config.json con i nomi file corretti
  2. Ricaricare il Navigator (Ctrl+Shift+R)
  3. Percorrere tutto lo scenario verificando i percorsi

Pubblicare

File necessari (solo questi):

  • choicemap.html
  • config.json
  • defaults.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:

  1. Creare repository
  2. Caricare i file necessari
  3. Settings → Pages → attivare da branch main
  4. 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