> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://documentation.celestory.io/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # Votre premier choix : le lecteur décide, l'histoire bifurque # 🔀 Votre premier choix : le lecteur décide, l'histoire bifurque Jusqu'ici, votre histoire est une ligne droite : **Départ** → **Dialogue**, et c'est tout. Le lecteur lit, il ne fait rien. Dans cet article, on ajoute la chose qui transforme un texte en expérience interactive : un **embranchement**. Une question, deux boutons, et deux suites différentes. C'est le bloc **Choix**. On part d'ici : ```plain text ┌─────────┐ ┌────────────┐ │ Départ │───────▶│ Dialogue │ └─────────┘ out └────────────┘ in out ▶ (dans le vide) ``` …et on arrive là : ```plain text ┌────────────────────┐ ┌───▶│ Dialogue « gauche »│ ┌─────────┐ ┌──────────┐ │ └────────────────────┘ │ Départ │──▶│ Dialogue │──▶┌────┴─────┐ └─────────┘ └──────────┘ │ Choix │ │ │ │ à gauche ▶───▶ (branche 1) │ à droite ▶───▶ (branche 2) └──────────┘ ``` 🔺 Cet article a été vérifié dans le code source du Creator (`packages/frontend/src/containers/`), pas recopié depuis des notes internes. Les points, les fils, les triangles et les cercles ne sont pas réexpliqués ici : voir l'article **Relier deux blocs : le fil, les triangles et les cercles**. --- ${frame}[Vidéo : Votre premier choix](https://celestory-docs-videos.netlify.app/fr/construction-graphe/votre-premier-choix.html) ## 🧩 Le bloc Choix, et son cousin Deux blocs font le même travail de base, avec un supplément pour le second : | Bloc | Couleur | Ce qu'il fait | |---|---|---| | **Choix** | Violet clair | Affiche une liste de boutons. Le lecteur en clique un, l'histoire part par la sortie correspondante. | | **Choix avec dialogue** | Turquoise | La même chose, mais il affiche **d'abord** une réplique de dialogue, **puis** les boutons. Un bloc au lieu de deux. | Ils partagent exactement le même mécanisme d'options : ce que vous lirez plus bas vaut pour les deux. Le **Choix avec dialogue** a simplement deux champs de plus (le dialogue et son contenu média). ⚠️ **Choix avec dialogue** appartient au template Chatbot : vous ne le trouverez pas dans un module Roman visuel. Le bloc **Choix**, lui, est commun à tous les templates. --- ## 🪄 Ce qui rend ce bloc spécial : il se fabrique tout seul Voici le point que personne ne devine du premier coup, et qui explique tout le reste. Quand vous posez un bloc **Choix** sur le graphe, il n'a **aucune sortie**. Zéro. Un bloc Dialogue arrive avec sa sortie déjà là ; le bloc Choix arrive nu, avec juste son entrée et ses réglages. Ses sorties naissent de ce que vous **écrivez** dedans. Chaque ligne que vous tapez dans le champ **choix** fait pousser : - **une sortie** (un triangle à droite du bloc : c'est une sortie de flux), portant exactement le texte de la ligne ; - **une entrée** portant le même texte (on y reviendra, c'est pour l'habillage). Vous écrivez « à gauche » → une sortie nommée « à gauche » apparaît. Vous effacez la ligne → la sortie disparaît. Vous corrigez « à gauche » en « vers la clairière » → la sortie est renommée, **et le fil déjà branché dessus reste en place**. C'est voulu : la sortie est attachée à la ligne de texte elle-même, pas à son libellé. 🔺 Il n'y a **aucun maximum**. Deux options, cinq, vingt : rien dans le code ne plafonne la liste. Au-delà de cinq ou six le bloc devient juste très haut sur le canvas, et vos boutons très nombreux à l'écran. --- ## 🛠️ Le pas-à-pas On suppose que votre graphe contient déjà un **Départ** relié à un **Dialogue**, comme à la fin de l'article précédent. Le Dialogue dit quelque chose comme « Le chemin se sépare en deux. » ### 1. Poser le bloc Choix Faites un **clic droit** sur une zone vide du canvas, un peu à droite de votre Dialogue. Le navigateur de blocs s'ouvre, avec un champ **Rechercher un bloc…** en haut. Tapez `choix`, puis cliquez sur **Choix** dans la liste. 💡 Astuce plus rapide, et qui évite l'étape 3 : tirez un fil depuis la sortie de votre Dialogue et **lâchez-le dans le vide**. Celestory ouvre alors une liste ne contenant **que** les blocs compatibles avec ce point, et crée le bloc **déjà relié**. ### 2. Ouvrir sa fenêtre d'édition **Double-cliquez** sur le bloc Choix. Sa fenêtre s'ouvre, avec ses champs : - **in** — l'entrée, qui affiche pour l'instant « Le bloc … n'est connecté à aucun autre bloc. » - **choix** — une liste, vide, avec un bouton **＋ Texte**. - **chrono** — un nombre, à 0. ### 3. Relier le Dialogue au Choix Si vous n'avez pas utilisé l'astuce de l'étape 1 : sur le canvas, tirez un fil depuis la **sortie** du Dialogue jusqu'à l'**entrée** du bloc Choix. ### 4. Écrire la première option Dans la fenêtre du Choix, cliquez sur **＋ Texte** sous le champ **choix**. Une ligne de saisie apparaît. Tapez : > `Prendre le sentier de gauche` Regardez le bloc sur le canvas : une sortie vient d'apparaître, nommée `Prendre le sentier de gauche`. ### 5. Écrire la deuxième option Recliquez sur **＋ Texte** et tapez : > `Prendre le sentier de droite` 💡 Plus rapide : avec le curseur encore dans le champ d'une option, appuyez sur **Entrée** — une nouvelle ligne est insérée juste en dessous, et le curseur y saute. Vous pouvez écrire vos cinq options d'affilée sans jamais toucher la souris. Votre bloc a maintenant **deux sorties**. C'est ça, un embranchement : une entrée, deux sorties. ### 6. Réordonner ou supprimer (facultatif) Chaque ligne a une **poignée de glissement** à gauche (pour changer l'ordre d'affichage des boutons) et une **croix** à droite (pour la supprimer). ⚠️ Supprimer une ligne supprime aussi sa sortie **et le fil qui y était branché**, sans demander confirmation. Un `Cmd+Z` / `Ctrl+Z` annule l'ensemble. ### 7. Construire la première branche Clic droit dans le vide → **Dialogue**. Écrivez-y la suite du sentier de gauche : « La clairière s'ouvre devant vous. » Puis tirez un fil depuis la sortie **`Prendre le sentier de gauche`** du bloc Choix jusqu'à l'**entrée** de ce nouveau Dialogue. ### 8. Construire la seconde branche Recommencez : un second Dialogue (« Le sentier s'enfonce sous les arbres. »), relié à la sortie **`Prendre le sentier de droite`**. ### 9. Tester Cliquez sur **Jouer le module courant** : la fenêtre **Tester en jouant** s'ouvre. Vous voyez la réplique d'introduction, puis **deux boutons**. Cliquez sur l'un, vous lisez sa suite ; relancez le test, cliquez sur l'autre, vous lisez l'autre suite. Vous venez d'écrire votre première histoire à embranchement. 🎉 --- ## 🗺️ Où on en est ```plain text ┌──────────────────────────┐ ┌───▶│ Dialogue │ │ │ « La clairière s'ouvre » │ ┌────────┐ ┌───────────────────┐ │ └──────────────────────────┘ │ Départ │──▶│ Dialogue │ │ └────────┘ │ « Le chemin se │ │ │ sépare en deux »│ │ └─────────┬─────────┘ │ │ │ ▼ │ ┌──────────────────────────────┐ │ Choix │ ├──────────────────────────────┤ │ Prendre le sentier de gauche ▶┘ │ Prendre le sentier de droite ▶┐ └──────────────────────────────┘│ │ ┌────────────────────────────┐ └─▶│ Dialogue │ │ « Le sentier s'enfonce... »│ └────────────────────────────┘ ``` --- ## 🔗 Faire se rejoindre les deux branches Deux chemins qui divergent pour toujours, c'est rarement ce qu'on veut : le plus souvent, les deux sentiers mènent au même village, et l'histoire continue d'un seul tenant. Bonne nouvelle : **il n'y a rien de spécial à faire**. Une entrée de type flux accepte **plusieurs fils** ; branchez simplement la sortie du Dialogue « clairière » **et** celle du Dialogue « sous-bois » sur l'entrée d'un même troisième bloc. ```plain text ┌──────────┐ « clairière » ┐ │ Choix ▶───▶ Dialogue ─┤ │ │ ├──▶ ┌────────────────────────┐ │ ▶───▶ Dialogue ─┘ │ Dialogue « Le village »│ └──────────┘ « sous-bois » └────────────────────────┘ ``` ⚠️ La règle inverse, elle, est stricte : **une sortie de flux n'accepte qu'un seul fil**. Plusieurs fils peuvent arriver sur la même entrée ; un seul peut partir d'une même sortie. Si le Creator refuse votre fil, c'est presque toujours ça. 🔺 Si le croisement de fils devient illisible, double-cliquez **sur un fil** : Celestory y insère un bloc **Connecteur**, un simple relais qui ne fait rien d'autre que faire passer le flux. C'est du rangement visuel, pas de la logique. Et si vous voulez au contraire que les branches restent séparées jusqu'à la fin : ne les rejoignez pas. Quand une branche se termine sur un bloc dont la sortie ne va nulle part, l'histoire s'arrête là. C'est une fin, pas une erreur. --- ## 🔇 Le piège : l'option qu'on oublie de relier C'est **la** panne de ce bloc, et elle ne dit rien. Si une option a bien sa sortie, mais que cette sortie n'est reliée à **aucun** bloc, alors au moment de jouer, **le bouton n'est pas affiché du tout**. Pas grisé, pas barré, pas accompagné d'un message : simplement absent de la liste. Vous avez écrit trois options, vous n'en avez relié que deux, vous testez, et vous voyez **deux boutons**. Rien, nulle part, ne vous dit que le troisième existe : le graphe se valide, aucune croix rouge n'apparaît sur le bloc, aucun avertissement n'est levé. Le cas extrême est plus déroutant encore : si **aucune** option n'est reliée, le lecteur voit une zone de choix **vide** et l'histoire s'arrête net, en attendant un clic impossible. | Symptôme | Cause | Que faire | |---|---|---| | Une option écrite ne s'affiche pas en jeu | Sa sortie ne va nulle part | Relier cette sortie à un bloc | | La zone de choix est vide, l'histoire est figée | Aucune sortie n'est reliée | Relier au moins une sortie | | Une option a disparu du bloc, et son fil avec | La ligne a été supprimée de la liste **choix** | `Cmd+Z` / `Ctrl+Z`, ou réécrire la ligne et refaire le fil | 🔺 Le réflexe qui évite les trois : **comptez les triangles de sortie, comptez les fils qui en partent — les deux nombres doivent être égaux** avant de tester. --- ## 💬 « Connecte un bloc Modifier choix pour le rendre dynamique » En ouvrant la fenêtre du bloc Choix, vous avez peut-être remarqué qu'en dessous de la liste des options, chaque option réapparaît une seconde fois, comme un champ à part, avec cette phrase : > Connecte un bloc **Modifier choix** pour le rendre dynamique. **Ce n'est pas une erreur, et vous n'avez rien à faire.** C'est simplement le message d'état vide d'un champ facultatif : à côté de chaque option, Celestory prévoit une prise où brancher un bloc **Modifier choix**. Tant que rien n'y est branché, le champ affiche cette invitation. Une option sans **Modifier choix** fonctionne parfaitement. Le bloc **Modifier choix** sert à rendre une option variable d'une partie à l'autre. Il propose quatre comportements : | Type | Effet sur l'option | |---|---| | **Désactiver** | Le bouton reste visible mais devient non cliquable (avec son propre style). | | **Enlever** | Le bouton disparaît complètement de la liste. | | **Renommer** | Le bouton affiche un autre texte. | | **Changer l'apparence** | Le bouton prend un style de texte et une bordure différents. | C'est ainsi qu'on écrit « la porte est verrouillée tant que vous n'avez pas la clé » : une option **Ouvrir la porte** branchée sur un **Modifier choix** de type *Désactiver*, dont la condition dépend d'une variable. ⚠️ Attention à ne pas confondre les deux effacements : **Enlever** via Modifier choix, c'est un bouton masqué **exprès**, selon une condition que vous maîtrisez. Un bouton absent parce que sa sortie n'est reliée à rien, c'est un oubli. À l'écran, les deux sont **rigoureusement identiques**. --- ## ⏱️ Le chrono : une sortie de plus, en option Le champ **chrono** du bloc Choix vaut 0 par défaut, c'est-à-dire « pas de limite de temps ». Posez-y un nombre de secondes, et une sortie supplémentaire apparaît sur le bloc : **temps écoulé**. Si le lecteur n'a rien cliqué avant la fin du décompte, l'histoire part par cette sortie-là. Une barre de progression s'affiche au-dessus des boutons pendant le compte à rebours. Remettez le chrono à 0 et la sortie **temps écoulé** disparaît — avec le fil qui y était branché, exactement comme pour une option supprimée. --- ## 📌 À retenir - Un bloc **Choix** arrive **sans aucune sortie** : ses sorties naissent des lignes que vous écrivez dans le champ **choix**. - Une ligne = un bouton à l'écran = **une sortie** à relier. Aucun maximum. - Renommer une option **conserve** son fil ; la supprimer **détruit** son fil. - Une sortie de flux n'accepte **qu'un seul fil**, mais une entrée en accepte **plusieurs** : c'est comme ça que deux branches se rejoignent. - Une option dont la sortie ne va nulle part **n'apparaît pas en jeu**, sans le moindre avertissement. - Le message « Connecte un bloc **Modifier choix** » est une invitation facultative, pas une erreur. --- → Prochaine étape : votre histoire bifurque, mais elle ne se **souvient** de rien — au prochain embranchement, elle aura oublié le sentier que le lecteur avait pris. Direction **Une variable, c'est se souvenir**. 🧠