{"id":399,"date":"2024-03-29T21:02:26","date_gmt":"2024-03-29T21:02:26","guid":{"rendered":"https:\/\/chartweave.com\/hist390spring2024\/?page_id=399"},"modified":"2024-03-29T21:28:33","modified_gmt":"2024-03-29T21:28:33","slug":"project-6-twine","status":"publish","type":"page","link":"https:\/\/chartweave.com\/hist390spring2024\/assignments\/project-6-twine\/","title":{"rendered":"Project #6: Twine"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><em>Due April 15th<\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Video games are a growing area of digital history and are increasingly seen as a potentially useful tool to create immersive historical experiences that pique the interest of players and inspire them to learn more about the historical fiction worlds they explore in games. For this project, you will be creating an interactive story in Twine about your historical research subject that teaches the player about your topic while being playable and (hopefully) fun. This is the most creative of our projects, so get creative, but remember to balance your creativity with the history your game is based on. While Twine does require a small amount of coding, be not afraid. It&#8217;s actually very easy to use and requires no knowledge of HTML or CSS to create a complete interactive story.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Part 1: Planning Your Story<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Before you begin, plot out your story with a plan. Like with all of our projects, digital projects start with a pen and paper and some serious brainstorming. Some things to think about as you brainstorm:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Think about the history you want to teach your player about as they play. What do you want them to learn about your research subject by playing your game? What do you want them to take away from the game?<\/li>\n\n\n\n<li>Decide on the role your player is stepping into the shoes of. You can base this off a real historical figure or create a fictional role based on what makes sense for your story. Is your player someone accused of witchcraft during the Salem Witch Trials? An explorer like Zheng He setting sail from Ming China? A visitor to the Chicago World&#8217;s Fair? You decide!<\/li>\n\n\n\n<li>Think of the game&#8217;s endings. You will need at least two different endings. How complex will your story be? Do you want to explore multiple plot lines or just have players select a few details in a story that stays mostly consistent every time they play it?<\/li>\n\n\n\n<li>Consider the choices your player will have to make. You will need at least five instances of player choice. You&#8217;re writing a &#8220;choose-your-own&#8221; adventure story. Sometimes your passages will be connected by a simple &#8220;Next&#8221; or &#8220;Continue Reading,&#8221; but your player will also have to make choices to determine how their game plays out. What kinds of choices will they face? How much will their decisions affect the story? Will each choice have only a little bit of impact, will each choice take the story in a totally new direction or will there be a mix of both?<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Basic Requirements<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Your Twine story <strong>must<\/strong> include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>At least five<\/strong> instances where the player can make a choice to go down a different story branch.\n<ul class=\"wp-block-list\">\n<li>Some choices can have more influence over the player&#8217;s path than others. Not every choice has to &#8220;matter&#8221;. These choices can link back up to existing branches. You do not need to have five unique branches; they can cross over each other and overlap.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>At least two<\/strong> distinct endings\n<ul class=\"wp-block-list\">\n<li>You can have more endings if you&#8217;d like, but you must have at least two distinct endings depending on the choices made by the player.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Historical details<\/strong> about your research subject\n<ul class=\"wp-block-list\">\n<li>This can take on many forms, but an A grade project will include details that teach the player about the historical subject of the game. This can take the form of describing meaningful locations, historical figures making appearances, players having to make decisions based on the kinds of decisions made by people in history, and much more. Not everything in your game needs to be 100% historically accurate, but make sure your story is detailed. Find the balance between playability and historical knowledge that works for your story.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Part 2: Building Your Story in Twine<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Setting Up Twine<\/h3>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/chartweave.com\/hist390spring2024\/wp-content\/uploads\/2024\/03\/twine_nr19.1920-1024x576-1.jpg\" alt=\"\" class=\"wp-image-403\" style=\"width:294px;height:auto\" srcset=\"https:\/\/chartweave.com\/hist390spring2024\/wp-content\/uploads\/2024\/03\/twine_nr19.1920-1024x576-1.jpg 1024w, https:\/\/chartweave.com\/hist390spring2024\/wp-content\/uploads\/2024\/03\/twine_nr19.1920-1024x576-1-300x169.jpg 300w, https:\/\/chartweave.com\/hist390spring2024\/wp-content\/uploads\/2024\/03\/twine_nr19.1920-1024x576-1-768x432.jpg 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Head to <a href=\"https:\/\/twinery.org\/\">Twinery.com<\/a><\/li>\n\n\n\n<li>Download and install Twine by clicking on &#8220;Download Desktop App.&#8221; While you can work in Twine online on your browser, I highly recommend downloading the program. When working on the online version, you are relying on an internet connection and your browser&#8217;s storage to work on and save your project. If you clear your cache or browsing history (or if your browser does this automatically), you run the risk of losing all of your work.<\/li>\n\n\n\n<li>Once Twine is installed, create a new story by clicking on the green &#8220;+ Story&#8221; button. Name your story and click &#8220;+ Add.&#8221;<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">Important Note on &#8216;Story Formats&#8217;: The default story format for stories in Twine is Harlowe. Each story format uses a slightly different coding language. The instructions below follow the Harlowe language. If you change your story format to another format, these instructions may not work. You do not need to change your story format and your new story will be created in Harlowe automatically.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2: Writing Your Story with Words and Code<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Congrats! You&#8217;ve created your Twine story. Now it&#8217;s time to fill it with lots and lots of words. While you&#8217;re working on your Twine story, you will be working from the Editor View. It&#8217;ll start out with only one box, but as you add more passages and links to your story, it will start to have more and more blocks with arrows showing the flow of your story. You can drag these blocks around to make it easier to view.<\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"559\" data-id=\"406\" src=\"https:\/\/chartweave.com\/hist390spring2024\/wp-content\/uploads\/2024\/03\/Screen-Shot-2024-03-28-at-9.35.14-PM-1024x559.png\" alt=\"\" class=\"wp-image-406\" srcset=\"https:\/\/chartweave.com\/hist390spring2024\/wp-content\/uploads\/2024\/03\/Screen-Shot-2024-03-28-at-9.35.14-PM-1024x559.png 1024w, https:\/\/chartweave.com\/hist390spring2024\/wp-content\/uploads\/2024\/03\/Screen-Shot-2024-03-28-at-9.35.14-PM-300x164.png 300w, https:\/\/chartweave.com\/hist390spring2024\/wp-content\/uploads\/2024\/03\/Screen-Shot-2024-03-28-at-9.35.14-PM-768x420.png 768w, https:\/\/chartweave.com\/hist390spring2024\/wp-content\/uploads\/2024\/03\/Screen-Shot-2024-03-28-at-9.35.14-PM-1536x839.png 1536w, https:\/\/chartweave.com\/hist390spring2024\/wp-content\/uploads\/2024\/03\/Screen-Shot-2024-03-28-at-9.35.14-PM-2048x1119.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"618\" data-id=\"407\" src=\"https:\/\/chartweave.com\/hist390spring2024\/wp-content\/uploads\/2024\/03\/Screen-Shot-2024-03-28-at-9.32.24-PM-1024x618.png\" alt=\"\" class=\"wp-image-407\" srcset=\"https:\/\/chartweave.com\/hist390spring2024\/wp-content\/uploads\/2024\/03\/Screen-Shot-2024-03-28-at-9.32.24-PM-1024x618.png 1024w, https:\/\/chartweave.com\/hist390spring2024\/wp-content\/uploads\/2024\/03\/Screen-Shot-2024-03-28-at-9.32.24-PM-300x181.png 300w, https:\/\/chartweave.com\/hist390spring2024\/wp-content\/uploads\/2024\/03\/Screen-Shot-2024-03-28-at-9.32.24-PM-768x463.png 768w, https:\/\/chartweave.com\/hist390spring2024\/wp-content\/uploads\/2024\/03\/Screen-Shot-2024-03-28-at-9.32.24-PM-1536x927.png 1536w, https:\/\/chartweave.com\/hist390spring2024\/wp-content\/uploads\/2024\/03\/Screen-Shot-2024-03-28-at-9.32.24-PM-2048x1236.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/figure>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\">On the left, Editor View when your story is brand new; on the right, Editor View as you work and add passages and links to your story.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">The Building Blocks<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Passages<\/strong> &#8211; Passages are chunks of text that your player will move through as they play the game. Each passage will be a new screen that they will move between through hypertext links. You tell your story with the words you write in your passages. Double click on a passage to edit the text inside. The name of each passage is not shown to the player; it is used by you, the game creator, to keep track of passages and connect them through links.<\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-2 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"443\" data-id=\"412\" src=\"https:\/\/chartweave.com\/hist390spring2024\/wp-content\/uploads\/2024\/03\/Screen-Shot-2024-03-28-at-9.44.21-PM-1024x443.png\" alt=\"\" class=\"wp-image-412\" srcset=\"https:\/\/chartweave.com\/hist390spring2024\/wp-content\/uploads\/2024\/03\/Screen-Shot-2024-03-28-at-9.44.21-PM-1024x443.png 1024w, https:\/\/chartweave.com\/hist390spring2024\/wp-content\/uploads\/2024\/03\/Screen-Shot-2024-03-28-at-9.44.21-PM-300x130.png 300w, https:\/\/chartweave.com\/hist390spring2024\/wp-content\/uploads\/2024\/03\/Screen-Shot-2024-03-28-at-9.44.21-PM-768x333.png 768w, https:\/\/chartweave.com\/hist390spring2024\/wp-content\/uploads\/2024\/03\/Screen-Shot-2024-03-28-at-9.44.21-PM.png 1358w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"385\" data-id=\"411\" src=\"https:\/\/chartweave.com\/hist390spring2024\/wp-content\/uploads\/2024\/03\/Screen-Shot-2024-03-28-at-9.44.56-PM-1024x385.png\" alt=\"\" class=\"wp-image-411\" srcset=\"https:\/\/chartweave.com\/hist390spring2024\/wp-content\/uploads\/2024\/03\/Screen-Shot-2024-03-28-at-9.44.56-PM-1024x385.png 1024w, https:\/\/chartweave.com\/hist390spring2024\/wp-content\/uploads\/2024\/03\/Screen-Shot-2024-03-28-at-9.44.56-PM-300x113.png 300w, https:\/\/chartweave.com\/hist390spring2024\/wp-content\/uploads\/2024\/03\/Screen-Shot-2024-03-28-at-9.44.56-PM-768x289.png 768w, https:\/\/chartweave.com\/hist390spring2024\/wp-content\/uploads\/2024\/03\/Screen-Shot-2024-03-28-at-9.44.56-PM.png 1372w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/figure>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\">On the left, what a passage looks like from the editing side; on the right, what your passage will look like to the player.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Links<\/strong> &#8211; To move from one passage to the next, you&#8217;ll need to add links between them. Twine makes this quite simple. While editing a passage, create a link using <strong>[[<\/strong>double square brackets<strong>]]<\/strong>. For example, you might write:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>You are in a room with two doors. You can either enter &#91;&#91;the door on the left]] or the &#91;&#91;the door on the right]].<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Twine will then automatically make two new passages with those names that those links will lead to. When your player is playing, the text within the brackets will be links they can click. On the player side, this is denoted by the link text becoming blue.<\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-3 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"569\" data-id=\"413\" src=\"https:\/\/chartweave.com\/hist390spring2024\/wp-content\/uploads\/2024\/03\/Screen-Shot-2024-03-28-at-9.49.50-PM-1024x569.png\" alt=\"\" class=\"wp-image-413\" srcset=\"https:\/\/chartweave.com\/hist390spring2024\/wp-content\/uploads\/2024\/03\/Screen-Shot-2024-03-28-at-9.49.50-PM-1024x569.png 1024w, https:\/\/chartweave.com\/hist390spring2024\/wp-content\/uploads\/2024\/03\/Screen-Shot-2024-03-28-at-9.49.50-PM-300x167.png 300w, https:\/\/chartweave.com\/hist390spring2024\/wp-content\/uploads\/2024\/03\/Screen-Shot-2024-03-28-at-9.49.50-PM-768x427.png 768w, https:\/\/chartweave.com\/hist390spring2024\/wp-content\/uploads\/2024\/03\/Screen-Shot-2024-03-28-at-9.49.50-PM.png 1176w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"531\" data-id=\"465\" src=\"https:\/\/chartweave.com\/hist390spring2024\/wp-content\/uploads\/2024\/03\/Screen-Shot-2024-03-29-at-5.18.41-PM-1024x531.png\" alt=\"\" class=\"wp-image-465\" srcset=\"https:\/\/chartweave.com\/hist390spring2024\/wp-content\/uploads\/2024\/03\/Screen-Shot-2024-03-29-at-5.18.41-PM-1024x531.png 1024w, https:\/\/chartweave.com\/hist390spring2024\/wp-content\/uploads\/2024\/03\/Screen-Shot-2024-03-29-at-5.18.41-PM-300x156.png 300w, https:\/\/chartweave.com\/hist390spring2024\/wp-content\/uploads\/2024\/03\/Screen-Shot-2024-03-29-at-5.18.41-PM-768x398.png 768w, https:\/\/chartweave.com\/hist390spring2024\/wp-content\/uploads\/2024\/03\/Screen-Shot-2024-03-29-at-5.18.41-PM.png 1350w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/figure>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\">On the left, what the above example looks like in Editor View; on the right, what the above example looks like to the player.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You can also link to pre-existing passages by typing the name of that passage in double brackets; this can also be used to make two passages lead to the same passage. For example, let&#8217;s say both doors in the previous example lead to rooms that then lead to the same hallway. We might do this by putting [[go down the hallway]] in both the &#8216;the door on the left&#8217; passage and the &#8216;the door on the right&#8217; passage.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"625\" src=\"https:\/\/chartweave.com\/hist390spring2024\/wp-content\/uploads\/2024\/03\/Screen-Shot-2024-03-28-at-10.24.01-PM-1024x625.png\" alt=\"\" class=\"wp-image-427\" style=\"width:499px;height:auto\" srcset=\"https:\/\/chartweave.com\/hist390spring2024\/wp-content\/uploads\/2024\/03\/Screen-Shot-2024-03-28-at-10.24.01-PM-1024x625.png 1024w, https:\/\/chartweave.com\/hist390spring2024\/wp-content\/uploads\/2024\/03\/Screen-Shot-2024-03-28-at-10.24.01-PM-300x183.png 300w, https:\/\/chartweave.com\/hist390spring2024\/wp-content\/uploads\/2024\/03\/Screen-Shot-2024-03-28-at-10.24.01-PM-768x469.png 768w, https:\/\/chartweave.com\/hist390spring2024\/wp-content\/uploads\/2024\/03\/Screen-Shot-2024-03-28-at-10.24.01-PM.png 1120w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Passage Names<\/strong> &#8211; One last component that will be useful to you is setting passage names using -&gt;. Type that symbol using a dash (-) and a greater-than sign (&gt;). If you would like the name of the passage to not match the text that appears to the player, you can hide that name within your double brackets like so:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#91;&#91;text the player will see-&gt;passage name]]<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">For example, it might look like this:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>You are in a room with two doors. You can either enter &#91;&#91;the door on the left->left]] or the &#91;&#91;the door on the right->right]].<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">In this example, Twine will then make passages called &#8220;left&#8221; and &#8220;right&#8221; while the player will still see &#8220;the door on the left&#8221; and &#8220;the door on the right&#8221; within the game. This allows your passages to have shorter names, which is nicer to work with, and you can reuse &#8220;the door on the left&#8221; while leading your player to new passage, say, for example &#8220;left&#8221;, &#8220;left2&#8221; and &#8220;left3&#8221; if there were three pairs of doors.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"517\" src=\"https:\/\/chartweave.com\/hist390spring2024\/wp-content\/uploads\/2024\/03\/Screen-Shot-2024-03-28-at-10.23.00-PM-1024x517.png\" alt=\"\" class=\"wp-image-426\" style=\"width:584px;height:auto\" srcset=\"https:\/\/chartweave.com\/hist390spring2024\/wp-content\/uploads\/2024\/03\/Screen-Shot-2024-03-28-at-10.23.00-PM-1024x517.png 1024w, https:\/\/chartweave.com\/hist390spring2024\/wp-content\/uploads\/2024\/03\/Screen-Shot-2024-03-28-at-10.23.00-PM-300x151.png 300w, https:\/\/chartweave.com\/hist390spring2024\/wp-content\/uploads\/2024\/03\/Screen-Shot-2024-03-28-at-10.23.00-PM-768x388.png 768w, https:\/\/chartweave.com\/hist390spring2024\/wp-content\/uploads\/2024\/03\/Screen-Shot-2024-03-28-at-10.23.00-PM.png 1486w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div style=\"height:48px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Troubleshooting<\/strong><br>A common problem you might run into is if you delete a passage by accident, leading to a broken link. A broken link (a link with no passage to go to) will look like this:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1010\" height=\"590\" src=\"https:\/\/chartweave.com\/hist390spring2024\/wp-content\/uploads\/2024\/03\/Screen-Shot-2024-03-28-at-10.08.19-PM.png\" alt=\"\" class=\"wp-image-421\" style=\"width:484px;height:auto\" srcset=\"https:\/\/chartweave.com\/hist390spring2024\/wp-content\/uploads\/2024\/03\/Screen-Shot-2024-03-28-at-10.08.19-PM.png 1010w, https:\/\/chartweave.com\/hist390spring2024\/wp-content\/uploads\/2024\/03\/Screen-Shot-2024-03-28-at-10.08.19-PM-300x175.png 300w, https:\/\/chartweave.com\/hist390spring2024\/wp-content\/uploads\/2024\/03\/Screen-Shot-2024-03-28-at-10.08.19-PM-768x449.png 768w\" sizes=\"auto, (max-width: 1010px) 100vw, 1010px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">If this happens, never fear. You can either:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Edit the first passage (in this example, the &#8220;Start&#8221; passage) and delete the broken link ([[the door to the right]]). Close the passage. The X will be gone. Go back into the first passage (&#8220;Start&#8221;) and type in a new link to create a passage.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">OR<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Click on the green &#8220;+ Passage&#8221; in the bottom right corner of Editor View. Create a passage. Rename it with the same name as the passage you just deleted (in this example &#8220;the door to the right&#8221;). If the names match, Twine will automatically link the broken link to your new passage.<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Extra Bells &amp; Whistles<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Passages and links are all you need to reach the requirements for this assignment. <strong>You are not required to add any of the following to your story to get an A<\/strong>, but if creative storytelling is your jam, you want to have some fun with coding or some of these things help you achieve the story you want to write, consider adding them!<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Text Formatting<\/strong> &#8211; Unlike typing in a word processor like Word or Google Docs, to format text in Twine, you&#8217;ll need to use Harlowe&#8217;s markdown language:<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>Bold Text: ''Your Text Here''\nItalics: \/\/Your Text Here\/\/\nSuperscript: ^^Your Text Here^^\nStrikethrough: ~~Your Text Here~~<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Variables<\/strong> &#8211; Variables can change your player&#8217;s experience depending on whether or not they have been to a particular passage. For example, you can use a variable to have a player set their name or to have options only become available to a player if they have done something else in the game (like, say, acquire a key by going to a particular passage). <br><br>Variables take a bit more space to explain, so if you&#8217;re interested, <a href=\"https:\/\/chartweave.com\/hist390spring2024\/uncategorized\/variables-in-twine\/\">check out this blog post to see how to set variables in your game.<\/a><\/li>\n<\/ul>\n\n\n\n<div style=\"height:31px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Images<\/strong> &#8211; You are welcome to include pictures to spice up your game; however, any pictures you use <strong>MUST<\/strong> be public domain. You may not use anything that is not in the public domain. Refer to Dr. Abby Mullen&#8217;s <a href=\"https:\/\/abbymullen.org\/courses\/HIST390s2020\/assignments\/public-domain\/\">Public Domain Guidance<\/a> for help figuring out if you can use an image. <em>If you aren&#8217;t sure whether or not an image is public domain, play it safe and do not use it. <\/em>Consider <a href=\"https:\/\/dh.sites.gettysburg.edu\/toolkit\/media\/finding-images\/\">this guide to finding public domain and creative commons images<\/a> from the Gettysburg DH Toolkit.<br><br>To add an image to a passage, you can use the following code and a link to an image hosted on the internet.<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;img src=<strong>\"Insert Image Link Here\"<\/strong>&gt;<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Appearance <\/strong>&#8211; Your Twine story will have a default appearance of a black background with white text. If you would like to change the appearance of your story as a whole, open the main menu by clicking on the title of your project in the bottom menu. Then, select <em>&#8216;Edit Story Stylesheet&#8217;<\/em>. This will open the Stylesheet screen. The code below is formatted for how Harlowe uses CSS. You can copy-paste this code into the <em>Stylesheet <\/em>screen and edit the bolded sections. &#8220;background-color&#8221; changes the background; &#8220;color&#8221; controls the font color.<br><br>For colors, you can use either a color&#8217;s hexcode (you can use a hexcode finder <a href=\"https:\/\/htmlcolorcodes.com\/color-picker\/\">like this one<\/a> to find a color&#8217;s hexcode) or the name of a color from the 140 CSS color names recognized by all browsers (<a href=\"https:\/\/www.w3schools.com\/cssref\/css_colors.php\">see the full list here<\/a>). Please make sure your story is still legible!<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>tw-story {\nbackground-color:<strong>#40b2d6<\/strong>;\ncolor:<strong>indigo<\/strong>;\n}<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Step 3: Putting Your Game on Your Blog<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Once you have finished your game, you&#8217;re almost done!<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Before finishing, test your game for functionality and typos by clicking on the &#8220;Play&#8221; button in the bottom menu and playing through your game.<\/li>\n\n\n\n<li>Take a screenshot of your Editor View. You&#8217;ll need it for your blog post.<\/li>\n\n\n\n<li>Okay! Your game is tested and works and is ready to go. Open the menu by clicking on the name of your game in the bottom menu. Then click on &#8220;Publish to File.&#8221; Save your game as an HTML file.<\/li>\n\n\n\n<li>Head over to your blog. Create a new blog post as usual. In your blog post, click on the + icon to the side of where you usually type your text. You can also find the + in the top left corner of the screen. (This is the same way you embedded your timeline and podcast.) Select \u201cFile&#8221;. You may have to click \u201cBrowse all\u201d in order to find it.<\/li>\n\n\n\n<li>Upload your HTML file. Your game will now appear as a link as well as a &#8216;Download&#8217; button. I will be able to play your game by clicking on the link or download your game file by clicking download.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">Finish your blog post by making sure you include the following:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Your game file embedded as described above<\/li>\n\n\n\n<li>A screenshot of the Editor View of your game, showing the passages and links you made.<\/li>\n\n\n\n<li>One paragraph responding to the following questions: How was making an interactive narrative about your historical subject different from writing a traditional essay? What are the benefits of branching narratives? What are the drawbacks? Was it difficult or easy to incorporate historical facts into your game?<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">Submit your completed project by posting a link to your public blog post in the #week-12-twine channel on Slack.<\/p>\n\n\n\n<div style=\"height:84px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Due April 15th Video games are a growing area of digital history and are increasingly seen as a potentially useful tool to create immersive historical experiences that pique the interest of players and inspire them to learn more about the historical fiction worlds they explore in games. For this project, you will be creating an [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":15,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-container-style":"default","site-container-layout":"default","site-sidebar-layout":"default","disable-article-header":"default","disable-site-header":"default","disable-site-footer":"default","disable-content-area-spacing":"default","footnotes":""},"class_list":["post-399","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/chartweave.com\/hist390spring2024\/wp-json\/wp\/v2\/pages\/399","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chartweave.com\/hist390spring2024\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/chartweave.com\/hist390spring2024\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/chartweave.com\/hist390spring2024\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/chartweave.com\/hist390spring2024\/wp-json\/wp\/v2\/comments?post=399"}],"version-history":[{"count":47,"href":"https:\/\/chartweave.com\/hist390spring2024\/wp-json\/wp\/v2\/pages\/399\/revisions"}],"predecessor-version":[{"id":476,"href":"https:\/\/chartweave.com\/hist390spring2024\/wp-json\/wp\/v2\/pages\/399\/revisions\/476"}],"up":[{"embeddable":true,"href":"https:\/\/chartweave.com\/hist390spring2024\/wp-json\/wp\/v2\/pages\/15"}],"wp:attachment":[{"href":"https:\/\/chartweave.com\/hist390spring2024\/wp-json\/wp\/v2\/media?parent=399"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}