sandboxBTB

Browser lacks capabilities required to play.

Upgrade or switch to another browser.

Loading…

<<set $metadata = { title: "Sandbox (Beyond the Book)", version: "1.0.1", credits: { author: "Filip Pultar", graphics: ["DALL·E 3"], affiliation: { institution: "Masaryk University", country: "Czech Republic", city: "Brno", }, }, }>>  <<set $code = function (str) { return `<span class="code">{{{${str}}}}</span>`; }>>  <<set $commentHtml = function (str) { return `<span class="html-comment"><!{{{--}}} {{{${str}}}} {{{--}}}></span>`; }>>  <<set $phonemic = function (str) { return `<span class="phonemic-transcription">/${str}/</span>`; }>>  <<set $images = { directory: "files_BtB-Sandbox/images/", extension: ".webp", altExtension: ".png", }>> <<set $sandbox = "Sandbox">> <<set $examplePsg = "ExamplePassage1">> <<set $topicTags = ["module-core", "module-intermediate", "module-extra"]>>  <<set $topics = [ { id: "coreBasics", name: "Core topics", cssClass: "top-core", passages: [ { id: "HTML (part 1)", description: "HTML provides the structural foundation in Twine, allowing you to create the basic building blocks of your interactive story. It defines elements such as text, links, images, and other content that make up the game's passages.", keywords: ["html", "markup language", "content structure", "story formatting"], }, { id: "Assignment Operators", description: "Assignment operators in JavaScript are used to assign values to variables. These operators streamline code by combining mathematical operations with assignment, making code more concise and readable.", keywords: ["variable assignment", "mathematical operations", "shortcut operators", "value assignment", "code efficiency"], }, { id: "", description: "", keywords: ["", ""], }, ], }, { id: "advancedBasics", name: "Intermediate topics", cssClass: "top-intermediate", passages: [ { id: "HTML (part 2)", description: "Expanding on HTML basics, this part dives into organizing content with lists, uniquely identifying elements with id attributes for precise styling and scripting, and effectively using HTML comments for notes or disabling code without removal.", keywords: ["lists", "unordered lists", "ordered lists", "element identification", "HTML comments", "content organization", "narrative structure"], }, { id: "Conditional Logic Operators", description: "Conditional logic operators in JavaScript and Twine SugarCube syntax allow for the creation of dynamic and interactive narratives by executing different blocks of code based on certain conditions.", keywords: ["conditional logic", "if statement", "else statement", "else if statement", "dynamic content"], }, { id: "Mathematical Functions", description: "This section explores the use of mathematical functions in programming, focusing on more complex functions like rounding, and min/max operations.", keywords: ["mathematical operations", "arithmetic", "rounding", "min/max", "data manipulation"], }, { id: "", description: "", keywords: ["", ""], }, ], }, { id: "extraModules", name: "Optional (advanced) topics", cssClass: "top-extra", passages: [ { id: "For Loops", description: "For loops in coding are used to execute a block of code repeatedly for a specified number of times or until a certain condition is met. They are essential for automating repetitive tasks, iterating over arrays or collections, and processing data efficiently.", keywords: ["arrays", "automated tasks", "automation", "code repetition", "data processing", "for", "for loops", "index variable", "iteration", "loop", "repetition", "repetitive processing"], }, { id: "Ternary operator", description: "The ternary operator is a concise way to perform conditional checks, returning one value if the condition is true, and another if false.", keywords: ["conditional", "ternary operator", "if-else shorthand", "three operands", "inline conditionals"], }, { id: "", description: "", keywords: ["", ""], }, ], }, ]>>

<<if $topicTags && $currentTopic && tags().some(tag => $topicTags.includes(tag))>> <h2 class="center"><<= $currentTopic.id>></h2> <p class="italic"><<= $currentTopic.description>></p> <hr> <</if>> <<if passage() == $sandbox>> <h2 class="center"><<= $sandbox>></h2> <<insertImage "sandbox" $images.extension "" "100px">> <hr> <</if>>

