Final Update for Final Project: Once Upon a Huh? 2 -Finished!


AT LONG LAST, my final project is finished!

Presenting to you my Interactive Storytelling x Generative Art Project –

Once Upon a Huh? 2

link to playable version:

This link is also mobile friendly, but it is desktop optimized! (To activate shake hover effects for mobile, simply press on the elements in the story and hold for a bit; the css shake effects etc will activate!)


<Once Upon a Huh? 2> is a reprise of the first version I did during my Midterm project, <Once Upon a Huh?>. It is a parody of a Fairy Tale story fashioned around the idea of subverting the readers’ expectations. On first glance, it seems like a normal interactive storytelling piece, where there is an element of choose-your-own-adventure. As the reader, you get to make your own choices as to how the story goes, and finally decide how the ending would be like… supposedly.

However, if the reader reads on or repeat the story, they would realize that the choices they made actually makes little impact how the ending would be like. The choices are quite vague in what endings they might incur, and what the reader expects from the options they chose after thinking seriously and cautiously about may serve to disappoint them instead.

The idea of creating a project which plays around with the feelings of my readers in a storytelling context is to enhance the effect of Surprise, which is the theme given for this project.

Surprise is all about the unexpected qualities that does not fit in the expected structure, but with a bit more positivity such as wonder and astonishment.

When the reader is constantly thrown with unexpected surprises, one after another, it messes with their decision-making process and when they start to doubt their own choices, it leaves the reader no choice but to keep getting surprised without being able to control the story. To add on to this experience, I mess with the way the options are portrayed so that they might end up clicking the wrong option. I also ensured that there are 3 options and not 2 in each decision-making segment, to give the illusion that there is a “default”; where there is a fake basis of comparison to affect decision-making.

The whole idea of decision-making in a choose-your-own-adventure story is to make the readers feel that they are empowered with the responsibility to create a good story. There is now more stake at hand. A bad and nonsensical story would be their fault. Readers will be curious about how the story turns out based on their own autonomy.

However, when we refer back to surprise, the reason why it works is because there is no leader. There is no fixed direction into what people might define as correct, which will eventually plunge everything into chaos because there is no synchrony in thought process since everyone thinks differently. Hence, subverting expectations in my story means that it is removing the leader from being able to create the story based on their story. In this case, the leader is the reader. I do this by removing the autonomy of making decisions.

All in all, my conceptual aim is to tease the audience. I want to deceive them playfully, subverting the conventional approaches of designing and consuming a narrative, not just an interactive one. I want to tell them that in generative art it is useless to think that everything will simply “work your way”. The traditional narrative is now obsolete. You have to grow with the narrative to finish the story with a satisfied smile on your face. When you are constantly bombarded with what you do not expect, it makes life less boring because life is no longer mundane.

I do not intend to publish the first version of this interactive storytelling experience. I am going to leave the readers wondering where on earth is part 1, just to tease them further.


My interactive story this time around is a parody of Cinderella. Previously, it was the Little Red Riding Hood for the first edition.

<Once Upon a Huh? 2> consists of 6 chapters as follows:

The story follows the plot of Cinderella being enslaved by her family, just like the original story. However, she is more rebellious in this version, where she literally fights her way to the Ball, not because she wants to meet Prince Charming, but because she wants to meet the Multimillionaire Investment Tycoon, Mr. Smith, so that she can get a job and finally leave her disaster of a stepfamily.

Progress Report

To view previous updates, click on the following links:


Interactive Walkthrough

This story is done using HTML, CSS and JQuery. There are decision-making segments throughout the story, which will reveal the next part of the story when an option is chosen. For all the choices, there are three options each.

Chapter 0 is just an introduction into how the story is like.

Chapter 1 starts with a normal story, and one decision making segment. The decision making segment has only one result to each option chosen. This is because I want the reader to expect that this is an ordinary interactive storytelling site with the most basic decision-making tools.

Chapter 2 and 3 breaks further into the story, this time with three alternate narratives for each option chosen. The alternatives are randomized by the code and one plot line will be picked out of the three in the array, just like a lucky draw. The idea of this arrangement is to tease the reader if they revisit the story- at the start, the story seems just like the same story they have been reading, but when they get to the second segment, it is not the same story they read. Chapter 2 makes use of images as the options, while Chapter 3 makes use of text.

