Panoramica¶

ChoiceMap trasforma contenuti lineari in esperienze interattive. Invece di leggere un documento dall'inizio alla fine, l'utente naviga attraverso un albero di scelte dove ogni decisione apre un percorso diverso.

I tre componenti¶

Il framework è composto da tre strumenti distinti, ognuno con un ruolo specifico.

Navigator¶

È il motore di visualizzazione, quello che l'utente finale vede e usa. Carica uno scenario JSON e lo presenta come una sequenza di schermate. Ogni schermata mostra un contenuto testuale e una serie di pulsanti tra cui scegliere, con la possibilità di allegare file e condividere link. La scelta determina quale schermata appare dopo.

Il Navigator include una mappa visuale del percorso che mostra dove si trova l'utente nell'albero decisionale, quali nodi ha già visitato e quali restano da esplorare. L'utente può tornare indietro, ricominciare da capo, o saltare a un punto specifico della parte già visitata della mappa.

Scenario Editor¶

È lo strumento per creare e modificare scenari senza scrivere JSON a mano. Se si apre per modificarlo uno scenario esistente, l'editor presenta una lista di tutti i nodi, permette di modificarne il contenuto, aggiungere scelte, collegare nodi tra loro.

L'editor include una vista mappa che mostra la struttura ad albero dello scenario, evidenziando il nodo iniziale, i nodi finali e eventuali nodi "orfani" (scollegati dal flusso principale). Questa vista aiuta a individuare problemi strutturali prima di pubblicare.

Theme Editor¶

È lo strumento per personalizzare l'aspetto visivo del Navigator. Permette di modificare colori, font, aggiungere logo e nome dell'azienda, senza toccare il codice.

Le modifiche si vedono in tempo reale in un'anteprima. Una volta soddisfatti, si salva il tema come file JSON e lo si associa allo scenario.

Casi d'uso tipici¶

ChoiceMap si adatta a diversi contesti formativi e comunicativi.

Formazione aziendale¶

Un corso di onboarding può diventare un percorso interattivo dove il nuovo dipendente esplora le procedure aziendali facendo scelte e ricevendo feedback contestuali. Invece di leggere un manuale di 50 pagine, naviga attraverso scenari che simulano situazioni reali, connettendo ogni passaggio ai capitoli specifici nei documenti correlati.

La formazione sulla compliance si presta particolarmente bene: scenari che presentano situazioni ambigue, chiedono una decisione, e mostrano le conseguenze di scelte corrette o errate.

Quiz e valutazioni¶

Un quiz tradizionale presenta domande in sequenza. Con ChoiceMap il percorso cambia in base alle risposte: chi risponde correttamente procede, chi sbaglia riceve una spiegazione e può riprovare o viene indirizzato a un percorso di approfondimento.

Questo approccio trasforma la valutazione in un'esperienza di apprendimento: l'errore non è solo un punteggio negativo ma un'opportunità per capire meglio.

Documentazione di processo¶

Un workflow come la gestione di un ticket di assistenza può essere rappresentato come un albero decisionale. L'operatore risponde a domande sulla situazione ("È un problema tecnico o di fatturazione?", "Il servizio è completamente fermo?") e viene guidato verso la procedura corretta.

Questo approccio permette di rappresentare situazioni complesse, riducendo gli errori e accelerando la formazione di nuovo personale.

Storytelling interattivo¶

Storie in stile "libro-game" dove il lettore fa scelte fra percorsi multipli. Utile per formazione esperienziale, simulazioni di negoziazione, esplorazione di scenari etici.

Architettura tecnica¶

ChoiceMap è costruito con tecnologie web standard: HTML, CSS, JavaScript. Usa React per l'interfaccia e Tailwind CSS per lo stile, entrambi caricati da CDN. Non richiede compilazione né installazione di dipendenze.

Ogni scenario è un file JSON con una struttura semplice: metadati (titolo, autore), traduzioni delle etichette dell'interfaccia, e una collezione di nodi. Ogni nodo ha un contenuto testuale in Markdown e una lista di scelte che puntano ad altri nodi.

I temi sono anch'essi file JSON che definiscono colori, font e informazioni di branding.

Il Navigator funziona su qualsiasi browser moderno e si adatta automaticamente a desktop e dispositivi mobili.