<div class="center comment">Version: <strong><<= $metadata.version>></strong></div> <div class="center"><a href="https://www.motoslave.net/sugarcube/2/docs/">SugarCube Documentation</a></div> <hr> <div class="topics"> <<set _currentlyIn = passage()>> <<set _buttonCss = $sandbox == _currentlyIn ? "currently-in" : "">> <div @class="_buttonCss"> <<button $sandbox>> <<if $sandbox != _currentlyIn>> <<set $currentTopic = null>> <<goto $sandbox>> <</if>> <</button>> </div> <<set _buttonCss = $examplePsg == _currentlyIn ? "currently-in" : "">> <div @class="_buttonCss"> <<set _examplePsgLabel = "Example passage">> <<button _examplePsgLabel>> <<if $examplePsg != _currentlyIn>> <<set $currentTopic = null>> <<goto $examplePsg>> <</if>> <</button>> </div> <hr> <<for _i = 0; _i < $topics.length; _i++>> <<set _currentCategory = $topics[_i]>> <div @class="_currentCategory.cssClass"> <div class="center"><strong><<= _currentCategory.name>></strong></div> <<set _currentPsgList = _currentCategory.passages>> <<if _currentPsgList && _currentPsgList.length>> <<for _j = 0; _j < _currentPsgList.length; _j++>> <<set _currentPassage = _currentPsgList[_j]>> <<if _currentPassage && _currentPassage.id>> <<set _buttonCss = _currentPassage.id == _currentlyIn ? "currently-in" : "">> <<set _htmlTitle = _currentPassage.description || "">> <<capture _currentPassage _htmlTitle>> <div @class="_buttonCss" @title="_htmlTitle"> <<button _currentPassage.id>> <<if _currentPassage.id != _currentlyIn>> <<set $currentTopic = _currentPassage>> <<goto _currentPassage.id>> <</if>> <</button>> </div> <</capture>> <</if>> <</for>> <</if>> </div> <<if _i < ($topics.length - 1)>><hr><</if>> <</for>> </div>

<div><<= $commentHtml('Generates 10 <div> elements with numbers 0 to 9.')>></div> <div><<= $code('<<for _i = 0; _i < 10; _i++>>')>></div> <div class="indent"><<= $code('<div>_i</div>')>></div> <div><<= $code('<</for>>')>></div>  <<for _i = 0; _i < 10; _i++>> <div>_i</div> <</for>> <hr> <div><<= $commentHtml('Initialisation of the NPC (non-player character) list')>> <div><<= $code('<<set _npcList = [')>></div> <div class="indent"> <div><<= $code('{')>></div> <div class="indent-2"> <div><<= $code('role: "Builder",')>></div> <div><<= $code('name: "Bob",')>></div> <div><<= $code('age: 34,')>></div> </div> <div><<= $code('},')>></div> <div><<= $code('{')>></div> <div class="indent-2"> <div><<= $code('role: "Barbarian",')>></div> <div><<= $code('name: "Conan",')>></div> <div><<= $code('age: 28,')>></div> </div> <div><<= $code('},')>></div> <div><<= $code('{')>></div> <div class="indent-2"> <div><<= $code('role: "Hedgehog",')>></div> <div><<= $code('name: "Sonic",')>></div> <div><<= $code('age: 15,')>></div> </div> <div><<= $code('},')>></div> </div> <div><<= $code(']>>')>></div> <br> <div><<= $commentHtml("Start of the 'for' loop. Sets a loop counter variable '_i' starting at 0")>></div> <div><<= $code('<<for _i = 0; _i < _npcList.length; _i++>>')>></div> <div class="indent"> <div><<= $commentHtml("Retrieves the current NPC from the list based on the index '_i'")>></div> <div><<= $code('<<set _currentNpc = _npcList[_i]>>')>></div> <div><<= $commentHtml('Creates a div element to display the name and role of the current NPC, and also its age')>></div> <div><<= $code('<div>')>></div> <div class="indent-2"><<= $code('<strong>_currentNpc.name</strong> the _currentNpc.role (age: _currentNpc.age)')>></div> <div><<= $code('</div>')>></div> </div> <div><<= $code('<</for>>')>></div> <br> <<set _npcList = [ { role: "Builder", name: "Bob", age: 34, }, { role: "Barbarian", name: "Conan", age: 28, }, { role: "Hedgehog", name: "Sonic", age: 15, }, ]>> <<for _i = 0; _i < _npcList.length; _i++>> <<set _currentNpc = _npcList[_i]>> <div> <strong>_currentNpc.name</strong> the _currentNpc.role (age: _currentNpc.age) </div> <</for>>