Chapter 4 is the same as Chapter 2 and 3, except that there are only 2 alternate narratives for each option chosen. This is because the main interactive point of this segment of the narrative is the Timer. The reader has only 20 seconds to make a decision about the options. If they do not pick an option within the 20 seconds, a Fourth option will be triggered instead.

Chapter 5, the last chapter, is the final tease for the reader. There is only one narrative for each option, just like at the start. Over here, the reader gets to define the ending of the story like they originally expected, even after the roller coaster of confusion in the front chapters. This is ironically the only true ending they can “decide”, and it is mockingly sad because it is a very significant decision to make.

Interactives used and Why:

  • CSS Shake
    • This was used for the buttons, titles and options. This is to make the text less static.


  • Timer
    • This was used for the options in Chapter 4: The Day.


  • Scroll back to Top
    • Since the story is very long, this is used to bump the story back to the top, so that the reader can reread the story again to see if there is anything they left out/ observe the background.


  • Animated Buttons on Hover
    • This is for the “Continue” buttons. The animated effect is more eye-catching for the reason to know that they are supposed to click on it!


  • Gradient Background on Scroll
    • This is for the background colour, where the colour is gradient from pastel pink to grey. The reason why I chose this colour scheme is because I want to strengthen the argument behind subverting expectations. The story is supposed to be ordinary, fluffy and innocent, just like a 5 year-old little girl’s pastel pink bedroom with unicorns and clouds. Hence, the story starts off with pastel pink.
    • However, the story gets more weird, inconsistent, and unexpected as you read it. This is especially so since subtle hints of real life social issues are being dropped in the story, such as social ladder, corporate corruption, violence, and lust. This brings the story to a Grey area, which will leave the reader wondering at the end if this is supposed to be a story meant for kids. Hence, the background of the story transits to grey. If the reader takes the time to scroll up and down again, the gradient will be strikingly obvious.


Song: Daystar – Fluffy /

Copyright: 샛별 Daystar

The reason why I chose this music is similar to why I chose the pastel pink colour scheme for the background of the story. I want to insinuate that the story is peaceful, fluffy and innocent, so that readers will assume that it is a happy story all the way. There will be a jarring difference between the actual mood of the story and the mood being portrayed through the music as the narrative becomes more unexpected and less kid-friendly. I hope that this difference, sort of “gap-moe” will enhance the surprise element of my project.

Download Gif Lion King Throw | PNG & GIF BASE

So this is it! This is my project. I cannot publish the entire code here and the other progress photos because this post is already way too long, so do visit my other updates through the hyperlinks in this post! Thank you so much for sticking with me!

I have lost count which Update this is | Once Upon a Huh? 2


It is Week 12 and aaaahhh

I don’t really have a lot of things to update this week! Basically what I did was to tidy and clean up the code of my HTML, and adding the narrative inside as previously organized. I also tried to tidy the aesthetics up, such as for the headers to make it more visually neat because it is a lengthy piece after all.

For this week, the final week, I will be drawing the art for the pictures I will be using for my options in Chapter 2: The Ball, referring to the dress designs Cinderella has to pick, and seeing if I can add any additional widget interactions to spice the texts up a little, such as CSS Shake. I will also be converting the final piece into a temporary URL so that everyone can read the story on their own time and target.

CSS Shake:

That’s all!

Once Upon A Huh? 2 | Update #4


Disney Princesses Sloth GIF - DisneyPrincesses Sloth Princess - Discover &  Share GIFs

I feel like a sloth because I did not manage to accomplish super a lot. But I really did try….

So just want to update for this week!

I tried realllllly hard to fix the timer issue I had on my code… but I still could not. I think I did make a little bit of progress, which is finally making the second timer appear at where it is supposed to be! The problem came in when the timer does not move even though I have referenced so much to the code Prof. provided me with and also by changing so many elements on my javascript and html files that I am about to go mad. In the end, I decided to go with just one time-based element in my project.

I finished my story and the options that follows the narrative, though! 😀 I am happy. Week 11/12 will be tidying up the narrative and adding the narrative to the code to finish the project. I will also have to draw the images used in the project.

