Here is the first tutorial (of several I am planning) on using StoryScript for serious content:
StoryScript for Academic and Educational Content: Reinterpreting Features
StoryScript’s framework, which was originally designed for interactive storytelling and text-focused games, can also be a great tool for creating educational and academic content. For example, you can use it to desig an interactive museum exhibit, or a learning game for students.
However, repurposing a game engine for serious use still comes with challenges. Educational and academic projects often require longer, more complex texts, larger images, or external resources like archival materials, videos, or IIIF viewers for historical documents. Also, you may find typical game elements like combats useless at first, but with some creativity and patience, you can re-interpret the functionalities behind them to create simulations, learning quizzes, and randomised results for serious storytelling. In this tutorial, you will find tips and tricks to get started.
How to turn a backpack into a library
In StoryScript, features are interactive elements that users can engage with, such as items or tools. Technically, they are defined as TypeScript objects that include properties like name, description, picture (optional), and combinations (definitions of actions and their triggers in your story or game). These features can be visually represented as images or as text-based elements, or even a combination of both.
In the adventure game and role-playing game tutorials, you learn how to create features and add them to a character’s equipment section or backpack. For academic and educational projects, you can reinterpret these features to give users several options for exploring sources, collecting information, or viewing annotations. This will most likely imply that you will have to update the names of the sections where items are shown in the StoryScript interface. The name backpack does not make sense when you want to use this box as a virtual library where your users can collect books they find along the way.
This is why you should first access the customTexts.ts file of your project and update the names of HTML containers where items will later be shown, but also the list of possible items itself. In my "Imperial Circles Thematic" project, I am using the following custom names:
This will give you the following interface:
Note that the Messages box is hidden because it is only conditionally displayed.
Updating combination names for serious content
After adjusting the custom display texts of containers and items to my historical use case, I also renamed the possible combinations to match my project. This happens in the combinations.ts file:
In my own project, I am only using two of the four combinations that StoryScript provides by default. I am using use as read and lookat as add (meaning the option to add an item to my notebook).
Using in-text features for annotations
Then I can go on to create specific features / items as outlined in the general StoryScript tutorials. Being a historian, I often want my users to be able to hover over a person name or place name in my texts and learn more. Letting users add those persons and places to the notebook (meaning my version of StoryScript's backpack) makes it possible for them to view detailed annotations. Below you see an annotation that I have made for the word "Emperor" in one of my HTML files.
"Emperor" is coded as Emperor in the underlying HTML and also linked with a corresponding description HTML file and TypeScript file. For a detailed description on how to set this up, please refer to the adventure gaming and role-playing tutorials!
Naming conventions
Please be aware that working with academic content can create one specific problem for you: In a historical narrative, you may want to create in-text features for "Catherine the Great" or "Louis XIV of France", but this comes with the caveat that spaces are not allowed within the HTML string identifier while spaces can be used to define the name in Typescript. For example, if you create a new feature in TypeScript with name: "Book Moser", you must reference it in your location HTML file as <feature name="BookMoser"> without spaces. This is a subtle but critical detail, especially when working with large datasets or in collaborative projects. Make sure that naming conventions are clear to all your project members and apply them consistently. If your feature isn’t appearing or interacting as expected, double-check the exact spelling of names in your files, but also make sure that features you would like to display in one particular location are also correctly imported in the corresponding TypeScript file, e.g. start.ts.
Here is the first tutorial (of several I am planning) on using StoryScript for serious content:
StoryScript for Academic and Educational Content: Reinterpreting Features
StoryScript’s framework, which was originally designed for interactive storytelling and text-focused games, can also be a great tool for creating educational and academic content. For example, you can use it to desig an interactive museum exhibit, or a learning game for students.
However, repurposing a game engine for serious use still comes with challenges. Educational and academic projects often require longer, more complex texts, larger images, or external resources like archival materials, videos, or IIIF viewers for historical documents. Also, you may find typical game elements like combats useless at first, but with some creativity and patience, you can re-interpret the functionalities behind them to create simulations, learning quizzes, and randomised results for serious storytelling. In this tutorial, you will find tips and tricks to get started.
How to turn a backpack into a library
In StoryScript, features are interactive elements that users can engage with, such as items or tools. Technically, they are defined as TypeScript objects that include properties like name, description, picture (optional), and combinations (definitions of actions and their triggers in your story or game). These features can be visually represented as images or as text-based elements, or even a combination of both.
In the adventure game and role-playing game tutorials, you learn how to create features and add them to a character’s equipment section or backpack. For academic and educational projects, you can reinterpret these features to give users several options for exploring sources, collecting information, or viewing annotations. This will most likely imply that you will have to update the names of the sections where items are shown in the StoryScript interface. The name backpack does not make sense when you want to use this box as a virtual library where your users can collect books they find along the way.
This is why you should first access the
customTexts.tsfile of your project and update the names of HTML containers where items will later be shown, but also the list of possible items itself. In my "Imperial Circles Thematic" project, I am using the following custom names:This will give you the following interface:
Note that the Messages box is hidden because it is only conditionally displayed.
Updating combination names for serious content
After adjusting the custom display texts of containers and items to my historical use case, I also renamed the possible combinations to match my project. This happens in the
combinations.tsfile:In my own project, I am only using two of the four combinations that StoryScript provides by default. I am using use as read and lookat as add (meaning the option to add an item to my notebook).
Using in-text features for annotations
Then I can go on to create specific features / items as outlined in the general StoryScript tutorials. Being a historian, I often want my users to be able to hover over a person name or place name in my texts and learn more. Letting users add those persons and places to the notebook (meaning my version of StoryScript's backpack) makes it possible for them to view detailed annotations. Below you see an annotation that I have made for the word "Emperor" in one of my HTML files.
"Emperor" is coded as Emperor in the underlying HTML and also linked with a corresponding description HTML file and TypeScript file. For a detailed description on how to set this up, please refer to the adventure gaming and role-playing tutorials!
Naming conventions
Please be aware that working with academic content can create one specific problem for you: In a historical narrative, you may want to create in-text features for "Catherine the Great" or "Louis XIV of France", but this comes with the caveat that spaces are not allowed within the HTML string identifier while spaces can be used to define the name in Typescript. For example, if you create a new feature in TypeScript with
name: "Book Moser", you must reference it in your location HTML file as<feature name="BookMoser">without spaces. This is a subtle but critical detail, especially when working with large datasets or in collaborative projects. Make sure that naming conventions are clear to all your project members and apply them consistently. If your feature isn’t appearing or interacting as expected, double-check the exact spelling of names in your files, but also make sure that features you would like to display in one particular location are also correctly imported in the corresponding TypeScript file, e.g.start.ts.