<div class="center"><strong class="main">Assignment</strong> <<= $phonemic('əˈsaɪnmənt')>></div> <ul> <li>Sets your variable to a new value.</li> <li class="comment">It's important to remember that the variable will only keep the last value given to it. Each time you use the assignment operator =, you're telling the program to forget the old value and remember the new one.</li> </ul> <div class="center"> <div>Syntax:</div> <div class="task-script">set variableName = newValue</div> <div style="margin-top: 1em;">Example:</div> <div class="task-script">set <span class="task-st-var">maxHealth</span> = 10</div> <div>This sets the variable <span class="task-st-var">maxHealth</span> to <strong>10</strong>.</div> <br> <div class="task-script">set <span class="task-st-var">npcName</span> = "Walter White"</div> <div>This sets the variable <span class="task-st-var">npcName</span> to <strong>"Walter White"</strong>.</div> </div> <hr> <div class="center"><strong class="main">Addition</strong> <<= $phonemic('əˈdɪʃ<sup>ə</sup>n')>></div> <ul> <li>Increases your variable by a certain number.</li> <li class="comment">The += operator adds to the current value of your variable. It's a quick way to update and increase a variable without writing the full expression.</li> </ul> <div class="center"> <div>Syntax:</div> <div class="task-script">set variableName += addValue</div> <div style="margin-top: 1em;">Example:</div> <div class="task-script">set <span class="task-st-var">score</span> += 5</div> <div>Adds <strong>5</strong> to the variable <span class="task-st-var">score</span>.</div> </div> <hr> <div class="center"><strong class="main">Subtraction</strong> <<= $phonemic('səbˈtrækʃ<sup>ə</sup>n')>></div> <ul> <li>Decreases your variable by a specific number.</li> <li class="comment">The -= operator subtracts from the current value of your variable. It's useful for deducting amounts, like reducing health after taking damage.</li> </ul> <div class="center"> <div>Syntax:</div> <div class="task-script">set variableName -= subtractValue</div> <div style="margin-top: 1em;">Example:</div> <div class="task-script">set <span class="task-st-var">health</span> -= 20</div> <div>Subtracts <strong>20</strong> from the variable <span class="task-st-var">health</span>.</div> </div> <hr> <div class="center"><strong class="main">Multiplication</strong> <<= $phonemic('ˌmʌltɪplɪˈkeɪʃ<sup>ə</sup>n')>></div> <ul> <li>Multiplies your variable by a number.</li> <li class="comment">The *= operator multiplies the current value of your variable. It can quickly scale up values, like doubling points during a bonus round.</li> </ul> <div class="center"> <div>Syntax:</div> <div class="task-script">set variableName *= multiplyValue</div> <div style="margin-top: 1em;">Example:</div> <div class="task-script">set <span class="task-st-var">points</span> *= 2</div> <div>Multiplies the variable <span class="task-st-var">points</span> by <strong>2</strong>.</div> </div> <hr> <div class="center"><strong class="main">Division</strong> <<= $phonemic('dɪˈvɪʒ<sup>ə</sup>n')>></div> <ul> <li>Divides your variable by a number.</li> <li class="comment">The /= operator divides the current value of your variable. It's often used for averaging scores or splitting resources evenly.</li> </ul> <div class="center"> <div>Syntax:</div> <div class="task-script">set variableName /= divideValue</div> <div style="margin-top: 1em;">Example:</div> <div class="task-script">set <span class="task-st-var">availableMaterials</span> /= 4</div> <div>Divides the variable <span class="task-st-var">availableMaterials</span> into <strong>4</strong> equal parts.</div> </div> <<taskContainer>> <<set _taskVar = "bananas">> <<set _bananas = 10>> <<capture _taskVar _bananas>> <<taskInstructions "Assignment operators - Calculations">> What will the final value of the variable <strong class="main task-temp-var">_taskVar</strong> be in each case? <</taskInstructions>> <<taskContents>> <ol> <<set _finalCalc = 16>> <<set _operation = "=">> <<capture _finalCalc>> <<answerHtmlLi "Assignment">> <div class="task-script">set <span class="task-temp-var">_taskVar</span> = _bananas</div> <div class="task-script">set <span class="task-temp-var">_taskVar</span> _operation 723</div> <div class="task-script">set <span class="task-temp-var">_taskVar</span> _operation _finalCalc</div>  <<revealAnswer>> <<set _bananas = _finalCalc>> <<= _bananas>> <</revealAnswer>> <</answerHtmlLi>> <</capture>> <<set _finalCalc = 9>> <<set _operation = "+=">> <<capture _finalCalc>> <<answerHtmlLi "Addition">> <div class="task-script">set <span class="task-temp-var">_taskVar</span> = _bananas</div> <div class="task-script">set <span class="task-temp-var">_taskVar</span> _operation _finalCalc</div>  <<revealAnswer>> <<set _bananas += _finalCalc>> <<= _bananas>> <</revealAnswer>> <</answerHtmlLi>> <</capture>> <<set _finalCalc = 14>> <<set _operation = "-=">> <<capture _finalCalc>> <<answerHtmlLi "Subtraction">> <div class="task-script">set <span class="task-temp-var">_taskVar</span> = _bananas</div> <div class="task-script">set <span class="task-temp-var">_taskVar</span> _operation _finalCalc</div>  <<revealAnswer>> <<set _bananas -= _finalCalc>> <<= _bananas>> <</revealAnswer>> <</answerHtmlLi>> <</capture>> <<set _finalCalc = 3>> <<set _operation = "*=">> <<capture _finalCalc>> <<answerHtmlLi "Multiplication">> <div class="task-script">set <span class="task-temp-var">_taskVar</span> = _bananas</div> <div class="task-script">set <span class="task-temp-var">_taskVar</span> _operation _finalCalc</div>  <<revealAnswer>> <<set _bananas *= _finalCalc>> <<= _bananas>> <</revealAnswer>> <</answerHtmlLi>> <</capture>> <<set _finalCalc = 2>> <<set _operation = "/=">> <<capture _finalCalc>> <<answerHtmlLi "Division">> <div class="task-script">set <span class="task-temp-var">_taskVar</span> = _bananas</div> <div class="task-script">set <span class="task-temp-var">_taskVar</span> _operation _finalCalc</div>  <<revealAnswer>> <<set _bananas /= _finalCalc>> <<= _bananas>> <</revealAnswer>> <</answerHtmlLi>> <</capture>> </ol> <</taskContents>> <</capture>> <</taskContainer>>