As my project is meant to be a Demo as to what an interactive choose-your-own-adventure story can be like, and also due to very tight time constraints, I decided to cut down on what I have initially proposed while retaining the concept of my work.

Chapter Breakdown:

Chapter 0: Prologue

Normal Storyline; it is just an introduction.

Chapter 1: The Ball

There is a choose-your-option section here, but there is only 1 option for each choice. This is to subvert expectations, where I make it seem like there is only one choice per option, which will be different later on.

Chapter 2: The Dress

Over here, there is a choose-your-option section too, but the selection is a picture for each option. Each picture will lead to 3 possible narratives that can continue from the chosen option. This is different from the first one, where the reader only has 1 narrative to derive from each option.

Chapter 3: The Rebellion

Here, there is a choose-your-option section with 3 narratives tied to each option. However, the options are text, not an image.

Chapter 4: The Day

Over here, there is choose-your-option section but with a timer. If the reader does not decide within 20 seconds, a fourth option will be triggered. Over here, the point is to express how there is a timer, so I only put 2 possible narratives for each option.

Chapter 5: Epilogue

Finally, the last part! Over here, I decided to tease the reader. Because they don’t really get to decide how the narrative flows in the middle sections of the story, I am giving the reader a final chance to truly “decide” the ending of the story based on their own choice of judgment. However, it is ironic and a shame, because the last decision they truly have control over, is not really very significant to the ending of the story… only entertaining.


That’s all for this week! I will not be posting the narrative so teehee.

Once Upon A Huh? 2 | Update #3


Fairy Godmother Cinderella GIF - FairyGodmother Cinderella Magic - Discover  & Share GIFs


I didn’t do a lot

But I have been struggling quite a bit with the coding even though I know it is supposed to be easier than whatever I have currently done but I guess I just ain’t smart enough yet-

But here is Update #3 nevertheless! Or was it #2?

For this week, I made the following changes to my original Midterm project code:

  1. Change the background from plain white to Gradient Pastel Pink to Grey, which happens upon scroll.
  2. Change the music to the fluffy music I have intended to use.
  3. Amended some of the alignment for the text.
  4. Change Feather icon to disappear after clicking instead of remaining, since I changed the story to a full page scroll rather than a click-to-advance-to-next-section-while-hiding-previous-section method.
  5. Bolded the options, to make it more obvious that you are supposed to click on it.
  6. Make a timer appear upon revelation of the options for the urgent choices, failure of which to do so will advance a fourth option instead.


However, I faced quite a few issues that I have no idea how to fix…

  1. I made my timer and options fade away after an option is chosen, or after the fourth option appears. However, I realized this made the rest of the options and timers disappear completely, probably because of the id or class I have called in my code. Still not sure how to resolve this though… I don’t want to have to make a separate javascript timer for each timer I use because I’m pretty sure there’s an easier way to do it…
  2. For the gradient scroll, I hope for the grey to happen only at the ending parts but because I don’t know the exact length of my story, I can’t do that. But I am quite happy with the current gradient because when you scroll up, the gradient stays.
  3. I haven’t put in a third option.
  4. I am only 1/3 through my narrative but I think things will be faster once I nail down the coding.
  5. Still having some alignment issues between each interactive element with regards to the spacing. I know it has something to do with the display: none or display: block but it didn’t seem to work but I hope I can fix it soon….

And sooo I will be continuing to work on my project. 🙂 Hopefully I can fix all the coding issues by next week (W11), and then finish the narrative by the following week (W12) and have the finished website by Week 13.



Mood right now:

Exploding Disney Princesses - Album on Imgur


Final Project Progress Update #2 | Once Upon a Huh?


Generative Art Final Project Progress Update #2

Once Upon a Huh?

“In narrative, we take experience and configure it in a conventional and comprehensible form. This is what gives narrative its communicative power; it is what makes narrative a powerful tool of persuasion and, therefore, a potential transformative device for the disempowered.”

– Steven L. Winter

Concept Update:

I was doing my History homework for an unrestricted elective and was reading up on the Scopes Trial before coming across this quote. Of course, in the reading, it was in reference to the controversy of freedom of speech during the time where science and religion was in battle, but I thought that it did strengthen my own conceptual terms for this project.

