Let's Play - Twine

Main Body

kqzheng — Fri, 23 Jun 2023 21:28:55 +0000

Introduction

kqzheng — Fri, 23 Jun 2023 21:28:55 +0000

This is where you can write your introduction.

Appendix

kqzheng — Fri, 23 Jun 2023 21:28:56 +0000

This is where you can add appendices or other back matter.

Authors

kqzheng — Fri, 23 Jun 2023 21:28:56 +0000

Cover

kqzheng — Fri, 23 Jun 2023 21:28:56 +0000

About

kqzheng — Fri, 23 Jun 2023 21:28:56 +0000

Buy

kqzheng — Fri, 23 Jun 2023 21:28:56 +0000

Access Denied

kqzheng — Fri, 23 Jun 2023 21:28:56 +0000

Book Information

kqzheng — Fri, 23 Jun 2023 21:28:56 +0000

H5P listing

bpayne — Fri, 23 Jun 2023 21:28:58 +0000

Let's Play - Twine

kqzheng — Fri, 23 Jun 2023 21:47:21 +0000

[h5p id="1"]

References

Coccoli, M., Iacono, S., & Vercelli, G. (2015). Applying gamification techniques to enhance effectiveness of video-lessons. Journal of e-Learning and Knowledge Society, 11(3).

Eng, D. (2020, June 28). What is gamification? University XP. Retrieved October 26, 2021, from https://www.universityxp.com/blog/2020/4/30/what-is-gamification.

Figueroa-Flores, J. F. (2016). Gamification and game-based learning: Two strategies for the 21st century learner. World, 3(2).

Let's Play - Twine HTML

kqzheng — Tue, 11 Jul 2023 21:53:49 +0000

#Let's Play - Twine [[Getting Started: Passages and links|start]] [[Making Your Game Look Awesome|css]] [[Adding Images and Music or sounds|adding]] [[Saving Your Work|saving]]

References

Coccoli, M., Iacono, S., & Vercelli, G. (2015). Applying gamification techniques to enhance effectiveness of video-lessons. Journal of e-Learning and Knowledge Society, 11(3).

Eng, D. (2020, June 28). What is gamification? University XP. Retrieved October 26, 2021, from https://www.universityxp.com/blog/2020/4/30/what-is-gamification.

Figueroa-Flores, J. F. (2016). Gamification and game-based learning: Two strategies for the 21st century learner. World, 3(2).

This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License. #Getting Started With Twine The very first step is to find Twine online! Go to https://twinery.org/ This is where your Twine adventure begins, you have the option to download Twine to your computer but for today we are going to use it online. Once you are at Twinery.org click the blue text "Use it online" located in the Post-it note. You are welcome to skip the tips as we will go through this together! To create a new Story click the green +New button, you will be prompted to give the Story a name. Once you have filled in the name field click Create Twine games are made up of passages. You will be taken to the map for your new story. If you click on the untitled passage you will have the option to edit it or rename it. Click on the top row menu items to view more options. After you are done exploring click Rename to title the passage, I suggest calling the first passage "start." Click OK. When you click Edit you will see that your page has two main areas, the title and the content area of the passage. You will notice a rename button in the editor so you can rename the passage from this screen as well, remember the title is for you so title your passage something short but meaningful. To make your game all you need to know is how to make links between the passages. This is pretty easy, while you are editing a passage place double square brakets around text. The text before the | is what the reader sees and the text after the | is the name of the passage you are linking to! Twine will create links to passages called leftdoor and rightdoor, which are easier to work with than the longer names. Now you have a Story map! Now let's add a passage to the leftdoor so we can describe the Left Room. Click on the leftroom and click Edit in the menu or double-click the passage to edit the leftroom passage. To link back to the entry or the rightdoor place double square brackets around text! Now your story map looks more connected! At this point it is important to note that Twine does not automatically hyperlink URLs so you need to use the HTML `<`a`>` element with the href attribute. `<`a href`=`"https://www.w3schools.com/html/html_links.asp">https://www.w3schools.com/html/html_links.asp<`/`a> This code will hyperlink a URL https://www.w3schools.com/html/html_links.asp You can also use the HTML `<`a`>` element with the href attribute to hyperlink to text. `<`a href`=`"https://www.w3schools.com/html/html_links.asp">Learn more about HTML links<`/`a> This code hyperlinks the text Learn more about HTML links Learn more about HTML links --- What would you like to do next? You can learn: * [[how to make your game look great|css]] * [[go back to the presentation|presentation]] * [[learn how to add images and sounds|adding]] * [[download your HTML file to save your work|saving]] #Make Your Game Look Great! So how do you alter the appearance of your story, how do you make it look nice? The answer is with CSS coding! Twine publishes to html files which means you can simply play them in the web and it also means anything you can do on the web you can do in Twine! I think it's important to know that every webpage you ever open on the web is styled with CSS. This means if you Google how to do something with CSS there will be way more recourses then you will ever need. We're not going to go into depth learning CSS here as that would be a course on it's own but we are going to provide you with some basic code so you change the looks of your game! To edit your Twine story’s CSS, click on the Story menu item in the top menu bar then click # Stylesheet in the menu bar below. This will load a screen that is just an empty CSS file. To change the background color of you game enter the following CSS code tw-story `{` background-color: white; color: #424949; font-family: Ariel,Impact,Helvetica,sans-serif; font-size: 115%; `}` To change the color of linked text and to change the color that displays when you hover over linked text enter the following code tw-link `{` color: #1434A4; `}` tw-link:hover `{` color: #6F8FAF; text-decoration: none; border-bottom: 4px solid #6F8FAF; `}` I want my images to be centered on the page, if you do to then enter the following code. We will go over how to add the "class" center when we go over how to add images to your game! .center `{` display: block; margin-left: auto; margin-right: auto; `}` Your story's stylesheet should look something like the one we made for this game below. GOOGLE FONTS You can change the primary font for your story in CSS. Google fonts has a visual guide to fonts to help you choose what to use. https://fonts.google.com/ HEX CODES COLOUR PICKER You can use this site to find and customize your Twine colour pallet using CSS or in Twine. https://htmlcolorcodes.com/ --- What would you like to do next? You can learn: * [[about passages and links|start]] * [[go back to the presentation|presentation]] * [[learn how to add images and sounds|adding]] * [[download your HTML file to save your work|saving]] #Adding Images Music and Sounds Adding images to your Twine game is as easy as adding HTML tags to your passage. You will need a hyperlink to an image, this is a bit more work if you are making your own images as you need a place on the internet to host them. We recommend using WordPress for this. You can simply upload your image your sites Media Library, click on it and copy the images URL that display in the attachment details! Let's say our game has an entryway with two doors and you found an image on Unsplash you will download the image and upload it to your media library in WordPress then add the following image HTML tag to your passage. (If you copy and paste the text the image will display from my media gallery and that is OK) `<`img src`=`"http://syllabus.trubox.ca/wp-content/uploads/sites/794/2021/10/james-balensiefen-9iUbAYgwlZo-unsplash-scaled.jpg"> Now let's say you want to center the image we will add the CSS center class we made. `<`img src`=`"http://syllabus.trubox.ca/wp-content/uploads/sites/794/2021/10/james-balensiefen-9iUbAYgwlZo-unsplash-scaled.jpg" class`=`"center"> When we view the page we notice the image is huge! We will add the width ahd height attributes to the image tag! You can play with the percentages to see what works best for your game. `<`img src`=`"http://syllabus.trubox.ca/wp-content/uploads/sites/794/2021/10/james-balensiefen-9iUbAYgwlZo-unsplash-scaled.jpg" class`=`"center" width`=`"50%" height`=`"50%">

