Chatbot dont vous êtes le héro

Dans les années 80-90, certains livres permettaient aux lecteurs d’avoir une lecture non linéaire en proposant des choix à la fin des paragraphes. Certains choix menaient à des impasses, d’autres à des fins alternatives.

Peut à peut, cet engouement pour les livres dont vous êtes le héro à fini par s’essouffler probablement face à l’émergence des jeux vidéos bien plus interactifs.

En 2015, est apparu le jeu Lifetime de « Three minute games » sur iPhone. Le coté interactif m’a tout de suite fait penser à ces livres.
Taylor, viens de s’écraser sur une lune. Complètement désemparé, il nous contacte par SMS et nous raconte son aventure. Au fur et à mesure de la conversation, on accompagne le personnage dans sa quête en répondant à des questions fermées.

En 2018, Netflix a de nouveau ressuscité le genre avec sa série interactive Black Mirror : Bandersnatch

Sur ce même principe, j’ai alors tenté de développer une fiction interactive se déroulant à bord de l’ISS (la station spatiale internationale).


https://geocaching.lichat.net/ISS/

Cette histoire s’inscrit dans une énigme de géocaching. En fin d’histoire, l’emplacement physique d’une boite est révélé au joueur. En se rendant sur place il validera la résolution de l’histoire.

La principale difficulté pour concevoir ce genre d’histoire est d’avoir une vision globale des branches et des différents choix de l’impétrant. Pour ce faire j’ai schématisé toute la trame narrative sous la forme d’un graphique UML. Voici donc à quoi ressemble une version simplifié d’une histoire

https://www.lucidchart.com/invitations/accept/8f1b7a9f-b9c7-43e3-965a-7c4927ed2c78

Les rectangles symbolisent les répliques du personnage et les lignes correspondent aux choix possibles du joueur.

En utilisant le site lucidchart.com, j’ai alors pu concevoir mon histoire et l’exporter au format csv. Le format csv n’étant pas très pratique à manipuler en javascript et php, j’ai conçu un script pour le transformer au format json.

Reste ensuite a créer une interface html simulant une application de messagerie et un script php renvoyant la bonne réplique en fonction du choix du joueur. Pour cela je vous invite à regarder le code sur github

le code source simplifié : https://github.com/katze/chatbot-story
la démo simplifié : https://geocaching.lichat.net/ISS/github
l’histoire complète : https://geocaching.lichat.net/ISS
la mystery sur geocaching.com : https://coord.info/GC83FF1

Si vous écrivez une histoire sur ce même principe, n’hésitez pas à laisser un commentaire.

8 réflexions au sujet de « Chatbot dont vous êtes le héro »

  1. Le chatbot est cassé, quand on clique sur une réponse tout le contenu de la page est remplacé par « [object Promise] ». Les liens devraient plutôt être définis comme ceci

    javascript:(function(){quickAnswer(‘Oui’,3)})()

    Chatbot et histoire sympas néanmoins, dans le même genre en beaucoup plus perfectionné il y a aussi GC7AQG8 « Je vous écoute ».

      1. Firefox. A priori mon message précédent n’est passé parce qu’il y avait des liens vers MDN entre autres, vilain spammeur que je suis.

        developer .mozilla. org/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_void#Les_URI_JavaScript

        > Lorsqu’un navigateur utilise une URI avec javascript:, le code de l’URI est évalué et le résultat remplace le contenu de la page, sauf si la valeur renvoyée vaut undefined. L’utilisateur void peut alors être utilisé pour renvoyer cette valeur.

        2ality. com/2011/05/void-operator.html

        > On the other hand, if the function that is called returns a value, you need to prevent the page content from being changed, via the void operator. [This difference only exists on non-Webkit browsers. E.g., Safari and Chrome don’t exhibit it, Firefox does.]

        De l’intérêt de tester sur autre chose que Chrome.

        1. Bonjour cher vilain spammeur 🙂
          Je te remercie de ton lien, lors de la publication de cache j’avais bien évidemment testé avec plusieurs navigateurs et notamment ceux ne supportant pas l’ES7.
          Tu connais certainement la phrase que tout développeur à dit au moins un fois : « Chez moi ça marche » 🙂
          Bref, je viens de refaire un test sur Safari, Chrome, Firefox et IE et le chatbot fonctionne. Je n’arrive pas à reproduire ton erreur.

          Quand j’aurai un peu de temps, je regarderai comment améliorer ca. A moins que tu fasses une pull request sur le github, le code est open-source c’est aussi pour ca.

          Sinon es-tu venu la loguer ? J’ai fait une maintenance dessus récemment.

          Au plaisir de discuter avec toi lors d’un event,
          Lichat

          1. Avec plaisir, désolé du ton de mon message qui est un peu trop acerbe à la relecture, c’est du beau boulot.

            Je n’avais pas vu qu’il y avait un dépôt Github, je tâcherai de créer une PR. À bientôt peut-être à un événement parisien !

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *