The story of Big Bad Bear is about a bear who lost his family and became bad in search of power to avenge them. The website I have created depicts some of his story with options for the user to guide him to a result. The website works by taking user input through buttons and using that to make decisions on where to change elements to tell the tale. I used a list of objects and more lists to store the data of the different paths, along with the updates to the buttons, background, and paragraphs telling the story.

I also made 5 different functions. The first one is how the user starts the story but pressing on the big bear in the middle like in the games. The functions remove the bear, add the buttons, and call the updateChoice function.

The updateChoice function takes in a parameter that isn’t always used. It first gets the main and sets it to a variable. It then checks to see if the scene is one of the first 2 because the last 3 have different outcomes/backgrounds. It then takes from the choicePoint list I explained earlier, the different buttons, paragraphs, and background. If the scene is swapping to one of the final 3 it indexes a second time because they are a list inside of a list to create two more objects for the two different variations of the scene based on the user input. At the end, it checks to see if it’s the final scene and removes the buttons. Finally, it sets a part of the savedChoice object of the previous choice to the current choice variable, which is a global variable that tells us what scene we are on. It saves it for something related to the load function we will get to soon.

The next two functions control the saving and loading of scenes for the user. The save function first sets the saved choice for one less than the current scene, resets the current choice, and calls the returnToBegin function. The load function first checks to see if there is something saved, if not it won’t load. If something was saved it will set the current choice to the saved current choice, make the buttons appear, and the bear disappear, and call the updateChoice function with the saved previous choice that we saved from before.

The final function is the returnToBegin function which gets the main element like from before in the updateChoice function where I used the dom to get the element from an id I set to it in the HTML code, removes the buttons, adds the bear, sets the background to the start background, and resets the paragraph.