Photo by James Balensiefen on Unsplash

UnSplash is nice as we can give credit to the photographer by simply copying the credit line they provide. ##Let's add some sounds! If you are not making your own sounds then we recommend finding your sounds on Freesound. Freesound is a collaborative database of Creative commons Licensed sounds! The following code will play the sound of a door opening! Once again we have to upload the audio file to our WordPress site and copy the URL into the audio HTML tag. `<`audio src`=`"http://syllabus.trubox.ca/wp-content/uploads/sites/794/2021/10/321086__benjaminnelan__open-door-1.wav" autoplay>`<`/audio> --- What would you like to do next? You can learn: * [[about passages and links|start]] * [[go back to the presentation|presentation]] * [[learn how to make your game look great|css]] * [[download your HTML file to save your work|saving]] #Saving Your Twine Saving your Twine to your desktop is important especially if you are using Twine online! The online version will save your work in your browser so it is very important to remember that if you or someone else clears your browser's history while you're working on your project, you could lose your work! To reduce the risk, it's good practice publish your Twines to a file. This is easy and will import back into Twine. If you have downloaded and installed Twine on your local computer your Twines will save to your documents folder. Please note that these files are for internal use only, do not save the Story HTML files you create using the Publish to File option within this folder or you could overwrite and lose the related Story Project file! From your story map you can publish your Twine by clicking ''Build'' then ''Publish to file''. See the image below. Please note: If you are using the online version of Twine an HTML file will automatically be downloaded if you have installed Twine you will be prompted to save your HTML file! --- What would you like to do next? You can learn: * [[about passages and links|start]] * [[go back to the presentation|presentation]] * [[learn how to make your game look great|css]] * [[learn how to add images and sounds|adding]]

Getting Started With Twine

kqzheng — Wed, 12 Jul 2023 17:48:40 +0000

