Twine Guidebook Version 1.2

Your browser lacks required capabilities. Please upgrade it or switch to another to continue.

Loading…

,,,,,,,

<center><h1>TABLE OF CONTENTS</h1></center> <h2>1. SugarCube Basics</h2><ul><li>[[Variables & Links|VARIABLES START]]</li> <li>[[Tags & Tag-Based Passages|TAGS START]]</li> <li>[[Dialog Boxes|DIALOG BOX START]]</li> <li>[[Stowing, Unstowing, & Hiding the UI Bar|UI BAR START]]</li> <li>[[Using Settings|SETTINGS START]]</li> <li>[[Widgets|WIDGETS START]]</li></ul> <h2>2. Useful Macros, Story Functions & Features</h2><ul><li>[[hasVisited & Not hasVisited|HASVISITED START]]</li> <li>[[Include Macro|INCLUDE START]]</li> <li>[[NOBR Macro and the NOBR Tag|NOBR START]]</li> <li>[[Linkreplace Macro|LINKREPLACE START]]</li> <li>[[Return Links for Game Menus|RETURN START]]</li></ul> <h2>3. Common RPG Features</h2><ul><li>[[Character Creator|CHARACTER CREATOR]]</li> <li>Skills and stats</li> <li>Notifications</li> <li>Relationships & romances</li> <li>Combat systems</li></ul> <h2>4. UI Design</h2><ul><li>Start Menus</li> <li>TBD</li></ul>

