Project Reflection

For the Javascript of this project I decided to create a unique function for each individual decision that could be made. In hindsight, I could’ve done it in a more efficient way, however this way worked perfectly for my needs as my story was relatively short. My idea was to make a story where the user would click on two buttons to progress in the story.  The buttons would have image tags inside them so images fitting the theme of the story would be displayed and when the user clicked one of the buttons the images would change.  There would also be a paragraph that would change depending on the decision made by the user, this would progress the story. 

When I made the functions for the project I had to change both the paragraph and the images inside the same function and I had to do this multiple times. I tried many different variations of the same idea, using decision statements to complete one stage inside one function. This idea did not work and I ended up creating a paragraph outside any of the functions, this would mean any variable, including the one associated with the innerHTML would be changeable in the functions. This would allow me to change the paragraph based on the functions because I could change the innerHTML variable inside the appropriate function. For the image tags I declared them inside the functions so I could change them inside the functions. I also had the stage_Num variable which was made because I had multiple functions on one onclick command in the HTML so I created this variable to make sure that the functions would execute in order.

The whole layout of the site was fairly simple, the only elements were the title, the two buttons (with images inside), a preloaded image that was not a button, and the paragraph which was only a div tag (I had created the paragraph in the Javascript). I had placed onclick commands on the buttons which is where I would call the functions that would play out the story. The CSS was also fairly simple as there was nothing much to style. I only removed the backgrounds of the buttons so you would only see the images and add immersion to the story. I did have some alignment issues that I was not able to fix unfortunately but it does not impact the experience.

JavaScript Storybook Adventure – Sophomore DDM