Previously, my goals for this project was to generate confusion, subvert expectations, and to allow the reader to realize that a narrative can ultimately be useless because we cannot control it. However, I would like to add on to that.

Conceptually, I would like to disable the reader by enabling them. I mentioned this through Lisa’s quote that it is cruel that people don’t get to choose between two immoral choices, but it is more than that. I guess to me, a narrative where people are disempowered to make their own choices, in other words, being powerless in altering the narrative of the story on their own terms, is one that strengthens the narrative. This is because by removing the power to control the plot (even though under the illusion that the readers have full control), it increases the power of narratives as a communicative tool multiplied.

The reader has to understand and flow with a story they did not expect. For that to happen, the narrative has to be strong enough to withstand people’s inability to understand and discern the possible outcomes. I think overall thinking this way for my project will boost its narrative power and hence the strength of the generative art.

Tinkering Update:

Moving on to my work for this week, I have thought about and researched on multiple ways I can enhance my project. They are as follows:

  1. Having a timer; at certain urgent choices, there can be a countdown timer to signify the choice has to be made within that duration. Failure to do so will result in a “Fourth option”. This fourth option will theoretically come in the form of a new instance but I have not explored whether I will be stuck with that.


How to Create an Animated Countdown Timer With HTML, CSS and JavaScript

2. Implanting images as possible results from options.

3. Have my background change from a fluffy, pastel colour to grey by the end of the story to symbolize that my narrative is ultimately one in the grey area since we cannot control whether the results will be positive or negative. Also, because of my change in narrative to a possibly slightly more serious note at the end, it will remind us that fairy tales are not necessarily fairy tales for everyone even if they are to us as an individual. This is elaborated more in point 5.


4. I will be writing the story in First POV to enhance personalisation. At least, that was what I thought, but it wouldn’t sound very Fairy Tale-like anymore. So I’m sticking to third POV.

5. I want to take in the suggestion for me to align my story to real life culture. Hence, I will be using a hybrid story line instead. This means that at the start, the story will be fluffy and funny. However, as the story progresses, it might get darker, and reveal parallels to true societal issues but only subtly. The reader can choose to read the story on surface level and enjoy it as a simple parody fairy tale, or they could think deeper about the issues brought up like a reminder to our dastard society.

6. I will be removing the section fade outs for each story segment to generative a long story instead so that the reader can go back to revisit the previous parts of the story. The story will end up as just one long scroll eventually.

I will be looking through bootstrap, greensocks, w3, codepen, csstricks and other possible outlets for these add-ons.


That is all for my update this week and I’m broke af-

GUESS WHAT JASMINE??????? I STOLE THIS BREAD! HAHAHAHA - Cheezburger - Funny Memes | Funny Pictures

Final Project | Once Upon A Huh? | Update #1


Final Project: Once Upon A Huh?

Just to recap, I created a HTML-based storytelling project where the audience seem to have the autonomy to choose how they want the Fairy Tale to go, but in fact they are actually not in control of the scenarios that happen. In fact, no one can control how the story goes except for the system story embedded in my HTML code. Muahahaah.

Click here to view my Midterm submission.


Food for thought after Midterm Submission:

There should be better cues on how to indicate a pressed button. For e.g. greying out the image, etc.

The narrative could be structured where certain decisions are important to the plot.

Understand my rationale better for nonsense options; what is the purpose for subverting expectations? Why do this? What is the core message? How do you justify why the decisions made are not what the audience expects?

After thinking a lot about these questions and ways to fill up the loopholes that has previously existed in the Midterm project, I am planning to make some changes for the final project.


The changes I will be making are quite a few but the main ones I have figured out are:

  • Instead of having one array of random story parts for two options that will lead to the same narrative, I plan to have one array of random story parts for each option instead. This way, the answers will be more specific to the option that is selected. Each option will then lead to two different narratives. These two narratives will then continue on to the general narrative. I hope that this style of story will give a more personalised feel!
  • If it works, I plan to have three options instead of two options. This is because psychologically, it is harder to decide which is the better option when you do not have one option as the basis for comparison.
  • Based on Prof Dejan’s suggestions on considering the logic behind choosing the background and the music, I will be reconsidering the aesthetic of it.
  • I might be replacing images from the story with certain parts of the text to add more visuals to the story.