<center><h1>Character Creators</h1></center> See below for examples of different character creators. On some passages, I have provided a number of different methods of coding the same information. Which one you use depends on what you want your CC to look like and what works best for your game. Click the FORMAT link in the top right corner to change formats. <h3>Code Samples</h3> <ul><li>[[Fixed Character Creator|Fixed CC Gender SetUp]]</li> <li>[[Embedded Character Creator|Embedded CC START]]</li> <li>[[All-in-One Character Creator with Chapel's Pronoun Template|All-in-One CC]]</li></ul>

/* CONTROLS FOR TEMPLATE FORMATTING, NOT IMPORTANT */ /* RANDOM STATS FOR EXAMPLE */ <<set $sneaking to 0>> <<set $diplomacy to 0>> <<set $combat to 0>> /* SET UP FOR AUTONAME SAVE TOGGLE */ <<set $chapter to "Chapter 1">> <<set $name to "Gary">> <<set $surname to "Galavant">>

/*TIP: tag widget passages with nobr so you don't get unwanted whitespace when you print a widget. Widgets are printed in your game's text with <<widget name>>.*/ /* CAPITALIZED PRONOUNS */ <<widget "They">><<print $they.toUpperFirst()>><</widget>> <<widget "Them">><<print $them.toUpperFirst()>><</widget>> <<widget "Their">><<print $their.toUpperFirst()>><</widget>> <<widget "Theirs">><<print $theirs.toUpperFirst()>><</widget>> <<widget "Themself">><<print $themself.toUpperFirst()>><</widget>> /* PLURAL PRONOUNS */ <<widget "are">><<switch $plural>><<case true>>are<<case false>>is<</switch>><</widget>> <<widget "were">><<switch $plural>><<case true>>were<<case false>>was<</switch>><</widget>> <<widget "s">><<switch $plural>><<case true>><<case false>>s<</switch>><</widget>> <<widget "es">><<switch $plural>><<case true>><<case false>>es<</switch>><</widget>> <<widget "re">><<switch $plural>><<case true>>re<<case false>>s<</switch>><</widget>> <<widget "ve">><<switch $plural>><<case true>>ve<<case false>>s<</switch>><</widget>> /* CAPITALIZED NAMES */ <<widget "name">><<print $name.toUpperFirst()>><</widget>> <<widget "surname">><<print $surname.toUpperFirst()>><</widget>>

<<if not tags().includes("hide-ui")>><<link "Table of Contents" "Table of Contents">> <<unset $name, $gender, $they, $them, $their, $theirs, $themself, $They, $Them, $Their, $Theirs, $Themself, $skintone, $eye_colour, $hair_colour, $hair_length, $background>> <<set $sneaking to 0, $diplomacy to 0, $combat to 0>> <</link>><</if>> <<if tags().includes("hide-ui")>>[[Game Menu Example]]<</if>> <<if not tags().includes("hide-ui")>>[[Sources]]<</if>>

Idrelle Games

<span class="right"><<if $format is 1>>[[FORMAT: BUTTONS|Fixed CC Gender SetUp][$format to 2]]<<else>>[[FORMAT: LINKS|Fixed CC Gender SetUp][$format to 1]]<</if>></span><center><h1>Select Your Gender</h1></center> Choose your character's gender from the following options. <<if $format is 1>><<button 'Male' 'Fixed CC Pronouns'>><<set $gender to "male", $person to "man">><</button>> <<button 'Female' 'Fixed CC Pronouns'>><<set $gender to "female", $person to "woman">><</button>> <<button 'Nonbinary' 'Fixed CC Pronouns'>><<set $gender to "nonbinary", $person to "person">><</button>> <blockquote><h2>Code</h2> <pre>{{{<<button 'Male' 'Fixed CC Pronouns'>><<set $gender to "male", $person to "man">><</button>> <<button 'Female' 'Fixed CC Pronouns'>><<set $gender to "female", $person to "woman">><</button>> <<button 'Nonbinary' 'Fixed CC Pronouns'>><<set $gender to "nonbinary", $person to "person">><</button>>}}}</pre> <h2>Notes</h2> You can add more gender identities if you wish. If you have a number of gendered nouns you want to use to refer to the player character (i.e. addresses like Mr/Ms/Mx and my lord/my lady/ser; calling the player character boy/girl/child in childhood flashbacks; gendered insults, etc) this is a good place to set them. You can add them in by separating them from the other strings with a comma. <pre>{{{<<button 'Male' 'Fixed CC Pronouns'>><<set $gender to "male", $person to man", $ser to "my lord", $child to "boy">><</button>> <<button 'Female' 'Fixed CC Pronouns'>><<set $gender to "female", $person to woman", $ser to "my lady", $child to "girl">><</button>> <<button 'Nonbinary' 'Fixed CC Pronouns'>><<set $gender to "nonbinary", $person to "person", $ser to "ser", $child to "child">><</button>>}}}</pre> You can also use regular links instead of buttons, either with the Twine link markup {{{[[]]}}} or the {{{<<link>>}}} macro. If you are setting multiple variables with one choice, avoid using radiobuttons, dropdown menus, or cycling links as their options can only be set to a single variable.</blockquote><<else>>* [[Male|Fixed CC Pronouns][$gender to "male", $person to "man"]] * [[Female|Fixed CC Pronouns][$gender to "female", $person to "woman"]] * [[Nonbinary|Fixed CC Pronouns][$gender to "nonbinary", $person to "person"]] <blockquote><h2>Code</h2> <pre>{{{* [[Male|Fixed CC Pronouns][$gender to "male", $person to "man"]] * [[Female|Fixed CC Pronouns][$gender to "female", $person to "woman"]] * [[Nonbinary|Fixed CC Pronouns][$gender to "nonbinary", $person to "person"]]}}}}</pre> <h2>Notes</h2> Using the {{{[[]]}}} markup or the {{{<<link>>}}} macro with give you the same result. Their code looks slightly different: <pre>Twine Markup {{{* [[Male|Fixed CC Pronouns][$gender to "male", $person to "man"]] * [[Female|Fixed CC Pronouns][$gender to "female", $person to "woman"]] * [[Nonbinary|Fixed CC Pronouns][$gender to "nonbinary", $person to "person"]] Link Macro * <<link 'Male' 'Fixed CC Pronouns'>><<set $gender to "male", $person to "man">><</link>> * <<link 'Female' 'Fixed CC Pronouns'>><<set $gender to "female", $person to "woman">><</link>> * <<link 'Nonbinary' 'Fixed CC Pronouns'>><<set $gender to "nonbinary", $person to "person">><</link>>}}}</pre></blockquote><</if>>

<span class="right"><<if $format is 1>>[[FORMAT: VARIABLES & WIDGETS|Fixed CC Pronouns][$format to 2]]<<else>>[[FORMAT: VARIABLES ONLY|Fixed CC Pronouns][$format to 1]]<</if>></span><center><h1>Select Your Pronouns</h1></center> Choose your character's pronouns from the following presets or input custom pronouns below. <<if $format is 1>><h2>Presets</h2> <<button "He/Him" "Fixed CC Appearance">><<set $they to "he", $them to "him", $their to "his", $theirs to "his", $themself to "himself", $plural to false>><</button>> <<button "She/Her" "Fixed CC Appearance">><<set $they to "she", $them to "her", $their to "her", $theirs to "hers", $themself to "herself", $plural to false>><</button>> <<button "They/Them" "Fixed CC Appearance">><<set $they to "they", $them to "them", $their to "their", $theirs to "theirs", $themself to "themself", $plural to true>><</button>> <h2>Custom Pronouns</h2> Fill out the form using <b>uncapitalized</b> letters. <b>Nominative</b> <<textbox "$they" "xe">> <b>Accusative</b> <<textbox "$them" "xem">> <b>Pronominal Possessive</b> <<textbox "$their" "xyr">> <b>Predicative possessive</b> <<textbox "$theirs" "xyrs">> <b>Reflexive</b> <<textbox "$themself" "xemself">> <b>Pronoun Conjugation</b> <<radiobutton "$plural" false checked>>  Singular <<radiobutton "$plural" true>>  Plural <<button 'Confirm Custom Pronouns'>> <<run Dialog.setup("Confirm Custom Pronouns"); Dialog.wiki(Story.get("Confirm Custom Pronouns").processText()); Dialog.open();>> <</button>> <blockquote><h2>Code</h2> <pre>{{{<h2>Presets</h2> <<button "He/Him" "Fixed CC Appearance">> <<set $they to "he", $them to "him", $their to "his", $theirs to "his", $themself to "himself", $plural to false>> <</button>> <<button "She/Her" "Fixed CC Appearance">> <<set $they to "she", $them to "her", $their to "her", $theirs to "hers", $themself to "herself", $plural to false>> <</button>> <<button "They/Them" "Fixed CC Appearance">> <<set $they to "they", $them to "them", $their to "their", $theirs to "theirs", $themself to "themself", $plural to true>> <</button>> <h2>Custom Pronouns</h2> Fill out the form using <b>uncapitalized</b> letters. <b>Nominative</b> <<textbox "$they" "xe">> <b>Accusative</b> <<textbox "$them" "xem">> <b>Pronominal Possessive</b> <<textbox "$their" "xyr">> <b>Predicative possessive</b> <<textbox "$theirs" "xyrs">> <b>Reflexive</b> <<textbox "$themself" "xemself">> <b>Pronoun Conjugation</b> <<radiobutton "$plural" false checked>>  Singular <<radiobutton "$plural" true>>  Plural <<button 'Confirm Custom Pronouns'>> <<run Dialog.setup("Confirm Custom Pronouns"); Dialog.wiki(Story.get("Confirm Custom Pronouns").processText()); Dialog.open();>> <</button>>}}}</pre> <h2>Notes</h2> Run a confirm custom pronouns dialog to show the player how their inputs will be printed in-game. This will let them know if there's any mistakes and if they need to close the box and redo their entries. The format demonstrated here uses widgets and {{{<<print <string>.toUpperfirst()>>}}} to adjust for capitalization.</blockquote><<else>><h2>Presets</h2> <<button "He/Him" "Fixed CC Appearance">> <<set $They to "He", $they to "he", $Them to "Him", $them to "him", $Their to "His", $their to "his", $Theirs to "His", $theirs to "his", $Themself to "Himself", $themself to "himself", $plural to false>> <</button>> <<button "She/Her" "Fixed CC Appearance">> <<set $They to "She", $they to "she", $Them to "Her", $them to "her", $Their to "Her", $their to "her", $Theirs to "Theirs", $theirs to "hers", $Themself to "Themself", $themself to "herself", $plural to false>> <</button>> <<button "They/Them" "Fixed CC Appearance">> <<set $They to "They", $they to "they", $Them to "Them", $them to "them", $Their to "Their", $their to "their", $Theirs to "Theirs", $theirs to "theirs", $Themself to "Themself", $themself to "themself", $plural to true>> <</button>> <h2>Custom Pronouns</h2> <b>Nominative - Capitalized</b> <<textbox "$They" "Xe">> <b>Nominative - Uncapitalized</b> <<textbox "$they" "xe">> <b>Accusative - Capitalized</b> <<textbox "$Them" "Xem">> <b>Accusative - Uncapitalized</b> <<textbox "$them" "xem">> <b>Pronominal Possessive - Capitalized</b> <<textbox "$Their" "Xyr">> <b>Pronominal Possessive - Uncapitalized</b> <<textbox "$their" "xyr">> <b>Predicative Possessive - Capitalized</b> <<textbox "$Theirs" "Xyrs">> <b>Predicative Possesive - Uncapitalized</b> <<textbox "$theirs" "xyrs">> <b>Reflexive - Capitalized</b> <<textbox "$Themself" "Xemself">> <b>Reflexive - Uncapitalized</b> <<textbox "$themself" "xemself">> <b>Pronoun Conjugation</b> <<radiobutton "$plural" false checked>>  Singular <<radiobutton "$plural" true>>  Plural <<button 'Confirm Custom Pronouns'>> <<run Dialog.setup("Confirm Custom Pronouns"); Dialog.wiki(Story.get("Confirm Custom Pronouns").processText()); Dialog.open();>> <</button>> <blockquote><h2>Code</h2> <pre>{{{<h2>Presets</h2> <<button "He/Him" "Fixed CC Appearance">> <<set $They to "He", $they to "he", $Them to "Him", $them to "him", $Their to "His", $their to "his", $Theirs to "His", $theirs to "his", $Themself to "Himself", $themself to "himself", $plural to false>> <</button>> <<button "She/Her" "Fixed CC Appearance">> <<set $They to "She", $they to "she", $Them to "Her", $them to "her", $Their to "Her", $their to "her", $Theirs to "Theirs", $theirs to "hers", $Themself to "Themself", $themself to "herself", $plural to false>> <</button>> <<button "They/Them" "Fixed CC Appearance">> <<set $They to "They", $they to "they", $Them to "Them", $them to "them", $Their to "Their", $their to "their", $Theirs to "Theirs", $theirs to "theirs", $Themself to "Themself", $themself to "themself", $plural to true>> <</button>> <h2>Custom Pronouns</h2> <b>Nominative - Capitalized</b> <<textbox "$They" "Xe">> <b>Nominative - Uncapitalized</b> <<textbox "$they" "xe">> <b>Accusative - Capitalized</b> <<textbox "$Them" "Xem">> <b>Accusative - Uncapitalized</b> <<textbox "$them" "xem">> <b>Pronominal Possessive - Capitalized</b> <<textbox "$Their" "Xyr">> <b>Pronominal Possessive - Uncapitalized</b> <<textbox "$their" "xyr">> <b>Predicative Possessive - Capitalized</b> <<textbox "$Theirs" "Xyrs">> <b>Predicative Possesive - Uncapitalized</b> <<textbox "$theirs" "xyrs">> <b>Reflexive - Capitalized</b> <<textbox "$Themself" "Xemself">> <b>Reflexive - Uncapitalized</b> <<textbox "$themself" "xemself">> <b>Pronoun Conjugation</b> <<radiobutton "$plural" false checked>>  Singular <<radiobutton "$plural" true>>  Plural <<button 'Confirm Custom Pronouns'>> <<run Dialog.setup("Confirm Custom Pronouns"); Dialog.wiki(Story.get("Confirm Custom Pronouns").processText()); Dialog.open();>> <</button>>}}}</pre> <h2>Notes</h2> Run a confirm custom pronouns dialog to show the player how their inputs will be printed in-game. This will let them know if there's any mistakes and if they need to close the box and redo their entries. The format demonstrated here uses separate variables to adjust for capitalization.</blockquote><</if>> <blockquote><h2>Other</h2> [[Test Pronouns & Pronoun Widgets|Pronoun Widget Test]]</blockquote>

<span class="right"><<if $format is 1>>[[FORMAT: RADIOBUTTONS|Fixed CC Appearance][$format to 2]]<<elseif $format is 2>>[[FORMAT: DROPDOWN MENUS|Fixed CC Appearance][$format to 3]]<<else>>[[FORMAT: CYCLING LINKS|Fixed CC Appearance][$format to 1]]<</if>></span><center><h1>Choose Your Appearance</h1></center><<if $format is 1>><div class="box"><div class="column"><h2>Skin Tone</h2><label><<radiobutton "$skintone" "black" checked>> Black</label> <label><<radiobutton "$skintone" "brown">> Brown</label> <label><<radiobutton "$skintone" "beige">> Beige</label></div> <div class="column"><h2>Eye Colour</h2><label><<radiobutton "$eye_colour" "black" checked>> Black</label> <label><<radiobutton "$eye_colour" "brown">> Brown</label> <label><<radiobutton "$eye_colour" "green">> Green</label> <label><<radiobutton "$eye_colour" "blue">> Blue</label></div></div> <div class="box"><div class="column"><h2>Hair Colour</h2><label><<radiobutton "$hair_colour" "black" checked>> Black</label> <label><<radiobutton "$hair_colour" "brown">> Brown</label> <label><<radiobutton "$hair_colour" "auburn">> Auburn</label> <label><<radiobutton "$hair_colour" "red">> Red</label> <label><<radiobutton "$hair_colour" "blonde">> Blonde</label></div> <div class="column"><h2>Hair Length</h2><label><<radiobutton "$hair_length" "shaved" checked>> Shaved</label> <label><<radiobutton "$hair_length" "short">> Short</label> <label><<radiobutton "$hair_length" "shoulder-length">> Shoulder-length</label> <label><<radiobutton "$hair_length" "long">> Long</label> <label><<radiobutton "$hair_length" "waist-length">> Waist-length</label></div></div> <<button 'Confirm Appearance' 'Fixed CC Background'>><</button>> <blockquote><h2>Code</h2> There's some very basic CSS & HTML to align the each option into columns. <pre>{{{<div class="box"><div class="column"><h2>Skin Tone</h2><label><<radiobutton "$skintone" "black" checked>> Black</label> <label><<radiobutton "$skintone" "brown">> Brown</label> <label><<radiobutton "$skintone" "beige">> Beige</label></div> <div class="column"><h2>Eye Colour</h2><label><<radiobutton "$eye_colour" "black" checked>> Black</label> <label><<radiobutton "$eye_colour" "brown">> Brown</label> <label><<radiobutton "$eye_colour" "green">> Green</label> <label><<radiobutton "$eye_colour" "blue">> Blue</label></div></div> <div class="box"><div class="column"><h2>Hair Colour</h2><label><<radiobutton "$hair_colour" "black" checked>> Black</label> <label><<radiobutton "$hair_colour" "brown">> Brown</label> <label><<radiobutton "$hair_colour" "auburn">> Auburn</label> <label><<radiobutton "$hair_colour" "red">> Red</label> <label><<radiobutton "$hair_colour" "blonde">> Blonde</label></div> <div class="column"><h2>Hair Length</h2><label><<radiobutton "$hair_length" "shaved" checked>> Shaved</label> <label><<radiobutton "$hair_length" "short">> Short</label> <label><<radiobutton "$hair_length" "shoulder-length">> Shoulder-length</label> <label><<radiobutton "$hair_length" "long">> Long</label> <label><<radiobutton "$hair_length" "waist-length">> Waist-length</label></div></div>}}}</pre> CSS (Place in Story Stylesheet): <pre>{{{.box { display: flex; width: 100%; padding-left: 5px; padding-right: 5px; padding-top: none; padding-bottom: none; flex-wrap: wrap; flex-direction: row; } .column { flex: 1; width: 100%; text-align: left; } }}}</pre></blockquote><<elseif $format is 2>><b>SKIN TONE:</b> <<listbox "$skintone" autoselect>> <<option "black">> <<option "brown">> <<option "beige">> <</listbox>> <b>EYE COLOUR:</b> <<listbox "$eye_colour" autoselect>> <<option "black">> <<option "brown">> <<option "green">> <<option "blue">> <</listbox>> <b>HAIR COLOUR:</b> <<listbox "$hair_colour" autoselect>> <<option "black">> <<option "brown">> <<option "auburn">> <<option "red">> <<option "blonde">> <</listbox>> <b>HAIR LENGTH:</b> <<listbox "$hair_length" autoselect>> <<option "shaved">> <<option "short">> <<option "shoulder-length">> <<option "long">> <<option "waist-length">> <</listbox>> <<button 'Confirm Appearance' 'Fixed CC Background'>><</button>> <blockquote><h2>Code</h2> <pre>{{{<b>SKIN TONE:</b> <<listbox "$skintone" autoselect>> <<option "black">> <<option "brown">> <<option "beige">> <</listbox>> <b>EYE COLOUR:</b> <<listbox "$eye_colour" autoselect>> <<option "black">> <<option "brown">> <<option "green">> <<option "blue">> <</listbox>> <b>HAIR COLOUR:</b> <<listbox "$hair_colour" autoselect>> <<option "black">> <<option "brown">> <<option "auburn">> <<option "red">> <<option "blonde">> <</listbox>> <b>HAIR LENGTH:</b> <<listbox "$hair_length" autoselect>> <<option "shaved">> <<option "short">> <<option "shoulder-length">> <<option "long">> <<option "waist-length">> <</listbox>>}}}</pre></blockquote><<else>><b>SKIN TONE:</b> <<cycle "$skintone" autoselect>> <<option "black">> <<option "brown">> <<option "beige">> <</cycle>> <b>EYE COLOUR:</b> <<cycle "$eye_colour" autoselect>> <<option "black">> <<option "brown">> <<option "green">> <<option "blue">> <</cycle>> <b>HAIR LENGTH:</b> <<cycle "$hair_length" autoselect>> <<option "shaved">> <<option "short">> <<option "shoulder-length">> <<option "long">> <<option "waist-length">> <</cycle>> <b>HAIR COLOUR:</b> <<cycle "$hair_colour" autoselect>> <<option "black">> <<option "brown">> <<option "auburn">> <<option "red">> <<option "blonde">> <</cycle>> <<button 'Confirm Appearance' 'Fixed CC Background'>><</button>> <blockquote><h2>Code</h2> <pre>{{{<b>SKIN TONE:</b> <<cycle "$skintone" autoselect>> <<option "black">> <<option "brown">> <<option "beige">> <</cycle>> <b>EYE COLOUR:</b> <<cycle "$eye_colour" autoselect>> <<option "black">> <<option "brown">> <<option "green">> <<option "blue">> <</cycle>> <b>HAIR LENGTH:</b> <<cycle "$hair_length" autoselect>> <<option "shaved">> <<option "short">> <<option "shoulder-length">> <<option "long">> <<option "waist-length">> <</cycle>> <b>HAIR COLOUR:</b> <<cycle "$hair_colour" autoselect>> <<option "black">> <<option "brown">> <<option "auburn">> <<option "red">> <<option "blonde">> <</cycle>>}}}</pre></blockquote><</if>>

Are your pronouns correct? <<if $format is 1>>* <<They>> / $they * <<Them>> / $them * <<Their>> / $their * <<Theirs>> / $theirs * <<Themself>> / $themself<<else>>* $They / $they * $Them / $them * $Their / $their * $Theirs / $theirs * $Themself / $themself<</if>> <b>Conjugation:</b> <<if $plural is true>>Plural<<else>>Singular<</if>> <center><<button 'Confirm & Continue' 'Fixed CC Appearance'>><<run Dialog.close()>><</button>></center>

<span class="right"><<if $format is 1>>[[FORMAT: MESSAGE MACRO|Fixed CC Background][$format to 2]]<<elseif $format is 2>>[[FORMAT: DIALOG|Fixed CC Background][$format to 3]]<<else>>[[FORMAT: LINKS|Fixed CC Background][$format to 1]]<</if>></span><center><h1>Choose Your Background</h1></center> <<if $format is 1>><<button "Thief" "Fixed CC Names">><<set $background to "thief", $sneaking +=2>><</button>> <<message '[info]'>>Description here. +2 to Sneaking.<</message>> <<button "Noble" "Fixed CC Names">><<set $background to "noble", $diplomacy +=2>><</button>> <<message '[info]'>>Description here. +2 to Diplomacy.<</message>> <<button "Knight" "Fixed CC Names">><<set $background to "knight", $combat +=2>><</button>> <<message '[info]'>>Description here. +2 to Combat.<</message>> <blockquote><h2>Code</h2> <pre>{{{<<button "Thief" "Fixed CC Names">><<set $background to "thief", $sneaking +=2>><</button>> <<message '[info]'>>Description here. +2 to Sneaking.<</message>> <<button "Noble" "Fixed CC Names">><<set $background to "noble", $diplomacy +=2>><</button>> <<message '[info]'>>Description here. +2 to Diplomacy.<</message>> <<button "Knight" "Fixed CC Names">><<set $background to "knight", $combat +=2>><</button>> <<message '[info]'>>Description here. +2 to Combat.<</message>>}}}</pre></blockquote><<elseif $format is 2>><<button "Thief">> <<dialog 'Thief'>> Description here. +2 to Sneaking. <<button 'Confirm Background'>> <<set $background to "thief", $sneaking +=2>> <<run Dialog.close()>> <<run Engine.play("Fixed CC Names")>> <</button>> <</dialog>> <</button>> <<button "Noble">> <<dialog 'Noble'>> Description here. +2 to Diplomacy. <<button 'Confirm Background'>> <<set $background to "noble", $diplomacy +=2>> <<run Dialog.close()>> <<run Engine.play("Fixed CC Names")>> <</button>> <</dialog>> <</button>> <<button "Knight">> <<dialog 'Knight'>> Description here. +2 to Combat. <<button 'Confirm Background'>> <<set $background to "knight", $combat +=2>> <<run Dialog.close()>> <<run Engine.play("Fixed CC Names")>> <</button>> <</dialog>> <</button>> <blockquote><h2>Code</h2> <pre>{{{<<button "Thief">> <<dialog 'Thief'>> Description here. +2 to Sneaking. <<button 'Confirm Background'>> <<set $background to "thief", $sneaking +=2>> <<run Dialog.close()>> <<run Engine.play("Fixed CC Names")>> <</button>> <</dialog>> <</button>> <<button "Noble">> <<dialog 'Noble'>> Description here. +2 to Diplomacy. <<button 'Confirm Background'>> <<set $background to "noble", $diplomacy +=2>> <<run Dialog.close()>> <<run Engine.play("Fixed CC Names")>> <</button>> <</dialog>> <</button>> <<button "Knight">> <<dialog 'Knight'>> Description here. +2 to Combat. <<button 'Confirm Background'>> <<set $background to "knight", $combat +=2>> <<run Dialog.close()>> <<run Engine.play("Fixed CC Names")>> <</button>> <</dialog>> <</button>>}}}</pre> <h2>Notes</h2> Instead of using the dialog API to open a dialog box (like in the Confirm Custom Pronouns example), I am using Chapel's dialog API macro to open a box, but keep all the text in the same passage.</blockquote><<else>>[[Thief|Fixed CC Names][$background to "thief", $sneaking +=2]] Description here. +2 to Sneaking. [[Noble|Fixed CC Names][$background to "noble", $diplomacy +=2]] Description here. +2 to Diplomacy. [[Knight|Fixed CC Names][$background to "knight", $combat +=2]] Description here. +2 to Combat. <blockquote><h2>Code</h2> <pre>{{{[[Thief|Fixed CC Names][$background to "thief", $sneaking +=2]] Description here. +2 to Sneaking. [[Noble|Fixed CC Names][$background to "noble", $diplomacy +=2]] Description here. +2 to Diplomacy. [[Knight|Fixed CC Names][$background to "knight", $combat +=2]] Description here. +2 to Combat.}}}</pre></blockquote><</if>>

<<if tags().includes("tbar")>>\ <div id="topbar"><div id="bbblock"><div id="bbtext"><span class="right">Put your top bar text here.</span></div></div></div><</if>>\ <<script>> $(document).one(":passagedisplay", function (event) { if ($("#topbar").length) { $("#passages").css("margin-top", $("#topbar").outerHeight() + 10); } else { $("#passages").css("margin-top", 0); } }); <</script>>\

<<if tags().includes("bbar")>> <div id="bottombar"><div id="bbblock"><div id="bbtext">Put your bottom bar text here.</div></div></div><</if>>

<h2>Embedded Character Creators</h2> I've included two different formats here, though elements of both can be combined together. The first uses Chapel's pronoun template in conjunction with cycling links. The second uses the pronoun system demonstrated in the Fixed CC examples and a series of links similar to how this is achieved in ChoiceScript. * [[Pronoun Template and Cycling Link Format|Embedded CC CYCLING LINK START]] * [[Link Format|EMBED CC LINK FORMAT GENDER AND PRONOUNS]]

<center><h1>Character Creator</h1></center> <h2>GENDER & PRONOUNS</h2> <<button 'Configure'>> <<pronouns>> <</button>> <h2>APPEARANCE</h2> <b>Skin Tone</b> <label><<radiobutton "$skintone" "black" checked>> Black</label> <label><<radiobutton "$skintone" "brown">> Brown</label> <label><<radiobutton "$skintone" "beige">> Beige</label> <b>Eye Colour</b> <label><<radiobutton "$eye_colour" "black" checked>> Black</label> <label><<radiobutton "$eye_colour" "brown">> Brown</label> <label><<radiobutton "$eye_colour" "green">> Green</label> <label><<radiobutton "$eye_colour" "blue">> Blue</label> <b>Hair Colour</b> <label><<radiobutton "$hair_colour" "black" checked>> Black</label> <label><<radiobutton "$hair_colour" "brown">> Brown</label> <label><<radiobutton "$hair_colour" "auburn">> Auburn</label> <label><<radiobutton "$hair_colour" "red">> Red</label> <label><<radiobutton "$hair_colour" "blonde">> Blonde</label> <b>Hair Length</b> <label><<radiobutton "$hair_length" "shaved" checked>> Shaved</label> <label><<radiobutton "$hair_length" "short">> Short</label> <label><<radiobutton "$hair_length" "shoulder-length">> Shoulder-length</label> <label><<radiobutton "$hair_length" "long">> Long</label> <label><<radiobutton "$hair_length" "waist-length">> Waist-length</label> <h2>BACKGROUND</h2> <label><<radiobutton "$background" "thief" checked>> Thief</label> <<message '[info]'>>Description here. +2 to Sneaking.<</message>> <label><<radiobutton "$background" "noble">> Noble</label> <<message '[info]'>>Description here. +2 to Diplomacy.<</message>> <label><<radiobutton "$background" "knight">> Knight</label> <<message '[info]'>>Description here. +2 to Combat.<</message>> <h2>NAME</h2> <b>GIVEN NAME:</b> <<textbox "$name" "">> <b>SURNAME:</b> <<textbox "$surname" "">> <<button "Confirm Character">><<if $name is "" and $surname is "">><<replace "#textbox-error">> Please enter a full name.<</replace>> <<elseif $name is "">><<replace "#textbox-error">> Please enter a given name.<</replace>> <<elseif $surname is "">><<replace "#textbox-error">> Please enter a surname.<</replace>> <<else>> <<replace "#textbox-error">><</replace>> <<if $background is "thief">><<set $sneaking +=2>> <<elseif $background is "noble">><<set $diplomacy +=2>> <<else>><<set $combat +=2>><</if>> <<run Engine.play("All-in-One Character Review")>> <</if>><</button>><span id="textbox-error"></span> <blockquote><h2>Code</h2> <pre>{{{<center><h1>Character Creator</h1></center> <h2>GENDER & PRONOUNS</h2> <<button 'Configure'>> <<pronouns>> <</button>> <h2>APPEARANCE</h2> <b>Skin Tone</b> <label><<radiobutton "$skintone" "black" checked>> Black</label> <label><<radiobutton "$skintone" "brown">> Brown</label> <label><<radiobutton "$skintone" "beige">> Beige</label> <b>Eye Colour</b> <label><<radiobutton "$eye_colour" "black" checked>> Black</label> <label><<radiobutton "$eye_colour" "brown">> Brown</label> <label><<radiobutton "$eye_colour" "green">> Green</label> <label><<radiobutton "$eye_colour" "blue">> Blue</label> <b>Hair Colour</b> <label><<radiobutton "$hair_colour" "black" checked>> Black</label> <label><<radiobutton "$hair_colour" "brown">> Brown</label> <label><<radiobutton "$hair_colour" "auburn">> Auburn</label> <label><<radiobutton "$hair_colour" "red">> Red</label> <label><<radiobutton "$hair_colour" "blonde">> Blonde</label> <b>Hair Length</b> <label><<radiobutton "$hair_length" "shaved" checked>> Shaved</label> <label><<radiobutton "$hair_length" "short">> Short</label> <label><<radiobutton "$hair_length" "shoulder-length">> Shoulder-length</label> <label><<radiobutton "$hair_length" "long">> Long</label> <label><<radiobutton "$hair_length" "waist-length">> Waist-length</label> <h2>BACKGROUND</h2> <label><<radiobutton "$background" "thief" checked>> Thief</label> <<message '[info]'>>Description here. +2 to Sneaking.<</message>> <label><<radiobutton "$background" "noble">> Noble</label> <<message '[info]'>>Description here. +2 to Diplomacy.<</message>> <label><<radiobutton "$background" "knight">> Knight</label> <<message '[info]'>>Description here. +2 to Combat.<</message>> <h2>NAME</h2> <b>GIVEN NAME:</b> <<textbox "$name" "">> <b>SURNAME:</b> <<textbox "$surname" "">> <<button "Confirm Character">><<if $name is "" and $surname is "">><<replace "#textbox-error">> Please enter a full name.<</replace>> <<elseif $name is "">><<replace "#textbox-error">> Please enter a given name.<</replace>> <<elseif $surname is "">><<replace "#textbox-error">> Please enter a surname.<</replace>> <<else>> <<replace "#textbox-error">><</replace>> <<if $background is "thief">><<set $sneaking +=2>> <<elseif $background is "noble">><<set $diplomacy +=2>> <<else>><<set $combat +=2>><</if>> <<run Engine.play("All-in-One Character Review")>> <</if>><</button>><span id="textbox-error"></span>}}}</pre></blockquote>

<span class="right"><<if $format is 1>>[[FORMAT: BASIC|Fixed CC Names][$format to 2]]<<elseif $format is 2>>[[FORMAT: FIRST & LAST NAMES|Fixed CC Names][$format to 3]]<<elseif $format is 3>>[[FORMAT: GENDER DEFAULTS|Fixed CC Names][$format to 4]]<<elseif $format is 4>>[[FORMAT: GENDER & BACKGROUND DEFAULTS|Fixed CC Names][$format to 5]]<<elseif $format is 5>>[[FORMAT: DROPDOWN SUGGESTIONS|Fixed CC Names][$format to 6]]<<else>>[[FORMAT: SUGGESTION BOX|Fixed CC Names][$format to 1]]<</if>></span><center><h1>Choose Your Name</h1></center> <<if $format is 1>><<textbox "$name" "">> <<button "Confirm">><<if $name is "">><<replace "#textbox-error">> Please enter a name.<</replace>> <<else>> <<replace "#textbox-error">><</replace>> <<run Engine.play("Fixed CC Review")>> <</if>><</button>><span id="textbox-error"></span> <blockquote><h2>Code</h2> <pre>{{{<<textbox "$name" "">> <<button "Confirm">><<if $name is "">><<replace "#textbox-error">> Please enter a name.<</replace>> <<else>> <<replace "#textbox-error">><</replace>> <<run Engine.play("Fixed CC Review")>> <</if>><</button>><span id="textbox-error"></span>}}}</pre></blockquote><<elseif $format is 2>><b>GIVEN NAME:</b> <<textbox "$name" "">> <b>SURNAME:</b> <<textbox "$surname" "">> <<button "Confirm">><<if $name is "" and $surname is "">><<replace "#textbox-error">> Please enter a full name.<</replace>> <<elseif $name is "">><<replace "#textbox-error">> Please enter a given name.<</replace>> <<elseif $surname is "">><<replace "#textbox-error">> Please enter a surname.<</replace>> <<else>> <<replace "#textbox-error">><</replace>> <<run Engine.play("Fixed CC Review")>> <</if>><</button>><span id="textbox-error"></span> <blockquote><h2>Code</h2> <pre>{{{<b>GIVEN NAME:</b> <<textbox "$name" "">> <b>SURNAME:</b> <<textbox "$surname" "">> <<button "Confirm">><<if $name is "" and $surname is "">><<replace "#textbox-error">> Please enter a full name.<</replace>> <<elseif $name is "">><<replace "#textbox-error">> Please enter a given name.<</replace>> <<elseif $surname is "">><<replace "#textbox-error">> Please enter a surname.<</replace>> <<else>> <<replace "#textbox-error">><</replace>> <<run Engine.play("Fixed CC Review")>> <</if>><</button>><span id="textbox-error"></span>}}}</pre></blockquote><<elseif $format is 3>><b>GIVEN NAME:</b> <<if $gender is "male">><<textbox "$name" "Gary">> <<elseif $gender is "female">><<textbox "$name" "Isabella">> <<else>><<textbox "$name" "River">><</if>> <b>SURNAME:</b> <<textbox "$surname" "Galavant">> <<button "Confirm">><<if $name is "" and $surname is "">><<replace "#textbox-error">> Please enter a full name.<</replace>> <<elseif $name is "">><<replace "#textbox-error">> Please enter a given name.<</replace>> <<elseif $surname is "">><<replace "#textbox-error">> Please enter a surname.<</replace>> <<else>> <<replace "#textbox-error">><</replace>> <<run Engine.play("Fixed CC Review")>> <</if>><</button>><span id="textbox-error"></span> <blockquote><h2>Code</h2> <pre>{{{<b>GIVEN NAME:</b> <<if $gender is "male">><<textbox "$name" "Gary">> <<elseif $gender is "female">><<textbox "$name" "Isabella">> <<else>><<textbox "$name" "River">><</if>> <b>SURNAME:</b> <<textbox "$surname" "Galavant">> <<button "Confirm">><<if $name is "" and $surname is "">><<replace "#textbox-error">> Please enter a full name.<</replace>> <<elseif $name is "">><<replace "#textbox-error">> Please enter a given name.<</replace>> <<elseif $surname is "">><<replace "#textbox-error">> Please enter a surname.<</replace>> <<else>> <<replace "#textbox-error">><</replace>> <<run Engine.play("Fixed CC Review")>> <</if>><</button>><span id="textbox-error"></span>}}}</pre></blockquote> <<elseif $format is 4>><b>GIVEN NAME:</b> <<if $gender is "male">><<textbox "$name" "Gary">> <<elseif $gender is "female">><<textbox "$name" "Isabella">> <<else>><<textbox "$name" "River">><</if>> <b>SURNAME:</b> <<if $background is "thief">><<textbox "$surname" "Rider">><<elseif $background is "noble">><<textbox "$surname" "Percival">><<else>><<textbox "$surname" "Galavant">><</if>> <<button "Confirm">><<if $name is "" and $surname is "">><<replace "#textbox-error">> Please enter a full name.<</replace>> <<elseif $name is "">><<replace "#textbox-error">> Please enter a given name.<</replace>> <<elseif $surname is "">><<replace "#textbox-error">> Please enter a surname.<</replace>> <<else>> <<replace "#textbox-error">><</replace>> <<run Engine.play("Fixed CC Review")>> <</if>><</button>><span id="textbox-error"></span> <blockquote><h2>Code</h2> <pre>{{{<b>GIVEN NAME:</b> <<if $gender is "male">><<textbox "$name" "Gary">> <<elseif $gender is "female">><<textbox "$name" "Isabella">> <<else>><<textbox "$name" "River">><</if>> <b>SURNAME:</b> <<if $background is "thief">><<textbox "$surname" "Rider">><<elseif $background is "noble">><<textbox "$surname" "Percival">><<else>><<textbox "$surname" "Galavant">><</if>> <<button "Confirm">><<if $name is "" and $surname is "">><<replace "#textbox-error">> Please enter a full name.<</replace>> <<elseif $name is "">><<replace "#textbox-error">> Please enter a given name.<</replace>> <<elseif $surname is "">><<replace "#textbox-error">> Please enter a surname.<</replace>> <<else>> <<replace "#textbox-error">><</replace>> <<run Engine.play("Fixed CC Review")>> <</if>><</button>><span id="textbox-error"></span>}}}</pre></blockquote><<elseif $format is 5>><b>GIVEN NAME:</b> <<listbox "$name" autoselect>> <<option "Gary">> <<option "Isabella">> <<option "Sid">> <<option "Madalena">> <<option "Richard">> <<option "Tad">> <</listbox>> <b>SURNAME:</b> <<listbox "$surname" autoselect>> <<option "Galavant">> <<option "Cooper">> <<option "Wormwood">> <<option "Hortensia">> <<option "Valencia">> <</listbox>> <<button "Input Your Own">> <<dialog 'Input Your own'>> <b>Given Name:</b> <<textbox "$name" "">> <b>Surname:</b> <<textbox "$surname" "">> <<button "Confirm">><<if $name is "" and $surname is "">><<replace "#textbox-error">> Please enter a full name.<</replace>> <<elseif $name is "">><<replace "#textbox-error">> Please enter a given name.<</replace>> <<elseif $surname is "">><<replace "#textbox-error">> Please enter a surname.<</replace>> <<else>> <<replace "#textbox-error">><</replace>> <<run Dialog.close();>> <<run Engine.play("Fixed CC Review")>> <</if>><</button>><span id="textbox-error"></span> <</dialog>><</button>> <<button "Confirm" "Fixed CC Review">><</button>> <blockquote><h2>Code</h2> <pre>{{{<b>GIVEN NAME:</b> <<listbox "$name" autoselect>> <<option "Gary">> <<option "Isabella">> <<option "Sid">> <<option "Madalena">> <<option "Richard">> <<option "Tad">> <</listbox>> <b>SURNAME:</b> <<listbox "$surname" autoselect>> <<option "Galavant">> <<option "Cooper">> <<option "Wormwood">> <<option "Hortensia">> <<option "Valencia">> <</listbox>> <<button "Input Your Own">> <<dialog 'Input Your own'>> <b>Given Name:</b> <<textbox "$name" "">> <b>Surname:</b> <<textbox "$surname" "">> <<button "Confirm">><<if $name is "" and $surname is "">><<replace "#textbox-error">> Please enter a full name.<</replace>> <<elseif $name is "">><<replace "#textbox-error">> Please enter a given name.<</replace>> <<elseif $surname is "">><<replace "#textbox-error">> Please enter a surname.<</replace>> <<else>> <<replace "#textbox-error">><</replace>> <<run Dialog.close();>> <<run Engine.play("Fixed CC Review")>> <</if>><</button>><span id="textbox-error"></span> <</dialog>><</button>> <<button "Confirm" "Fixed CC Review">><</button>>}}}</pre></blockquote><<else>><b>GIVEN NAME:</b> <<if $gender is "male">><<textbox "$name" "Gary">> <<elseif $gender is "female">><<textbox "$name" "Isabella">> <<else>><<textbox "$name" "River">><</if>> <b>SURNAME:</b> <<if $background is "thief">><<textbox "$surname" "Rider">><<elseif $background is "noble">><<textbox "$surname" "Percival">><<else>><<textbox "$surname" "Galavant">><</if>> <<button "Confirm">><<if $name is "" and $surname is "">><<replace "#textbox-error">> Please enter a full name.<</replace>> <<elseif $name is "">><<replace "#textbox-error">> Please enter a given name.<</replace>> <<elseif $surname is "">><<replace "#textbox-error">> Please enter a surname.<</replace>> <<else>> <<replace "#textbox-error">><</replace>> <<run Engine.play("Fixed CC Review")>> <</if>><</button>><span id="textbox-error"></span> <<button "View Given Name Suggestions">> <<dialog 'Name Suggestions'>> Masculine Names * Name 1 * Name 2 * Name 3 Feminine Names * Name 1 * Name 2 * Name 3 Gender-Neutral * Name 1 * Name 2 * Name 3 <</dialog>> <</button>> <<button "View Surname Suggestions">> <<dialog 'Name Suggestions'>> * Surname 1 * Surname 2 * Surname 3 <</dialog>> <</button>> <blockquote><h2>Code</h2> <pre>{{{<b>GIVEN NAME:</b> <<if $gender is "male">><<textbox "$name" "Gary">> <<elseif $gender is "female">><<textbox "$name" "Isabella">> <<else>><<textbox "$name" "River">><</if>> <b>SURNAME:</b> <<if $background is "thief">><<textbox "$surname" "Rider">><<elseif $background is "noble">><<textbox "$surname" "Percival">><<else>><<textbox "$surname" "Galavant">><</if>> <<button "Confirm">><<if $name is "" and $surname is "">><<replace "#textbox-error">> Please enter a full name.<</replace>> <<elseif $name is "">><<replace "#textbox-error">> Please enter a given name.<</replace>> <<elseif $surname is "">><<replace "#textbox-error">> Please enter a surname.<</replace>> <<else>> <<replace "#textbox-error">><</replace>> <<run Engine.play("Fixed CC Review")>> <</if>><</button>><span id="textbox-error"></span> <<button "View Given Name Suggestions">> <<dialog 'Name Suggestions'>> Masculine Names * Name 1 * Name 2 * Name 3 Feminine Names * Name 1 * Name 2 * Name 3 Gender-Neutral * Name 1 * Name 2 * Name 3 <</dialog>> <</button>> <<button "View Surname Suggestions">> <<dialog 'Name Suggestions'>> * Surname 1 * Surname 2 * Surname 3 <</dialog>> <</button>>}}}</pre></blockquote><</if>>

<center><h1>Character Review</h1></center> <h2>General</h2> <b>NAME:</b> <<print $name.toUpperFirst()>> <<if def $surname>><<print $surname.toUpperFirst()>><</if>> <b>GENDER:</b> <<print $gender.toUpperFirst()>> <b>PRONOUNS:</b> <<print $they.toUpperFirst()>>/$them <h2>Appearance</h2> <b>SKIN TONE:</b> <<print $skintone.toUpperFirst()>> <b>EYE COLOUR:</b> <<print $eye_colour.toUpperFirst()>> <b>HAIR COLOUR:</b> <<print $hair_colour.toUpperFirst()>> <b>HAIR LENGTH:</b> <<print $hair_length.toUpperFirst()>> <b>BACKGROUND:</b> <<print $background.toUpperFirst()>> <h2>Stats</h2> <b>Sneaking:</b> $sneaking <b>Diplomacy:</b> $diplomacy <b>Combat:</b> $combat <<button "Confirm Character" "Game Start">><</button>> <<button "Restart Character Creator" "Fixed CC Gender SetUp">> <<unset $name, $gender, $they, $them, $their, $theirs, $themself, $They, $Them, $Their, $Theirs, $Themself, $skintone, $eye_colour, $hair_colour, $hair_length, $background>> <<set $sneaking to 0, $diplomacy to 0, $combat to 0>> <</button>> <blockquote><h2>Code</h2> <pre>{{{<h2>General</h2> <b>NAME:</b> <<print $name.toUpperFirst()>> <<print $surname.toUpperFirst()>> <b>GENDER:</b> <<print $gender.toUpperFirst()>> <b>PRONOUNS:</b> <<print $they.toUpperFirst()>>/$them <h2>Appearance</h2> <b>SKIN TONE:</b> <<print $skintone.toUpperFirst()>> <b>EYE COLOUR:</b> <<print $eye_colour.toUpperFirst()>> <b>HAIR COLOUR:</b> <<print $hair_colour.toUpperFirst()>> <b>HAIR LENGTH:</b> <<print $hair_length.toUpperFirst()>> <b>BACKGROUND:</b> <<print $background.toUpperFirst()>> <h2>Stats</h2> <b>Sneaking:</b> $sneaking <b>Diplomacy:</b> $diplomacy <b>Combat:</b> $combat <<button "Confirm Character" "Game Start">><</button>> <<button "Restart Character Creator" "Fixed CC Gender SetUp">> <<unset $name, $gender, $they, $them, $their, $theirs, $themself, $They, $Them, $Their, $Theirs, $Themself, $skintone, $eye_colour, $hair_colour, $hair_length, $background>> <<set $sneaking to 0, $diplomacy to 0, $combat to 0>> <</button>>}}}</pre></blockquote>

<center><h1>Sources</h1></center> <h2>HiEv's Sample Code</h2><ul><li><a href="https://qjzhvmqlzvoo5lqnrvuhmg.on.drv.tw/UInv/Sample_Code.html#Bottom%20and%20Top%20Bars">Bottom and Top Bars</a></li> <li><a href="https://qjzhvmqlzvoo5lqnrvuhmg.on.drv.tw/UInv/Sample_Code.html#Combining%20Story%20Passages">Combining Story Passages</a></li> <li><a href="https://www.reddit.com/r/twinegames/comments/qo1p1j/cycling_links_and_accessibility/">Cycling Link Accessibility Work Around</a></li></ul> <h2>Chapel's Custom Macros</h2><ul><li><a href="https://twinelab.net/custom-macros-for-sugarcube-2/#/message-macro">The Message Macro</a></li> <li><a href="https://twinelab.net/custom-macros-for-sugarcube-2/#/dialog-api-macro-set">Dialog API Macro Set</a></li> <li><a href="https://twinelab.net/custom-macros-for-sugarcube-2/#/pronoun-templates">The Pronoun Templates</a></li></ul> <<back [[Return to Game.|$return]]>>

<center><h1>Pronoun Widget Test</h1></center> <<if $format is 1>><<They>> <<are>> a great person. <<They>> <<are>> a great person. <<They>> go<<es>> to the store. <<They>>'<<re>> a great person. <<They>> ha<<ve>> a cool house. <blockquote><h2>Code</h2> <pre>{{{<<They>> <<are>> a great person. <<They>> <<are>> a great person. <<They>> go<<es>> to the store. <<They>>'<<re>> a great person. <<They>> ha<<ve>> a cool house.}}}</pre></blockquote><<else>>$They <<are>> a great person. $They go<<es>> to the store. $They'<<re>> a great person. $They ha<<ve>> a cool house. <blockquote><h2>Code</h2> <pre>{{{$They <<are>> a great person. $They go<<es>> to the store. $They'<<re>> a great person. $They ha<<ve>> a cool house.}}}</pre></blockquote><</if>> [[Back to Pronouns|Fixed CC Pronouns]] [[Continue to Appearance Selection|Fixed CC Appearance]]