<<taskContainer>> <<taskInstructions "Logical operators">> <ol> <li>Define two variables at the beginning referring to a "map" and a "compass". Players do not have either of these.</li> <li>Display the current status of these items to the player.</li> <li>Create a passage where the player finds a map.</li> <li>Similarly, add a passage where the player can acquire a compass.</li> <li>Create a passage where the player must have both the map and compass to proceed. If the condition is met, guide them to the passage that leads them onwards. Otherwise, display a message that they need both items and offer paths to find the missing items.</li> </ol> <</taskInstructions>> <</taskContainer>>

<div class="center"><strong class="main">Ternary Operator</strong> <<= $phonemic('ˈtɜːnəri ɒpəreɪtə')>></div> <p>The ternary operator is a concise way to perform conditional checks and return a value based on the result. It takes three operands: a condition, a result upon a true condition, and a result upon a false condition, simplifying if-else statements into a single line of code.</p> <<set _score = 75>> <<set _grade = _score >= 50 ? "Pass" : "Fail">> <div> <<codeTw>>set <<tempVarSigil>>score = _score<</codeTw>> </div> <div> <<codeTw>>set <<tempVarSigil>>grade = <<tempVarSigil>>score >= 50 ? "Pass" : "Fail"<</codeTw>> </div> <div> The grade is: <<= $code('_grade')>>. </div> <div>The grade is: _grade.</div>

<<widget "taskContainer" container>>  <div class="task-outer-container"> _contents </div> <</widget>> <<widget "taskInstructions" container>>  <div class="task-instructions-container"> <div> <div class="bold center">Task</div> <<insertImage "icons/task" $images.altExtension "image task-icon" "48px">> <<set _taskHeading = _args ? _args[0] : "">> <<if _taskHeading>> <div class="task-heading"><<= _taskHeading>></div> <</if>> </div>  <div> _contents </div> </div> <</widget>> <<widget "taskContents" container>> <div class="task-contents-container">_contents</div> <</widget>>  <<widget "revealAnswer" container>> <<set _answerNo = _answerNo ? _answerNo + 1 : 1>> <<set _answerFieldId = "answer-field-" + _answerNo>> <<set _answerFieldSelector = "#" + _answerFieldId>> <<capture _answerFieldSelector>> <div> Correct answer: <span @id="_answerFieldId" class="reveal-answer"> ? <<link "Show correct answer">> <<if _answerFieldSelector && $(_answerFieldSelector).length>> <<replace _answerFieldSelector t8n>> <strong class="positive">_contents</strong> <</replace>> <</if>> <</link>> </span> </div> <</capture>> <</widget>>  <<widget "answerHtmlLi" container>> <<set _answerHeading = _args[0] || "">> <li style="margin: 5px auto;"><<= _answerHeading>> <div style="text-indent: 1em;"> _contents </div> </li> <</widget>>

