Character Page Examples For Play

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

Loading…

!Welcome to the basic character pages template! <<button "DIVE IN" "1">><</button>>

Example Story

by <a href="gamesbyalbie.tumblr.com/" target="_blank">Albie</a>

/* MC VERBS */ <<widget "are">><<switch $mc_vbP>><<case true>>are<<case false>>is<</switch>><</widget>> <<widget "were">><<switch $mc_vbP>><<case true>>were<<case false>>was<</switch>><</widget>> <<widget "s">><<switch $mc_vbP>><<case true>><<case false>>s<</switch>><</widget>> <<widget "do">><<switch $mc_vbP>><<case true>>do<<case false>>does<</switch>><</widget>> <<widget "have">><<switch $mc_vbP>><<case true>>have<<case false>>has<</switch>><</widget>> <<widget "re">><<switch $mc_vbP>><<case true>>'re<<case false>>'s<</switch>><</widget>> /* MC PRONOUNS */ <<widget "mcTheyThem">><<set $they = $mc_they[0]>><<set $them = $mc_them[0]>><<set $their = $mc_their[0]>><<set $theirs = $mc_theirs[0]>><<set $themself = $mc_themself[0]>><<set $They = $mc_They[0]>><<set $Them = $mc_Them[0]>><<set $Their = $mc_Their[0]>><<set $Theirs = $mc_Theirs[0]>><<set $Themself = $mc_Themself[0]>><<set $theyre = $mc_theyre[0]>><<set $Theyre = $mc_Theyre[0]>><<set $theyve = $mc_theyve[0]>><<set $Theyve = $mc_Theyve[0]>><<set $mc_vbP = true>><</widget>> <<widget "mcSheHer">><<set $they = $mc_they[1]>><<set $them = $mc_them[1]>><<set $their = $mc_their[1]>><<set $theirs = $mc_theirs[1]>><<set $themself = $mc_themself[1]>><<set $They = $mc_They[1]>><<set $Them = $mc_Them[1]>><<set $Their = $mc_Their[1]>><<set $Theirs = $mc_Theirs[1]>><<set $Themself = $mc_Themself[1]>><<set $theyre = $mc_theyre[1]>><<set $Theyre = $mc_Theyre[1]>><<set $theyve = $mc_theyve[1]>><<set $Theyve = $mc_Theyve[1]>><<set $mc_vbP = false>><</widget>> <<widget "mcHeHim">><<set $they = $mc_they[2]>><<set $them = $mc_them[2]>><<set $their = $mc_their[2]>><<set $theirs = $mc_theirs[2]>><<set $themself = $mc_themself[2]>><<set $They = $mc_They[2]>><<set $Them = $mc_Them[2]>><<set $Their = $mc_Their[2]>><<set $Theirs = $mc_Theirs[2]>><<set $Themself = $mc_Themself[2]>><<set $theyre = $mc_theyre[2]>><<set $Theyre = $mc_Theyre[2]>><<set $theyve = $mc_theyve[2]>><<set $Theyve = $mc_Theyve[2]>><<set $mc_vbP = false>><</widget>> <<widget "mcXeXem">><<set $they = $mc_they[3]>><<set $them = $mc_them[3]>><<set $their = $mc_their[3]>><<set $theirs = $mc_theirs[3]>><<set $themself = $mc_themself[3]>><<set $They = $mc_They[3]>><<set $Them = $mc_Them[3]>><<set $Their = $mc_Their[3]>><<set $Theirs = $mc_Theirs[3]>><<set $Themself = $mc_Themself[3]>><<set $theyre = $mc_theyre[3]>><<set $Theyre = $mc_Theyre[3]>><<set $theyve = $mc_theyve[3]>><<set $Theyve = $mc_Theyve[3]>><<set $mc_vbP = false>><</widget>> <<widget "mcEyEm">><<set $they = $mc_they[4]>><<set $them = $mc_them[4]>><<set $their = $mc_their[4]>><<set $theirs = $mc_theirs[4]>><<set $themself = $mc_themself[4]>><<set $They = $mc_They[4]>><<set $Them = $mc_Them[4]>><<set $Their = $mc_Their[4]>><<set $Theirs = $mc_Theirs[4]>><<set $Themself = $mc_Themself[4]>><<set $theyre = $mc_theyre[4]>><<set $Theyre = $mc_Theyre[4]>><<set $theyve = $mc_theyve[4]>><<set $Theyve = $mc_Theyve[4]>><<set $mc_vbP = false>><</widget>> /* MC GENDERED NOUNS */ <<widget "mcPerson">><<set $person = $mcPerson[0]>><<set $people = $mcPeople[0]>><<set $kid = $mcKid[0]>><<set $kids = $mcKids[0]>><</widget>> <<widget "mcWoman">><<set $person = $mcPerson[1]>><<set $people = $mcPeople[1]>><<set $kid = $mcKid[1]>><<set $kids = $mcKids[1]>><</widget>> <<widget "mcMan">><<set $person = $mcPerson[2]>><<set $people = $mcPeople[2]>><<set $kid = $mcKid[2]>><<set $kids = $mcKids[2]>><</widget>> /* MC GENDERS */ <<widget "mcNonbinary">><<set $gender = "nonbinary">><<set $gen = "nb">><<set $genderName = "nonbinary">><</widget>> <<widget "mcFemale">><<set $gender = "female">><<set $gen = "f">><<set $genderName = "female">><</widget>> <<widget "mcMale">><<set $gender = "male">><<set $gen = "m">><<set $genderName = "male">><</widget>> <<widget "mcCustGen">><<set $gender = "custom">><<set $gen = "nb">><</widget>>