<h1>Prologue</h1> You listen to the sounds of the street outside as you stare at your reflection in the mirror. Gods, what has happened to you? An exhausted $person stares back at you. You barely recognize $them.<<print $their.toUpperFirst()>> $skintone skin is worn, $their $hair_length, $hair_colour hair dull. You can’t help but notice the puffy bags under $their $eye_colour eyes. You exhale a deep breath and splash cold water on your face. A $background like you doesn't have time for this. A knock on the door. You turn, quickly withdrawing from the mirror and composing yourself as a familiar young man opens the door. He calls your name with faint surprise. "<<print $name.toUpperFirst()>>?" he stutters. "What are you... are you all right?" "Fine," you say. "I'm just about done with this character creator, we should get going." He cocks his head and glances over his shoulder. "<<print $they.toUpperFirst()>>'<<re>> in the attic! Yes, I know this makes absolutely no sense, but $they <<are>> only here to provide an example!" <<link "Return to Character Creator">> <<unset $name, $gender, $they, $them, $their, $theirs, $themself, $They, $Them, $Their, $Theirs, $Themself, $skintone, $eye_colour, $hair_colour, $hair_length, $background>> <<set $sneaking to 0, $diplomacy to 0, $combat to 0>> <<run Engine.play("CHARACTER CREATOR")>> <</link>> <<link "Return to Table of Contents">> <<unset $name, $gender, $they, $them, $their, $theirs, $themself, $They, $Them, $Their, $Theirs, $Themself, $skintone, $eye_colour, $hair_colour, $hair_length, $background>> <<set $sneaking to 0, $diplomacy to 0, $combat to 0>> <<run Engine.play("Table of Contents")>> <</link>> <blockquote><h2>Code</h2> <pre>{{{<h1>Prologue</h1> You listen to the sounds of the street outside as you stare at your reflection in the mirror. Gods, what has happened to you? An exhausted $person stares back at you. You barely recognize $them.<<print $their.toUpperFirst()>> $skintone skin is worn, $their $hair_length, $hair_colour hair dull. You can’t help but notice the puffy bags under $their $eye_colour eyes. You exhale a deep breath and splash cold water on your face. A $background like you doesn't have time for this. A knock on the door. You turn, quickly withdrawing from the mirror and composing yourself as a familiar young man opens the door. He calls your name in surprise. "$name?" he stutters. "What are you... are you all right?" "Fine," you say. "I'm just about done with this character creator, we should get going." He cocks his head and glances over his shoulder. "<<print $they.toUpperFirst()>>'<<re>> in the attic! Yes, I know this makes absolutely no sense, but $they <<are>> only here to provide an example!"}}}</pre></blockquote>