<<widget "insertImage">> <<set _imgName = _args[0] || "">> <<set _ext = _args[1] || $images.extension>> <<set _cssClass = _args[2] || "image">> <<set _imgWidth = "width: " + (_args[3] || "150px") + ";">> <<set _imgId= _args[4] || "">> <<if _imgName && _ext>> <<set _imgRelativePath = $images.directory + _imgName + _ext>> <img @src="_imgRelativePath" @class="_cssClass" @style="_imgWidth" @id="_imgId" onerror="this.style.display='none'"> <</if>> <</widget>>

<div class="center"><strong class="main upper-case"><u>Basic tags</u></strong> <<= $phonemic('ˌbeɪsɪk ˈtæɡz')>></div>  <div class="center bold"><<= $code('<span>')>></div> <ul> <li>An <strong>inline container</strong> used to mark up a part of a text or a document for styling purposes.</li> </ul> <div class="center">Syntax:</div> <div class="center"><<= $code('<span>')>>...<<= $code('</span>')>></div> <div class="center" style="margin-top: 1em;">Example:</div> <div><<= $code('<span style="color: black; background-color: white;">')>>Blunt pencils are really pointless.<<= $code('</span>')>></div> <div><span style="color: black; background-color: white;">Blunt pencils are really pointless.</span></div> <hr>  <div class="center bold"><<= $code('<div>')>></div> <ul> <li>A <strong>block-level container</strong> used for grouping HTML elements to format with CSS.</li> </ul> <div class="center">Syntax:</div> <div class="center"><<= $code('<div>')>>...<<= $code('</div>')>></div> <div class="center" style="margin-top: 1em;">Example:</div> <div><<= $code('<div style="color: black; background-color: white;">')>>Blunt pencils are really pointless.<<= $code('</div>')>></div> <div><div style="color: black; background-color: white;">Blunt pencils are really pointless.</div></div> <hr>  <div class="center bold"><<= $code('<p>')>></div> <ul> <li>Defines a <strong>paragraph</strong> of text.</li> </ul> <div class="center">Syntax:</div> <div class="center"><<= $code('<p>')>>...<<= $code('</p>')>></div> <div class="center" style="margin-top: 1em;">Example:</div> <div><<= $code('<p>')>>This is a sample paragraph.<<= $code('</p>')>></div> <div><p>This is a sample paragraph.</p></div> <hr>  <div class="center bold"><<= $code('<h1>')>></div> <ul> <li>Creates a top-level <strong>heading</strong> on the page, the most important one.</li> </ul> <div class="center">Syntax:</div> <div class="center"><<= $code('<h1>')>>Main Heading<<= $code('</h1>')>></div> <div class="center" style="margin-top: 1em;">Example:</div> <div><<= $code('<h1>')>>Welcome to My Website<<= $code('</h1>')>></div> <div><h1>Welcome to My Website</h1></div> <hr>  <div class="center bold"><<= $code('<hr>')>></div> <ul> <li>Inserts a <strong>horizontal rule</strong> (line) in the document, often used for thematic breaks.</li> </ul> <div class="center">Syntax:</div> <div class="center"><<= $code('<hr>')>></div> <div class="center" style="margin-top: 1em;">Example:</div> <div>This separates sections<<= $code('<hr>')>>Like this.</div> <div>This separates sections<hr>Like this.</div> <<taskContainer>> <<taskInstructions "Understanding HTML Containers">> Go to the <strong class="main">$sandbox</strong> passage and experiment with the tasks below. <</taskInstructions>> <<taskContents>> <ol> <<answerHtmlLi "<<= $code('<span>')>>, <<= $code('<div>')>> and <<= $code('<p>')>>">> <div> <<set _noOfExamples = 2>> Wrap _noOfExamples short passages in <<= $code('<span>')>> tags, _noOfExamples short passages in <<= $code('<div>')>> tags and _noOfExamples short passages in <<= $code('<p>')>> tags. Reflect on how each container impacts the presentation and organization of content </div> <</answerHtmlLi>> </ol> <</taskContents>> <</taskContainer>>

