Editor dello scenario¶

L'editor dello scenario è lo strumento per creare e modificare scenari.

Come si presenta¶

Uno scenario è l'insieme di nodi (che l'utente nel Navigator vede come schede) e di collegamenti fra i nodi (che l'utente nel Navigator vede come i tasti di scelta all'interno delle schede). Gli scenari sono salvati come file JSON.

L'interfaccia è divisa in due parti.

Colonna di sinistra¶

La colonna di sinistra è dedicata alla gestione delle operazioni generali e dello scenario aperto.

Nella parte alta mostra una riga con i tasti per:

• New: creare un nuovo scenario
• Open: aprire uno scenario esistente
• Save: salvare lo scenario corrente come file JSON
• Map: attivare la visualizzazione della mappa

I nomi dei tasti sono nell'inglese di default, ma possono essere personalizzati tramite Settings.

Sotto la riga dei tasti compare l'elenco dei nodi che fanno parte dello scenario aperto: solo il nodo Start se si sta partendo con un nuovo scenario, una lista completa se si è già avanti con la creazione o se si apre uno scenario esistente.

Ogni nodo nella lista mostra:

• il titolo (estratto dal contenuto)
• l'identificativo tecnico
• badge informativi: livello e posizione (es. L2-P1), START per il nodo iniziale, END per i nodi terminali

Area di editing¶

La parte destra è dedicata all'editing del nodo selezionato.

La riga in alto contiene:

• sulla sinistra: il nome del file dello scenario e il totale dei nodi. Per un nuovo scenario compare "New scenario", il nome cambia automaticamente dopo il salvataggio
• sulla destra: il pulsante Settings per i metadati e le traduzioni

Sotto la riga di intestazione compaiono i blocchi che definiscono il nodo:

• Node: gestione dell'identificativo del nodo
• Content: il contenuto testuale
• Choices: le scelte disponibili all'utente
• Resources: gli allegati e risorse collegate

Vista mappa¶

La vista mappa mostra lo scenario come un albero visuale.

Ogni nodo mostra il suo identificativo e il titolo. I collegamenti tra nodi rappresentano le scelte disponibili, le frecce indicano la direzione del percorso. Il layout automatico dispone i nodi su livelli, con il nodo iniziale in alto e i rami che si espandono verso il basso.

Codice colori dei bordi:

• verde: nodo di partenza (START)
• arancione: nodo terminale (END)
• rosso: nodo orfano, non raggiungibile
• viola: nodo selezionato

I collegamenti all'indietro (loop) sono colorati in arancione per distinguerli dai collegamenti in avanti.

Cliccando su un nodo nella mappa si apre direttamente nell'area di editing. Per chiudere la mappa, cliccare sul pulsante X in alto a destra.

I blocchi dell'area di editing¶

Node¶

Il blocco Node gestisce l'identificativo del nodo. Contiene:

• Rename: apre un campo per modificare l'identificativo. L'ID deve essere univoco nell'intero scenario e può contenere solo lettere, numeri e underscore
• DELETE: elimina l'intero nodo dallo scenario. Non è disponibile per il nodo START. Prima di eliminare, il sistema chiede conferma

Content¶

Il blocco Content contiene il testo che l'utente vedrà nella scheda del Navigator.

Il contenuto usa una sintassi Markdown semplificata:

Choices¶

Il blocco Choices definisce le scelte disponibili all'utente, cioè i pulsanti che permettono di procedere nel percorso.

Cliccando su + Add Choice si aggiunge una nuova scelta con due campi obbligatori:

• Button Text: il testo che appare sul pulsante
• Target Node: il nodo di destinazione, selezionabile da un menu a tendina che elenca tutti i nodi esistenti

Il menu Target Node include anche l'opzione + Create new node che apre un popup per creare direttamente un nuovo nodo destinazione.

Indicatori visivi di stato:

• bordo grigio: scelta appena creata, non ancora compilata
• bordo ambra con "● unsaved": modifiche non salvate
• bordo verde con "✓": scelta completa e salvata
• bordo rosso: errori di validazione

Il pulsante Save Choice salva la scelta solo se entrambi i campi sono compilati. Il pulsante REMOVE elimina la scelta.

Un nodo può avere più scelte che portano a nodi diversi. È possibile creare loop collegando un nodo a uno dei suoi antenati.

Resources¶

Il blocco Resources permette di allegare risorse esterne al nodo.

Cliccando su + Add Resource si aggiunge una risorsa con tre campi obbligatori:

• Type: il tipo di risorsa
  • Link: collegamento a una pagina web
  • Download: documento scaricabile (deve essere accessibile via URL)
  • Video: video YouTube (usare il link di condivisione)
• URL: l'indirizzo della risorsa, può essere sia un link web sia un url relativo ad una risorsa locale. In questo caso conviene definire una sottocartella in cui raccogliere gli elementi, l'url potrebbe essere "docs/elemento1.pdf
• Label: la descrizione che appare all'utente nel Navigator

Gli indicatori visivi di stato funzionano come per le Choices. Il pulsante Save Resource salva solo se tutti i campi sono compilati.

Settings: metadati e traduzioni¶

Il pulsante Settings apre un pannello per configurare i metadati dello scenario e le etichette dell'interfaccia.

Metadati:

• Title: il nome dello scenario, visibile nell'intestazione del Navigator
• Description: descrizione breve (opzionale)
• Author: nome dell'autore (opzionale)

UI Labels: permette di tradurre o personalizzare tutte le etichette dell'interfaccia utente (step, restart, endOfPath, resources, viewMap, back, download, openLink, watchVideo).

Il file JSON¶

Uno scenario viene salvato come file JSON strutturato in tre sezioni:

• meta: i metadati (title, description, author)
• translations: le etichette personalizzate
• startNode: l'identificativo del nodo di partenza
• nodes: l'oggetto contenente tutti i nodi con i loro contenuti, scelte e risorse

Salvataggio¶

Il pulsante Save genera un file JSON. Non c'è salvataggio automatico: salvare regolarmente durante il lavoro.

Nella barra di stato in basso è sempre visibile lo stato:

• "● Unsaved" (arancione): ci sono modifiche non salvate
• "✓ Saved" (verde): tutto salvato