WhatITwirlwithTwine

=><= (live: 0.8s)[(transition:"dissolve")[ |title>[What I Twirl with Twine] ](stop:)] (live: 1.6s)[(transition:"dissolve")[ |subtitle>[**A tutorial on Twine 2 with Harlowe syntax** by Darren Tirto] ](stop:)] (live:2.4s)[(transition:"dissolve")[ [[Start->Quote]] ](stop:)]

=><= (live: 1s)[(transition:"dissolve")[ |quote>[“If you have ever peeled an onion, then you know that the first thin, papery layer reveals another thin, papery layer, and that layer reveals another, and another, and before you know it you have hundreds of layers ”] |subtitle>[–“A Series of Unfortunate Events #13: The End” by Lemony Snicket.] [[next->Chapter1]] ](stop:)]

|pagetitle>[STYLING WITH FASHION] |subtitle>[**How to style words for emphasis, subtlety, or aesthetic.**] --- In twine, **bolding**, //italicizing// and ~~crossing through~~ is quite straight forward, yet adds some ''//spice//'' to your dish. In the editor of any passage, words are styled by surrounding them with special symbols. For instance any words between a pair of two quotes (`**`) becomes bolded. It would look like `**bolded word**` in the editor and **bolded word** on the rendered version. Here is a small table of all the style symbols: |== **Styling** Italics Deleted/spoiler text Bold Superscript |== **Twine code** `//text//` `~~text~~` `**text**` `meters/second^^2^^` |== **Result** //text// ~~text~~ **text** meters/second^^2^^ ===| |==| You can always mix and match to make **//zesty//** looking words by typing something like `**//zesty//**`. [[next->layout]] (link: "practice")[ --- (set:$styleAnswer to " ")\ (set: $styleAnswer to (prompt: "Type in any word or phrase but make sure it is italizied.","Type in an italizied word or phrase here."))\ (if:(text: $styleAnswer)'s length < 2)[ you didn't enter anything [[Try Again->styling1]] ](else:)[ (if: (substring:$styleAnswer,1,2) is '//' and (substring:$styleAnswer,-1,-2) is '//')[|minititle>[**Great job!**] The rendered version of your phrase looks like: $styleAnswer ](else:)[|minititle>[Not quite.] The rendered version of your phrase looks like: $styleAnswer Remember to add `//` before and after your entire phrase [[Try Again->styling1]] ] ] ]

|pagetitle>[GENERALLY, SPECIFICALLY] |subtitle>[**How to customize font and color**] --- Now that we know how to do basic styling, we're going to jump into how we add more specific styles to text such as font and color. |minititle>[**FONTS:**] In order to apply a font to text, you type: |code>[`(font:"Font you want to apply")[Text you want to apply font style to]`.] This means something like |code>[`(font:"Helvetica")[I'm a comically safe font.]` ] will look like (font:"Helvetica")[I'm a comically safe font.] when rendered. |minititle>[**COLOR:**] Similarly to change color, the syntax looks something like: |code>[`(color:"Color you want to apply")[Text you want to apply color style to]`.] This means something like |code>[`(color:"Red")[I'm hard to read.]` ] will look like (color:"Red")[I'm hard to read.] when rendered. [[next->Quiz1]] (link: "practice")[ --- {(set:$styleAnswer2 to " ") (set: $styleAnswer2 to (prompt: "Type in any word or phrase and apply the font 'Courier New' to the whole phrase.","Type a word in Courier New here.")) }(if:(text: $styleAnswer2)'s length < 2)[ you didn't enter anything [[Try Again->styling2]] ](else:)[ (if: (substring:$styleAnswer2,1,21) is '(font:"Courier New")[' and (substring:$styleAnswer2,-1,-1) is ']')[ Great job! The rendered version of your phrase looks like: $styleAnswer2 ](else:)[ Not quite. The rendered version of your phrase looks like: $styleAnswer2 Remember that the format to apply a font to a text looks like: |code>[`(font:"Font you want to apply")[Text you want to apply font style to]`] [[Try Again->styling2]] ] ] ]

(set: $styleAnswer to (prompt: "Type in any word or phrase but make sure it is italizied.","Type in an italizied word or phrase here.")) =><= |pagetitle>[Results] (if: $styleAnswer's length<1)[ You didn't put anything in the textbox, feel free to try again. ] (else-if: (substring:$styleAnswer,1,2) is '//' and (substring:$styleAnswer,-1,-2) is '//')[ Great job! The rendered version of your phase looks like: $styleAnswer ] (else:)[ Not quite. The rendered version of your phrase looks like: $styleAnswer Remember to add `//` before and after your entire phrase] [[Try Again->stylePractice1]]

{  }

(set: $styleAnswer2 to (prompt: "Type in any word or phrase and apply the font 'Courier New' to the whole phrase.","Type a word in Courier New here.")) =><= |pagetitle>[Results] (if: (substring:$styleAnswer2,1,21) is '(font:"Courier New")[' and (substring:$styleAnswer2,-1,-1) is ']')[ Great job! The rendered version of your phrase looks like: $styleAnswer2 ] (else:)[ Not quite. The rendered version of your phrase looks like: $styleAnswer2 Remember that the format to apply a font to a text looks like: (font:"Courier New")[`(font:"Font you want to apply")[Text you want to apply font style to]`] ] [[Try Again->stylePractice2]]

(set:$why to "Alex>Darren") (set:(substring:$why,1,2) to "no")

(live:0.8s)[(transition:"dissolve")[ |pagetitle>[Variables] |subtitle>[Learning what are and how to use variables] --- ](stop:)] (live:1.6s)[(transition:"dissolve")[ Variables are important concepts in programming and brings about functionality that isn't possible on paper and pencil. The core concept of variables are that they are storage containers that hold values which you can later call upon. This is useful if you want to store and use a value that you don't completely know what it will be when you first create it. To create a variable in Twine, you simple type this syntax: |code>[`(set:$variableName to "value you want to store")`] For example, if you type |code>[`(set:$playerName to "Gandalf")`] Then the word gandalf is stored into the variable playerName (set:$playerName to "Gandalf") This doesn't seem immediately useful, but what you can do is that anytime you type `$playerName`, you get the output "Gandalf". This means that if you want to use a value either later or multiple times, life has gotten a little bit easier This means typing this: |code>[`$playerName`] Will render as: $playerName [[next->randomness]] ](stop:)]

(live:0.8s)[(transition:"dissolve")[ |pagetitle>[CHANGING THE FLOW] |subtitle>[**How to create choice through if statments**] --- ](stop:)] (live:1.6s)[(transition:"dissolve")[ What fun is programming an interactive world/essay/game without the ability to give the denizen/reader/player some choice? |minititle>[**OPTIONS:**] If statements enable you to do an action IF something is true. For example the code: |code>[`(if: $myName is "Botstein")["Hello president."] (else:)["Hello regular Bard member."]`] Will print out the message "Hello president." only //IF// the variable myName is the word "Botstein". //ELSE//, it will print the string "Hello regular Bard member." |minititle>[**THE CODE:**] So you've already seen the if statements in action but let's formally take a look at how to create one. It looks like this: |code>[`(if: oneThing is anotherThing)["do this if the things are the same"] (else:)["do this if the things aren't the same"]`] [[next->Quiz2]] ](stop:)]

==> |== (live:0.8s)[(transition:"dissolve")[ |title>[In the mood for stylin'] |subtitle>[**Chapter 1:** Word Styles, Fonts, Color and Layout] [[Start->styling1]] ](stop:)] |== (align:"<==")[ (live:0.8s)[(transition:"dissolve")[ ####|subtitle>[//**TABLE OF CONTENTS**//] ####|minititle>[**Basic Styling**] #####-Bolding #####-Italicizing #####-Strike through ####|minititle>[**Layout**] #####-Alignment #####-Columns ####|minititle>[**Specific Styling**] #####-Applying fonts #####-Applying colors ](stop:)] ] |==| =><=

==> |== (live:0.8s)[(transition:"dissolve")[ |title>[Variability] |subtitle>[**Chapter 2:** Variables, Randomness and If's] [[Start->variables]] ](stop:)] |== (align:"<==")[ (live:0.8s)[(transition:"dissolve")[ ####|subtitle>[//**TABLE OF CONTENTS**//] ####|minititle>[**Variables**] #####-Storing values ####|minititle>[**Randomness**] #####-'Either' #####-Combining randomness with variables ####|minititle>[**If Statments**] #####-Control the flow ](stop:)] ] |==| =><=

(live:0.8s)[(transition:"dissolve")[ |pagetitle>[OVER HERE AND WAY OVER THERE] |subtitle>[**Aligning and Columns**] --- ](stop:)] (live:1.6s)[(transition:"dissolve")[ |minititle>[**ALIGNMENT:**] By default any text given is left aligned. In order to align it differently, an alignment symbol must be given. When putting an alignment symbol, it applies it to all text after it until a new alignment symbol is run into. Here are what the alignment symbols look like: ==> `==>` This is right-aligned =><= `=><=` This is centered <==> `<==>` This is justified <== `<==` This is left-aligned ===><= `===><=` This has margins 3/4 left, 1/4 right =><===== `=><=====` This has margins 1/6 left, 5/6 right. <== |minititle>[**COLUMNS:**] Creating columns doesn't look too different. To do so, you also need to create columns symbols that is then applied to all text after it until another column is created, however there are some special rules. The column symbols consist of: - A number of | marks, indicating the size of the column relative to the other columns - A number of = marks surrounding it, indicating the size of the column's margins |== `|==` This is in the leftmost column, which has a right margin of about 2 letters wide. =|||= `=|||=` This is in the next column, which has margins of 1 letter wide. It is three times as wide as the left column. =====|| `=====||` This is in the right column, which has a right margin of about 5 letters wide. It is twice as wide as the left column. |==| `|==|` This symbol ends the whole column business. [[next->styling2]] ](stop:)]

(live:0.8s)[(transition:"dissolve")[ |pagetitle>[Randomness] |subtitle>[Learning how to randomly pick between several options] --- ](stop:)] (live:1.6s)[(transition:"dissolve")[ |minititle>[**RANDOM SELECTION**] A fun way to add more dynamic interactions or reconsumability of your piece is to add randomness. You can do this by typing: |code>[`(either: "option 1", "option 2", "option 3")`] For instance, if you were to write: |code>[I like my eggs `(either: "fried", "scrambled", "poached", "boiled", "baked", "basted")`] You'll get the result: I like my eggs (either: "fried", "scrambled", "poached", "boiled", "baked", "basted") And to see the real effect, try [[reloading->randomness]] the page. |minititle>[**USING RANDOMNESS IN VARIABLES**] So printing a different assortment of words on the screen is fun, but we can use what we learned before and combine it with this to a [[next->ifStatments]] ](stop:)]

=><= (live: 0.8s)[(transition:"dissolve")[ |title>[Chapter 1 Quiz] ](stop:)] (live: 1.6s)[(transition:"dissolve")[ |subtitle>[**Style and Formatting**] ](stop:)] (live:2.4s)[(transition:"dissolve")[ [[Start Quiz->Quiz1Question1]] ](stop:)]

<== |pagetitle>[Question 1] How would I create the word "zealous" italicized and bolded as well as placed to the right? (shown below): ==> //**zealous**// --- (set:$answer1 to " ") (set:$done1 to false) <==> |== (link-repeat: "Answer A)")[{ (if:$done1 is false)[(set:$answer1 to "**You're right.** the ==> symbol will align all text below it to the right. The pair of //'s will italicize everything in between and finally, the **'s will bold everything in between, putting it all together. [[Next->Quiz1Question2]]") (set:$done1 to true)] (else:)[ (set:$answer1 to "You've already selected an answer for this question. [[Try Again->Quiz1Question1]]")] }] |code>[`==> //**zealous**//`] |== (link-repeat: "Answer B)")[{ (if:$done1 is false)[ (set:$answer1 to "**Wrong**. The |== symbol is actually for columns, not alignment. This is used when you want several columns of text going down the page next to each other. [[Try Again->Quiz1Question1]]") (set:$done1 to true) ] (else:)[ (set:$answer1 to "You've already selected an answer for this question. [[Try Again->Quiz1Question1]]") ] }] |code>[`|== //**zealous**//`] |== (link-repeat: "Answer C)")[{ (if:$done1 is false)[ (set:$answer1 to "You've already selected an answer for this question [[Try Again->Quiz1Question1]]") (set:$done1 to true) ] (else:)[ (set:$answer1 to "You've already selected an answer for this question. [[Try Again->Quiz1Question1]]") ] }] |code>[`(align:"Right")[//**zealous**//]`] |== (link-repeat: "Answer D)")[{ (if:$done1 is false)[ (set:$answer1 to "**Wrong**. Although many ways to apply a property to a piece of text looks like this, Alignment actually uses a special symbol. Also the symbol for italcizing isn't correct. [[Try Again->Quiz1Question1]]") (set:$done1 to true) ] (else:)[ (set:$answer1 to "You've already selected an answer for this question. [[Try Again->Quiz1Question1]]") ] }] |code>[`(align:"Right")[~~**zealous**~~]`] |== (link-repeat: "Answer E)")[{ (if:$done1 is false)[ (set:$answer1 to "**Wrong**. Although almost correct, the symbol =><= is used for center alignment rather than right alignment. [[Try Again->Quiz1Question1]]") (set:$done1 to true) ] (else:)[ (set:$answer1 to "You've already selected an answer for this question. [[Try Again->Quiz1Question1]]") ] }] |code>[`=><= ~~**zealous**~~`] |==| --- (live:0.5s)[$answer1]

<== |pagetitle>[Question 2] How would I place one column on the left that says "car·tog·ra·phy" in the color blue and one column on the right that says "the science or practice of drawing maps" in the font Verdana. (Shown below) |== (color:"red")[car·tog·ra·phy] ==| (font:"Verdana")[the science or practice of drawing maps] |==| --- (set:$answer1 to " ") (set:$done1 to false) <==> |== (link-repeat: "Answer A)")[{ (if:$done1 is false)[(set:$answer1 to "**Wrong.** The ==> symbol is for alignment rather than columns. Also changing a color doesn't use the 'font' word. [[Try Again->Quiz1Question2]]") (set:$done1 to true)] (else:)[ (set:$answer1 to "You've already selected an answer for this question. [[Try Again->Quiz1Question2]]")] }] |code>[`<== (font:"Red"):[car·tog·ra·phy] ==> (font:"Verdana"):[the science or practice of drawing maps]`] |== (link-repeat: "Answer B)")[{ (if:$done1 is false)[ (set:$answer1 to "**Wrong.** The |==| symbol is to end the use of columns. Also changing a color doesn't use the 'font' word. [[Try Again->Quiz1Question2]]") (set:$done1 to true) ] (else:)[ (set:$answer1 to "You've already selected an answer for this question. [[Try Again->Quiz1Question2]]") ] }] |code>[`|==| (font:"Red"):[car·tog·ra·phy] |==| (font:"Verdana"):[the science or practice of drawing maps]`] |== (link-repeat: "Answer C)")[{ (if:$done1 is false)[ (set:$answer1 to "**Wrong.** Changing colors and fonts don't look like that. [[Try Again->Quiz1Question2]]") (set:$done1 to true) ] (else:)[ (set:$answer1 to "You've already selected an answer for this question. [[Try Again->Quiz1Question2]]") ] }] |code>[`|== /Red/car·tog·ra·phy/Red/ ==| /Verdana/the science or practice of drawing maps]/Verdana/`] |== (link-repeat: "Answer D)")[{ (if:$done1 is false)[ (set:$answer1 to "**You're Right**. The |== symbol will make all lines after it be placed on a left column until it sees the |== column which will put everything after it on the right column. [[Next->Chapter2]]") (set:$done1 to true) ] (else:)[ (set:$answer1 to "You've already selected an answer for this question. [[Try Again->Quiz1Question2]]") ] }] |code>[`|== (color:"Red"):[car·tog·ra·phy] ==| (font:"Verdana"):[the science or practice of drawing maps]`] |== (link-repeat: "Answer E)")[{ (if:$done1 is false)[ (set:$answer1 to "**Wrong**. The ==> symbol is for alignment rather than columns.. [[Try Again->Quiz1Question2]]") (set:$done1 to true) ] (else:)[ (set:$answer1 to "You've already selected an answer for this question. [[Try Again->Quiz1Question2]]") ] }] |code>[`<== (color:"Red"):[car·tog·ra·phy] ==> (font:"Verdana"):[the science or practice of drawing maps]`] |==| --- (live:1s)[$answer1]

Double-click this passage to edit it.