Build interactive guide for Depression Options

[njsfield]

Related #9

Technical Tasks

Images

• [x] Create interactive.html
• [x] Add style.css
• [x] Add GSP JS library at bottom of script
• [x] Add additional SVGs (non-blue dog)
• [x] Add img container div (relative positioned)
• [x] Add text container (for output text)
• [x] Inside img container, add an img element for svg part, set its width to a percentage relative to the size on the document (use brackets to give a good idea), then add class of svg-snippet (hidden visibility, position absolute).
• [x] (Repeat for other svg parts)

State

• [x] Add jQuery
• [x] Adove the GSP JS Library script, create state.js.
• [x] In state.js, add object called globalState.
• [x] Set two keys; currentscene, nextscene.
• [x] currentscene = "introduction", nextscene = "options"

First Scene animation

• [x] Underneath GSP JS Library script, add start.js
• [x] Inside start.js, make instances of new Timeline, store in variable called tl.
• [x] Call the .from method, for the svg parts for the dog, and position into place, set background colour of img container, and set text of text container

Further Scene animation

• [x] Add event listener for svg image parts in html for svgs in img elements; doghead, dogbowl, mirror, otherdoghead, list, detailedlist, clock.
• [x] Add events.js below GSP JS Library script.
• [x] Write a function that when called, checks the next scene, then calls another function.
• [x] Create a function called optionsScene, that creates new instance of TimelineLite, then positions elements into place, sets text.
• [x] Repeat process

[njsfield]

In the working prototype, this interactive feature will be limited to the following presentation-

• User is presented with an introduction about dealing with treatment options
• User can click on the screen to experience a transition into a different scene, displaying treatment options
• The leftmost option (practical) is represented as a mirror, and can be clicked to transition into a following scene which introduces practical treatment
• From here, the user can click on the screen to trigger a new scene that presents a more detailed list to the user.
• The user can then click on the screen, to trigger a new scene that presents the locations for available treatment.