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

Standard

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: https://jxxycke.github.io

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!)

Concept

<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.

Story

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.

Music

Song: Daystar – Fluffy / https://youtu.be/ZMl1bf9bj2c

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

Standard

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:

https://codepen.io/GhostRider/pen/FctLB?css-preprocessor=scss

That’s all!

Once Upon A Huh? 2 | Update #4

Standard

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

Standard

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

IT HAS BEEN TIRING I GOTTA SAY

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.

 

Adios!

Mood right now:

Exploding Disney Princesses - Album on Imgur

 

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

Standard

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.

Reference:

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.

Reference:

https://www.w3schools.com/howto/howto_css_bg_gradient_scroll.asp

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

Standard

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 / https://youtu.be/ZMl1bf9bj2c

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.

Project 1 Final Iteration | Once Upon A Huh?

Standard

Once Upon A Huh?

A Generative Fairy Tale Parody

Me as a Disney Princess - FunSubstance | Funny disney memes, Disney jokes, Disney funny

For presentation:

https://focused-archimedes-c3d8a0.netlify.app/

(P.S. You can use your mobile phone or tablet to look at it too! :))

(Link is only available for 24 hours starting 3am on 24/9/20. I used https://app.netlify.com/drop for this temporary web hosting.)

Just to recap, my project is about making a generative storytelling piece which gives the user the illusion of autonomy over controlling the storyline. However, it turns out to be all a lie, as the seemingly well selected options in the progressive storyline actually results in random answers selected for the user. Each refresh of the story will provide a different answer even if the user chooses the same options, as the array is mixed up like a good ol’ rojak.

How the Story goes:

This is the starting point of the storyline, where there is a supposedly grand font usually displayed in Fairy Tales. But the parody is in how there are random sketches mocking the grandeur of something as old and gold as a fairy tale. Click the feather to proceed.

The first part of the story appears. Click on the feather to proceed.

Now, we have 2 options you can choose from! Click on one of the options, and then proceed. (Ideally, I would make the feather appear only after the option was chosen but… owell. No time.)

When one of the options are selected, the chosen answer will be revealed (mind that this answer is actually randomly selected from a pile of other options), and the options will disappear. Click on the feather to continue the story.

The next part of the story will appear, and you click on the feather to proceed. This will carry on until the end of the story. The last feather will lead the reader back to the first page of the story site.

For examples of how the code works, refer to the previous post. There are only few edits on aesthetics and additions on the narratives, so this should be sufficient in understanding how my project works! For the ideation, refer here. For the first draft, refer here.

There are actually many things I want to improve on this iteration, and would have gone on with it if there was enough time. Unfortunately, 2 weeks was not really enough… but I’m going to suck my thumb and deal with it. I would like to improve on the interactivity of the story in terms of adding things such as bullet points and buttons to play with, and also fix my alignment issues. It would be nice if I could place the story on a temporary online platform so that more people can play with the story. As I am planning to work on the same project for my final project, I am aiming to broaden the scope and create a longer and better narrative for my Fairy Tale parody.

P.S. Music used has been credited accordingly! But I will want to use a more public domain-ish music for my final work along with greensock, codepen and boostrap interactive elements.

 

Comments:

Include better cues to indicate a pressed button. (grey out, etc.)

Have more wholesome narrative where decisions are important.

Have better rationale: What’s the purpose for subverting expectations? Why do you want to do this? What’s the core message? How do you justify why the decisions made are not what the audience expects?