Today I worked on making the buttons fully functional. I hand coded the Javascript functions and added event listeners to the controls tied to conditional statements. For example:
- Depending on which page (scene) the user is in, the “Next” and “Back” button will:
- Update the background image (illustration for the story)
- Update the HTML class name with the current scene name
- Show/Hide “Back” and “Next” buttons if the user is on first or last scene (page of the book)
- Update the text
- The Play button also activates the audio narration. However, only when the “Play” button is clicked. It is not activated by voice.
The interactive book can be accessed here: https://choicebyvoice.com/Stories/