<center><h1>Character Review</h1></center> <h2>General</h2> <b>NAME:</b> <<print $name.toUpperFirst()>> <<print $surname.toUpperFirst()>> <b>PRONOUNS:</b> ?They/?them <h2>Appearance</h2> <b>SKIN TONE:</b> <<print $skintone.toUpperFirst()>> <b>EYE COLOUR:</b> <<print $eye_colour.toUpperFirst()>> <b>HAIR COLOUR:</b> <<print $hair_colour.toUpperFirst()>> <b>HAIR LENGTH:</b> <<print $hair_length.toUpperFirst()>> <b>BACKGROUND:</b> <<print $background.toUpperFirst()>> <h2>Stats</h2> <b>SNEAKING:</b> $sneaking <b>DIPLOMACY:</b> $diplomacy <b>COMBAT:</b> $combat <<button "Confirm Character" "Game Start All-in-One">><</button>> <<button "Restart Character Creator" "All-in-One CC">> <<unset $name, $skintone, $eye_colour, $hair_colour, $hair_length, $background>> <<set $sneaking to 0, $diplomacy to 0, $combat to 0>> <</button>> <blockquote><h2>Code</h2> <pre>{{{<h2>General</h2> <b>NAME:</b> <<print $name.toUpperFirst()>> <<print $surname.toUpperFirst()>> <b>PRONOUNS:</b> ?They/?them <h2>Appearance</h2> <b>SKIN TONE:</b> <<print $skintone.toUpperFirst()>> <b>EYE COLOUR:</b> <<print $eye_colour.toUpperFirst()>> <b>HAIR COLOUR:</b> <<print $hair_colour.toUpperFirst()>> <b>HAIR LENGTH:</b> <<print $hair_length.toUpperFirst()>> <b>BACKGROUND:</b> <<print $background.toUpperFirst()>> <h2>Stats</h2> <b>SNEAKING:</b> $sneaking <b>DIPLOMACY:</b> $diplomacy <b>COMBAT:</b> $combat <<button "Confirm Character" "Game Start All-in-One">><</button>> <<button "Restart Character Creator" "All-in-One CC">> <<unset $name, $skintone, $eye_colour, $hair_colour, $hair_length, $background>> <<set $sneaking to 0, $diplomacy to 0, $combat to 0>> <</button>>}}}</pre></blockquote>