I have also done some research about choice decisions and nudges over the recess break.

I looked into Lisa Tessman’s (She’s a professor of philosophy at Binghamton University in New York State) rationale for making decisions. She states the following:

It is not always good to have the opportunity to make a choice. When we must decide to take one action rather than another; we also, ordinarily, become at least partly responsible for what we choose to do. Usually, this is appropriate; it’s what makes us the kinds of creatures who can be expected to abide by moral norms… Giving people a choice might sound like it’s always a good thing to do, but giving a choice between two forms of moral failure is cruel.

To my inference, this responsibility people are forced to take gives them more stake in the story they are tasked to produce. This will hopefully make people curious about how their story will turn out. She proceeds to say:

No one can rightly be blamed for failing to care adequately if it wasn’t possible for them to do so. But they may still take themselves to be required to do the impossible, and then judge themselves to have failed at this task. No one should be forced into this position. Not all situations that present these sorts of choices can be presented—there’s always the possibility of bad luck – but at least we shouldn’t knowingly bring them about.


Other than her discussion, I also looked up other sources of decision-making. There are basically 5 main types of decision making;

  1. Command Decisions, where decisions are made for the self,
  2. Delegated Decisions, where the decisions can be made by anyone, and the choices are inconsequential,
  3. Avoided decisions, where the outcome could be so severe that the choice should not be made,
  4. “No-brainer” decisions where the choice is so obvious that only one is reasonable, and lastly
  5. Collaborative decisions where the decision is made in consultation or agreement of others.

There are also 4 thought mechanisms that I might want to consider when creating my narrative;

  1. Rational
  2. Intuitive
  3. Recognition-based
  4. Combination

These are based off whether the decision made is conscious or unconscious, which I think is fun to play around with. I can provide decisions where people will think is a “no-brainer” to choose but has negative consequences, compared to decisions where it is less favourable but can bring more positive or funny consequences.

There are also choice architectures to consider;

  1. The number of choices presented
  2. The manner in which attributes are described
  3. The presence of a “default”

As previously mentioned, I would like to fool around with my audience. I can make negative options sound positive, and the positive options sound negative. It will be interesting to see which options the audience would rather pick. I will also be expanding my choices to 3 to create more confusion about which is the “better” choice. I think the overall confusion will make people think that their decisions matters a lot because they have to think a lot more about which decision is better for the story to proceed, which is kind of sadistic on my part, I have to admit. Because whatever decision they make in the end is not really important.


So… Nani is Surprise?

Lastly, I thought about the questions in the project brief.

What constitutes surprise? What determines its qualities?

I guess surprise is all about the unexpected qualities that does not fit in the expected structure, but with a bit more positivity such as wonder and astonishment. It is like having an alien in the conventional society. However, being unable to fit is not necessarily a bad thing. It can very well serve as the spice to the bland soup. This is why I plan to have a story that will make people shocked but that they will probably go “ooooomgggg…. HAHAAHHAHA” after that. With regards to its qualities, I guess it is the wow factor that is important. Just like all generative art, there has to be a narrative which promotes entertainment with every step of the way, not just at the end. The attraction of surprise also lies in how the idea is “new”, hence spicing up our reality.

How surprise figures in different contexts such as the arts, everyday life, technology, etc.? How does it figure in your own life & experience?

We see surprise is everywhere in daily life as well as entertainment. When we play games or watch shows, we are eager to look forward to what happens next, expecting it to surprise us in a good way. Since we cannot predict the future, we are also surprised by anything new that happens to us in our daily life. I guess this is why unique works are prized over the mundane, repetitive things that do not bring about good value or meaning. In a way we can also say that the little or big surprises that we experience daily are the little things we look forward to in life. With nothing new and intriguing, we don’t have hope for a more interesting life because we have already experienced everything.


So, why nonsense choices?