<<if $profileSet>>[[Profile]]<</if>> <<if $charList>>[[Character List]]<</if>> <<if $codexMenu>>[[Codex]]<</if>> [[CREDITS + RESOURCES|Credits]]

<<set $health = 100>> <<set $bold = 50, $shy = 50>> <<set $aggressive = 50, $passive = 50>>  <<set $anxious = 50, $calm = 50>> <<set $dumbass = 50, $nerd = 50>>  <<set $evil = 99, $good = 1>> <<set $chaotic = 69, $lawful = 31>>  <<set $mcGenders = ["nonbinary", "female", "male", "pangender", "fluid", "agender", "neutrois"]>> <<set $mc_they = ["they", "she", "he", "xe", "ey"]>> <<set $mc_They = ["They", "She", "He", "Xe", "Ey"]>> <<set $mc_them = ["them", "her", "him", "xem", "em"]>> <<set $mc_Them = ["Them", "Her", "Him", "Xem", "Em"]>> <<set $mc_their = ["their", "her", "his", "xyr", "eir"]>> <<set $mc_Their = ["Their", "Her", "His", "Xyr", "Eir"]>> <<set $mc_theirs = ["theirs", "hers", "his", "xyrs", "eirs"]>> <<set $mc_Theirs = ["Theirs", "Hers", "His", "Xyrs", "Eirs"]>> <<set $mc_themself = ["themself", "herself", "himself", "xemself", "emself"]>> <<set $mc_Themself = ["Themself", "Herself", "Himself", "Xemself", "Emself"]>> <<set $mc_theyre = ["they're", "she's", "he's", "xe's", "ey's"]>> <<set $mc_Theyre = ["They're", "She's", "He's", "Xe's", "Ey's"]>> <<set $mc_theyve = ["they've", "she's", "he's", "xe's", "ey's"]>> <<set $mc_Theyve = ["They've", "She's", "He's", "Xe's", "Ey's"]>> <<set $mcPerson = ["person", "woman", "man"]>> <<set $mcPeople = ["people", "women", "men"]>> <<set $mcKid = ["kid", "girl", "boy"]>> <<set $mcKids = ["kids", "girls", "boys"]>>

<h1>Albie</h1>\ ''Name:'' Albie ''Age:'' 23 ''Species:'' Human ''Zodiac Sign:'' Aries ''Occupation:'' Narrator and NPC\ <center><h2>Stats</h2>\ <hr>\ <h3>Personality</h3></center>\ <<set $calm = 100 - $anxious>>\ <div class="stat-bar-group">\ <div class="stat-bar-container">\ <div class="stat-bar-overlay-left">Anxious $anxious%</div>\ <div class="stat-bar-overlay-right">Calm $calm%</div>\ <div class="stat-bar" id="anxious-stat"></div></div></div>\ <<set $nerd = 100 - $dumbass>>\ <div class="stat-bar-group">\ <div class="stat-bar-container">\ <div class="stat-bar-overlay-left">Dumbass $dumbass%</div>\ <div class="stat-bar-overlay-right">Nerd $nerd%</div>\ <div class="stat-bar" id="dumbass-stat"></div></div></div>\ <<button "Back">><<run Engine.backward()>><</button>>

