Innovation Through The Ages is a digital learning website that teaches kids about 26 of the most influential inventions of all time. The site is broken down into three different sections called Discover, Play and Champion’s Quiz. The discover section acts as the learning component showing these inventions on an interactive timeline where the user can click on one to learn facts about that specific item. The play section is the interactive component that features a simple drag and drop game to challenge the player’s retention of the timeline with sorting the items into their correct boxes. The final section titled the Champion’s Quiz is the test component of the site where the user answers ten randomly selected questions from a selection of twenty. The question topics can range from the timeline, year groups, as well as a couple that relate to the included facts from the discover section. If the user answers all ten questions correctly, they will win the Champion’s Trophy which has the name that was previously inputted during the starting screens. When having completed all sections, the trophy will appear in the top right corner of the menu, allowing users to view it again and get access to a hidden video.

The design style for this website was intended to be colourful and playful to appeal to a younger audience. The three sections each use a different colour not only for the menu buttons but throughout the separate pages to highlight each sections unique functionality and purpose. The use of a timeline in the “Discover” section helps show each inventions placement in time in a way that is visual, interesting and engaging for the user. The addition of two facts about each invention appeals to the learning style of the younger audience by keeping it exciting and simplistic without over complicating. The “Play” component of the websites acts as a continuation from the “Discover” section. It features two rows of boxes which are each linked to a different century of inventions and cycles through all 26 inventions which need to be sorted. The simple layout, exciting animations and sound effects add to the enjoyment and gamifies the experience for the user. The “Champion’s Quiz” consists of ten randomly chosen questions from a list of fifteen and gives the user fifteen seconds to answer each. This section features three answer boxes that highlight accordingly depending on how the user answers the question through colour and shape. The line at the bottom of the content conveniently details how far through the questions the user is.

This interactive website uses HTML, CSS, JavaScript, jQuery and jQueryUI. The JavaScript makes the entirety of the interaction and allows elements to be altered without moving between pages. The SetInterval command in JavaScript has been used multiple times for counting the duration in the “Play” component and for the countdown timer in the “Champion’s Quiz” timer. Keyframes in CSS are also used for bringing the menu buttons to life upon hover. The jQueryUI framework is utilised for the “Play” section of the website specifically the “Draggable” and “Droppable” functions to make each invention draggable across the page and to set commands to follow when it is dropped over a box. The “Droppable” functions record the correct score, incorrect attempts and animate each box lid to move to confirm the selection.