Prof. Dejan gave me a few questions as a comment to my midterm project, and I have considered them. He told me that my main point was to tease the audience, and that “It is the deception and the playful subversion of the conventional approaches to designing and consuming interactive narratives.” I agree with his interpretation of my project; I really want to be playful and fool the audience with my project. I think that it is fun. However, I strived to understand what I really wanted and came up with three main reasons why I want to make this project.

  1. I want to subvert expectations. I believe that this would provide me with the element of surprise when the reader realizes that their options do not necessarily give them the answers they expected.
  2. I want to create confusion. With more unpredictability in the storyline, just like real life, it gives the illusion that every decision is more important and must be analysed further because it is not in-your-face. It will surprise you at every corner of the way.
  3. Fun is increased when you don’t know what to expect. It is the idea of how “it never gets old.” Just like playing a game, it is fun when you discover new things in the game. That is the modus operandi of escape rooms and environmental storytelling games, or even horror games such as Outlast and Dark Souls. However, when things get too expected and monotonous, that is when people start to feel that the game is now boring and repetitive and quit. I would like to operate in the opposite mechanism of this repetitiveness.


The New Story Plot?

My general, temporary thoughts for the plot of the final project will not be focused on the little red riding hood anymore. Instead, I have turned to a rebel version of Cinderella where she:

  1. Does not like being demure even in front of her stepfamily
  2. Cusses and throws things around at her nasty stepsisters and could not give two farts
  3. Eventually, with the help of her animal friends, summons all the animals from Fairy Tale lore to thrash the ballroom of the ball dance she was supposedly not invited to- but man she was upset, so very upset.
  4. Makes her poor Fairy Godmother so very confused and upset at what is going on as she desperately tries to keep things under control, screaming “THIS WAS NOT SUPPOSED TO HAPPEN!”
  5. Held prince charming at gun point- and he seemed to like it.

I swear I am not high on sugar drops.


Song: Daystar – Fluffy /

For the music, I plan to use a non-copyright music from Daystar called “Fluffy” because it was simply so light and happy and cheerful and made me feel like everything was going to be okay. The reason for this genre of music is because I want to give the audience the illusion that the story was going to be happy and cheerful and standardized like all fairy tales that end with happily ever after…. And then take them on a roller coaster down nopesville into a story that does not seem to make sense as a sweet cotton candy. For the background, I might put an innocent, pink, and fluffy background that seem like the wallpaper of a 7 year-old girl’s bedroom. This is my way of subverting expectations, kind of like Doki Doki Literature Club I guess? DDLC has everything in pink and dating sim glory until they start committing suicide due to the glitch character. I think that is simply marvellous. Ravishing.


That’s all I have for now.

I grew up thinking I was a Disney Princess turns out I'm this lady meme - AhSeeit


Further comments:

Use timer for “urgent” decisions; not choosing an option will be an option as well that will lead to a default option being chosen for you, or an invisible fourth option to happen. (e.g. clock strikes 12… and then?)

Try comparing with real cultural and social issues in decision making.

Consider gradient background that fades from light blue to grey, because the project is about the grey lines.

Consider music that changes with each section.

Make sure that narrative will be seamless between options. Refer to ELIZA by Joseph Weizenbaum.

Make sure that options retain their meaning behind. E.g. If you do A expecting A to happen but in the end it’s actually B that happens.

Generative Art First Iteration | Progress Report 2 | Once Upon a Huh?


Week 2 has better progress!

I managed to fix up some of the errors I have faced after chugging a whole cup of homemade starbucks coffee.

Errors I managed to fix:

  • Having 2 clickable options that will fade after the person interacting has clicked one of the options. Originally, I planned to have 3 options but due to time constraint, I shall stick to just 2 options, just like Bandersnatch by Black Mirror.

Over here, there are two examples of how the options might appear. The reader just has to click on one of the options.

  • Having the paragraph that is the option selected by the reader to appear below where the options originally was. Turns out that this was just a dumb mistake where I forgot to separate the divisions in my code…

For the first instance, clicking on any one of the options will lead to the selected narrative being displayed, while the options that were provided would disappear. Secretly, the two options actually draw their answers from the same random array so clicking either of the options actually don’t really matter…. you will still end up with a random answer from the rojak of options available behind these options.