<h1>It's a Codex!</h1>\ <h4>Oooh, and here are some lore entries</h4>\ * [[Important Lore|Lore]]\ <<button "Return" $return>><</button>>

<h1>Your Profile</h1>\ ''Name:'' $name $surname ''Pronouns:'' $They/$Them ''Species:'' <<print $species.toUpperFirst()>>\ <center><h2>Stats</h2>\ <hr>\ <h3>Health</h3></center>\ <span class="health"><div class="stat-bar-group">\ <div class="stat-bar-container">\ <div class="stat-bar-overlay-left">Health $health%</div>\ <div class="stat-bar-overlay-right"></div>\ <div class="stat-bar" id="health-stat"></div></div></div></span>\ \ <center><<if $health gt 0 and $health lte 5>>Okay, how are you still alive?<<elseif $health gt 5 and $health lte 20>>Eugh! You really need to get that checked out.<<elseif $health gt 20 and $health lte 50>>Meh... You should be fine.<<elseif $health gt 50 and $health lte 70>>All things considered, I think you're doing swell.<<elseif $health gt 70 and $health lt 100>>You look fantastic! Keep going!<<elseif $health is 100>>You are the picture of health. Go get 'em Heracles.<<else>>Well, great. You're dead. Now what am I supposed to do?<</if>></center> \ <hr>\ <center><h3>Personality</h3></center>\ <<set $shy = 100 - $bold>>\ <div class="stat-bar-group">\ <div class="stat-bar-container">\ <div class="stat-bar-overlay-left">Bold $bold%</div>\ <div class="stat-bar-overlay-right">Shy $shy%</div>\ <div class="stat-bar" id="bold-stat"></div></div></div>\ \ <<set $passive = 100 - $aggressive>>\ <div class="stat-bar-group">\ <div class="stat-bar-container">\ <div class="stat-bar-overlay-left">Aggressive $aggressive%</div>\ <div class="stat-bar-overlay-right">Passive $passive%</div>\ <div class="stat-bar" id="aggressive-stat"></div></div></div>\ <<button "Return" $return>><</button>>

<h1>Dark Albie</h1>\ ''Name:'' Albie? ''Age:'' 23? ''Species:'' Human? ''Zodiac Sign:'' Wait, what are you? ''Occupation:'' No, no! Stop! Get ba.lSJAK:Ld\ <center><h2>Stats</h2>\ <hr>\ <h3>Alignment</h3></center>\ <<set $good = 100 - $evil>>\ <div class="stat-bar-group">\ <div class="stat-bar-container">\ <div class="stat-bar-overlay-left">Evil $evil%</div>\ <div class="stat-bar-overlay-right">Good $good%</div>\ <div class="stat-bar" id="evilGood-stat"></div></div></div>\ <<set $lawful = 100 - $chaotic>>\ <div class="stat-bar-group">\ <div class="stat-bar-container">\ <div class="stat-bar-overlay-left">Chaotic $chaotic%</div>\ <div class="stat-bar-overlay-right">Lawful $lawful%</div>\ <div class="stat-bar" id="chaotic-stat"></div></div></div>\ <<button "Back">><<run Engine.backward()>><</button>>

