{"id":112,"date":"2021-10-06T23:50:41","date_gmt":"2021-10-07T06:50:41","guid":{"rendered":"https:\/\/blogs.ubc.ca\/pingcao\/?p=112"},"modified":"2021-10-09T18:54:16","modified_gmt":"2021-10-10T01:54:16","slug":"112","status":"publish","type":"post","link":"https:\/\/blogs.ubc.ca\/pingcao\/2021\/10\/06\/112\/","title":{"rendered":"Task 5"},"content":{"rendered":"<h1><span style=\"color: #808080;\">WHO DID IT?<\/span><\/h1>\n<h2><span style=\"color: #008080;\"><strong>Play the Game on itch.io<\/strong><\/span><\/h2>\n<p><iframe loading=\"lazy\" src=\"https:\/\/itch.io\/embed\/1222934\" width=\"552\" height=\"167\" frameborder=\"0\"><a href=\"https:\/\/pingcao.itch.io\/who-did-it\">WHO DID IT by pingcao<\/a><\/iframe><\/p>\n<p style=\"font-size: 12px;\">*Images in the game are from Pixaba (Pixabay License)<\/p>\n<p><a href=\"https:\/\/blogs.ubc.ca\/pingcao\/files\/2021\/10\/WHO-DID-IT_.html_.zip\">WHO DID IT_.html<\/a><\/p>\n<h2><span style=\"color: #008080;\">The <a href=\"https:\/\/twinery.org\/\"><span style=\"color: #ff6600;\">Twine<\/span><\/a> Experience<\/span><\/h2>\n<p><span style=\"color: #ff6600;\"><a style=\"color: #ff6600;\" href=\"https:\/\/twinery.org\/\">Twine<\/a><\/span>, what a name! It catches the essence of the entire game-creating process. You need to twist the thread in the correct way, or it gets all messed up, and you have to do it all over again.<\/p>\n<p>There were many times that I would miss a space or have a spelling or typing mistake in the name I give to a passage, then ended up with a broken link with the red <strong><span style=\"color: #ff0000;\">X<\/span><\/strong>.\u00a0 After some (okay, lots of) trials and errors, here is the final edition.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-114 size-full\" src=\"https:\/\/blogs.ubc.ca\/pingcao\/files\/2021\/10\/Task-5-Links.png\" alt=\"Storyboard of WHO DID IT\" width=\"1011\" height=\"770\" srcset=\"https:\/\/blogs.ubc.ca\/pingcao\/files\/2021\/10\/Task-5-Links.png 1011w, https:\/\/blogs.ubc.ca\/pingcao\/files\/2021\/10\/Task-5-Links-300x228.png 300w, https:\/\/blogs.ubc.ca\/pingcao\/files\/2021\/10\/Task-5-Links-768x585.png 768w, https:\/\/blogs.ubc.ca\/pingcao\/files\/2021\/10\/Task-5-Links-552x420.png 552w\" sizes=\"auto, (max-width: 1011px) 100vw, 1011px\" \/><\/p>\n<p>This map reminded me of the original structure (see image below) I saw in Ted Nelson&#8217;s Google Tech Talk, &#8220;how documents would wave together for side by side intercomparison over ever-expanding tissue&#8221; (Google TechTalks, 2007, 20:57).<\/p>\n<p><figure id=\"attachment_115\" aria-describedby=\"caption-attachment-115\" style=\"width: 697px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-115 size-full\" src=\"https:\/\/blogs.ubc.ca\/pingcao\/files\/2021\/10\/Task-5-Nelson.png\" alt=\"Side-by-side connection as schematically illustrated in 1965\" width=\"697\" height=\"512\" srcset=\"https:\/\/blogs.ubc.ca\/pingcao\/files\/2021\/10\/Task-5-Nelson.png 697w, https:\/\/blogs.ubc.ca\/pingcao\/files\/2021\/10\/Task-5-Nelson-300x220.png 300w, https:\/\/blogs.ubc.ca\/pingcao\/files\/2021\/10\/Task-5-Nelson-552x405.png 552w\" sizes=\"auto, (max-width: 697px) 100vw, 697px\" \/><figcaption id=\"caption-attachment-115\" class=\"wp-caption-text\">Note: Side-by-side connection as schematically illustrated in 1965<br \/>(author&#8217;s original diagram [Nelson 1965], later redrawn for publication). Nelson, T. (1999). Xanalogical structure, needed now more than ever: Parallel documents, deep links to content, deep versioning, and deep re-use. ACM Computing Surveys, 31(4es), 33-es. https:\/\/doi.org\/10.1145\/345966.346033.<\/figcaption><\/figure>My map is, apparently, not an example of compared documents, but the links between different boxes demonstrate that there is a relationship between the two boxes. This simple arrow shows how the train of thought flows, just as Vannevar Bush envisioned how the owner of the memex would use it. (Bush, 2019, section 7).<\/p>\n<h2><span style=\"color: #008080;\"><strong>The Strategy<\/strong><\/span><\/h2>\n<p>You would probably tell by now, whatever my strategy was, it didn&#8217;t work so well.<br \/>\nI had created a road map by pen and pencil, with keywords only, of course (if you have read my Task 4, you know handwrite the whole piece was not my strongest suit). The story started to grow on its own once I start creating passages in <span style=\"color: #ff6600;\"><a style=\"color: #ff6600;\" href=\"https:\/\/twinery.org\/\">Twine<\/a><\/span>.<\/p>\n<p>I usually stick to my draft (keywords) pretty well until the proofreading stage but not this time. So the top tip I would give the two days younger version of me (when I started to try <span style=\"color: #ff6600;\"><a style=\"color: #ff6600;\" href=\"https:\/\/twinery.org\/\">Twine<\/a><\/span>) would be &#8211; to <span style=\"color: #000000;\"><strong><em>write a complete structure and build the game backward. <\/em><\/strong><\/span><span data-preserver-spaces=\"true\">This way, I can always copy-paste the exact passage title and not memorize things when the story unfolds into many layers. However, this is the strategy I would use if I just want to complete this task efficiently.<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">However, this is the strategy I would use if I just want to complete this task efficiently. In this case, I am not connecting my thoughts while creating but just putting what I have on a piece of paper in <span style=\"color: #ff6600;\"><a style=\"color: #ff6600;\" href=\"https:\/\/twinery.org\/\">Twine<\/a><\/span>&#8216;s format. The creating process (or thinking process) is completed when I draft the complete structure on paper, and <span style=\"color: #ff6600;\"><a style=\"color: #ff6600;\" href=\"https:\/\/twinery.org\/\">Twine<\/a><\/span> <\/span><span data-preserver-spaces=\"true\">is only used as a tool to digitalize my draft into a specific format.\u00a0<\/span><\/p>\n<p>When I was writing my strategy, my inner voice is shouting &#8220;NO!!!&#8221; because I had experienced something so much better than just inputting information into an online format (i.e., <span data-preserver-spaces=\"true\"><span style=\"color: #ff6600;\"><a style=\"color: #ff6600;\" href=\"https:\/\/twinery.org\/\">Twine<\/a><\/span><\/span>). I don&#8217;t know if it is because I was making a game for the first time and I tried to make as many turns (twist) as possible, or it is because when there are visual links and boxes in front of me, I felt I could see my thoughts grow, right in front of me! When I started to link the action with consequences and how one thing led to another, my content changed, and it was magical!<\/p>\n<p>The experience makes me think that maybe the intercomparison visualization was not only for comparing and connecting information and expanding our thoughts. Perhaps the visualization process also encourages us to dig deeper for connections between knowledge, or even make new connections or construct new knowledge!<\/p>\n<h2><span style=\"color: #008080;\"><strong>The Technology Hiccups<\/strong><\/span><\/h2>\n<p>The simple coding with [[]], and [[passage content -&gt; passage name]] was beginner(me)-friendly \ud83d\ude09 They are simple and sufficient for making a simple game with 15 screens.<\/p>\n<p>After I had done all the text, I started to get curious about if I could embed images and videos into my game. I searched online and stumbled upon this guide, <a href=\"http:\/\/www.adamhammond.com\/twineguide\/\">A Total Beginner\u2019s Guide to Twine 2.1<\/a>, by Adam Hammond, an assistant professor from the University of Toronto. It has all the basics that I need for the task and more!<\/p>\n<p>Once the production is completed, the most challenging issue emerges &#8211; the distribution. I wanted to see if there is a way to upload my game to the blog page that would allow playing directly in the blog. The WordPress we are using does not allow advanced HTML editing (nor did I know how to do it) so I searched online trying to find a way around it. Many posts have mentioned a free website called <a href=\"http:\/\/itch.io\">itch.io<\/a> so I decided to give it a try.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignleft wp-image-116 size-medium\" src=\"https:\/\/blogs.ubc.ca\/pingcao\/files\/2021\/10\/Task-5-Testing-300x109.png\" alt=\"Testing\" width=\"300\" height=\"109\" srcset=\"https:\/\/blogs.ubc.ca\/pingcao\/files\/2021\/10\/Task-5-Testing-300x109.png 300w, https:\/\/blogs.ubc.ca\/pingcao\/files\/2021\/10\/Task-5-Testing-552x200.png 552w, https:\/\/blogs.ubc.ca\/pingcao\/files\/2021\/10\/Task-5-Testing.png 752w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/>I uploaded the game to <a href=\"http:\/\/itch.io\">itch.io<\/a> and then inserted the <abbr title=\"Uniform Resource Locator\">URL<\/abbr>, but it didn&#8217;t work (see image on the left). I then tried the distribution option on <a href=\"http:\/\/itch.io\">itch.io<\/a>, and it gave me a window that I needed to click to open the actual game I published on <a href=\"http:\/\/itch.io\">itch.io<\/a> and play from there. This is an alright solution for now, but I still want to see if others can just have the game played directly on the blog page without getting redirected.<\/p>\n<blockquote><p><em><span style=\"color: #ff6600;\">Were you able to display the game directly in your UBC blog ? If yes, please kindly share your magic with me (leave a comment please)!<\/span><\/em><\/p><\/blockquote>\n<p>Oh, one final note. The name of my game is also an indication of the messy relationship that can be built in a Twine game (or any hypertext) and lead us to ask, &#8220;who did it&#8221;? I hope you enjoyed playing it \ud83d\ude09<\/p>\n<h2><span style=\"color: #008080;\"><strong>References<\/strong><\/span><\/h2>\n<p>Bush, V. (2019, January 9). <i>As we may think<\/i>. The Atlantic. Retrieved October 7, 2021, from https:\/\/www.theatlantic.com\/magazine\/archive\/1945\/07\/as-we-may-think\/303881\/.<\/p>\n<p><span data-preserver-spaces=\"true\">Google Tech Talks (2007, Oct 8). <\/span><em>Transclusion: Fixing Electronic Literature <\/em><span data-preserver-spaces=\"true\">[Video]. YouTube. <a href=\"https:\/\/www.youtube.com\/watch?v=Q9kAW8qeays\">https:\/\/youtu.be\/n6RqWe1bFpM<\/a><\/span><\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p class=\"post-excerpt\">WHO DID IT? Play the Game on itch.io WHO DID IT by pingcao *Images in the game are from Pixaba&#8230;<\/p>\n","protected":false},"author":86787,"featured_media":124,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,4],"tags":[],"class_list":["post-112","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-etec-540","category-weekly-tasks"],"_links":{"self":[{"href":"https:\/\/blogs.ubc.ca\/pingcao\/wp-json\/wp\/v2\/posts\/112","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.ubc.ca\/pingcao\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.ubc.ca\/pingcao\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.ubc.ca\/pingcao\/wp-json\/wp\/v2\/users\/86787"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.ubc.ca\/pingcao\/wp-json\/wp\/v2\/comments?post=112"}],"version-history":[{"count":7,"href":"https:\/\/blogs.ubc.ca\/pingcao\/wp-json\/wp\/v2\/posts\/112\/revisions"}],"predecessor-version":[{"id":126,"href":"https:\/\/blogs.ubc.ca\/pingcao\/wp-json\/wp\/v2\/posts\/112\/revisions\/126"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blogs.ubc.ca\/pingcao\/wp-json\/wp\/v2\/media\/124"}],"wp:attachment":[{"href":"https:\/\/blogs.ubc.ca\/pingcao\/wp-json\/wp\/v2\/media?parent=112"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.ubc.ca\/pingcao\/wp-json\/wp\/v2\/categories?post=112"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.ubc.ca\/pingcao\/wp-json\/wp\/v2\/tags?post=112"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}