<body>
<img id="LOGO" alt=LOGO src="LOGO.png"/>
<div id="textContainer">
This is a story for children. Choose your answers in each step to create your own story!
{
[[<img alt=START src="START.png"/> ->BEGIN]]
}
</div>
</body>:: StoryTitle
Images in Harlowe
:: UserStylesheet[stylesheet]
.base64image {
width: 128px;
height: 128px;
/* Base64 image truncated for example */
/* See Twee file for full version. */
background-image: url('data:image/png;base64...');
}
:: Start
This is an image element:
{
<div class="imagecontainer">
[[<img alt=left src="media/arrow-left.png" -> left passage />]]
[[<img alt=right src="media/arrow-right.png" -> right passage/>]]
</div>
}
This is a base-64-encoded CSS image background:
<div class="base64image"></div><div id="textContainer">
The was once a tiny creature living with her parents.
The character's name was:
{
<div class="imageContainer">
[[<img alt=piepoo src="piepoo.png"/> ->setpiepoo]]
[[<img alt=agatha src="agatha.png"/> ->setagatha]]
</div>
}
</div>(set: $name to "Piepoo")
(go-to: "Age")<div id="textContainer">
Her name was
<h1>$name</h1>
and she was:
{
<div class="imageContainer">
[[<img alt=three src="three.png"/> -> agethree ]]
[[<img alt=four src="four.png"/> -> agefour]]
</div>
}
</div>(set: $age to "three")
(go-to: "PersonSummary")(set: $age to "four")
(go-to: "PersonSummary")<div id="textContainer">
Her name was $name
and she was $age years old!
She was a happy little creature,
that looked like that she has
{
<div class="imageContainer">
[[<img alt=whiteears src="whiteears.png"/> -> whiteears ]]
[[<img alt=visual2 src="visual2.png"/> -> visual2]]
</div>
}
</div>(set: $visual1 to "white ears")
(go-to: "SecondVisuals")(set: $visual1 to "visual2")
(go-to: "SecondVisuals")<div id="textContainer">
Her name was $name
and she was $age years old!
She was a happy little creature,
that looked like that she has
$visual1 and
{
<div class="imageContainer">
[[<img alt=blue toes src="bluetoes.png"/> -> bluetoes ]]
[[<img alt=visual4 src="visual4.png"/> -> visual4]]
</div>
}
</div>(set: $visual2 to "blue toes")
(go-to: "FinalizeCharacter")(set: $visual2 to "visual4")
(go-to: "FinalizeCharacter")<div id="textContainer">
Her name was $name
and she was $age years old!
She was a happy little creature,
that looked like that she has
$visual1 and $visual2!
What an ''adorable'' creature!
[[CONTINUE]]
</div><div id="textContainer">
$name was preparing for a great day,
as their family is going to go to a familiar place
for a FEAST!
[[CONTINUE->activity1]]
</div><div id="textContainer">
During the morning of the Feast,
$name was spending time playing in:
{
<div class="imageContainer">
[[<img alt=toilet src="toilet.png"/> -> toilet ]]
[[<img alt=livingroom src="livingroom.png"/> -> livingroom]]
</div>
}
</div>(set: $activity1location to "toilet")
(go-to: "activity1action")(set: $activity1location to "activity1location2")
(go-to: "activity1action")<div id="textContainer">
$name was playing in $activity1location as:
{
<div class="imageContainer">
[[<img alt=somethingspilled src="somethingspilled.png"/> -> somethingspilled ]]
[[<img alt=robotmess src="robotmess.png"/> -> robotmess]]
</div>
}
</div>(set: $name to "Agatha")
(go-to: "Age")(set: $activity1action to "robot")
(go-to: "activity1summary")(set: $activity1location to "living room")
(go-to: "activity1action")(set: $activity1action to "something got spilled all over the place")
(go-to: "activity1summary")(set: $activity1action to "a robot that made a mess")
(go-to: "activity1summary")<div id="textContainer">
$name was playing in $activity1location as $activity1action.
Oh noes! What a mess!
[[CONTINUE->cleaning]]
</div><div id="textContainer">
$name was all wet. What did she had to do next?
{
<div class="imageContainer">
[[<img alt=shower src="shower.png"/> -> shower ]]
[[<img alt=bubblebath src="bubblebath.png"/> -> bubblebath]]
</div>
}
</div>(set: $save to "shower")
(go-to: "savesummary")(set: $save to "bubblebath")
(go-to: "savesummary")<div id="textContainer">
$name took a $save and saved the day!
[[CONTINUE->timetoleave]]
</div><div id="textContainer">
After the $save it was time to leave for the FEAST!
Which location do you think
they will go to have the feast?
{
<div class="imageContainer">
[[<img alt=grans src="grans.png"/> ->grans]]
[[<img alt=friendfamily src="friendfamily.png"/> ->friendfamily]]
</div>
}
</div>(set: $feastlocation to "friend's place")
(go-to: "startjourney")<div id="textContainer">
They were leaving to $feastlocation
and can you guess who else was going to be there?
(if: $name is "Piepoo") [(set: $otherfriend to "Agatha")<h1>Agatha!</h1>]
(else:) [(set: $otherfriend to "Piepoo")<h1>Piepoo!</h1>]
$otherfriend is a good friend of $name.
[[CONTINUE->onwards]]
</div><div id="textContainer">
Once $name and the family got to the $feastlocation,
$name saw $otherfriend there.
The feast was about to start!
$name was feeling
{
<div class="imageContainer">
[[<img alt=excited src="excited.png"/> ->setexcited]]
[[<img alt=happy src="happy.png"/> ->sethappy]]
</div>
}
</div>(set: $mood to "excited")
(go-to: "startfeast")(set: $mood to "happy")
(go-to: "startfeast")(set: $feastlocation to "friend's place")
(go-to: "startjourney")(set: $feastlocation to "grandpa's and grandma's place")
(go-to: "startjourney")<div id="textContainer">
$name was $mood!
HOORAY!
She saw all kind of delicious foods on the table.
$name decided to taste first
{
<div class="imageContainer">
[[<img alt=cake src="cake.png"/> ->setcake]]
[[<img alt=lasagna src="lasagna.png"/> ->setlasagna]]
</div>
}
</div>(set: $firstfood to "cake")
(set: $secondfood to "lasagna")
(go-to: "dessert")(set: $firstfood to "lasagna")
(set: $secondfood to "cake")
(go-to: "dessert")<div id="textContainer">
$name picked to eat $firstfood.
It was DELICIOUS!
After the first meal, he tasted $secondfood,
and it tasted even better!
YUMMY!
[[CONTINUE->starttogohome]]
</div><div id="textContainer">
$name's stomach was all full,
and she had enjoyed the evening with $otherfriend
at the $feastlocation.
It was time to go home!
[[BYE ALL!->gettohome]]
</div><div id="textContainer">
When $name got to home, she was happy.
She had had a great day with $otherfriend
at $feastlocation.
$name had learned today to
{
<div class="imageContainer">
[[<img alt=jump src="jump.png"/> ->setjump]]
[[<img alt=grateful src="grateful.png"/> ->setgrateful]]
</div>
}
</div>(set: $learned to "jump very high")
(go-to: "finish")(set: $learned to "be grateful of friends and good food")
(go-to: "finish")<div id="textContainer">
$name had learned today to $learned!
[[CONTINUE->gosleep]]
</div><div id="textContainer">
$name went to her evening routine,
washing hand and teeth all clean.
Then it was finally time
to go to sleep.
Good night, sleep tight!
[[FIN->restart]]
</div><div id="textContainer">
Credits:
Lead Design: Joonas Muhonen
Art: Marcel Calbusch
Additional Design: Alvaro Nabuco
Toddler Designer: Peppi
Toddler Designer: Agatha
Toddler Designers Peppi (finnish) and Agatha (brazilian) were working on
figuring out the decisions for the game.
If you want to play again, press this button below.
[[RESTART->STARTGAME]]
</div>