!<span class="center">This template was written and coded by <a href="https://gamesbyalbie.tumblr.com/" target="_blank">''Albie''</a></span> ---- !!!<span class="center">CREDITS</span> I learned how to make stat bars from <a href="https://innerdemons-if.tumblr.com/" target="_blank">A.W. Morgan's</a> Twine Template (<a href="https://awmorgan.itch.io/twine-sugarcube-template" target="_blank">here</a>) OpenDyslexic Font by Abby Gonzalez (<a href="https://opendyslexic.org" target="_blank">here</a>) ---- !!!<span class="center">RESOURCES</span> The Sugarcube 2 Documentation (<a href="https://www.motoslave.net/sugarcube/2/docs/" target="_blank">here</a>), the Twine Cookbook (<a href="https://twinery.org/cookbook/" target="_blank">here</a>), and the Twine Grimoire (<a href="https://grimoirtua.com/grimoire.html" target="_blank">here</a>) Templates are extremely helpful. Here's a few: * A.W. Morgan's Template (<a href="https://awmorgan.itch.io/twine-sugarcube-template" target="_blank">here</a>) * Cerberus's Template (<a href="https://ccrberus.itch.io/twine-sugarcube-template" target="_blank">here</a>) * Nyehilism's First Template (<a href="https://nyehilism.itch.io/twine-template" target="_blank">here</a>) * Nyehilism's Second Template (<a href="https://nyehilism.itch.io/sugarcube-template" target="_blank">here</a>) * Vahnya's First Template (<a href="https://vahnya.itch.io/twine-template" target="_blank">here</a>) * Vahnya's Second Template (<a href="https://vahnya.itch.io/twine-template-ii" target="_blank">here</a>) This template doesn't use any custom macros but here are some links to custom macro sets: * Chapel's Custom Macros (<a href="https://github.com/ChapelR/custom-macros-for-sugarcube-2" target="_blank">here</a>) * Cycy's Custom Macros (<a href="https://github.com/cyrusfirheir/cycy-wrote-custom-macros" target="_blank">here</a>) * HiEv's Sample Code (<a href="https://qjzhvmqlzvoo5lqnrvuhmg.on.drv.tw/UInv/Sample_Code.html#Main%20Menu" target="_blank">here</a>) If you want to learn coding I'd suggest Codecademy and Khan Academy I also learned a lot of what I know through various tutorials produced by: * Adam Hammond (<a href="https://www.adamhammond.com/twineguide/" target="_blank">Website</a>) * Cerberus (<a href="https://cerberus-writes.tumblr.com/tagged/coding" target="_blank">Tumblr</a>) * Crosshollow (<a href="https://townofcrosshollow.tumblr.com/" target="_blank">Tumblr</a>) * Dan Cox (<a href="https://www.youtube.com/channel/UCTWJzxNdsIDHiYzGh-2Fd1w" target="_blank">YouTube Channel</a>) * Idrelle Games (<a href="https://idrellegames.tumblr.com/post/664858800855089152/coding-in-twine-other-resources" target="_blank">Tumblr</a>) * VegetarianZombie (<a href="https://www.youtube.com/channel/UC5Yh6j1_Rx2UoRbDn4Foprw" target="_blank">YouTube Channel</a>) Twinery.org, Intfiction.org, and Reddit are also great sources of information And you can always <a href="https://gamesbyalbie.tumblr.com/ask" target="_blank">ask me</a> if you want help :) <<button "Return" $return>><</button>>

<h3>How Shadow-Selves Are Created</h3>\ Blah blah blah a bunch of useless knowledge that probably wouldn't be helpful. <<button "Back">><<run Engine.backward()>><</button>>

<h1>Character List</h1>\ <ul><li>[[Albie]]</li>\ <<if $darkAlbie>><li>[[Albie?|Dark Albie]]</li><</if>></ul>\ <<button "Return" $return>><</button>>

<<nobr>> <<set $name = "", $surname = "">> <</nobr>>\ Welcome to the story! There are a few things I need to know before we take off. For example, what's your name, traveler? <center>\ Name: <<textbox "$name" "">> Surname: <<textbox "$surname" "">>\ </center>\ <<button "Confirm" "2">><<if $name is "">><<set $name = "Nemo">><</if>><<if $surname is "">><<set $surname = "Nobody">><</if>><</button>>

Ah, nice to meet you, $name $surname! Now, what pronouns do you prefer? > <label><<radiobutton "_choice" 0>> They/Them</label> > <label><<radiobutton "_choice" 1>> She/Her</label> > <label><<radiobutton "_choice" 2>> He/Him</label> > <label><<radiobutton "_choice" 3>> Xe/Xem</label> > <label><<radiobutton "_choice" 4>> Ey/Em</label> > <label><<radiobutton "_choice" 5>> Custom Pronouns</label> <center><<button "Confirm">><<nobr>> <<if _choice is 0>><<mcTheyThem>><<goto "3">> <<elseif _choice is 1>><<mcSheHer>><<goto "3">> <<elseif _choice is 2>><<mcHeHim>><<goto "3">> <<elseif _choice is 3>><<mcXeXem>><<goto "3">> <<elseif _choice is 4>><<mcEyEm>><<goto "3">> <<elseif _choice is 5>> <<script>> Dialog.setup("Custom Pronouns"); Dialog.wiki(Story.get("Custom Pronouns").processText()); Dialog.open(); <</script>> <<else>><<mcTheyThem>><<goto "3">> <</if>> <</nobr>><</button>></center>