<div class="center"><strong><<= $code('<ul>')>> & <<= $code('<ol>')>></strong></div> <ul> <li>Used for creating <strong>unordered (ul)</strong> and <strong>ordered (ol)</strong> lists to structure items.</li> <span class="comment"> <li>"ul" stands for <strong>Unordered List</strong></li> <li>"ol" stands for <strong>Ordered List</strong></li> <li>"li" stands for <strong>List Item</strong></li> </span> </ul> <div class="center">Syntax for <strong>unordered lists</strong>:</div> <div class="center"><<= $code('<ul>')>><<= $code('<li>')>>Item 1<<= $code('</li>')>><<= $code('<li>')>>Item 2<<= $code('</ul>')>></div> <div class="center">Syntax for <strong>ordered lists</strong>:</div> <div class="center"><<= $code('<ol>')>><<= $code('<li>')>>First Item<<= $code('</li>')>><<= $code('<li>')>>Second Item<<= $code('</ol>')>></div> <div class="center" style="margin-top: 1em;">Example:</div> <div>Unordered List:</div> <div> <div><<= $code('<ul>')>></div> <div class="indent"><<= $code('<li>')>>Apple<<= $code('</li>')>></div> <div class="indent"><<= $code('<li>')>>Banana<<= $code('</li>')>></div> <div><<= $code('</ul>')>></div> </div> <div> <ul> <li>Apple</li> <li>Banana</li> </ul> </div> <br> <div>Ordered List:</div> <div> <div> <div><<= $code('<ol>')>></div> <div class="indent"><<= $code('<li>')>>Step 1<<= $code('</li>')>></div> <div class="indent"><<= $code('<li>')>>Step 2<<= $code('</li>')>></div> <div><<= $code('</ol>')>></div> </div> </div> <div> <ol> <li>Step 1</li> <li>Step 2</li> </ol> </div> <hr>  <div class="center"><strong class="code"><<= $code('<div id="">')>></strong></div> <ul> <li>Assigns a <strong>unique identifier (id)</strong> to an element for styling or scripting.</li> </ul> <div class="center">Syntax:</div> <div class="center"><<= $code('<div id="unique-id">')>>...<<= $code('</div>')>></div> <div class="center" style="margin-top: 1em;">Example:</div> <div><<= $code('<div id="number-count">')>><span id="number-count">Click the button to change this element.</span><<= $code('</div>')>> <<button "Click me!">><<set _currentCount = _currentCount ? _currentCount + 1 : 1>><<replace "#number-count">>The current count is <<= _currentCount>>.<</replace>><</button>></div> <hr>  <div class="center"><strong class="code">HTML Comments</strong></div> <ul> <li>Allows for <strong>notes or instructions</strong> within the HTML code that do not display in the final output.</li> </ul> <div class="center">Syntax:</div> <div class="center"><<= $code('')>></div> <div class="center" style="margin-top: 1em;">Example:</div> <div><<= $code('')>></div>

<h3>Heading</h3> <p>Paragraph text.</p> <hr> <ol> <li>Go [[straight|option1][$direction = "straight"]].</li> <li>Go [[left|option2][$direction = "left"]].</li>  <<set _direction = "right">> <<capture _direction>> <li>Go [[_direction|option3][$direction = _direction]].</li> <</capture>> </ol>

<div>You went <<= $direction>>.</div> <div>[[Go back.|ExamplePassage1]]</div>

<<set $health = 100>> <<displayHealth>> <div>You encounter a mysteriously enticing pie. Do you dare to eat it?</div> <<insertImage "suspicious-pie" $images.extension "" "250px">> <hr> <<set $health -= 10>> <div>The pie was delicious but cursed! You've lost 10 health points.</div> <<displayHealth>> <hr> <<if $health <= 0>> <div>Unfortunately, this pie was your undoing.</div> <<else>> <<set $health += 15>> <div>You feel a bit queasy but live to eat another day. Encouraged by surviving the pie, you gain 15 health points out of sheer relief and proceed to a door with two buttons: "Push" and "Pull."</div> <<displayHealth>> <hr> <<set $health -= 5>> <div>You push the button, and a boxing glove on a spring pops out, bonking you on the head. You lose 5 health points but gain a healthy distrust of doors.</div> <<displayHealth>> <</if>>

