Functionality & Interactivity 

This website is linked to two JavaScript files with a lot of features inside. 

The first JavaScript file has mainly four features: 

    1. the YouTube video will fade in once the poster is clicked, this gives an interaction with users that introduce the story a little bit more once they click it; 

    2. the side navigation will not show up until the user scroll down to the content and the header navigation will increase its height when user hovers over it, this beautifies the content and webpage structure and makes it look dynamic; 

    3. for the main content of the whole story (including many parts): 

        1) part 1 has the start effect, which is to click ‘to start’ button (which is actually the first sentence of the whole book) and the first first paragraph will be toggled, and later on there will appear many buttons that users will need to click them to continue the story, this gives the interaction that user is reading actively instead of just putting text in front of them; 

        2) part 1, 3, 6 have the effect of clicking button to continue story (as mentioned above), every part will be hidden first and its content will appear only appear its part heading is being clicked; 

        3) part 4 is not displaying the content in ordinary way, instead the content is divided into 6 smaller parts which will be displayed after the tab is for each is clicked, this gives user the chance to choose what to read; 

        4) part 6 images are going to become width 100% once the user hover and it will stay the same even the mouse leaves, this will emphasis the image;

        5) the whole content of the story (regardless of which part or page) is going to have the major effect that the paragraph forms a dashed brown border when mouse hover and the border will become solid once the mouse clicked, though the border will disappear after the mouse leaves, the text will be bigger than before and will become beige color and underlined. 

    4. button features: 

        1) scroll back to top button, this button will not appear until the page is scrolled down and it will bring user to the top once it’s being clicked, this gives convenience for readers who just want to have a brief look of the whole story;

        2) dropdown effect, the header ‘content’ button will have a dropdown effect to show user the content structure of the story; 

        3) tooltips, the ‘The Giver’ in the middle of the giant image at the front page will show a ‘click me for trailer’ tooltip when hovered, and the heading of each part will also have this effect but with the words (click me); 

The second JavaScript file mainly focus on the form at the button of the page, the form is embedded in a modal which will not appear unless being clicked, also there is a form validation code after the modal code, which will remind people if they did not finish their form and try to submit.