For the second instance, it is just like the first instance. The options will eventually disappear leading to the story continuing without options shown. However, in order to prevent the reader from clicking on the options in the wrong order, the displayed format will not be used. Instead, the next options page will be displayed on another page rather than on the same page.

Here is the amended code for the random sentence generator for javascript.

Here is the amended HTML code for the appearance of the options.

Here is the amended javascript code for the appearance of the options.


Overall I am very happy with my progress for this week! This means that I have the less code-tedious things to finish for this week and I will be ready for Week 7.

Things I have left to do:

  • Aesthetics
  • Narration/ Storyline/ Options


Time to cri.

Project 1: Generative Study First Iteration | Once Upon a Huh?


Just to recap, I am making a generative storytelling project via HTML, CSS and JS Coding. The story progresses randomly despite the reader seemingly picking options to progress the story, giving them an illusion of autonomy or fate. This story will be centered around a parody of Fairy Tales.

For week 1, I basically crafted the structure of the HTML code with placeholder images and texts. I did not clean up the aesthetics of the site yet, as the time spent this week was mainly 30% exploring code, 10% writing code, and 60% debugging.

This is the HTML Code I have so far:

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0, shrink-to-fit=no">
<!-- Primary Meta Tags -->
<title>Tusitala Interactive: Somewhere Else, Another You</title>
<meta content="Once Upon a Huh?" name="title">
<meta content="A Choose-Your-Own-Path Fairy Tale" name="description">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<!-- Bootstrap Toggle -->
<link rel="stylesheet" href="assets/bootstrap4-toggle/css/bootstrap4-toggle.css">
<!-- CSS and JS -->
<link rel="stylesheet" href="css/style.css">
<script src="js/randomgenerator.js"></script>
<body class="once-upon-a-huh">
<section class="intro m-0 p-0">
<div class="container" style="min-height: 100vh">
<div class="row align-items-center" style="min-height: 100vh">
<div class="col-12 text-center mx-auto">
<h1> ONCE UPON A <span class="textItalics" style="font-style: italic;">HUH?</span></h1>
<div class="col-12 text-center">
<img id="part-0-end" class="img-fluid hide" alt="" src="assets/images/ornament_feather.png" width="75px" height="75px"/>
<section class="part-1 hide">
<div class="container">
<div class="row">
<div class="col-12">
<p style="padding-left: 10vw; padding-right: 10vw;">Once Upon A Time...</p>
<div class="col-12 text-center">
<img id="part-1-end" class="img-fluid hide" alt="" src="assets/images/ornament_feather.png" width="75px" height="75px"/>
<section class="options-1 hide">
<div class="container">
<div class="row">
<div class="col-2">
<div class="spinner-grow" role="status"></div>
<div class="col-10">
<!-- <a class="clickableText" href="../link2">Option 2</a> -->
<!-- <div id="paragraphDisplay"></div><a class="clickableText"="newPara()">Option 1</a> -->
<div id="paragraphDisplay"></div><a class="clickableText" onclick="newPara()">Choose an apple</a>
<div class="col-12 text-center">
<img id="options-1-end" class="img-fluid hide" alt="" src="assets/images/ornament_feather.png" width="75px" height="75px"/>
<section class="part-2 hide">
<div class="container">
<div class="row">
<div class="col-12">
<p style="padding-left: 10vw; padding-right: 10vw;">The little pig was sleeping.</p>
<div class="col-12 text-center">
<img id="part-2-end" class="img-fluid hide" alt="" src="assets/images/ornament_feather.png" width="75px" height="75px"/>
<!-- Bootstrap -->
<script src=""></script>
<script src="" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<!-- Bootstrap Toggle -->
<script src="assets/bootstrap4-toggle/js/bootstrap4-toggle.min.js"></script>
<!-- Custom JS -->
<script src="js/once-upon-a-huh.js"></script>

I won’t be showing the Javascript and CSS Code because it’s going to flood the whole post. I only realized how long the HTML one is when I posted it but I’m not going to delete it.

Some Screenshots of what I have so far:

This is the first screen. The reader clicks on the feather to proceed to the story.

As of now my story only comprises “Once Upon A Time…” because I am a lousy author with no imagination but this is supposed to consist the first part of the story. You click the feather to proceed to the next part.