<h1>Prologue</h1> You listen to the sounds of the street outside as you stare at your reflection in the mirror. Gods, what has happened to you? An exhausted ?person stares back at you. You barely recognize ?them. ?Their $skintone skin is worn, ?their $hair_length, $hair_colour hair dull. You can’t help but notice the puffy bags under ?their $eye_colour eyes. You exhale a deep breath and splash cold water on your face. A $background like you doesn't have time for this. A knock on the door. You turn, quickly withdrawing from the mirror and composing yourself as a familiar young man opens the door. He calls your name in surprise. "<<print $name.toUpperFirst()>>?" he stutters. "What are you... are you all right?" "Fine," you say. "I'm just about done with this character creator, we should get going." He cocks his head and glances over his shoulder. "?They<<verb "'s" "'re">> in the attic! Yes, I know this makes absolutely no sense, but ?they <<verb 'is'>> only here to provide an example!" <<link "Return to Character Creator">> <<unset $name, $gender, $they, $them, $their, $theirs, $themself, $They, $Them, $Their, $Theirs, $Themself, $skintone, $eye_colour, $hair_colour, $hair_length, $background>> <<set $sneaking to 0, $diplomacy to 0, $combat to 0>> <<run Engine.play("CHARACTER CREATOR")>> <</link>> <<link "Return to Table of Contents">> <<unset $name, $gender, $they, $them, $their, $theirs, $themself, $They, $Them, $Their, $Theirs, $Themself, $skintone, $eye_colour, $hair_colour, $hair_length, $background>> <<set $sneaking to 0, $diplomacy to 0, $combat to 0>> <<run Engine.play("Table of Contents")>> <</link>> <blockquote><h2>Code</h2> <pre>{{{<h1>Prologue</h1> You listen to the sounds of the street outside as you stare at your reflection in the mirror. Gods, what has happened to you? An exhausted ?person stares back at you. You barely recognize ?them. ?Their $skintone skin is worn, ?their $hair_length, $hair_colour hair dull. You can’t help but notice the puffy bags under ?their $eye_colour eyes. You exhale a deep breath and splash cold water on your face. A $background like you doesn't have time for this. A knock on the door. You turn, quickly withdrawing from the mirror and composing yourself as a familiar young man opens the door. He calls your name in surprise. "$name?" he stutters. "What are you... are you all right?" "Fine," you say. "I'm just about done with this character creator, we should get going." He cocks his head and glances over his shoulder. "?They<<verb "'s" "'re">> in the attic! Yes, I know this makes absolutely no sense, but ?they <<verb 'is'>> only here to provide an example!"}}}</pre></blockquote>

<<nobr>>/*This code will auto-configure the player's pronouns based on the selection they made in the previous passage.*/ <<if $pronouns is "him">> <<run gender.setPronouns("male")>> <<elseif $pronouns is "her">> <<run gender.setPronouns("female")>> <<else>> <<run gender.setPronouns("other")>> <</if>> ?Their <<cycle "$skintone" autoselect>> <<option "black">> <<option "brown">> <<option "beige">> <</cycle>> skin is worn, ?their <<cycle "$hair_length" autoselect>> <<option "shaved">> <<option "short">> <<option "shoulder-length">> <<option "long">> <<option "waist-length">> <</cycle>>, <<cycle "$hair_colour" autoselect>> <<option "black">> <<option "brown">> <<option "auburn">> <<option "red">> <<option "blonde">> <</cycle>> hair dull. You can’t help but notice the puffy bags under ?their <<cycle "$eye_colour" autoselect>> <<option "black">> <<option "brown">> <<option "green">> <<option "blue">> <</cycle>> eyes. <br><br>You exhale a deep breath and splash cold water on your face. A <<cycle "$background" autoselect>> <<option "thief">> <<option "noble">> <<option "knight">> <</cycle>> like you doesn't have time for this. <br><br>[[Continue.|Embedded CC 2]]<</nobr>> <blockquote><h2>Code</h2> <pre>{{{/*This code will auto-configure the player's pronouns based on the selection they made in the previous passage./*}}} {{{<<if $pronouns is "him">> <<run gender.setPronouns("male")>> <<elseif $pronouns is "her">> <<run gender.setPronouns("female")>> <<else>> <<run gender.setPronouns("other")>> <</if>>}}} {{{?Their}}} {{{<<cycle "$skintone" autoselect>> <<option "black">> <<option "brown">> <<option "beige">> <</cycle>>}}} {{{skin is worn, ?their}}} {{{<<cycle "$hair_length" autoselect>> <<option "shaved">> <<option "short">> <<option "shoulder-length">> <<option "long">> <<option "waist-length">> <</cycle>>,}}} {{{<<cycle "$hair_colour" autoselect>> <<option "black">> <<option "brown">> <<option "auburn">> <<option "red">> <<option "blonde">> <</cycle>>}}} {{{hair dull. You can’t help but notice the puffy bags under ?their}}} {{{<<cycle "$eye_colour" autoselect>> <<option "black">> <<option "brown">> <<option "green">> <<option "blue">> <</cycle>> eyes.}}} {{{<br><br>You exhale a deep breath and splash cold water on your face. A <<cycle "$background" autoselect>> <<option "thief">> <<option "noble">> <<option "knight">> <</cycle>> like you doesn't have time for this.}}} {{{<br><br>[[Continue.|Embedded CC 2]]}}}</pre></blockquote>

/*This code will make adjustments based on the background chosen in the previous passage.*/ <<if $background is "thief">> <<set $sneaking +=2>> <<elseif $background is "noble">> <<set $diplomacy +=2>> <<else>> <<set $combat +=2>> <</if>> A knock on the door. You turn, quickly withdrawing from the mirror and composing yourself as a familiar young man opens the door. He calls your name with faint surprise. <h3>Input Name</h3> <<textbox "$name" "">> <<button "Confirm">><<if $name is "">><<replace "#textbox-error">> Please enter a name.<</replace>> <<else>> <<replace "#textbox-error">><</replace>> <<run Engine.play("Embedded CC 3")>> <</if>><</button>><span id="textbox-error"></span> <blockquote><h2>Code</h2> <pre>{{{/*This code will make adjustments based on the background chosen in the previous passage.*/ <<if $background is "thief">> <<set $sneaking +=2>> <<elseif $background is "noble">> <<set $diplomacy +=2>> <<else>> <<set $combat +=2>> <</if>> A knock on the door. You turn, quickly withdrawing from the mirror and composing yourself as a familiar young man opens the door. He calls your name with faint surprise. <h3>Input Name</h3> <<textbox "$name" "">> <<button "Confirm">><<if $name is "">><<replace "#textbox-error">> Please enter a name.<</replace>> <<else>> <<replace "#textbox-error">><</replace>> <<run Engine.play("Embedded CC 3")>> <</if>><</button>><span id="textbox-error"></span>}}}</pre></blockquote>

