{"id":110,"date":"2023-02-04T11:35:55","date_gmt":"2023-02-04T16:35:55","guid":{"rendered":"https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/?post_type=chapter&#038;p=110"},"modified":"2024-01-17T12:19:00","modified_gmt":"2024-01-17T17:19:00","slug":"chapter-2-your-first-story","status":"publish","type":"chapter","link":"https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/chapter\/chapter-2-your-first-story\/","title":{"raw":"Chapter 2: Your First Story","rendered":"Chapter 2: Your First Story"},"content":{"raw":"<h1><strong>Setting the Scene<\/strong><\/h1>\r\nPlayable stories written in Ink need a beginning. So do lessons.\r\n\r\nSo before you begin writing your first scene, why not take a moment to play \u201c<a href=\"https:\/\/jerrrber.itch.io\/your-first-scene\" target=\"_blank\" rel=\"noopener\">Your First Scene<\/a>\u201d!\r\n\r\nOnce you are through, you can download the file: <a href=\"https:\/\/jerrrber.itch.io\/your-first-scene-ink-file\" target=\"_blank\" rel=\"noopener\">Your First Scene.ink<\/a> and open it in Inky. We will be referencing this story throughout the lesson.\r\n<div class=\"textbox textbox--learning-objectives\"><header class=\"textbox__header\">\r\n<h1 class=\"textbox__title\">Learning Objectives<\/h1>\r\n<\/header>\r\n<div class=\"textbox__content\">\r\n<ul>\r\n \t<li>To differentiate between Knots and Stitches, and be able create and name them using the correct command syntax;<\/li>\r\n \t<li>To understand Diverts, and to generate Diverts using the correct command syntax;<\/li>\r\n \t<li>To differentiate between Basic Choices and Sticky Choices;<\/li>\r\n \t<li>To generate Choices using the correct command syntax;<\/li>\r\n \t<li>To differentiate between Choice Text and Output Text, and to utilize Mixed Output commands in order to generate both.<\/li>\r\n<\/ul>\r\n<\/div>\r\n<\/div>\r\n<h1><strong>Knots<\/strong><\/h1>\r\n[pb_glossary id=\"220\"]Knots[\/pb_glossary] are the largest units of an Ink story. They are typically bigger than paragraphs or pages (or screens), and they may contain several of both. However, it seems inappropriate to compare them to something as large as chapters. A chapter of a story might necessitate multiple knots. Perhaps it is best to think of them as scenes in a playscript.\r\n\r\nAs you will see, knots are, well\u2026 knots. They are the intersection of multiple [pb_glossary id=\"221\"]threads[\/pb_glossary], or perhaps they are bumps along a single thread. They are what you will build your stories out of. In \u201cYour First Scene,\u201d there is exactly one knot.\r\n\r\n&nbsp;\r\n\r\n[caption id=\"attachment_236\" align=\"alignnone\" width=\"750\"]<img src=\"https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-5-1-300x48.png\" alt=\"\" width=\"750\" height=\"120\" class=\"wp-image-236\" \/> Illustration 5. The knot from \u201cYour First Scene.ink\u201d[\/caption]\r\n\r\nSkip line 1 for now; we want to look at line 2. It reads:\r\n<p style=\"text-align: center\">=== Your_First_Scene ===<\/p>\r\nThe \u201c===\u201d (three equal signs) at the beginning of the line is your first piece of command syntax. Syntax, or \u201cmarkup,\u201d refers to the symbols or codes that communicate directly with the computer and are not meant to be seen by the reader.\r\n\r\nIn this case, using two or more equal signs (=) to begin the line tells the editor that you are creating a new knot. Using Inky, you can generate a pre-written knot snippet from the drop-down menu Ink &gt; Basic Structure &gt; Knot (main section).\r\n\r\nIncidentally, the syntax:\r\n<p style=\"text-align: center\">==Your_First_Scene<\/p>\r\nwill perform the same task as line 2 as it is written in the screenshot above. It will tell the machine to create a new knot named \u201cYour_First_Scene\u201d. While the above syntax is valid, the example in Illustration 5 (above) and the pre-written knot snippet (see Illustration 6 below) use three equal signs before and after the name of the knot, and we recommend that you follow this convention when using Ink (as we will in this book). This should be considered best practice for clarity and consistency: it helps to make knots more easily identifiable when writing longer works.\r\n<div class=\"textbox shaded\">\r\n<p style=\"text-align: left\"><strong>A NOTE ON NAMING:<\/strong> There is a universal naming convention, used for many elements in an Ink story, including knot names. There are three rules.<\/p>\r\n\r\n<ol>\r\n \t<li style=\"text-align: left\">The name may contain letters (capital and lower-case) and numbers<\/li>\r\n \t<li style=\"text-align: left\">The name may not contain spaces<\/li>\r\n \t<li>The name may not contain special characters other than the underscore (_)<\/li>\r\n<\/ol>\r\nKnots in Ink are bound by this naming convention. You could name the knot \u201cYourFirstScene\u201d or \u201cfirstScene\u201d, but in this book we will use underscoring when naming knots and other Inky elements that are bound by this naming convention.\r\n\r\n<\/div>\r\n&nbsp;\r\n\r\nWhen using the drop-down menu to create a new knot, you will see the following boilerplate text appear in the editing window:\r\n\r\n&nbsp;\r\n\r\n[caption id=\"attachment_60\" align=\"alignnone\" width=\"752\"]<img src=\"https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-6-300x79.png\" alt=\"\" class=\" wp-image-60\" width=\"752\" height=\"198\" \/> Illustration 6. Inky\u2019s pre-written knot template created by using the drop-down menu Ink &gt; Basic Structure &gt; Knot (main section)[\/caption]\r\n\r\nWhen using the pre-written knot snippet, you need only change \u201cknotName\u201d to something relevant for your story, and then replace the next line (\u201cThis is the content of the knot.\u201d) with text to be displayed to the reader.\r\n<h1><strong>Stitches<\/strong><\/h1>\r\nA [pb_glossary id=\"232\"]Stitch[\/pb_glossary] is a subsection within a knot. If we are continuing to think of our knots as scenes, then a stitch is a potential event within that scene. Thinking in terms of nodes on our story\u2019s map, if a knot is the biggest possible node, a stitch is a smaller node that exists completely inside a knot.\u00a0 A stitch is created using a single equal sign (=).\r\n\r\n&nbsp;\r\n\r\n[caption id=\"attachment_239\" align=\"alignnone\" width=\"738\"]<img src=\"https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-7-300x39.png\" alt=\"\" width=\"738\" height=\"96\" class=\" wp-image-239\" \/> Illustration 7. A line creating a stitch followed by the text that stitch contains[\/caption]\r\n\r\nLine 22 in Illustration 7 (above) from \u201cYour_First_Scene.ink\u201d reads:\r\n<p style=\"text-align: center\">= How_did_you_happen_by_here_again<\/p>\r\nand it creates a stitch by that name. Note that a stitch is bound by the same naming convention as a knot. Because the stitch exists within a knot, its name is appended to the knot\u2019s name with a period (.). The full name of this stitch reads:\r\n<p style=\"text-align: center\">Your_First_Scene.How_did_you_happen_by_here_again<\/p>\r\nA stitch can be referenced from within its home knot using only the stitch name. However, when referring to this stitch from within another knot, the full name is required\u2014that is, the name of the \u2018home\u2019 knot, a period, and the name of the stitch. Inky will assist with predictive text suggestions based on the names of existing knots and stitches as well.\r\n<div class=\"textbox shaded\">\r\n\r\n<strong>Tip: <\/strong>The example above quickly leads to a cumbersome, lengthy name for the stitch. When writing your playable stories, keep this in mind as you name your own knots and stitches. Inky\u2019s predictive text will help with the writing, but long, cumbersome names make for cluttered, difficult reading.\r\n\r\n<\/div>\r\nOne example of an efficient use for stitches is within a knot that offers several characters with whom the reader can interact. Each character can be assigned their own stitch, containing their own potential dialogue options. As you practice writing your own playable stories, try to think of ways that knots and stitches can help you to organize your nodes.\r\n<h1><strong>Diverts<\/strong><\/h1>\r\nYou create your story\u2019s flow between knots and stitches by adding [pb_glossary id=\"234\"]diverts[\/pb_glossary]. The command syntax for a divert is an arrow created with a dash and a greater-than symbol, \u201c -&gt; \u201d.\r\n\r\nDiverts reveal their true importance when paired with choices, which we will explore in the next section. Inserting choices into your playable story will allow you to create multiple paths for your reader to follow, but diverts are how you control the story\u2019s flow. They are the instructions determining which path <span style=\"font-size: 1em\">your playable story will<\/span><span style=\"text-align: initial;font-size: 1em\">\u00a0follow and when.<\/span>\r\n\r\nOur \u201cYour_First_Scene.ink\u201d example begins with a divert on line 1 because the entire story takes place within the knot \u201c=== Your_First_Scene ===\u201d.\r\n\r\n&nbsp;\r\n\r\n[caption id=\"attachment_62\" align=\"alignnone\" width=\"755\"]<img src=\"https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-8-300x91.png\" alt=\"\" class=\" wp-image-62\" width=\"755\" height=\"229\" \/> Illustration 8. The opening line of the Ink story uses a divert command to direct the flow to the first knot[\/caption]\r\n\r\n<div class=\"textbox textbox--exercises\"><header class=\"textbox__header\">\r\n<h1 class=\"textbox__title\">Exercise<\/h1>\r\n<\/header>\r\n<div class=\"textbox__content\">\r\n\r\nIf you are following along with the story \u201cYour_First_Scene.ink\u201d running in Inky, try the following experiment. Edit the text to remove line 1. You will see that the text in the preview pane disappears and is replaced by \u201cEnd of story\u201d.\r\n\r\nThis is because the text in lines 4 and 6, shown in Illustration 8 (above), are contained within the knot named \u201cYour_First_Scene\u201d. Without the divert in line 1 giving instructions for the flow to move to that knot, this Ink story has no content. The flow never begins.\r\n\r\nIf you then remove line 2, which creates the knot, the knot named \u201cYour_First_Scene\u201d no longer exists. Therefore, the text from lines 4 and 6 are no longer contained within a knot. However, now we have introduced a new error.\r\n\r\nKeep this exercise in mind as you begin writing playable stories of your own. Inky makes it easy to create nodes in the form of knots and stitches. Then, by inserting diverts into your story, you can create paths that will direct your story\u2019s flow from node to node. As you practice your use of knots and diverts, focus on thinking in terms of your story\u2019s flow. Your text is no longer limited to a single, predetermined path from beginning to end. You can now predetermine multiple paths from which the reader can choose (more on choices in the next section). Diverts, created with the command syntax \u201c -&gt; \u201c, are how you insert these branching paths into your playable story.\r\n\r\n<\/div>\r\n<\/div>\r\n&nbsp;\r\n<div class=\"textbox shaded\">\r\n\r\n<span style=\"color: #ff0000\"><strong>DANGER! DANGER!<\/strong><\/span> Be careful when creating diverts that you do not inadvertently create an infinite loop! <em>Never<\/em> add a divert directly after the name of a knot when that divert is for the knot it is within. (Remember Inky implements the lines in the Editor pane in the order they are written.) This means that you should always have some text between a knot name and a divert within that knot to the same knot.\r\n\r\nFor example, Inky will allow you to write:\r\n<p style=\"text-align: left;padding-left: 80px\">1 ===infiniteLoop===<\/p>\r\n<p style=\"text-align: left;padding-left: 80px\">2 -&gt; infiniteLoop<\/p>\r\nBecause Inky runs your story as it is being written (as is seen in the Preview pane), this will immediately put Inky into an infinite loop, with the knot diverting back into itself over and over again forever until you use your computer\u2019s task manager to Force Quit the program. <em>Your story, if unsaved, will then be unrecoverable.<\/em>\r\n\r\nCreating an infinite loop can happen quite accidentally during the writing process if, having decided to re-write a knot, you remove the first choice \u00a0and thereby unintentionally leave no text between the name of the knot and a divert back to the same knot.\r\n\r\nThis advice may be inspired by true events. Save often, and be vigilant about infinite loops!\r\n\r\n<\/div>\r\n<h1><strong>Choices<\/strong><\/h1>\r\nKnots and stitches are the major structural units of your story. Diverts are a way of constructing the flow between knots and stitches. However, what makes your story playable by the reader is the ability to make [pb_glossary id=\"241\"]choices[\/pb_glossary] in how they explore the map of your story.\r\n\r\nAllowing the reader to make choices is a key element of a playable story. And with Inky, it is easy to incorporate them into your text. When playing an Ink story, choices are presented to the reader as clickable links (hyperlinks) that will take them to another node in your story.\r\n<div class=\"textbox shaded\">\r\n\r\n<strong>Inky at Work:\u00a0<\/strong>When writing your playable stories, remember that hyperlinks and direct choices by the reader are not necessarily the only inputs that can direct the story's flow. Perhaps a more complex input mechanism could be added by a different team later in development. Remember that you are writing the story, but your story might eventually be attached to a much larger production, with a wider set of tools available for use.\r\n\r\nSome stories might operate on whether or not the reader chooses to take the left path or the right. But what if your story is intended to be attached to an action game? Maybe the story follows a different flow depending on whether or not the player succeeds in a battle. Maybe the story has three or four potential threads to follow depending on not only whether or not the player won or lost, but also on how well they performed. Rather than containing direct choices for the reader, your Ink story might be a game script to be used as a blueprint for a whole development team!\r\n\r\nWe are going to focus on the basics here, and explore choices in Inky in terms of dialogue and player choice. However, as you practice, try to think outside of the box. What other factors could decide how your story's flow will progress?\r\n\r\n<\/div>\r\nInk has two types of choices: [pb_glossary id=\"242\"]basic[\/pb_glossary] and [pb_glossary id=\"243\"]sticky[\/pb_glossary].\r\n\r\nA basic choice is added by placing an asterisk, (*), at the beginning of the line. Alternatively, you can use the drop-down menus and select Ink&gt;Choices&gt;Basic Choice and Inky will insert a pre-written snippet. Of course, you need at least two lines, each starting with asterisks in order to present the reader with an actual (either\/or) choice!\r\n\r\nThe example below demonstrates an elementary use of basic choices. In this case, each choice represents a compass direction, allowing the reader to move along four different threads.\r\n\r\n&nbsp;\r\n\r\n[caption id=\"attachment_63\" align=\"alignnone\" width=\"754\"]<img src=\"https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-9-300x142.png\" alt=\"\" class=\" wp-image-63\" width=\"754\" height=\"357\" \/> Illustration 9. A set of Ink choices that allow the reader to select one of four options[\/caption]\r\n\r\nNote that Inky has marked the lines with the diverts ( -&gt; ) with a red x. It is reporting an error because we have not yet created the knots for each of those named directions (so the diverts have nowhere to flow). This error reporting is helpful because it alerts you to parts of your story that require attention (for example, something still needs to be written). In the example above, each of the four directions could lead to different knots, each containing its own adventure for the reader to follow!\r\n<div class=\"textbox shaded\"><strong>Inky at Work: <\/strong>One quick note on technique... Instead of offering a choice between two or more options, you can use a solitary line beginning with an asterisk to create a prompt that will hold the flow of the Ink story until the reader interacts with it. Using this method, you can control the pace of your story by inserting a solitary prompt such as \u201cContinue\u201d, or \u201cNext\u201d, or \u201cPeek around the corner\u201d. Consider using this technique to create moments of dramatic tension and suspense!<\/div>\r\nAn option marked up as a basic choice in Ink will no longer be available or visible once it has been selected by the reader, even if the story diverts back to the knot or stitch that initially contained it. In other words, a basic choice is used up once it is selected.\r\n\r\nThe example in Illustration 10 below (from the stitch named \u201cHow_did_you_happen_by_here_again\u201d from \u201cYour_First_Scene.ink\u201d) shows one sticky choice on line 25 (we\u2019ll discuss sticky choices in a moment) and two basic choices on lines 28 and 34:\r\n\r\n&nbsp;\r\n\r\n[caption id=\"attachment_245\" align=\"alignnone\" width=\"748\"]<img src=\"https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-10-1-300x138.png\" alt=\"\" width=\"748\" height=\"344\" class=\" wp-image-245\" \/> Illustration 10. A portion of an Ink story containing choices, text to follow those choices, and diverts[\/caption]\r\n\r\nIf the reader initially selects the choice on line 34, the Ink story\u2019s flow continues to line 36, printing that text. The flow then continues to line 37, which diverts the flow back to the stitch named \u201cHow_did_you_happen_by_here_again\u201d (which these three choices are within). However, when this stitch is re-presented to the reader, there will only be two choices\u2014the ones the reader did not initially select\u2014instead of three. The choice on line 34 will not appear again because it has been \u2018used up.\u2019\r\n\r\nYou can prevent a choice from disappearing by making it a sticky choice. Sticky choices are created by using a plus sign, (+). Line 25 in Illustration 10 (above) is a sticky choice. As with basic choices, there is a drop-down menu available for sticky choices, Ink&gt;Choices&gt;Sticky Choice, that will add a boilerplate Sticky Choice snippet to the editor.\r\n\r\nIn the example in Illustration 11 below, the first choice the reader is presented with (on line 8) is a Sticky Choice. Every time the knot \u201c=== Your_First_Scene ===\u201d is re-presented to the reader, the reader can continue to select \u201cDo nothing,\u201d as many times as they would like: the divert (\u201c-&gt;Your_First_Scene\u201d) will always flow the story back to the beginning of the knot, and the option will still be there.\r\n\r\n&nbsp;\r\n\r\n[caption id=\"attachment_65\" align=\"alignnone\" width=\"753\"]<img src=\"https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-11-300x90.png\" alt=\"\" class=\" wp-image-65\" width=\"753\" height=\"226\" \/> Illustration 11. An example of a sticky choice[\/caption]\r\n<h1><strong>Display of Text in Inky<\/strong><\/h1>\r\nOn a basic level, the text you write into a numbered line in Inky equates to a paragraph of text. In other words, you can write as many words and sentences as you like into a numbered line in the editor pane, and they will appear as consecutive words and sentences in the preview pane (and, in turn, in the finished story that your reader will ultimately see). It is only when you press [Return] or [Enter] that the editor pane advances to the next numbered line. In turn, the text in the preview pane will show a line break between one block of text and the next. Used in this manner, Inky behaves somewhat similarly to a common word processor.\r\n\r\nFor example, consider the writing in the editor pane shown in Illustration 12 (below).\r\n\r\n&nbsp;\r\n\r\n[caption id=\"attachment_66\" align=\"alignnone\" width=\"751\"]<img src=\"https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-12-300x103.png\" alt=\"\" class=\" wp-image-66\" width=\"751\" height=\"258\" \/> Illustration 12. Writing in the editor pane separated across lines 1 and 2[\/caption]\r\n\r\nBy writing text as shown in the editor pane in Illustration 12 (above), the result in the preview pane will look like Illustration 13 (below).\r\n\r\n&nbsp;\r\n\r\n[caption id=\"attachment_67\" align=\"alignnone\" width=\"754\"]<img src=\"https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-13-300x140.png\" alt=\"\" class=\" wp-image-67\" width=\"754\" height=\"352\" \/> Illustration 13. The text in the preview pane that results from the editor pane in Illustration 12[\/caption]\r\n\r\nHowever, when you use Inky to introduce choices for the reader, you also give yourself more presentation options to consider.\r\n\r\nBy default during the reading of an Ink story, when a choice is selected (choices are by default presented in grey and centre-justified), the Ink story will first display whatever text is included as a part of that choice\u2019s numbered line. The flow then continues to the numbered lines that immediately follow that choice, displaying any text they contain, one after the other (quite quickly), until a new syntax command\u2014for example, a divert, or another choice\u2014is encountered.\r\n\r\nFor a demonstration, let us return to Inky\u2019s sample story, \u201cOnce upon a time\u2026\u201d, shown below.\r\n\r\n&nbsp;\r\n\r\n[caption id=\"attachment_68\" align=\"alignnone\" width=\"1024\"]<img src=\"https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-14-1024x128.png\" alt=\"\" class=\"wp-image-68 size-large\" width=\"1024\" height=\"128\" \/> Illustration 14. The story that appears when a new Inky file is opened, along with its accompanying preview pane[\/caption]\r\n\r\nIf we select the first choice listed, \u201cThere were two choices\u201d, then that line will be added to the story in the preview pane, followed by the text from line 6, and then the flow is directed to end. The result is shown in Illustration 15 (below).\r\n\r\n&nbsp;\r\n\r\n[caption id=\"attachment_69\" align=\"alignnone\" width=\"752\"]<img src=\"https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-15-300x95.png\" alt=\"\" class=\" wp-image-69\" width=\"752\" height=\"238\" \/> Illustration 15. The preview pane after selecting the first choice listed in Illustration 14[\/caption]\r\n\r\nBut what if you do not want the text from a choice, after it has been selected, to be added word-for-word to the story? Perhaps, instead, you would like something different to appear. Perhaps you would like the choice to disappear completely after the reader has made their selection.\r\n<div class=\"textbox shaded\"><strong>Inky at Work: <\/strong>There are numerous reasons why the text written in the choice could differ from the text produced in the output. For example, if you are offering a selection of items for the reader to \u201cpick up\u201d, you do not need the name of the object selected to then be floating on a line all its own between the paragraphs of your story. It would be better to have a paragraph describing the character picking up that object. In other cases, common in playable stories with dialogue between characters, you might not want the reader to know exactly what the character will say, verbatim, when they select \u201cMake a joke,\u201d or \u201cIntimidate them.\u201d As you work through the next section, try to think of other situations in which this function might be useful.<\/div>\r\nThankfully, Inky makes it easy to differentiate between the text contained in the choice itself and the text that displays to the reader as a result of making that choice.\r\n<h1><strong>Square Brackets<\/strong><\/h1>\r\nYou can control how the text in a choice displays before and after that choice is selected by using square brackets ([ and ]). There are a variety of techniques for controlling the display of text that make use of square brackets, but they all follow a few basic rules.\r\n<ol>\r\n \t<li>Anything that appears <strong>before<\/strong> the bracketed portion of the text will appear in <strong>BOTH<\/strong> <strong>the initial choice text and in the display text<\/strong>.<\/li>\r\n \t<li>Text that is enclosed <strong>within<\/strong> the brackets will <strong>ONLY display in the initial choice text<\/strong>. It will not be displayed after the choice is selected.<\/li>\r\n \t<li>Text that <strong>follows<\/strong> the bracketed text will <strong>ONLY appear in the display text<\/strong> after the choice has been selected.<\/li>\r\n<\/ol>\r\nAs mentioned previously, controlling the text that is displayed following the selection of a choice can be useful for writing playable stories that do not immediately reveal the outcome of the reader\u2019s decisions. Perhaps you want the choice described as \u201cStay quiet,\u201d but when the reader selects that prompt, the text reads, \u201cYou coldly stare them down, sweating them out with your silence.\u201d\r\n\r\nSquare bracket techniques can also be crucial for maintaining proper grammar and punctuation.\r\n\r\nThere are three potential uses for brackets demonstrated in the sample Ink story, \u201cYour_First_Scene.ink\u201d.\r\n\r\n&nbsp;\r\n\r\n[caption id=\"attachment_70\" align=\"alignnone\" width=\"755\"]<img src=\"https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-16-300x139.png\" alt=\"\" class=\" wp-image-70\" width=\"755\" height=\"350\" \/> Illustration 16. The choice in line 8 uses square brackets, which means the text will not be displayed after the choice is selected by the reader.[\/caption]\r\n\r\nThe text of line 8 is completely enclosed in straight brackets, as shown in Illustration 16 (above). Therefore, after it is selected, the text \u201cDo nothing\u201d will not appear in the display at all. Instead, the flow proceeds to print lines 9 through 15 before reaching a divert that takes the reader back to the beginning of the knot. The text in the preview pane, after \u201cDo nothing\u201d is selected, will look like Illustration 17 (below).\r\n\r\n&nbsp;\r\n\r\n[caption id=\"attachment_71\" align=\"alignnone\" width=\"746\"]<img src=\"https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-17-1024x660.png\" alt=\"\" class=\"wp-image-71 \" width=\"746\" height=\"480\" \/> Illustration 17. The preview pane after selecting \u201cDo nothing\u201d from Illustration 16[\/caption]\r\n\r\nYou can also use square brackets to create choices that allow your reader to select exact lines of spoken dialogue while also allowing you to maintain proper grammar and punctuation when they are displayed in the preview pane.\r\n\r\n&nbsp;\r\n\r\n[caption id=\"attachment_72\" align=\"alignnone\" width=\"750\"]<img src=\"https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-18-300x30.png\" alt=\"\" class=\" wp-image-72\" width=\"750\" height=\"75\" \/> Illustration 18. An example of a choice that uses an empty set of square brackets to fine-tune the text that will be displayed after the choice is selected by the reader.[\/caption]\r\n\r\nIllustration 18 (above) shows an example of using an empty set of square brackets. This is one method of adding additional text immediately following the choice text without that text displaying on a subsequent line. The text preceding the square brackets appears both before and after the choice is selected. The brackets, which contain no text, are included to prevent the text following them from displaying until after the reader has selected that choice. The initial text of the choice and the text displayed when this choice is selected are each shown below (Illustrations 19 and 20).\r\n\r\n&nbsp;\r\n\r\n[caption id=\"attachment_73\" align=\"alignnone\" width=\"756\"]<img src=\"https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-19-300x73.png\" alt=\"\" class=\" wp-image-73\" width=\"756\" height=\"184\" \/> Illustration 19. The choice from line 17 (Illustration 18) as it appears to the reader[\/caption]\r\n\r\n&nbsp;\r\n\r\n[caption id=\"attachment_74\" align=\"alignnone\" width=\"755\"]<img src=\"https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-20-300x60.png\" alt=\"\" class=\" wp-image-74\" width=\"755\" height=\"151\" \/> Illustrations 20. The text that is displayed after the choice from line 17 (Illustration 18) is selected[\/caption]\r\n\r\nIn Illustration 21 (below), lines 25, 28, and 34 each demonstrate another common use for square brackets.\r\n\r\n&nbsp;\r\n\r\n[caption id=\"attachment_248\" align=\"alignnone\" width=\"752\"]<img src=\"https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-21-1-300x95.png\" alt=\"\" width=\"752\" height=\"238\" class=\" wp-image-248\" \/> Illustration 21. Choices that display correct punctuation both before and after they are selected by the reader[\/caption]\r\n\r\nInstead of containing no text, as in the example in Illustration 18, this time the square brackets contain alternate punctuation. With line 25, when the choice text initially displays, it ends with a period (and a closing double quotation mark) after \u201cremember\u201d because that is the end of the sentence before being chosen. But when that choice is selected and the choice text is re-presented with the added \u201cyou say,\u201d the period after \u201cremember\u201d has to be changed to a comma (and closing double quotation mark) in order to include \u201cyou say\u201d in the sentence. You can see the result in Illustrations 22 and 23 (below). The same process is followed in lines 28 and 31.\r\n\r\n&nbsp;\r\n\r\n[caption id=\"attachment_76\" align=\"alignnone\" width=\"750\"]<img src=\"https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-22-300x88.png\" alt=\"\" class=\" wp-image-76\" width=\"750\" height=\"220\" \/> Illustration 22. The choices from Illustration 21 as they will appear to the reader[\/caption]\r\n\r\n&nbsp;\r\n\r\n[caption id=\"attachment_77\" align=\"alignnone\" width=\"750\"]<img src=\"https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-23-300x90.png\" alt=\"\" class=\" wp-image-77\" width=\"750\" height=\"225\" \/> Illustration 23. The text displayed to the reader after \u201cI don\u2019t remember.\u201d is selected[\/caption]\r\n\r\n<div class=\"textbox textbox--key-takeaways\"><header class=\"textbox__header\">\r\n<h1 class=\"textbox__title\">Review<\/h1>\r\n<\/header>\r\n<div class=\"textbox__content\">\r\n<ul>\r\n \t<li>Stories written in Ink are structured by knots and stitches. The flow of the story follows the threads connecting these nodes of text. You can direct the flow by introducing diverts.<\/li>\r\n \t<li>Diverts are often placed after choices, allowing the reader to craft their own path through the playable story. Choices can be basic, which means they are single-use options that disappear after having been selected, or they may be sticky, meaning they can be repeatedly selected by the reader.<\/li>\r\n \t<li>Choices, depending on how they are written by the author, also impact the resulting text displayed to the reader. The result of a choice may include the same text as the choice itself, additional text that is revealed after the choice is selected, or a mixture of the two.<\/li>\r\n<\/ul>\r\n<\/div>\r\n<\/div>\r\n<h1><strong>Putting It All Together<\/strong><\/h1>\r\nThe elements presented in this chapter make up the basic tools used to create branching narratives with Ink.\r\n\r\nBy breaking your story up into separate knots, you create a map through which your reader can travel along the various flows you have created. You can think of this literally, offering choices asking the reader if they would like to go left or right, up or down. Or perhaps your reader\u2019s journey will be a bit more philosophical. Does your reader choose to confront the beast guarding the door? Or do you give them the option to use cunning and stealth to slip past the monster?\r\n\r\nCan you think of some situations in which it would be important to use a sticky choice instead of a basic choice?\r\n\r\nThese are examples of just some of the most basic uses of Ink and Inky. Try to make a scene for yourself. Play around in the software. Experiment. Practice.\r\n\r\nIn the next chapter, we will add a few more tools to the belt, allowing for a more nuanced presentation of the text and the ways it can be changed based on the reader\u2019s choices, as well as adding another layer of depth onto the choices themselves.\r\n\r\n&nbsp;","rendered":"<h1><strong>Setting the Scene<\/strong><\/h1>\n<p>Playable stories written in Ink need a beginning. So do lessons.<\/p>\n<p>So before you begin writing your first scene, why not take a moment to play \u201c<a href=\"https:\/\/jerrrber.itch.io\/your-first-scene\" target=\"_blank\" rel=\"noopener\">Your First Scene<\/a>\u201d!<\/p>\n<p>Once you are through, you can download the file: <a href=\"https:\/\/jerrrber.itch.io\/your-first-scene-ink-file\" target=\"_blank\" rel=\"noopener\">Your First Scene.ink<\/a> and open it in Inky. We will be referencing this story throughout the lesson.<\/p>\n<div class=\"textbox textbox--learning-objectives\">\n<header class=\"textbox__header\">\n<h1 class=\"textbox__title\">Learning Objectives<\/h1>\n<\/header>\n<div class=\"textbox__content\">\n<ul>\n<li>To differentiate between Knots and Stitches, and be able create and name them using the correct command syntax;<\/li>\n<li>To understand Diverts, and to generate Diverts using the correct command syntax;<\/li>\n<li>To differentiate between Basic Choices and Sticky Choices;<\/li>\n<li>To generate Choices using the correct command syntax;<\/li>\n<li>To differentiate between Choice Text and Output Text, and to utilize Mixed Output commands in order to generate both.<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<h1><strong>Knots<\/strong><\/h1>\n<p><button class=\"glossary-term\" aria-describedby=\"110-220\">Knots<\/button> are the largest units of an Ink story. They are typically bigger than paragraphs or pages (or screens), and they may contain several of both. However, it seems inappropriate to compare them to something as large as chapters. A chapter of a story might necessitate multiple knots. Perhaps it is best to think of them as scenes in a playscript.<\/p>\n<p>As you will see, knots are, well\u2026 knots. They are the intersection of multiple <button class=\"glossary-term\" aria-describedby=\"110-221\">threads<\/button>, or perhaps they are bumps along a single thread. They are what you will build your stories out of. In \u201cYour First Scene,\u201d there is exactly one knot.<\/p>\n<p>&nbsp;<\/p>\n<figure id=\"attachment_236\" aria-describedby=\"caption-attachment-236\" style=\"width: 750px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-5-1-300x48.png\" alt=\"\" width=\"750\" height=\"120\" class=\"wp-image-236\" srcset=\"https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-5-1-300x48.png 300w, https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-5-1-65x10.png 65w, https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-5-1-225x36.png 225w, https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-5-1-350x56.png 350w, https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-5-1.png 600w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><figcaption id=\"caption-attachment-236\" class=\"wp-caption-text\">Illustration 5. The knot from \u201cYour First Scene.ink\u201d<\/figcaption><\/figure>\n<p>Skip line 1 for now; we want to look at line 2. It reads:<\/p>\n<p style=\"text-align: center\">=== Your_First_Scene ===<\/p>\n<p>The \u201c===\u201d (three equal signs) at the beginning of the line is your first piece of command syntax. Syntax, or \u201cmarkup,\u201d refers to the symbols or codes that communicate directly with the computer and are not meant to be seen by the reader.<\/p>\n<p>In this case, using two or more equal signs (=) to begin the line tells the editor that you are creating a new knot. Using Inky, you can generate a pre-written knot snippet from the drop-down menu Ink &gt; Basic Structure &gt; Knot (main section).<\/p>\n<p>Incidentally, the syntax:<\/p>\n<p style=\"text-align: center\">==Your_First_Scene<\/p>\n<p>will perform the same task as line 2 as it is written in the screenshot above. It will tell the machine to create a new knot named \u201cYour_First_Scene\u201d. While the above syntax is valid, the example in Illustration 5 (above) and the pre-written knot snippet (see Illustration 6 below) use three equal signs before and after the name of the knot, and we recommend that you follow this convention when using Ink (as we will in this book). This should be considered best practice for clarity and consistency: it helps to make knots more easily identifiable when writing longer works.<\/p>\n<div class=\"textbox shaded\">\n<p style=\"text-align: left\"><strong>A NOTE ON NAMING:<\/strong> There is a universal naming convention, used for many elements in an Ink story, including knot names. There are three rules.<\/p>\n<ol>\n<li style=\"text-align: left\">The name may contain letters (capital and lower-case) and numbers<\/li>\n<li style=\"text-align: left\">The name may not contain spaces<\/li>\n<li>The name may not contain special characters other than the underscore (_)<\/li>\n<\/ol>\n<p>Knots in Ink are bound by this naming convention. You could name the knot \u201cYourFirstScene\u201d or \u201cfirstScene\u201d, but in this book we will use underscoring when naming knots and other Inky elements that are bound by this naming convention.<\/p>\n<\/div>\n<p>&nbsp;<\/p>\n<p>When using the drop-down menu to create a new knot, you will see the following boilerplate text appear in the editing window:<\/p>\n<p>&nbsp;<\/p>\n<figure id=\"attachment_60\" aria-describedby=\"caption-attachment-60\" style=\"width: 752px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-6-300x79.png\" alt=\"\" class=\"wp-image-60\" width=\"752\" height=\"198\" srcset=\"https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-6-300x79.png 300w, https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-6-1024x270.png 1024w, https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-6-768x202.png 768w, https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-6-65x17.png 65w, https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-6-225x59.png 225w, https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-6-350x92.png 350w, https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-6.png 1086w\" sizes=\"auto, (max-width: 752px) 100vw, 752px\" \/><figcaption id=\"caption-attachment-60\" class=\"wp-caption-text\">Illustration 6. Inky\u2019s pre-written knot template created by using the drop-down menu Ink &gt; Basic Structure &gt; Knot (main section)<\/figcaption><\/figure>\n<p>When using the pre-written knot snippet, you need only change \u201cknotName\u201d to something relevant for your story, and then replace the next line (\u201cThis is the content of the knot.\u201d) with text to be displayed to the reader.<\/p>\n<h1><strong>Stitches<\/strong><\/h1>\n<p>A <button class=\"glossary-term\" aria-describedby=\"110-232\">Stitch<\/button> is a subsection within a knot. If we are continuing to think of our knots as scenes, then a stitch is a potential event within that scene. Thinking in terms of nodes on our story\u2019s map, if a knot is the biggest possible node, a stitch is a smaller node that exists completely inside a knot.\u00a0 A stitch is created using a single equal sign (=).<\/p>\n<p>&nbsp;<\/p>\n<figure id=\"attachment_239\" aria-describedby=\"caption-attachment-239\" style=\"width: 738px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-7-300x39.png\" alt=\"\" width=\"738\" height=\"96\" class=\"wp-image-239\" srcset=\"https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-7-300x39.png 300w, https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-7-65x8.png 65w, https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-7-225x29.png 225w, https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-7-350x45.png 350w, https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-7.png 748w\" sizes=\"auto, (max-width: 738px) 100vw, 738px\" \/><figcaption id=\"caption-attachment-239\" class=\"wp-caption-text\">Illustration 7. A line creating a stitch followed by the text that stitch contains<\/figcaption><\/figure>\n<p>Line 22 in Illustration 7 (above) from \u201cYour_First_Scene.ink\u201d reads:<\/p>\n<p style=\"text-align: center\">= How_did_you_happen_by_here_again<\/p>\n<p>and it creates a stitch by that name. Note that a stitch is bound by the same naming convention as a knot. Because the stitch exists within a knot, its name is appended to the knot\u2019s name with a period (.). The full name of this stitch reads:<\/p>\n<p style=\"text-align: center\">Your_First_Scene.How_did_you_happen_by_here_again<\/p>\n<p>A stitch can be referenced from within its home knot using only the stitch name. However, when referring to this stitch from within another knot, the full name is required\u2014that is, the name of the \u2018home\u2019 knot, a period, and the name of the stitch. Inky will assist with predictive text suggestions based on the names of existing knots and stitches as well.<\/p>\n<div class=\"textbox shaded\">\n<p><strong>Tip: <\/strong>The example above quickly leads to a cumbersome, lengthy name for the stitch. When writing your playable stories, keep this in mind as you name your own knots and stitches. Inky\u2019s predictive text will help with the writing, but long, cumbersome names make for cluttered, difficult reading.<\/p>\n<\/div>\n<p>One example of an efficient use for stitches is within a knot that offers several characters with whom the reader can interact. Each character can be assigned their own stitch, containing their own potential dialogue options. As you practice writing your own playable stories, try to think of ways that knots and stitches can help you to organize your nodes.<\/p>\n<h1><strong>Diverts<\/strong><\/h1>\n<p>You create your story\u2019s flow between knots and stitches by adding <button class=\"glossary-term\" aria-describedby=\"110-234\">diverts<\/button>. The command syntax for a divert is an arrow created with a dash and a greater-than symbol, \u201c -&gt; \u201d.<\/p>\n<p>Diverts reveal their true importance when paired with choices, which we will explore in the next section. Inserting choices into your playable story will allow you to create multiple paths for your reader to follow, but diverts are how you control the story\u2019s flow. They are the instructions determining which path <span style=\"font-size: 1em\">your playable story will<\/span><span style=\"text-align: initial;font-size: 1em\">\u00a0follow and when.<\/span><\/p>\n<p>Our \u201cYour_First_Scene.ink\u201d example begins with a divert on line 1 because the entire story takes place within the knot \u201c=== Your_First_Scene ===\u201d.<\/p>\n<p>&nbsp;<\/p>\n<figure id=\"attachment_62\" aria-describedby=\"caption-attachment-62\" style=\"width: 755px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-8-300x91.png\" alt=\"\" class=\"wp-image-62\" width=\"755\" height=\"229\" srcset=\"https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-8-300x91.png 300w, https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-8-65x20.png 65w, https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-8-225x68.png 225w, https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-8-350x106.png 350w, https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-8.png 756w\" sizes=\"auto, (max-width: 755px) 100vw, 755px\" \/><figcaption id=\"caption-attachment-62\" class=\"wp-caption-text\">Illustration 8. The opening line of the Ink story uses a divert command to direct the flow to the first knot<\/figcaption><\/figure>\n<div class=\"textbox textbox--exercises\">\n<header class=\"textbox__header\">\n<h1 class=\"textbox__title\">Exercise<\/h1>\n<\/header>\n<div class=\"textbox__content\">\n<p>If you are following along with the story \u201cYour_First_Scene.ink\u201d running in Inky, try the following experiment. Edit the text to remove line 1. You will see that the text in the preview pane disappears and is replaced by \u201cEnd of story\u201d.<\/p>\n<p>This is because the text in lines 4 and 6, shown in Illustration 8 (above), are contained within the knot named \u201cYour_First_Scene\u201d. Without the divert in line 1 giving instructions for the flow to move to that knot, this Ink story has no content. The flow never begins.<\/p>\n<p>If you then remove line 2, which creates the knot, the knot named \u201cYour_First_Scene\u201d no longer exists. Therefore, the text from lines 4 and 6 are no longer contained within a knot. However, now we have introduced a new error.<\/p>\n<p>Keep this exercise in mind as you begin writing playable stories of your own. Inky makes it easy to create nodes in the form of knots and stitches. Then, by inserting diverts into your story, you can create paths that will direct your story\u2019s flow from node to node. As you practice your use of knots and diverts, focus on thinking in terms of your story\u2019s flow. Your text is no longer limited to a single, predetermined path from beginning to end. You can now predetermine multiple paths from which the reader can choose (more on choices in the next section). Diverts, created with the command syntax \u201c -&gt; \u201c, are how you insert these branching paths into your playable story.<\/p>\n<\/div>\n<\/div>\n<p>&nbsp;<\/p>\n<div class=\"textbox shaded\">\n<p><span style=\"color: #ff0000\"><strong>DANGER! DANGER!<\/strong><\/span> Be careful when creating diverts that you do not inadvertently create an infinite loop! <em>Never<\/em> add a divert directly after the name of a knot when that divert is for the knot it is within. (Remember Inky implements the lines in the Editor pane in the order they are written.) This means that you should always have some text between a knot name and a divert within that knot to the same knot.<\/p>\n<p>For example, Inky will allow you to write:<\/p>\n<p style=\"text-align: left;padding-left: 80px\">1 ===infiniteLoop===<\/p>\n<p style=\"text-align: left;padding-left: 80px\">2 -&gt; infiniteLoop<\/p>\n<p>Because Inky runs your story as it is being written (as is seen in the Preview pane), this will immediately put Inky into an infinite loop, with the knot diverting back into itself over and over again forever until you use your computer\u2019s task manager to Force Quit the program. <em>Your story, if unsaved, will then be unrecoverable.<\/em><\/p>\n<p>Creating an infinite loop can happen quite accidentally during the writing process if, having decided to re-write a knot, you remove the first choice \u00a0and thereby unintentionally leave no text between the name of the knot and a divert back to the same knot.<\/p>\n<p>This advice may be inspired by true events. Save often, and be vigilant about infinite loops!<\/p>\n<\/div>\n<h1><strong>Choices<\/strong><\/h1>\n<p>Knots and stitches are the major structural units of your story. Diverts are a way of constructing the flow between knots and stitches. However, what makes your story playable by the reader is the ability to make <button class=\"glossary-term\" aria-describedby=\"110-241\">choices<\/button> in how they explore the map of your story.<\/p>\n<p>Allowing the reader to make choices is a key element of a playable story. And with Inky, it is easy to incorporate them into your text. When playing an Ink story, choices are presented to the reader as clickable links (hyperlinks) that will take them to another node in your story.<\/p>\n<div class=\"textbox shaded\">\n<p><strong>Inky at Work:\u00a0<\/strong>When writing your playable stories, remember that hyperlinks and direct choices by the reader are not necessarily the only inputs that can direct the story&#8217;s flow. Perhaps a more complex input mechanism could be added by a different team later in development. Remember that you are writing the story, but your story might eventually be attached to a much larger production, with a wider set of tools available for use.<\/p>\n<p>Some stories might operate on whether or not the reader chooses to take the left path or the right. But what if your story is intended to be attached to an action game? Maybe the story follows a different flow depending on whether or not the player succeeds in a battle. Maybe the story has three or four potential threads to follow depending on not only whether or not the player won or lost, but also on how well they performed. Rather than containing direct choices for the reader, your Ink story might be a game script to be used as a blueprint for a whole development team!<\/p>\n<p>We are going to focus on the basics here, and explore choices in Inky in terms of dialogue and player choice. However, as you practice, try to think outside of the box. What other factors could decide how your story&#8217;s flow will progress?<\/p>\n<\/div>\n<p>Ink has two types of choices: <button class=\"glossary-term\" aria-describedby=\"110-242\">basic<\/button> and <button class=\"glossary-term\" aria-describedby=\"110-243\">sticky<\/button>.<\/p>\n<p>A basic choice is added by placing an asterisk, (*), at the beginning of the line. Alternatively, you can use the drop-down menus and select Ink&gt;Choices&gt;Basic Choice and Inky will insert a pre-written snippet. Of course, you need at least two lines, each starting with asterisks in order to present the reader with an actual (either\/or) choice!<\/p>\n<p>The example below demonstrates an elementary use of basic choices. In this case, each choice represents a compass direction, allowing the reader to move along four different threads.<\/p>\n<p>&nbsp;<\/p>\n<figure id=\"attachment_63\" aria-describedby=\"caption-attachment-63\" style=\"width: 754px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-9-300x142.png\" alt=\"\" class=\"wp-image-63\" width=\"754\" height=\"357\" srcset=\"https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-9-300x142.png 300w, https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-9-1024x484.png 1024w, https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-9-768x363.png 768w, https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-9-65x31.png 65w, https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-9-225x106.png 225w, https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-9-350x165.png 350w, https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-9.png 1282w\" sizes=\"auto, (max-width: 754px) 100vw, 754px\" \/><figcaption id=\"caption-attachment-63\" class=\"wp-caption-text\">Illustration 9. A set of Ink choices that allow the reader to select one of four options<\/figcaption><\/figure>\n<p>Note that Inky has marked the lines with the diverts ( -&gt; ) with a red x. It is reporting an error because we have not yet created the knots for each of those named directions (so the diverts have nowhere to flow). This error reporting is helpful because it alerts you to parts of your story that require attention (for example, something still needs to be written). In the example above, each of the four directions could lead to different knots, each containing its own adventure for the reader to follow!<\/p>\n<div class=\"textbox shaded\"><strong>Inky at Work: <\/strong>One quick note on technique&#8230; Instead of offering a choice between two or more options, you can use a solitary line beginning with an asterisk to create a prompt that will hold the flow of the Ink story until the reader interacts with it. Using this method, you can control the pace of your story by inserting a solitary prompt such as \u201cContinue\u201d, or \u201cNext\u201d, or \u201cPeek around the corner\u201d. Consider using this technique to create moments of dramatic tension and suspense!<\/div>\n<p>An option marked up as a basic choice in Ink will no longer be available or visible once it has been selected by the reader, even if the story diverts back to the knot or stitch that initially contained it. In other words, a basic choice is used up once it is selected.<\/p>\n<p>The example in Illustration 10 below (from the stitch named \u201cHow_did_you_happen_by_here_again\u201d from \u201cYour_First_Scene.ink\u201d) shows one sticky choice on line 25 (we\u2019ll discuss sticky choices in a moment) and two basic choices on lines 28 and 34:<\/p>\n<p>&nbsp;<\/p>\n<figure id=\"attachment_245\" aria-describedby=\"caption-attachment-245\" style=\"width: 748px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-10-1-300x138.png\" alt=\"\" width=\"748\" height=\"344\" class=\"wp-image-245\" srcset=\"https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-10-1-300x138.png 300w, https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-10-1-1024x471.png 1024w, https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-10-1-768x353.png 768w, https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-10-1-65x30.png 65w, https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-10-1-225x104.png 225w, https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-10-1-350x161.png 350w, https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-10-1.png 1334w\" sizes=\"auto, (max-width: 748px) 100vw, 748px\" \/><figcaption id=\"caption-attachment-245\" class=\"wp-caption-text\">Illustration 10. A portion of an Ink story containing choices, text to follow those choices, and diverts<\/figcaption><\/figure>\n<p>If the reader initially selects the choice on line 34, the Ink story\u2019s flow continues to line 36, printing that text. The flow then continues to line 37, which diverts the flow back to the stitch named \u201cHow_did_you_happen_by_here_again\u201d (which these three choices are within). However, when this stitch is re-presented to the reader, there will only be two choices\u2014the ones the reader did not initially select\u2014instead of three. The choice on line 34 will not appear again because it has been \u2018used up.\u2019<\/p>\n<p>You can prevent a choice from disappearing by making it a sticky choice. Sticky choices are created by using a plus sign, (+). Line 25 in Illustration 10 (above) is a sticky choice. As with basic choices, there is a drop-down menu available for sticky choices, Ink&gt;Choices&gt;Sticky Choice, that will add a boilerplate Sticky Choice snippet to the editor.<\/p>\n<p>In the example in Illustration 11 below, the first choice the reader is presented with (on line 8) is a Sticky Choice. Every time the knot \u201c=== Your_First_Scene ===\u201d is re-presented to the reader, the reader can continue to select \u201cDo nothing,\u201d as many times as they would like: the divert (\u201c-&gt;Your_First_Scene\u201d) will always flow the story back to the beginning of the knot, and the option will still be there.<\/p>\n<p>&nbsp;<\/p>\n<figure id=\"attachment_65\" aria-describedby=\"caption-attachment-65\" style=\"width: 753px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-11-300x90.png\" alt=\"\" class=\"wp-image-65\" width=\"753\" height=\"226\" srcset=\"https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-11-300x90.png 300w, https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-11-1024x306.png 1024w, https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-11-768x230.png 768w, https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-11-65x19.png 65w, https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-11-225x67.png 225w, https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-11-350x105.png 350w, https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-11.png 1258w\" sizes=\"auto, (max-width: 753px) 100vw, 753px\" \/><figcaption id=\"caption-attachment-65\" class=\"wp-caption-text\">Illustration 11. An example of a sticky choice<\/figcaption><\/figure>\n<h1><strong>Display of Text in Inky<\/strong><\/h1>\n<p>On a basic level, the text you write into a numbered line in Inky equates to a paragraph of text. In other words, you can write as many words and sentences as you like into a numbered line in the editor pane, and they will appear as consecutive words and sentences in the preview pane (and, in turn, in the finished story that your reader will ultimately see). It is only when you press [Return] or [Enter] that the editor pane advances to the next numbered line. In turn, the text in the preview pane will show a line break between one block of text and the next. Used in this manner, Inky behaves somewhat similarly to a common word processor.<\/p>\n<p>For example, consider the writing in the editor pane shown in Illustration 12 (below).<\/p>\n<p>&nbsp;<\/p>\n<figure id=\"attachment_66\" aria-describedby=\"caption-attachment-66\" style=\"width: 751px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-12-300x103.png\" alt=\"\" class=\"wp-image-66\" width=\"751\" height=\"258\" srcset=\"https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-12-300x103.png 300w, https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-12-1024x353.png 1024w, https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-12-768x264.png 768w, https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-12-65x22.png 65w, https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-12-225x77.png 225w, https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-12-350x121.png 350w, https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-12.png 1266w\" sizes=\"auto, (max-width: 751px) 100vw, 751px\" \/><figcaption id=\"caption-attachment-66\" class=\"wp-caption-text\">Illustration 12. Writing in the editor pane separated across lines 1 and 2<\/figcaption><\/figure>\n<p>By writing text as shown in the editor pane in Illustration 12 (above), the result in the preview pane will look like Illustration 13 (below).<\/p>\n<p>&nbsp;<\/p>\n<figure id=\"attachment_67\" aria-describedby=\"caption-attachment-67\" style=\"width: 754px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-13-300x140.png\" alt=\"\" class=\"wp-image-67\" width=\"754\" height=\"352\" srcset=\"https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-13-300x140.png 300w, https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-13-1024x479.png 1024w, https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-13-768x359.png 768w, https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-13-65x30.png 65w, https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-13-225x105.png 225w, https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-13-350x164.png 350w, https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-13.png 1150w\" sizes=\"auto, (max-width: 754px) 100vw, 754px\" \/><figcaption id=\"caption-attachment-67\" class=\"wp-caption-text\">Illustration 13. The text in the preview pane that results from the editor pane in Illustration 12<\/figcaption><\/figure>\n<p>However, when you use Inky to introduce choices for the reader, you also give yourself more presentation options to consider.<\/p>\n<p>By default during the reading of an Ink story, when a choice is selected (choices are by default presented in grey and centre-justified), the Ink story will first display whatever text is included as a part of that choice\u2019s numbered line. The flow then continues to the numbered lines that immediately follow that choice, displaying any text they contain, one after the other (quite quickly), until a new syntax command\u2014for example, a divert, or another choice\u2014is encountered.<\/p>\n<p>For a demonstration, let us return to Inky\u2019s sample story, \u201cOnce upon a time\u2026\u201d, shown below.<\/p>\n<p>&nbsp;<\/p>\n<figure id=\"attachment_68\" aria-describedby=\"caption-attachment-68\" style=\"width: 1024px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-14-1024x128.png\" alt=\"\" class=\"wp-image-68 size-large\" width=\"1024\" height=\"128\" srcset=\"https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-14-1024x128.png 1024w, https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-14-300x38.png 300w, https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-14-768x96.png 768w, https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-14-1536x193.png 1536w, https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-14-2048x257.png 2048w, https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-14-65x8.png 65w, https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-14-225x28.png 225w, https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-14-350x44.png 350w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption id=\"caption-attachment-68\" class=\"wp-caption-text\">Illustration 14. The story that appears when a new Inky file is opened, along with its accompanying preview pane<\/figcaption><\/figure>\n<p>If we select the first choice listed, \u201cThere were two choices\u201d, then that line will be added to the story in the preview pane, followed by the text from line 6, and then the flow is directed to end. The result is shown in Illustration 15 (below).<\/p>\n<p>&nbsp;<\/p>\n<figure id=\"attachment_69\" aria-describedby=\"caption-attachment-69\" style=\"width: 752px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-15-300x95.png\" alt=\"\" class=\"wp-image-69\" width=\"752\" height=\"238\" srcset=\"https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-15-300x95.png 300w, https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-15-1024x324.png 1024w, https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-15-768x243.png 768w, https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-15-65x21.png 65w, https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-15-225x71.png 225w, https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-15-350x111.png 350w, https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-15.png 1106w\" sizes=\"auto, (max-width: 752px) 100vw, 752px\" \/><figcaption id=\"caption-attachment-69\" class=\"wp-caption-text\">Illustration 15. The preview pane after selecting the first choice listed in Illustration 14<\/figcaption><\/figure>\n<p>But what if you do not want the text from a choice, after it has been selected, to be added word-for-word to the story? Perhaps, instead, you would like something different to appear. Perhaps you would like the choice to disappear completely after the reader has made their selection.<\/p>\n<div class=\"textbox shaded\"><strong>Inky at Work: <\/strong>There are numerous reasons why the text written in the choice could differ from the text produced in the output. For example, if you are offering a selection of items for the reader to \u201cpick up\u201d, you do not need the name of the object selected to then be floating on a line all its own between the paragraphs of your story. It would be better to have a paragraph describing the character picking up that object. In other cases, common in playable stories with dialogue between characters, you might not want the reader to know exactly what the character will say, verbatim, when they select \u201cMake a joke,\u201d or \u201cIntimidate them.\u201d As you work through the next section, try to think of other situations in which this function might be useful.<\/div>\n<p>Thankfully, Inky makes it easy to differentiate between the text contained in the choice itself and the text that displays to the reader as a result of making that choice.<\/p>\n<h1><strong>Square Brackets<\/strong><\/h1>\n<p>You can control how the text in a choice displays before and after that choice is selected by using square brackets ([ and ]). There are a variety of techniques for controlling the display of text that make use of square brackets, but they all follow a few basic rules.<\/p>\n<ol>\n<li>Anything that appears <strong>before<\/strong> the bracketed portion of the text will appear in <strong>BOTH<\/strong> <strong>the initial choice text and in the display text<\/strong>.<\/li>\n<li>Text that is enclosed <strong>within<\/strong> the brackets will <strong>ONLY display in the initial choice text<\/strong>. It will not be displayed after the choice is selected.<\/li>\n<li>Text that <strong>follows<\/strong> the bracketed text will <strong>ONLY appear in the display text<\/strong> after the choice has been selected.<\/li>\n<\/ol>\n<p>As mentioned previously, controlling the text that is displayed following the selection of a choice can be useful for writing playable stories that do not immediately reveal the outcome of the reader\u2019s decisions. Perhaps you want the choice described as \u201cStay quiet,\u201d but when the reader selects that prompt, the text reads, \u201cYou coldly stare them down, sweating them out with your silence.\u201d<\/p>\n<p>Square bracket techniques can also be crucial for maintaining proper grammar and punctuation.<\/p>\n<p>There are three potential uses for brackets demonstrated in the sample Ink story, \u201cYour_First_Scene.ink\u201d.<\/p>\n<p>&nbsp;<\/p>\n<figure id=\"attachment_70\" aria-describedby=\"caption-attachment-70\" style=\"width: 755px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-16-300x139.png\" alt=\"\" class=\"wp-image-70\" width=\"755\" height=\"350\" srcset=\"https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-16-300x139.png 300w, https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-16-1024x474.png 1024w, https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-16-768x356.png 768w, https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-16-65x30.png 65w, https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-16-225x104.png 225w, https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-16-350x162.png 350w, https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-16.png 1256w\" sizes=\"auto, (max-width: 755px) 100vw, 755px\" \/><figcaption id=\"caption-attachment-70\" class=\"wp-caption-text\">Illustration 16. The choice in line 8 uses square brackets, which means the text will not be displayed after the choice is selected by the reader.<\/figcaption><\/figure>\n<p>The text of line 8 is completely enclosed in straight brackets, as shown in Illustration 16 (above). Therefore, after it is selected, the text \u201cDo nothing\u201d will not appear in the display at all. Instead, the flow proceeds to print lines 9 through 15 before reaching a divert that takes the reader back to the beginning of the knot. The text in the preview pane, after \u201cDo nothing\u201d is selected, will look like Illustration 17 (below).<\/p>\n<p>&nbsp;<\/p>\n<figure id=\"attachment_71\" aria-describedby=\"caption-attachment-71\" style=\"width: 746px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-17-1024x660.png\" alt=\"\" class=\"wp-image-71\" width=\"746\" height=\"480\" srcset=\"https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-17-1024x660.png 1024w, https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-17-300x193.png 300w, https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-17-768x495.png 768w, https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-17-65x42.png 65w, https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-17-225x145.png 225w, https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-17-350x226.png 350w, https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-17.png 1198w\" sizes=\"auto, (max-width: 746px) 100vw, 746px\" \/><figcaption id=\"caption-attachment-71\" class=\"wp-caption-text\">Illustration 17. The preview pane after selecting \u201cDo nothing\u201d from Illustration 16<\/figcaption><\/figure>\n<p>You can also use square brackets to create choices that allow your reader to select exact lines of spoken dialogue while also allowing you to maintain proper grammar and punctuation when they are displayed in the preview pane.<\/p>\n<p>&nbsp;<\/p>\n<figure id=\"attachment_72\" aria-describedby=\"caption-attachment-72\" style=\"width: 750px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-18-300x30.png\" alt=\"\" class=\"wp-image-72\" width=\"750\" height=\"75\" srcset=\"https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-18-300x30.png 300w, https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-18-65x7.png 65w, https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-18-225x23.png 225w, https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-18-350x35.png 350w, https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-18.png 636w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><figcaption id=\"caption-attachment-72\" class=\"wp-caption-text\">Illustration 18. An example of a choice that uses an empty set of square brackets to fine-tune the text that will be displayed after the choice is selected by the reader.<\/figcaption><\/figure>\n<p>Illustration 18 (above) shows an example of using an empty set of square brackets. This is one method of adding additional text immediately following the choice text without that text displaying on a subsequent line. The text preceding the square brackets appears both before and after the choice is selected. The brackets, which contain no text, are included to prevent the text following them from displaying until after the reader has selected that choice. The initial text of the choice and the text displayed when this choice is selected are each shown below (Illustrations 19 and 20).<\/p>\n<p>&nbsp;<\/p>\n<figure id=\"attachment_73\" aria-describedby=\"caption-attachment-73\" style=\"width: 756px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-19-300x73.png\" alt=\"\" class=\"wp-image-73\" width=\"756\" height=\"184\" srcset=\"https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-19-300x73.png 300w, https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-19-1024x248.png 1024w, https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-19-768x186.png 768w, https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-19-65x16.png 65w, https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-19-225x54.png 225w, https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-19-350x85.png 350w, https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-19.png 1156w\" sizes=\"auto, (max-width: 756px) 100vw, 756px\" \/><figcaption id=\"caption-attachment-73\" class=\"wp-caption-text\">Illustration 19. The choice from line 17 (Illustration 18) as it appears to the reader<\/figcaption><\/figure>\n<p>&nbsp;<\/p>\n<figure id=\"attachment_74\" aria-describedby=\"caption-attachment-74\" style=\"width: 755px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-20-300x60.png\" alt=\"\" class=\"wp-image-74\" width=\"755\" height=\"151\" srcset=\"https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-20-300x60.png 300w, https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-20-1024x206.png 1024w, https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-20-768x155.png 768w, https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-20-65x13.png 65w, https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-20-225x45.png 225w, https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-20-350x70.png 350w, https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-20.png 1162w\" sizes=\"auto, (max-width: 755px) 100vw, 755px\" \/><figcaption id=\"caption-attachment-74\" class=\"wp-caption-text\">Illustrations 20. The text that is displayed after the choice from line 17 (Illustration 18) is selected<\/figcaption><\/figure>\n<p>In Illustration 21 (below), lines 25, 28, and 34 each demonstrate another common use for square brackets.<\/p>\n<p>&nbsp;<\/p>\n<figure id=\"attachment_248\" aria-describedby=\"caption-attachment-248\" style=\"width: 752px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-21-1-300x95.png\" alt=\"\" width=\"752\" height=\"238\" class=\"wp-image-248\" srcset=\"https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-21-1-300x95.png 300w, https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-21-1-1024x324.png 1024w, https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-21-1-768x243.png 768w, https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-21-1-65x21.png 65w, https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-21-1-225x71.png 225w, https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-21-1-350x111.png 350w, https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-21-1.png 1332w\" sizes=\"auto, (max-width: 752px) 100vw, 752px\" \/><figcaption id=\"caption-attachment-248\" class=\"wp-caption-text\">Illustration 21. Choices that display correct punctuation both before and after they are selected by the reader<\/figcaption><\/figure>\n<p>Instead of containing no text, as in the example in Illustration 18, this time the square brackets contain alternate punctuation. With line 25, when the choice text initially displays, it ends with a period (and a closing double quotation mark) after \u201cremember\u201d because that is the end of the sentence before being chosen. But when that choice is selected and the choice text is re-presented with the added \u201cyou say,\u201d the period after \u201cremember\u201d has to be changed to a comma (and closing double quotation mark) in order to include \u201cyou say\u201d in the sentence. You can see the result in Illustrations 22 and 23 (below). The same process is followed in lines 28 and 31.<\/p>\n<p>&nbsp;<\/p>\n<figure id=\"attachment_76\" aria-describedby=\"caption-attachment-76\" style=\"width: 750px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-22-300x88.png\" alt=\"\" class=\"wp-image-76\" width=\"750\" height=\"220\" srcset=\"https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-22-300x88.png 300w, https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-22-1024x299.png 1024w, https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-22-768x224.png 768w, https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-22-65x19.png 65w, https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-22-225x66.png 225w, https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-22-350x102.png 350w, https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-22.png 1172w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><figcaption id=\"caption-attachment-76\" class=\"wp-caption-text\">Illustration 22. The choices from Illustration 21 as they will appear to the reader<\/figcaption><\/figure>\n<p>&nbsp;<\/p>\n<figure id=\"attachment_77\" aria-describedby=\"caption-attachment-77\" style=\"width: 750px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-23-300x90.png\" alt=\"\" class=\"wp-image-77\" width=\"750\" height=\"225\" srcset=\"https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-23-300x90.png 300w, https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-23-1024x306.png 1024w, https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-23-768x229.png 768w, https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-23-65x19.png 65w, https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-23-225x67.png 225w, https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-23-350x104.png 350w, https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-content\/uploads\/sites\/363\/2023\/02\/Illustration-23.png 1146w\" sizes=\"auto, (max-width: 750px) 100vw, 750px\" \/><figcaption id=\"caption-attachment-77\" class=\"wp-caption-text\">Illustration 23. The text displayed to the reader after \u201cI don\u2019t remember.\u201d is selected<\/figcaption><\/figure>\n<div class=\"textbox textbox--key-takeaways\">\n<header class=\"textbox__header\">\n<h1 class=\"textbox__title\">Review<\/h1>\n<\/header>\n<div class=\"textbox__content\">\n<ul>\n<li>Stories written in Ink are structured by knots and stitches. The flow of the story follows the threads connecting these nodes of text. You can direct the flow by introducing diverts.<\/li>\n<li>Diverts are often placed after choices, allowing the reader to craft their own path through the playable story. Choices can be basic, which means they are single-use options that disappear after having been selected, or they may be sticky, meaning they can be repeatedly selected by the reader.<\/li>\n<li>Choices, depending on how they are written by the author, also impact the resulting text displayed to the reader. The result of a choice may include the same text as the choice itself, additional text that is revealed after the choice is selected, or a mixture of the two.<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<h1><strong>Putting It All Together<\/strong><\/h1>\n<p>The elements presented in this chapter make up the basic tools used to create branching narratives with Ink.<\/p>\n<p>By breaking your story up into separate knots, you create a map through which your reader can travel along the various flows you have created. You can think of this literally, offering choices asking the reader if they would like to go left or right, up or down. Or perhaps your reader\u2019s journey will be a bit more philosophical. Does your reader choose to confront the beast guarding the door? Or do you give them the option to use cunning and stealth to slip past the monster?<\/p>\n<p>Can you think of some situations in which it would be important to use a sticky choice instead of a basic choice?<\/p>\n<p>These are examples of just some of the most basic uses of Ink and Inky. Try to make a scene for yourself. Play around in the software. Experiment. Practice.<\/p>\n<p>In the next chapter, we will add a few more tools to the belt, allowing for a more nuanced presentation of the text and the ways it can be changed based on the reader\u2019s choices, as well as adding another layer of depth onto the choices themselves.<\/p>\n<p>&nbsp;<\/p>\n<div class=\"glossary\"><div class=\"glossary__tooltip\" id=\"110-220\" hidden><p>The nodes that make up an Ink story. They are the locations on your story's \"map\".<\/p>\n<\/div><div class=\"glossary__tooltip\" id=\"110-221\" hidden><p>The paths that move the Ink story from Knot to Knot.<\/p>\n<\/div><div class=\"glossary__tooltip\" id=\"110-232\" hidden><p>A sub-node of text that can be used as a location within a knot.<\/p>\n<\/div><div class=\"glossary__tooltip\" id=\"110-234\" hidden><p>Syntax that creates a new thread for the Ink story's flow to follow<\/p>\n<\/div><div class=\"glossary__tooltip\" id=\"110-241\" hidden><p>The text elements that allow the reader of the Ink story to decide which threads the flow will follow<\/p>\n<\/div><div class=\"glossary__tooltip\" id=\"110-242\" hidden><p>Basic choices can only be selected once, and if the flow returns to the knot in which they were selected, the basic choice will no longer appear.<\/p>\n<\/div><div class=\"glossary__tooltip\" id=\"110-243\" hidden><p>Sticky choices can be repeated, and if the flow returns to the knot in which they were selected, they will still appear.<\/p>\n<\/div><\/div>","protected":false},"author":464,"menu_order":2,"template":"","meta":{"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[49],"contributor":[],"license":[],"class_list":["post-110","chapter","type-chapter","status-publish","hentry","chapter-type-numberless"],"part":108,"_links":{"self":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-json\/pressbooks\/v2\/chapters\/110","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-json\/pressbooks\/v2\/chapters"}],"about":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-json\/wp\/v2\/types\/chapter"}],"author":[{"embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-json\/wp\/v2\/users\/464"}],"version-history":[{"count":35,"href":"https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-json\/pressbooks\/v2\/chapters\/110\/revisions"}],"predecessor-version":[{"id":349,"href":"https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-json\/pressbooks\/v2\/chapters\/110\/revisions\/349"}],"part":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-json\/pressbooks\/v2\/parts\/108"}],"metadata":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-json\/pressbooks\/v2\/chapters\/110\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-json\/wp\/v2\/media?parent=110"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-json\/pressbooks\/v2\/chapter-type?post=110"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-json\/wp\/v2\/contributor?post=110"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/pressbooks.library.torontomu.ca\/playablestoriesink\/wp-json\/wp\/v2\/license?post=110"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}