$They/$them, cool cool. Now, one last question. What species are you? > <label><<radiobutton "$species" "human">> Human</label> > <label><<radiobutton "$species" "elf">> Elf</label> > <label><<radiobutton "$species" "dwarf">> Dwarf</label> <center><<button "Confirm" "4">><<if ndef $species>><<set $species = either("human", "elf", "dwarf")>><</if>><</button>></center>

<<nobr>> <<if ndef $mc_vbP>><<set _verbTense = "plural">><<else>><<if $mc_vbP is true>><<set _verbTense = "plural">><<else>><<set _verbTense = "singular">><</if>><</if>> <</nobr>>\ <h3>''Subject:'' //It was nighttime when ''they'' returned.//</h3>\ <span class="sectionline"><span class="inputlabel">Uppercase</span><span class="namebox"><<if ndef $They>><<textbox "$They" "They">><<else>><<set _They = $They>><<textbox "$They" `_They`>><</if>></span></span> <span class="sectionline"><span class="inputlabel">Lowercase</span><span class="namebox"><<if ndef $they>><<textbox "$they" "they">><<else>><<set _they = $they>><<textbox "$they" `_they`>><</if>></span></span> <h3>''Object:'' //I keep seeing ''them'' in random places.//</h3>\ <span class="sectionline"><span class="inputlabel">Uppercase</span><span class="namebox"><<if ndef $Them>><<textbox "$Them" "Them">><<else>><<set _Them = $Them>><<textbox "$Them" `_Them`>><</if>></span></span> <span class="sectionline"><span class="inputlabel">Lowercase</span><span class="namebox"><<if ndef $them>><<textbox "$them" "them">><<else>><<set _them = $them>><<textbox "$them" `_them`>><</if>></span></span> <h3>''Possessive Adjective:'' //What is ''their'' new address?//</h3>\ <span class="sectionline"><span class="inputlabel">Uppercase</span><span class="namebox"><<if ndef $Their>><<textbox "$Their" "Their">><<else>><<set _Their = $Their>><<textbox "$Their" `_Their`>><</if>></span></span> <span class="sectionline"><span class="inputlabel">Lowercase</span><span class="namebox"><<if ndef $their>><<textbox "$their" "their">><<else>><<set _their = $their>><<textbox "$their" `_their`>><</if>></span></span> <h3>''Possessive:'' //This coat is actually ''theirs''.//</h3>\ <span class="sectionline"><span class="inputlabel">Uppercase</span><span class="namebox"><<if ndef $Theirs>><<textbox "$Theirs" "Theirs">><<else>><<set _Theirs = $Theirs>><<textbox "$Theirs" `_Theirs`>><</if>></span></span> <span class="sectionline"><span class="inputlabel">Lowercase</span><span class="namebox"><<if ndef $theirs>><<textbox "$theirs" "theirs">><<else>><<set _theirs = $theirs>><<textbox "$theirs" `_theirs`>><</if>></span></span> <h3>''Reflexive:'' //They preferred to work by ''themself''.//</h3>\ <span class="sectionline"><span class="inputlabel">Uppercase</span><span class="namebox"><<if ndef $Themself>><<textbox "$Themself" "Themself">><<else>><<set _Themself = $Themself>><<textbox "$Themself" `_Themself`>><</if>></span></span> <span class="sectionline"><span class="inputlabel">Lowercase</span><span class="namebox"><<if ndef $themself>><<textbox "$themself" "themself">><<else>><<set _themself = $themself>><<textbox "$themself" `_themself`>><</if>></span></span> <h3>What verb tense do these pronouns use?</h3>\ <ul><label><<radiobutton "_verbTense" "plural" autocheck>> Plural (they ''are'')</label></ul>\ <ul><label><<radiobutton "_verbTense" "singular" autocheck>> Singular (<<print either("she","he","xe","ey")>> ''is'')</label></ul>\ <center><<button "Confirm">><<nobr>> <<if _verbTense is "plural">><<set $mc_vbP = true>><<elseif _verbTense is "singular">><<set $mc_vbP = false>><</if>> <<run Dialog.close()>><<goto "3">> <</nobr>><</button>></center>