<<widget "displayHealth">> <<if $health !== undefined>> <<set _healthCss = $health > 0 ? "positive" : "negative">> <div class="center">Current health: <strong @class="_healthCss">$health</strong></div> <</if>> <</widget>>

<div>You went <<= $direction>>.</div> <div>[[Go back.|ExamplePassage1]]</div>

<<widget "codeTw" container>> <span class="code"><<_contents>></span> <</widget>>  <<widget "tempVarSigil">><<= "_">><</widget>>  <<widget "storyVarSigil">><<= "$">><</widget>>

<<set $hasMap = false>> <<set $hasCompass = false>> <div> <<if $hasMap>> You've got a <strong class="positive">map</strong>. <<else>> You haven't got a <strong class="negative">map</strong>. <</if>> </div> <div> <<if $hasCompass>> You've got a <strong class="positive">compass</strong>. <<else>> You haven't got a <strong class="negative">compass</strong>. <</if>> </div> <hr> <div>Check the [[bookshelf|6-1]].</div>

<p>You've found a map!</p> <<set $hasMap = true>> <div> <<if $hasMap>> You've got a <strong class="positive">map</strong>. <<else>> You haven't got a <strong class="negative">map</strong>. <</if>> </div> <div> <<if $hasCompass>> You've got a <strong class="positive">compass</strong>. <<else>> You haven't got a <strong class="negative">compass</strong>. <</if>> </div> <hr> <div>Check the [[chest|6-2]].</div>

<p>You've found a compass!</p> <<set $hasCompass = true>> <div> <<if $hasMap>> You've got a <strong class="positive">map</strong>. <<else>> You haven't got a <strong class="negative">map</strong>. <</if>> </div> <div> <<if $hasCompass>> You've got a <strong class="positive">compass</strong>. <<else>> You haven't got a <strong class="negative">compass</strong>. <</if>> </div> <hr> <<if $hasMap && $hasCompass>> <div>You're all set. [[Continue.|6-3]]</div> <<else>> <div>You need to get a <strong>map</strong> and a <strong>compass</strong> first to proceed.</div> <<if !$hasMap>> <div>Look for the [[map|6-1][$hasMap = true]].</div> <</if>> <<if !$hasCompass>> <div>Look for the [[compass|6-2][$hasCompass = true]].</div> <</if>> <</if>>

<p class="positive">Success!</p>