The very first step is to find Twine online! Go to https://twinery.org/ This is where your Twine adventure begins, you have the option to download Twine to your computer but for today we are going to use it online. Once you are at Twinery.org click the blue text "Use it online" located in the Post-it note. You are welcome to skip the tips as we will go through this together! To create a new Story click the green +New button, you will be prompted to give the Story a name. Once you have filled in the name field click Create Twine games are made up of passages. You will be taken to the map for your new story. If you click on the untitled passage you will have the option to edit it or rename it. Click on the top row menu items to view more options. After you are done exploring click Rename to title the passage, I suggest calling the first passage "start." Click OK. When you click Edit you will see that your page has two main areas, the title and the content area of the passage. You will notice a rename button in the editor so you can rename the passage from this screen as well, remember the title is for you so title your passage something short but meaningful. To make your game all you need to know is how to make links between the passages. This is pretty easy, while you are editing a passage place double square brakets around text. The text before the | is what the reader sees and the text after the | is the name of the passage you are linking to! Twine will create links to passages called leftdoor and rightdoor, which are easier to work with than the longer names. Now you have a Story map! Now let's add a passage to the leftdoor so we can describe the Left Room. Click on the leftroom and click Edit in the menu or double-click the passage to edit the leftroom passage. To link back to the entry or the rightdoor place double square brackets around text! Now your story map looks more connected! At this point it is important to note that Twine does not automatically hyperlink URLs so you need to use the HTML element with the href attribute. https://www.w3schools.com/html/html_links.asp This code will hyperlink a URL https://www.w3schools.com/html/html_links.asp You can also use the HTML `<`a`>` element with the href attribute to hyperlink to text. Learn more about HTML links This code hyperlinks the text Learn more about HTML links Learn more about HTML links --- What would you like to do next?

Make Your Game Look Great!

kqzheng — Wed, 12 Jul 2023 18:03:55 +0000

So how do you alter the appearance of your story, how do you make it look nice? The answer is with CSS coding! Twine publishes to html files which means you can simply play them in the web and it also means anything you can do on the web you can do in Twine! I think it's important to know that every webpage you ever open on the web is styled with CSS. This means if you Google how to do something with CSS there will be way more recourses then you will ever need. We're not going to go into depth learning CSS here as that would be a course on it's own but we are going to provide you with some basic code so you change the looks of your game! To edit your Twine story’s CSS, click on the Story menu item in the top menu bar then click # Stylesheet in the menu bar below. This will load a screen that is just an empty CSS file. To change the background color of you game enter the following CSS code tw-story { background-color: white; color: #424949; font-family: Ariel,Impact,Helvetica,sans-serif; font-size: 115%; } To change the color of linked text and to change the color that displays when you hover over linked text enter the following code tw-link { color: #1434A4; } tw-link:hover { color: #6F8FAF; text-decoration: none; border-bottom: 4px solid #6F8FAF; } I want my images to be centered on the page, if you do to then enter the following code. We will go over how to add the "class" center when we go over how to add images to your game! .center { display: block; margin-left: auto; margin-right: auto; } Your story's stylesheet should look something like the one we made for this game below. GOOGLE FONTS You can change the primary font for your story in CSS. Google fonts has a visual guide to fonts to help you choose what to use. https://fonts.google.com/ HEX CODES COLOUR PICKER You can use this site to find and customize your Twine colour pallet using CSS or in Twine. https://htmlcolorcodes.com/ --- What would you like to do next?

Adding Images Music and Sounds

kqzheng — Wed, 12 Jul 2023 18:10:58 +0000

Adding images to your Twine game is as easy as adding HTML tags to your passage. You will need a hyperlink to an image, this is a bit more work if you are making your own images as you need a place on the internet to host them. We recommend using WordPress for this. You can simply upload your image your sites Media Library, click on it and copy the images URL that display in the attachment details! Let's say our game has an entryway with two doors and you found an image on Unsplash you will download the image and upload it to your media library in WordPress then add the following image HTML tag to your passage. (If you copy and paste the text the image will display from my media gallery and that is OK) Now let's say you want to center the image we will add the CSS center class we made. When we view the page we notice the image is huge! We will add the width and height attributes to the image tag! You can play with the percentages to see what works best for your game.

Photo by James Balensiefen on Unsplash

UnSplash is nice as we can give credit to the photographer by simply copying the credit line they provide.

Let's add some sounds!

If you are not making your own sounds then we recommend finding your sounds on Freesound. Freesound is a collaborative database of Creative commons Licensed sounds! The following code will play the sound of a door opening! Once again we have to upload the audio file to our WordPress site and copy the URL into the audio HTML tag. --- What would you like to do next?

Saving Your Twine

kqzheng — Wed, 12 Jul 2023 18:21:06 +0000

Saving your Twine to your desktop is important especially if you are using Twine online! The online version will save your work in your browser so it is very important to remember that if you or someone else clears your browser's history while you're working on your project, you could lose your work! To reduce the risk, it's good practice publish your Twines to a file. This is easy and will import back into Twine. If you have downloaded and installed Twine on your local computer your Twines will save to your documents folder. Please note that these files are for internal use only, do not save the Story HTML files you create using the Publish to File option within this folder or you could overwrite and lose the related Story Project file! From your story map you can publish your Twine by clicking ''Build'' then ''Publish to file''. See the image below. Please note: If you are using the online version of Twine an HTML file will automatically be downloaded if you have installed Twine you will be prompted to save your HTML file! --- What would you like to do next?

Let's Play - Twine

Main Body

Introduction

Appendix

Authors

Cover

Table of Contents

About

Buy

Access Denied

Book Information

H5P listing

Let's Play - Twine

References

Let's Play - Twine HTML

References

Getting Started With Twine

Make Your Game Look Great!

Adding Images Music and Sounds

Let's add some sounds!

Saving Your Twine