Choose Your Own Adventure

You are to write a “choose your own adventure” type story. In case you do not know, this is where the story “forks” at multiple points, allowing the “reader” to choose their own path through the story. If you have questions, do a google search.

Reading

In addition to the coding part of the assignment, please also read the following article as a way of refreshing yourself on “choose your own” stories and their possibilities with audiences.

Khatchadourian, Raffi. “Alternate Endings” The New Yorker. January 30th, 2017.

Technical Specs

• Create a single web page (i.e. 1 url that does not change or reload)
• You can use html, css, and javascript. However, the majority of the work should be completed through js coding.
• You can use HTML to create the basic structure of the webpage, and to show the first “level” of the story.
• You can use CSS to define style and layout for the elements pre-populating the index.html, as well as elements that may be created and added to the DOM via JS.
• For each choice made by the “reader”, their should be code, written in JS that will add to the story. This can be done below the existing story, or can replace elements on the page. The elements that will appear can be created solely in JS or can be pre-written elements in the HTML document that you choose to hide/display.
• Visually, your page should dynamically change based on the choices made by the “reader”. In addition to the prose that appear/disappear, this will likely include;
  • Color of the text, background, and elements.
  • The actually layout of elements.
  • Pictures/images.
  • Animations.
• You should leverage the setTimeout()/setInterval() function to create a couple changing elements after the “reader” selects a path.
• You will likely need to use css pseudo-methods.
• Finally, one of the characters names should be set by the reader at the beginning of the story, via a form input element. Although you are encouraged to include more moments for data input from users.

In addition to the specs listed above, you will be marked down for sloppy code. This means that;

• Your code should be organized into logical and concise functions. If this is confusing to you, please review the eloquent javascript book.
• You should include comments for you and I. This means that your comments are clear, well written, and inform me as to what each function does in the code and with regard to the story.
• In addition to copy-editing the prose for you story, you should save time to double check if refactoring your code into more manageable modules is necessary or appropriate.

You will want to review functions and methods that;

• Allow you to inject text to an elements. -> .innerText = ""
• Allow you to select HTML elements. -> document.querySelector(''); & document.querySelectorAll('')
• Allow you to register “event listeners”. -> button.addEventListener("click", functionName);.
• Allow you to create nodes. -> document.createTextNode("")
• You should probably just check out the JS Node class, in addition to the other readings and reference from this week.

Artistic Specs

• For this assignment, you are asked to write an original story. This can be inspired by anything, including existing stories. I just do not want you using a pre-existing “choose your own adventure” story.
• Ideally, this is a media rich story with images, animations, and maybe even music/audio.
• You should use your well-developed design aesthetics to create an engaging and appealing website that best showcases the story and your work.
• You may also want to consider how the page could change as ther story progresses.