<div class="center"><strong class="main">Math.min()</strong></div> <div>The Math.min() function returns the smallest number.</div> <<set _score1 = 50>> <<set _score2 = 6>> <<set _score3 = 751>> <<set _lowestScore = Math.min(_score1, _score2, _score3)>> <div> <<codeTw>>set <<tempVarSigil>>score1 = _score1<</codeTw>> </div> <div> <<codeTw>>set <<tempVarSigil>>score2 = _score2<</codeTw>> </div> <div> <<codeTw>>set <<tempVarSigil>>score3 = _score3<</codeTw>> </div> <div> <<codeTw>>set <<tempVarSigil>>lowestScore = Math.min(<<tempVarSigil>>score1, <<tempVarSigil>>score2, <<tempVarSigil>>score3)<</codeTw>> </div> <div> The lowest score is: <<= $code('_lowestScore')>>. </div> <div>The lowest score is: _lowestScore.</div> <hr> <div class="center"><strong class="main">Math.max()</strong></div> <div>The Math.max() function returns the largest number.</div> <<set _score1 = 50>> <<set _score2 = 6>> <<set _score3 = 751>> <<set _highestScore = Math.max(_score1, _score2, _score3)>> <div> <<codeTw>>set <<tempVarSigil>>score1 = _score1<</codeTw>> </div> <div> <<codeTw>>set <<tempVarSigil>>score2 = _score2<</codeTw>> </div> <div> <<codeTw>>set <<tempVarSigil>>score3 = _score3<</codeTw>> </div> <div> <<codeTw>>set <<tempVarSigil>>highestScore = Math.max(<<tempVarSigil>>score1, <<tempVarSigil>>score2, <<tempVarSigil>>score3)<</codeTw>> </div> <div> The highest score is: <<= $code('_highestScore')>>. </div> <div>The highest score is: _highestScore.</div> <hr> <div class="center"><strong class="main">Math.round()</strong></div> <div>The Math.round() function rounds a number to the nearest integer.</div> <<set _score = 50.51>> <<set _roundedScore = Math.round(_score)>> <div> <<codeTw>>set <<tempVarSigil>>score = _score<</codeTw>> </div> <div> <<codeTw>>set <<tempVarSigil>>roundedScore = Math.round(<<tempVarSigil>>score)<</codeTw>> </div> <div> The rounded score is: <<= $code('_roundedScore')>>. </div> <div>The rounded score is: _roundedScore.</div> <br> <<set _score = 50.49>> <<set _roundedScore = Math.round(_score)>> <div> <<codeTw>>set <<tempVarSigil>>score = _score<</codeTw>> </div> <div> <<codeTw>>set <<tempVarSigil>>roundedScore = Math.round(<<tempVarSigil>>score)<</codeTw>> </div> <div> The rounded score is: <<= $code('_roundedScore')>>. </div> <div>The rounded score is: _roundedScore.</div> <hr> <div class="center"><strong class="main">Math.clamp()</strong></div> <div>The Math.clamp() function ensures a number falls within a specified range.</div> <<set _score1 = 4>> <<set _score2 = 7>> <<set _score3 = Math.clamp(_score1 + _score2, 0, 10)>> <div> <<codeTw>>set <<tempVarSigil>>score1 = _score1<</codeTw>> </div> <div> <<codeTw>>set <<tempVarSigil>>score2 = _score2<</codeTw>> </div> <div> <<codeTw>>set <<tempVarSigil>>score3 = Math.clamp(<<tempVarSigil>>score1 + <<tempVarSigil>>score2, 0, 10)<</codeTw>> </div> <div> The clamped score is: <<= $code('_score3')>>. </div> <div>The clamped score is: _score3.</div> <br> <<set _score1 = 4>> <<set _score2 = -5>> <<set _score3 = Math.clamp(_score1 + _score2, 0, 10)>> <div> <<codeTw>>set <<tempVarSigil>>score1 = _score1<</codeTw>> </div> <div> <<codeTw>>set <<tempVarSigil>>score2 = _score2<</codeTw>> </div> <div> <<codeTw>>set <<tempVarSigil>>score3 = Math.clamp(<<tempVarSigil>>score1 + <<tempVarSigil>>score2, 0, 10)<</codeTw>> </div> <div> The clamped score is: <<= $code('_score3')>>. </div> <div>The clamped score is: _score3.</div>

<div class="center"><strong class="main upper-case"><u>Widgets</u></strong> <<= $phonemic('ˈwɪdʒɪts')>></div> <div><<= $code('<<set $money = 100>>')>></div> <div><<= $code('<<set $currency = "$">>')>></div> <div><<= $code('<div>Money: <<= $currency + $money>></div>')>></div> <<set $money = 100>> <<set $currency = "$">> <div>Money: <<= $currency + $money>></div> <hr> <div><<= $code('<<displayMoney 15>>')>></div> <<displayMoney 15>> <br> <div><<= $code('<<displayMoney -27>>')>></div> <<displayMoney -27>> <br> <div><<= $code('<<displayMoney -500>>')>></div> <<displayMoney -500>> <br> <div><<= $code('<<displayMoney -1>>')>></div> <<displayMoney -1>>

<<widget "displayMoney">>  <<set _valueChange = _args[0]>>  <<if $money && _valueChange != 0>>  <<set _origMoney = $money>>  <<set $money = Math.max($money + _valueChange, 0)>>  <<set _actualChange = $money - _origMoney>>  <<if _actualChange != 0>>  <<set _cssClass = _actualChange > 0 ? "positive" : "negative">>  <div> Money:  <strong @class="_cssClass">  <<if _actualChange > 0>> <<set _actualChange = "+" + _actualChange>> <</if>> <<= _actualChange>>  </strong>  (Currently: <strong><<= $currency + $money>></strong>) </div> <</if>> <</if>> <</widget>>