"<<print $name.toUpperFirst()>>?" he stutters. "What are you... are you all right?" "Fine," you say. "I'm just about done with this character creator, we shoudld get going." He cocks his head and glances over his shoulder. "?They<<verb "'s" "'re">> in the attic! Yes, I know this makes absolutely no sense, but ?they<<verb "'s" "'re">> only here to provide an example!" <<link "Return to Character Creators.">> <<unset $name, $skintone, $eye_colour, $hair_colour, $hair_length, $background>> <<set $sneaking to 0, $diplomacy to 0, $combat to 0>> <<run Engine.play("CHARACTER CREATOR")>> <</link>> <<link "Return to Table of Contents.">> <<unset $name, $skintone, $eye_colour, $hair_colour, $hair_length, $background>> <<set $sneaking to 0, $diplomacy to 0, $combat to 0>> <<run Engine.play("Table of Contents")>> <</link>> <blockquote><h2>Code</h2> <pre>{{{"$name?" he stutters. "What are you... are you all right?" "Fine," you say. "I'm just about done with this character creator, we shoudld get going." He cocks his head and glances over his shoulder. "?They<<verb "'s" "'re">> in the attic! Yes, I know this makes absolutely no sense, but ?they<<verb "'s" "'re">> only here to provide an example!"}}}</pre></blockquote>

<h1>Prologue</h1> You listen to the sounds of the street outside as you stare at your reflection in the mirror. Gods, what has happened to you? <<nobr>>An exhausted <<cycle "$person" autoselect>> <<option "man">> <<option "woman">> <<option "person">> <</cycle>> stares back at you. You barely recognize <<cycle "$pronouns" autoselect>> <<option "him">> <<option "her">> <<option "them">> <</cycle>>. <</nobr>> [[Continue.|Embedded CC 1]] <blockquote><h2>Code</h2> <pre>{{{<h1>Prologue</h1> You listen to the sounds of the street outside as you stare at your reflection in the mirror. Gods, what has happened to you? <<nobr>>An exhausted <<cycle "$person" autoselect>> <<option "man">> <<option "woman">> <<option "person">> <</cycle>> stares back at you. You barely recognize <<cycle "$pronouns" autoselect>> <<option "him">> <<option "her">> <<option "them">> <</cycle>>. <</nobr>> [[Continue.|Embedded CC 1]]}}}</pre></blockquote>

You listen to the sounds of the street outside as you stare at your reflection in the mirror. Gods, what has happened to you? * [[An exhausted man stares back at you. You barely recognize him.|EMBED CC LINK 02 SKIN TONE][$gender to "male", $person to "man", $they to "he", $them to "him", $their to "his", $theirs to "his", $themself to "himself", $plural to false]] * [[An exhausted woman stares back at you. You barely recognize her.|EMBED CC LINK 02 SKIN TONE][$gender to "female", $person to "woman", $they to "she", $them to "her", $their to "her", $theirs to "hers", $themself to "herself", $plural to false]] * [[An exhausted person stares back at you. You barely recognize them.|EMBED CC LINK 02 SKIN TONE][$gender to "nonbinary", $person to "person", $they to "they", $them to "them", $their to "their", $theirs to "theirs", $themself to "themself", $plural to true]] <blockquote><h2>Code</h2> <pre>{{{* [[An exhausted man stares back at you. You barely recognize him.|EMBED CC LINK 02 SKIN TONE][$gender to "male", $person to "man", $they to "he", $them to "him", $their to "his", $theirs to "his", $themself to "himself", $plural to false]] * [[An exhausted woman stares back at you. You barely recognize her.|EMBED CC LINK 02 SKIN TONE][$gender to "female", $person to "woman", $they to "she", $them to "her", $their to "her", $theirs to "hers", $themself to "herself", $plural to false]] * [[An exhausted person stares back at you. You barely recognize them.|EMBED CC LINK 02 SKIN TONE][$gender to "nonbinary", $person to "person", $they to "they", $them to "them", $their to "their", $theirs to "theirs", $themself to "themself", $plural to true]]}}}</pre></blockquote>

