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">
<head>
<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>
</head>
<body class="once-upon-a-huh">
<main>
<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"/>
</div>
</div>
</div>
</div>
</section>
<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>
<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"/>
</div>
</div>
</div>
</section>
<section class="options-1 hide">
<div class="container">
<div class="row">
<div class="col-2">
<div class="spinner-grow" role="status"></div>
</div>
<div class="col-10">
<p>
<!-- <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>
</p>
</div>
<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"/>
</div>
</div>
</div>
</section>
<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>
<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"/>
</div>
</div>
</div>
</section>
</main>
<!-- Bootstrap -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" 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>
</body>
</html>
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.