This is the next part. You click on the option to reveal the randomly generated next part of the story. Please ignore the wayward bullet point, it’s trying to find its mom.

After clicking on “Choose an apple” you can reveal a random next-part-of-the-story.

Clicking on the “Choose an apple” button again will change the sentence generated to another random one within the array, but this is what I don’t want.

I don’t know how to debug it or even change the position of the text appearing. Still working on it. My code doesn’t like me.

After clicking on the feather on the previous page, you will be led to the next part of the story. It is the same as before.

This is how the .js array works for the random generator but I am still working on it.

The things I managed to get working:

  • Creating a single HTML document where sections are revealed based on the reader’s interaction with buttons.
  • Inserting a random sentence generator that changes based on the array of random variables from javascript when a “button” is clicked.

The things I cry about:

  • Tidying up the aesthetics.
  • Having 3 clickable options that will disappear after one is selected, revealing the next part of the story chosen.
  • Making the paragraph appear from only 1 option with the other options being deactivated.
  • Coming up with the possible narrations/ stories.

As you can see I have more things I failed at/ haven’t accomplished compared to what I have managed to accomplish. I am ready to go home to cry now.

I am still crying for my lack of skills because I can’t seem to fix my issues but if I cannot solve the issue where I have 3 clickable options that will disappear after the new part of the story is revealed and also deactivating the other options, I will stick to making the option buttons disappear after the randomly generated story is revealed = so there is only one options but with a random array of options that could be generated.

With this project due in Week 7 (Sep 24), this means that I have about 2 more weeks to finish everything. It is now Week 5, and Week 6 will be used to complete the narratives I want to use and to fix the code itself. Week 7 will be used to finish the coding for all the narratives I have in mind, and to tidy up the aesthetics.

Exploratory Generative Study | Once Upon A Huh?


Once Upon A Huh?

Chosen Medium:

Text, HTML + CSS + JS coding (Web Project)



Open-sourced parody Fairy Tale storytelling through random options chosen by the reader. The story will be click-to-advance, but it is solely based on text on a web browser, the next section of the story to be revealed only when the reader chooses their option. Each option will lead to a different segment of the story.


The reader will determine the outcome of the story based on the random and vague choices made during the process of the storytelling. (hence being sort of choose-your-own-adventure),



Snow White decided to accept the old lady’s offer to buy an apple. She has to choose an apple.

  • The red and ripe one
  • The one that has a slight yellow tinge to it
  • The one with a worm crawling out of it

[Reader selects option 3]

Just when Snow White picks the apple with the worm crawling out of it up, there was a sudden shriek—unexpectedly from the worm who seemed to have a personality.

Snow White jumped in shock, fumbling with the apple. She frowned at the old lady.

“What did you do that for!” She scowled, her dark brows furrowing in displeasure. “I bought an apple from you and all you do is scream at me? Here you can take it back,” she chucked the apple at the old lady’s face and hurried to push the lady out of the doorway of the little cottage she shared with the seven dwarves.

The old lady protested in muffled gibberish, hoping she could explain that the scream certainly did not come from her, but Snow White was not having any of it.

“Take your stupid apples and go away, I don’t want to see your face ever again,” she snapped, slamming the door shut on the confused old lady.


Reference/ Inspiration:

Doki Doki Literature Club

Doki Doki Literature Club Review - Gamereactor

Yuri's death scene (ddlc) doki doki literature club - YouTube

Your choices don’t matter; they will give you an unexpected surprise anyway.

Somewhere Else, Another You

Tusitala Interactive: Somewhere Else, Another You - TusitalaTusitala

Tusitala Interactive: Somewhere Else, Another You - TusitalaTusitala

Make your own decisions but the story is still not within your control anyway.


How is it a Generative Art:

The reader decides the course of the story based on total randomness with no hint about what could possibly happen next. The next part of the story is hence completely random, and will possibly surprise the reader. Choosing a decision in a story might give you the illusion that you are controlling your own fate and deciding how the narrative goes, but in the end you realize that you are still left in the unknown, with lots of unanswered questions and unfulfilled expectations. While it is calculated which decisions will lead to which answers, but as the participant you will never know which decisions will lead to which answers.