Escape the Bathroom: ESOL Preposition Practice by IFforClassroom

Practice English prepositions with this escape-the-room game. Remake it in Squiffy with the following code:

@title Escape the Bathroom

@start 1

[[1]]:
window.myFunction = function() {
var prepthing = document.getElementById("prepthing").value;
var prepthing = prepthing.toLowerCase();
var prep = prepthing.split(" ")[0];
var the = prepthing.split(" ")[1];
var thing = prepthing.split(" ")[2];
document.getElementById("prep").innerHTML = prep;
document.getElementById("the").innerHTML = the;
document.getElementById("thing").innerHTML = thing;
squiffy.set("prep", prep);
squiffy.set("the", the);
squiffy.set("thing", thing);
if (get("end")){squiffy.story.go("dead");}
else {squiffy.story.go("1");}
};

@set style=<meta name="viewport" content="width=device-width, initial-scale=1.0"><div style="background-color:black; color:white; font-family:Verdana; border:5px outset maroon; padding:20px; max-width:auto; max-height:auto;">
@set K=<span style="text-decoration:underline; text-decoration-color:black; color:green;">

@clear
<meta id="prep"></meta> <meta id="the"></meta> <meta id="thing"></meta>

<!---------Easy way to create styles, if you don't like CSS--------->


{style}<center><img src="https://cdn.stocksnap.io/img-thumbs/960w/antique-bathroom_NLS7MTPBNY.jpg" alt="bathroom" style="width:50%"></center>

<p><!---------The game begins here.--------->
You are locked in the bathroom. You want to get out. There's a toilet, a tub, {if cake:and a door.}{else:a door, and a cake.} {if cake:You have a cake.} {if gloves:You have gloves on your hands.} {if key:Now you have a key.} {if not started:<em>Try to look at, in, on, and under things.</em>}</p>
<blockquote>
You can look <input id="prepthing" onchange="myFunction()" name="prepthing" placeholder="{if started:{prep} {the} {if thing: }{else:{thing}}}{else:under the tub}" style="text-transform:lowercase" autofocus> {if end:[[{K}Do it!]](dead)}{else:<strong>[[{K}Do it!]](1, started)</strong>}

</blockquote>
<p><!---------Resolving "the"--------->
{if thing:{@thing=@the}{@the=the}}
{if started:<em> You look {prep} {the} {if thing: }{else:{thing}}.</em>}</p>
<p><!---------How Squiffy can parse commands--------->
{if thing=toilet:{if prep=in:There's poop and a key in the toilet. {if gloves:You put on the gloves and take the key.{@key}}}{if prep<>in:Nothing is {if prep=at:next to}{else:{prep}} the toilet.}}</p>
{if thing=tub:{if prep=under:Nothing is under the tub.}{else:There's a box in the tub.}}

{if thing=door:{if not key:{if prep=under:Someone is walking in the next room.}} {if key:You open the door. There's a crazy woman. She points a gun at you{@end}.}{else:The door is locked.} {if key:{if cake:You quickly throw the cake at the crazy woman. Some gets in her mouth. She closes her eyes and falls down. <br><center><strong>You win!</strong></center>}}}

{if thing=cake: You can't [[{K}have]](1, cake) your cake and [[{K}eat]](eat the cake) it, too.}

{if thing=key:{if gloves:You put on the gloves and take the key.{@key}}{else:Haha! You touched poop! But You can't take the key. It's too yucky.}}

{if thing=box:{if prep=in:You can't open the small box. {if key:That key is not for this box.}{else:The small box is locked.}}{if prep=at:It's a small black box.}{if prep=under:There are gloves under the box.{@gloves}}{if prep=on:There's nothing on the box.}{if prep=by:There is nothing next to the box.}}

{if thing=bathroom:As I said, there's a toilet, a tub, a door, and a cake.}

{if thing=gloves:You put on the gloves.{@gloves}}

{if thing=poop:Yuck! Don't touch poop!}


[Do it!]:
squiffy.story.go("1")
@clear
[[eat the cake]]:
@clear
{style}You eat the cake. You feel sleepy. You close your eyes.

<center><strong>You died!</strong></center>
[[have the cake]]:
<p>{@cake}
You pick up the cake.</p>
[[dead]]:
@clear
{style}She shoots you.

<center><strong>You died!</strong></center>