<<set $profileSet = true>>\ Awesome! So, you're $name $surname the <<print $species.toUpperFirst()>> and you use $they/$them pronouns? You nod. Great! It's a pleasure to meet you, $name. I can't wait to take you on this journey. I'll give you a second to check out your profile. Go ahead, I'll wait here. <<button "Continue""5">><</button>>

Oh, look! Someone else is coming. A stranger walks up, greeting you with a smile. "Hello!" * <<link "\"Hey!\" you wave." "6">><</link>> * <<link "\"Uh, hi...\" you blush." "6">><<set $bold -= 10>><</link>> * <<link "\"Who the fuck are you?\"" "6">><<set $bold += 10>><</link>>

<<set $charList = true>><<if $bold gt 50>>"Uh, I'm Albie," they blush, looking somewhat uncomfortable.<<else>>"I'm Albie," they grin. "Nice to meet you!"<</if>> "I'm $name $surname." "Cool cool." The two of you stand there for a moment, waiting for the story to continue. Since we're paused, feel free to take a second and check out the new character menu. Albie should be in there.<<if $bold isnot 50>> Oh, and you may want to check your own profile while you're at it, I feel like you've changed a little between this page and the last one.<</if>> <<button "Continue" "7">><</button>>

You can see someone else walking towards the two of you. <<if $species is "human">>The figure looks vaguely like you and Albie<<else>>The figure looks less like you and more like Albie<</if>> but it's hard to tell from this distance. The stranger keeps coming closer. Wait, no. What? It's Albie. Like //another// Albie. You turn to look at the first Albie and you register intense fear in their eyes. <<button "Continue" "8">><<set $darkAlbie = true>><<set $anxious = Math.clamp($anxious + 30, 0, 100)>><</button>>

"Albie, who's that?" you ask. Albie swallows hard. "I- I don't know, they've been following me everywhere I go." "Is that all you can tell me?" "Oh, no. Here. I unlocked their profile in your character list. Feel free to check it out. There's some more info there." <<button "Continue" "9">><<set $codexMenu = true>><</button>>

The other Albie is almost on the two of you now. You can see something glinting in their hand and a terrifying smile on their face. "That page didn't have anything that was useful. Do you have anything else?" "Actually, while you were pressing that button I managed to find a codex. Here. Take it. Maybe there's something that can help us in there." <<button "Continue" "10">><</button>>

"So?" Albie asks. "Was there anything useful in there?" "No, not even remotely." "Fuck. What now?" You shrug. "I don't know." Well, I could just end the game here. That way you don't have to see what the second Albie was planning on doing. "That sounds good to me," Albie eyes their shadow self warily. * <<link "\"What? No,\" you cross your arms. \"I want to see what happens!\"" "11">><<set $bold +=10>><</link>> * <<link "\"Yeah, that's probably for the best,\" you sigh. \"I don't want to find out why I have a health stat.\"" "11">><<set $bold -= 5, $aggressive -= 10>><</link>> * <<link "\"No! Not today,\" you shout, unsheathing your sword, hoisting your weapon high into the air, \"Today we fight!\"" "11">><<set $bold += 10, $aggressive += 10>><</link>>

<<if $aggressive gt 50>>Wait where the fuck did you get a sword? You shrug, "Doesn't matter, I want to fight the second Albie." Eh, too bad. I don't feel like writing that scene. "But that's not fair. You can't leave this on a cliffhanger!" I'm supposed to. Or no, I don't //have// to anymore... Hmm. "Come on, finish the story. Please!" Okay, fine, you hear me sigh. I'll finish the story when the full template comes out. Happy?<<elseif $aggressive lt 50>>Okay. Fantastic. Glad we're on the same page. I guess that means we're safe... //for now.//<<else>>Love that for you. However, I don't feel like writing anymore so... "So what? Are you just gonna leave this on a cliffhanger?" Yeah, I guess cliffhangers are my thing now. "But that's not fair!" You pout. Ugh, fine! I'll finish the story when the full template comes out. Happy?<</if>> <<button "Continue" "12">><</button>>