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
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.
allows elements to be altered without moving between pages. The
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