Your skin is worn. It's shade... * [[Black, like your parents'.|EMBED CC LINK 03 HAIR COLOUR][$skintone to "black"]] * [[Brown, like your parents'.|EMBED CC LINK 03 HAIR COLOUR][$skintone to "brown"]] * [[Beige, like your parents'.|EMBED CC LINK 03 HAIR COLOUR][$skintone to "beige"]] <blockquote><h2>Code</h2> <pre>{{{* [[Black, like your parents'.|EMBED CC LINK 03 HAIR COLOUR][$skintone to "black"]] * [[Brown, like your parents'.|EMBED CC LINK 03 HAIR COLOUR][$skintone to "brown"]] * [[Beige, like your parents'.|EMBED CC LINK 03 HAIR COLOUR][$skintone to "beige"]]}}}</pre></blockquote>

Your hair is dull, its usual... * [[Rich black is now lifeless.|EMBED CC LINK 04 HAIR LENGTH][$hair_colour to "black"]] * [[Deep brown is now lifeless.|EMBED CC LINK 04 HAIR LENGTH][$hair_colour to "brown"]] * [[Autumnal auburn is now lifeless.|EMBED CC LINK 04 HAIR LENGTH][$hair_colour to "auburn"]] * [[Bright red is now lifeless.|EMBED CC LINK 04 HAIR LENGTH][$hair_colour to "red"]] * [[Light blonde is now lifeless.|EMBED CC LINK 04 HAIR LENGTH][$hair_colour to "blonde"]] <blockquote><h2>Code</h2> <pre>{{{* [[Rich black is now lifeless.|EMBED CC LINK 04 HAIR LENGTH][$hair_colour to "black"]] * [[Deep brown is now lifeless.|EMBED CC LINK 04 HAIR LENGTH][$hair_colour to "brown"]] * [[Autumnal auburn is now lifeless.|EMBED CC LINK 04 HAIR LENGTH][$hair_colour to "auburn"]] * [[Bright red is now lifeless.|EMBED CC LINK 04 HAIR LENGTH][$hair_colour to "red"]] * [[Light blonde is now lifeless.|EMBED CC LINK 04 HAIR LENGTH][$hair_colour to "blonde"]]}}}</pre></blockquote>

Despite your attempts to keep it from getting messy... * [[Your shaved hair is anything from neat, despite how short it is.|EMBED CC LINK 05 EYE COLOUR][$hair_length to "shaved"]] * [[Your short hair is anything from neat.|EMBED CC LINK 05 EYE COLOUR][$hair_length to "short"]] * [[Your shoulder-length hair is anything from neat.|EMBED CC LINK 05 EYE COLOUR][$hair_length to "shoulder-length"]] * [[Your long hair is anything from neat.|EMBED CC LINK 05 EYE COLOUR][$hair_length to "long"]] * [[Your waist-length hair is anything from neat.|EMBED CC LINK 05 EYE COLOUR][$hair_length to "waist-length"]] <blockquote><h2>Code</h2> <pre>{{{* [[Your shaved hair is anything from neat, despite how short it is.|EMBED CC LINK 05 EYE COLOUR][$hair_length to "shaved"]] * [[Your short hair is anything from neat.|EMBED CC LINK 05 EYE COLOUR][$hair_length to "short"]] * [[Your shoulder-length hair is anything from neat.|EMBED CC LINK 05 EYE COLOUR][$hair_length to "shoulder-length"]] * [[Your long hair is anything from neat.|EMBED CC LINK 05 EYE COLOUR][$hair_length to "long"]] * [[Your waist-length hair is anything from neat.|EMBED CC LINK 05 EYE COLOUR][$hair_length to "waist-length"]]}}}</pre></blockquote>

And you can't help but notice the puffy bags under your... * [[Black eyes.|EMBED CC LINK 06 BACKGROUND][$eye_colour to "black"]] * [[Brown eyes.|EMBED CC LINK 06 BACKGROUND][$eye_colour to "brown"]] * [[Green eyes.|EMBED CC LINK 06 BACKGROUND][$eye_colour to "green"]] * [[Blue eyes.|EMBED CC LINK 06 BACKGROUND][$eye_colour to "blue"]] <blockquote><h2>Code</h2> <pre>{{{* [[Black eyes.|EMBED CC LINK 06 BACKGROUND][$eye_colour to "black"]] * [[Brown eyes.|EMBED CC LINK 06 BACKGROUND][$eye_colour to "brown"]] * [[Green eyes.|EMBED CC LINK 06 BACKGROUND][$eye_colour to "green"]] * [[Blue eyes.|EMBED CC LINK 06 BACKGROUND][$eye_colour to "blue"]]}}}</pre></blockquote>

You exhale a deep breath and splash cold water on your face. * [[A thief like you doesn't have time for this.|EMBED CC LINK 07 NAME][$background to "thief", $sneaking +=2]] * [[A noble like you doesn't have time for this.|EMBED CC LINK 07 NAME][$background to "noble", $diplomacy +=2]] * [[A knight like you doesn't have time for this.|EMBED CC LINK 07 NAME][$background to "knight", $combat +=2]] * <<link 'View background descriptions.'>> <<dialog 'Backgrounds'>> ''Thief.'' Description here. +2 to Sneaking. ''Noble.'' Description here. +2 to Diplomacy. ''Knight.'' Description here. +2 to Combat. <</dialog>> <</link>> <blockquote><h2>Code</h2> <pre>{{{* [[A thief like you doesn't have time for this.|EMBED CC LINK 07 NAME][$background to "thief", $sneaking +=2]] * [[A noble like you doesn't have time for this.|EMBED CC LINK 07 NAME][$background to "noble", $diplomacy +=2]] * [[A knight like you doesn't have time for this.|EMBED CC LINK 07 NAME][$background to "knight", $combat +=2]] * <<link 'View background descriptions.'>> <<dialog 'Backgrounds'>> ''Thief.'' Description here. +2 to Sneaking. ''Noble.'' Description here. +2 to Diplomacy. ''Knight.'' Description here. +2 to Combat. <</dialog>> <</link>>}}}</pre></blockquote>

A knock on the door. You turn, quickly withdrawing from the mirror and composing yourself as a familiar young man opens the door. He calls your name in surprise. <h3>Input Name</h3> <<textbox "$name" "">> <<button "Confirm">><<if $name is "">><<replace "#textbox-error">> Please enter a name.<</replace>> <<else>> <<replace "#textbox-error">><</replace>> <<run Engine.play("EMBED CC LINK 08 END")>> <</if>><</button>><span id="textbox-error"></span> <blockquote><h2>Code</h2> <pre>{{{<h3>Input Name</h3> <<textbox "$name" "">> <<button "Confirm">><<if $name is "">><<replace "#textbox-error">> Please enter a name.<</replace>> <<else>> <<replace "#textbox-error">><</replace>> <<run Engine.play("EMBED CC LINK 08 END")>> <</if>><</button>><span id="textbox-error"></span>}}}</pre></blockquote>

"<<print $name.toUpperFirst()>>?" he stutters. "What are you... are you all right?" "Fine," you say. "I'm just about done with this character creator, we shoudld get going." He cocks his head and glances over his shoulder. "<<print $they.toUpperFirst()>>'<<re>> in the attic! Yes, I know this makes absolutely no sense, but $they <<are>> only here to provide an example!" <<link "Return to Character Creators.">> <<unset $name, $skintone, $eye_colour, $hair_colour, $hair_length, $background>> <<set $sneaking to 0, $diplomacy to 0, $combat to 0>> <<run Engine.play("CHARACTER CREATOR")>> <</link>> <<link "Return to Table of Contents.">> <<unset $name, $skintone, $eye_colour, $hair_colour, $hair_length, $background>> <<set $sneaking to 0, $diplomacy to 0, $combat to 0>> <<run Engine.play("Table of Contents")>> <</link>> <blockquote><h2>Code</h2> <pre>{{{"$name?" he stutters. "What are you... are you all right?" "Fine," you say. "I'm just about done with this character creator, we shoudld get going." He cocks his head and glances over his shoulder. "<<print $they.toUpperFirst()>>'<<re>> in the attic! Yes, I know this makes absolutely no sense, but $they <<are>> only here to provide an example!"}}}</pre></blockquote>

<center><h1>Variables & Links</h1></center> See below for a demo of how to use variables and links. <ul><li>[[Setting Variables on a Passage|VARIABLE PASSAGE]]</li> <li>[[Settings Variables Through a Link|LINK PASSAGE]]</li> <li>[[Setting Variables Through a Button|BUTTON PASSAGE]]</li> <li>[[Settings Variables Through an Image|IMAGE PASSAGE]]</li></ul>

<center><h1>Tags & Tag-Based Passages</h1></center> See below for a demo of how to use passage tags in conditional statements. [[Go to the forest.|FOREST EXAMPLE]] [[Where have you been?|TAGS EXAMPLE END]]

<center><h1>Dialog Boxes</h1></center> See below for a demo of how to use dialog boxes. <h2>Basic Dialog</h2> <<link "Click Me">> <<run Dialog.setup("Dialog Title"); Dialog.wiki(Story.get("Passage Contents").processText()); Dialog.open();>> <</link>> <<button "Click Me">> <<run Dialog.setup("Dialog Title"); Dialog.wiki(Story.get("Passage Contents").processText()); Dialog.open();>> <</button>> <blockquote><h2>Code</h2> <pre>{{{<<link "Click Me">> <<run Dialog.setup("Dialog Title"); Dialog.wiki(Story.get("Passage Contents").processText()); Dialog.open();>> <</link>> <<button "Click Me">> <<run Dialog.setup("Dialog Title"); Dialog.wiki(Story.get("Passage Contents").processText()); Dialog.open();>> <</button>> }}}</pre></blockquote> <h2>Opening a Dialog, Setting a Variable & Forwarding to a New Passage</h2> <<link "Do you want cake?">> <<run Dialog.setup("Do You Want Cake?"); Dialog.wiki(Story.get("Cake Passage").processText()); Dialog.open();>> <</link>> <<button "Do you want pie?">> <<run Dialog.setup("Do You Want Pie?"); Dialog.wiki(Story.get("Pie Passage").processText()); Dialog.open();>> <</button>> <blockquote><h2>Code</h2> <pre>{{{<<link "Do you want cake?">> <<run Dialog.setup("Do You Want Cake?"); Dialog.wiki(Story.get("Cake Passage").processText()); Dialog.open();>> <</link>> <<button "Do you want pie?">> <<run Dialog.setup("Do You Want Pie?"); Dialog.wiki(Story.get("Pie Passage").processText()); Dialog.open();>> <</button>> }}}</pre></blockquote>

<center><h1>Stowing, Unstowing, & Hiding the UI Bar</h1></center> See below for a demo of how to use stow, unstow, hide and show the UI bar. In some cases, you may want to hide AND stow the UI bar as it shifts where the passage is positioned on the screen. The UI bar is currently unstowed. [[Automatically stow the UI bar.|AUTO STOW]] [[Automatically unstow the UI bar.|AUTO UNSTOW]] [[Automatically hide and stow and the UI bar.|AUTO HIDE STOW]] [[Automatically show and unstow the UI bar.|AUTO SHOW UNSTOW]] If you want to remove the UI bar and all its associated styles completely, you can do that in your Story JavaScript. <blockquote><pre>{{{UIBar.destroy();}}}</pre></blockquote>

<center><h1>Settings</h1></center> See below for a demo of how to use a toggleable setting in a conditional statement. The notifications setting can be toggled on and off from the Settings menu. [[Demo.|SETTINGS NEXT]]

<center><h1>Widgets</h1></center> The following code has been initialized in the Widgets Setup Passage. See additional widget use in Pronouns section of the [[Character Creator|CHARACTER CREATOR]] tutorial. <blockquote><h2>Code</h2><pre>{{{/* CAPITALIZED NAMES */ <<widget "name">><<print $name.toUpperFirst()>><</widget>> <<widget "surname">><<print $surname.toUpperFirst()>><</widget>> }}}</pre></blockquote> <h2>In Use</h2> <<name>> <<surname>>. <blockquote><h2>Code</h2><pre>{{{<<name>> <<surname>>.}}}</pre></blockquote> <<link "Return to Table of Contents." "Table of Contents">><</link>>

<center><h1>HasVisited & Not HasVisited</h1></center> See below for a demo of how to use {{{hasVisited(passages…)}}} and {{{not hasVisited(passages…)}}} in conditional statments. [[Go to the forest.|FOREST]] [[Go to the lake.|LAKE]] [[Go to the cave.|CAVE]] [[End your journey.|JOURNEY END]]

<center><h1>Include Macro</h1></center> See below for a demo of how to use the {{{<<include>>}}} macro. [[Beginning A.|INCLUDE DEMO 1]] [[Beginning B.|INCLUDE DEMO 2]]

<center><h1>NOBR Macro & NOBR Tag</h1></center> See below for a demo of how to use the {{{<<nobr>>}}} macro and the ''nobr'' tag. [[Passage with text in a nobr macro.|NOBR DEMO 1]] [[Passage tagged with the nobr macro|NOBR DEMO 2]]

<center><h1>Linkreplace Macro</h1></center> See below for a demo of how to use the the {{{<<linkreplace>>}}} macro. You ride to the castle as fast as you can. <<linkreplace "When you get there…">>The drawbridge is down, the courtyard silent. There isn’t a soul about. How strange!<</linkreplace>> <blockquote><h2>Code</h2> <pre>{{{You ride to the castle as fast as you can. <<linkreplace "When you get there…">>The drawbridge is down, the courtyard silent. There isn’t a soul about. How strange!<</linkreplace>>}}}</pre></blockquote> <<link "Return to Table of Contents." "Table of Contents">><</link>>

<center><h1>Return Link for Game Menus</h1></center> See below for a demo on how to use a return link to prevent infinite loops. This is best demonstrated with the navigation controls turned off. You can disable them in your Story JavaScript with: {{{Config.history.controls = false;}}} <<link 'Click Here to Remove the Navigation Controls & Proceed' 'RETURN START 02'>><</link>> <<link "Return to Table of Contents." "Table of Contents">><</link>>

<center><h1>Variable demo</h1></center> <<set $gold to 5, $weapon to "sword", $cape to true>>You are a knight. You are armed with a $weapon and you are currently <<if $cape is true>>wearing<<else>>not wearing<</if>> a cape. You have $gold gold. <<back>> <blockquote><h2>Code</h2> <pre>{{{<<set $gold to 5, $weapon to "sword", $cape to true>> You are a knight. You are armed with a $weapon and you are currently <<if $cape is true>>wearing<<else>>not wearing<</if>> a cape. You have $gold gold.}}}</pre></blockquote>

<center><h1>Passage Link demo</h1></center> <h2>With TwineScript Markup</h2> You're all set for the day. Before you leave, do you have anything else to attend to? [[Collect your coin purse.|PASSAGE LINK END][$gold to 5]] [[Leave the room.|PASSAGE LINK END][$gold to 0]] <blockquote><h2>Code</h2> <pre>{{{You're all set for the day. Before you leave, do you have anything else to attend to? [[Collect your coin purse.|PASSAGE LINK END][$gold to 5]] [[Leave the room.|PASSAGE LINK END][$gold to 0]] Note: //Italics// and ''bold'' font CANNOT be used inside the TwineScript markup.}}}</pre></blockquote> <h2>With the Link Macro</h2> You're all set for the day. Before you leave, do you have anything else to attend to? <<link "Collect your //coin purse.//" "PASSAGE LINK END">><<set $gold to 5>><</link>> <<link "Leave the room." "PASSAGE LINK END">><<set $gold to 0>><</link>> <blockquote><h2>Code</h2> <pre>{{{You're all set for the day. Before you leave, do you have anything else to attend to? <<link "Collect your //coin purse.//" "PASSAGE LINK END">><<set $gold to 5>><</link>> <<link "Leave the room." "PASSAGE LINK END">><<set $gold to 0>><</link>> Note: //Italics// and ''bold'' font CAN be used inside the <<link>> macro.}}}</pre></blockquote> <h2>With the the Data-Passage Attribute</h2> You're all set for the day. Before you leave, do you have anything else to attend to? <a data-passage="PASSAGE LINK END" data-setter="$gold to 5">Collect your //coin purse.//</a> <a data-passage="PASSAGE LINK END" data-setter="$gold to 0">Leave the room.</a> <blockquote><h2>Code</h2> <pre>{{{You're all set for the day. Before you leave, do you have anything else to attend to? <a data-passage="PASSAGE LINK END" data-setter="$gold to 5">Collect your //coin purse.//</a> <a data-passage="PASSAGE LINK END" data-setter="$gold to 0">Leave the room.</a> Note: //Italics// and ''bold'' font CAN be used inside a data-passage attribute.}}}</pre></blockquote>

<center><h1>Passage Link demo</h1></center> <h2>With a Button</h2> You're all set for the day. Before you leave, do you have anything else to attend to? <<button "Collect your coin purse." "PASSAGE LINK END">><<set $gold to 5>><</button>> <<button "Leave the room." "PASSAGE LINK END">><<set $gold to 0>><</button>> <blockquote><h2>Code</h2> <pre>{{{You're all set for the day. Before you leave, do you have anything else to attend to? <<button "Collect your coin purse." "PASSAGE LINK END">><<set $gold to 5>><</button>> <<button "Leave the room." "PASSAGE LINK END">><<set $gold to 0>><</button>> }}}</pre></blockquote>

<center><h1>Passage Link demo</h1></center> <h2>With an Image</h2> You're all set for the day. Before you leave, do you have anything else to attend to? [img[Collect your coin purse.|https://i.imgur.com/DN5nXXQ.png][PASSAGE LINK END][$gold to 5]] [img[Leave the room.|https://i.imgur.com/GUH4ThI.png][PASSAGE LINK END][$gold to 0]] <blockquote><h2>Code</h2> <pre>{{{You're all set for the day. Before you leave, do you have anything else to attend to? [img[Collect your coin purse.|https://i.imgur.com/DN5nXXQ.png][PASSAGE LINK END][$gold to 5]] [img[Leave the room.|https://i.imgur.com/GUH4ThI.png][PASSAGE LINK END][$gold to 0]] }}}</pre></blockquote>

<<if $gold > 0>>You collect your coin purse and leave the room.<<else>>You leave the room.<</if>> <<link "Return to Variables Demo." "VARIABLES START">> <<unset $gold>><</link>> <<link "Return to Table of Contents." "Table of Contents">><<unset $gold>><</link>>

The forest is very nice. [[Where have you been?|TAGS EXAMPLE END]]

You have visited <<if visitedTags ("forest")>>the forest<<else>>nowhere.<</if>> <blockquote><h2>Code</h2> <pre>{{{You have visited <<if visitedTags ("forest")>>the forest<<else>>nowhere.<</if>> }}}</pre></blockquote> <<link "Return to Passage Tags Demo." "TAGS START">><</link>> <<link "Return to Table of Contents." "Table of Contents">><</link>>

Hello!

Here is a slice of blueberry pie. Would you like to take it with you? <<nobr>> <<button "Select This Pie">> <<set $dessert to "blueberry pie">> <<run Dialog.close()>> <<run Engine.play("End Dialog Example")>> <</button>> <<button "Decline This Pie">> <<run Dialog.close()>> <</button>> <</nobr>> <blockquote><h2>Code</h2> <pre>{{{<<nobr>> <<button "Select This Pie">> <<set $dessert to "blueberry pie">> <<run Dialog.close()>> <<run Engine.play("End Dialog Example")>> <</button>> <<button "Decline This Pie">> <<run Dialog.close()>> <</button>> <</nobr>> }}}</pre></blockquote>

You have a slice of $dessert. <blockquote><h2>Code</h2> <pre>{{{You have a slice of $dessert. }}}</pre></blockquote> <<link "Return to Dialog Box Demo." "DIALOG BOX START">><<unset $dessert>><</link>> <<link "Return to Table of Contents." "Table of Contents">><<unset $dessert>><</link>>

Here is a slice of chocolate cake. Would you like to take it with you? <<nobr>> <<button "Select This Cake">> <<set $dessert to "chocolate cake">> <<run Dialog.close()>> <<run Engine.play("End Dialog Example")>> <</button>> <<button "Decline This Cake">> <<run Dialog.close()>> <</button>> <</nobr>> <blockquote><h2>Code</h2> <pre>{{{<<nobr>> <<button "Select This cake">> <<set $dessert to "chocolate cake">> <<run Dialog.close()>> <<run Engine.play("End Dialog Example")>> <</button>> <<button "Decline This Cake">> <<run Dialog.close()>> <</button>> <</nobr>> }}}</pre></blockquote>

<<nobr>><<run UIBar.stow();>> The UI bar is stowed. <</nobr>> [[Automatically stow the UI bar.|AUTO STOW]] [[Automatically unstow the UI bar.|AUTO UNSTOW]] [[Automatically hide and stow and the UI bar.|AUTO HIDE STOW]] [[Automatically show and unstow the UI bar.|AUTO SHOW UNSTOW]] <blockquote><h2>Code</h2> <pre>{{{The UI bar is stowed. <<run UIBar.stow();>>}}}</pre></blockquote>

<<nobr>><<run UIBar.unstow();>> The UI bar is unstowed. <</nobr>> [[Automatically stow the UI bar.|AUTO STOW]] [[Automatically unstow the UI bar.|AUTO UNSTOW]] [[Automatically hide and stow and the UI bar.|AUTO HIDE STOW]] [[Automatically show and unstow the UI bar.|AUTO SHOW UNSTOW]] <blockquote><h2>Code</h2> <pre>{{{<<run UIBar.unstow();>> The UI bar is unstowed.}}}</pre></blockquote>

<<nobr>><<run UIBar.hide().stow();>> The UI bar is hidden and stowed. <</nobr>> [[Automatically stow the UI bar.|AUTO STOW]] [[Automatically unstow the UI bar.|AUTO UNSTOW]] [[Automatically hide and stow and the UI bar.|AUTO HIDE STOW]] [[Automatically show and unstow the UI bar.|AUTO SHOW UNSTOW]] <blockquote><h2>Code</h2> <pre>{{{<<run UIBar.hide().stow();>> The UI bar is hidden and stowed.}}}</pre></blockquote>

<<nobr>><<run UIBar.show().unstow();>> The UI bar is hidden and stowed. <</nobr>> [[Automatically stow the UI bar.|AUTO STOW]] [[Automatically unstow the UI bar.|AUTO UNSTOW]] [[Automatically hide and stow and the UI bar.|AUTO HIDE STOW]] [[Automatically show and unstow the UI bar.|AUTO SHOW UNSTOW]] <blockquote><h2>Code</h2> <pre>{{{<<run UIBar.show().unstow();>> The UI bar is hidden and stowed.}}}</pre></blockquote>

<<if settings.notifications>><<run Dialog.setup("Notification"); Dialog.wiki(Story.get("Notification Passage").processText()); Dialog.open();>>You have been notified! Go to settings and turn it off, then reload this passage. [[Reload.|SETTINGS NEXT]]<<else>>You have ''not'' been notified! Go to settings and turn it off, then reload this passage. [[Reload.|SETTINGS NEXT]]<</if>> <blockquote><h2>Code</h2> <pre>{{{<<if settings.notifications>> <<run Dialog.setup("Notification"); Dialog.wiki(Story.get("Notification Passage").processText()); Dialog.open();>> You have been notified! Go to settings and turn it off, then reload this passage. [[Reload.|SETTINGS NEXT]] <<else>> You have ''not'' been notified! Go to settings and turn it off, then reload this passage. [[Reload.|SETTINGS NEXT]] <</if>> }}}</pre></blockquote> <<link "Return to Settings Demo." "SETTINGS START">><</link>> <<link "Return to Table of Contents." "Table of Contents">><</link>>

You are notified!

The forest is nice. <<if hasVisited("LAKE")>>But not as nice as the lake...<<else>>You wonder if the lake will be just as nice...<</if>> [[Go to the lake.|LAKE]] [[Go to the cave.|CAVE]] [[End your journey.|JOURNEY END]] <blockquote><h2>Code</h2> <pre>{{{The forest is nice. <<if hasVisited("LAKE")>>But not as nice as the lake... <<else>>You wonder if the lake will be just as nice...<</if>> }}}</pre></blockquote>

The lake is nice. <<if hasVisited("FOREST")>>But not as nice as the forest...<<else>>You wonder if the forest will be just as nice...<</if>> [[Go to the forest.|FOREST]] [[Go to the cave.|CAVE]] [[End your journey.|JOURNEY END]] <blockquote><h2>Code</h2> <pre>{{{The lake is nice. <<if hasVisited("FOREST")>>But not as nice as the forest... <<else>>You wonder if the forest will be just as nice...<</if>> }}}</pre></blockquote>

The cave is creepy. <<if hasVisited("LAKE")>>You much prefer the lake.<<elseif hasVisited("FOREST")>>You much prefer the forest.<<else>>You should try visiting the forest or the lake, they might be nicer...<</if>> [[Go to the forest.|FOREST]] [[Go to the lake.|LAKE]] [[End your journey.|JOURNEY END]] <blockquote><h2>Code</h2> <pre>{{{The cave is creepy. <<if hasVisited("LAKE")>>You much prefer the lake. <<elseif hasVisited("FOREST")>>You much prefer the forest. <<else>>You should try visiting the forest or the lake, they might be nicer...<</if>> }}}</pre></blockquote>

<<nobr>><<if hasVisited("LAKE") and not hasVisited("CAVE") and not hasVisited("FOREST")>>You saw the lake. Shame you didn't see anything else... <<elseif hasVisited("FOREST") and not hasVisited("CAVE") and not hasVisited("LAKE")>>You saw the forest. Shame you didn't see anything else... <<elseif hasVisited("CAVE") and not hasVisited("FOREST") and not hasVisited("LAKE")>>You saw the forest. Shame you didn't see anything else... <<elseif hasVisited("CAVE") and hasVisited("FOREST") and not hasVisited("LAKE")>>You saw the forest and the cave, but not the lake. <<elseif hasVisited("FOREST") and hasVisited("LAKE") and not hasVisited("CAVE")>>You saw the forest and the lake, but not the cave. <<elseif hasVisited("CAVE") and hasVisited("LAKE") and not hasVisited("FOREST")>>You saw the cave and the lake, but not the forest. <<elseif hasVisited("CAVE") and hasVisited("LAKE") and hasVisited("FOREST")>>You saw the cave, the lake, and the forest! Go you! <<else>>You didn't see anything.<</if>><</nobr>> <blockquote><h2>Code</h2> <pre>{{{<<if hasVisited("LAKE") and not hasVisited("CAVE") and not hasVisited("FOREST")>>You saw the lake. Shame you didn't see anything else... <<elseif hasVisited("FOREST") and not hasVisited("CAVE") and not hasVisited("LAKE")>>You saw the forest. Shame you didn't see anything else... <<elseif hasVisited("CAVE") and not hasVisited("FOREST") and not hasVisited("LAKE")>>You saw the forest. Shame you didn't see anything else... <<elseif hasVisited("CAVE") and hasVisited("FOREST") and not hasVisited("LAKE")>>You saw the forest and the cave, but not the lake. <<elseif hasVisited("FOREST") and hasVisited("LAKE") and not hasVisited("CAVE")>>You saw the forest and the lake, but not the cave. <<elseif hasVisited("CAVE") and hasVisited("LAKE") and not hasVisited("FOREST")>>You saw the cave and the lake, but not the forest. <<elseif hasVisited("CAVE") and hasVisited("LAKE") and hasVisited("FOREST")>>You saw the cave, the lake, and the forest! Go you! <<else>>You didn't see anything.<</if>> }}}</pre></blockquote> <<link "Return to HasVisited Demo." "HASVISITED START">><</link>> <<link "Return to Table of Contents." "Table of Contents">><</link>>

<<nobr>>There is some text. And some more text. And some more text here. And some more over here!!<</nobr>> But look... they're all on the same line. (Except for this one). <blockquote><h2>Code</h2> <pre>{{{<<nobr>>There is some text. And some more text. And some more text here. And some more over here!!<</nobr>> But look... they're all on the same line. (Except for this one).}}}</pre></blockquote> <<link "Return NOBR Demo." "NOBR START">><</link>> <<link "Return to Table of Contents." "Table of Contents">><</link>>

This passage is tagged ''nobr''. There is some text. And some more text. And some more text here. And some more over here!! But look... they're all on the same line. <br><br>(Except for this one because I put in a line break!). <blockquote><h2>Code</h2> <pre>{{{This passage is tagged ''nobr''. There is some text. And some more text. And some more text here. And some more over here!! But look... they're all on the same line. <br><br>(Except for this one because I put in a line break!). }}}</pre></blockquote> <br><<link "Return NOBR Demo." "NOBR START">><</link>> <br><<link "Return to Table of Contents." "Table of Contents">><</link>>

The battle done, you leave the bandits and make your way out of the forest. After spending several hours getting lost, you finally find the road. You run to the castle as fast as you can. <<include "ARRIVE AT THE CASTLE">> <blockquote><h2>Code</h2> <pre>{{{The battle done, you leave the bandits and make your way out of the forest. After spending several hours getting lost, you finally find the road. You run to the castle as fast as you can. <<include "ARRIVE AT THE CASTLE">>}}}</pre></blockquote>

When you get there, the drawbridge is down, the courtyard silent. There isn’t a soul about. How strange! <<link "Return Include Demo." "INCLUDE START">><</link>> <<link "Return to Table of Contents." "Table of Contents">><</link>>

You’re thankful for your quiet morning. “Good thing I didn’t go to the forest,” you say aloud as you make your way out of the tavern and find your horse. You spend several calm hours on the road, riding to the castle. <<include "ARRIVE AT THE CASTLE">> <blockquote><h2>Code</h2> <pre>{{{You’re thankful for your quiet morning. “Good thing I didn’t go to the forest,” you say aloud as you make your way out of the tavern and find your horse. You spend several calm hours on the road, riding to the castle. <<include "ARRIVE AT THE CASTLE">>}}}</pre></blockquote>

Here's a game menu! This passage ''must'' be tagged ''noreturn''. [[This link goes to another part of the game menu.|Game Menu Example 2]] <<back [[Return to Game.|$return]]>> <blockquote><h2>Code</h2> <pre>{{{Here's a game menu! This passage ''must'' be tagged ''noreturn''. [[This link goes to another part of the game menu.|Game Menu Example 2]] <<back [[Return to Game.|$return]]>> }}}</pre></blockquote>

Open the UI bar and click on the Game Menu Example. <<link 'Click Here to Restore the Navigation Controls & Go Back' 'RETURN START'>><</link>>

Another page of your game menu. This passage ''must'' be tagged ''noreturn''. <<back [[Return to Game.|$return]]>> <blockquote><h2>Code</h2> <pre>{{{Another page of your game menu. This passage ''must'' be tagged ''noreturn''. <<back [[Return to Game.|$return]]>>}}}</pre></blockquote>