This website was designed to test the knowledge of the fans of Lord of the Rings! Beginning with a start page which continues onto the quiz on the next page, which contains a timer counting down from 30 seconds and a score total at the end of the questions. The quiz page also has a slide show of pictures, Lord of the Ring themed.
The Home page shows a Welcome note and a button to 'Begin quiz'. The second page includes a heading and then a box containing the question and a list of multiple-choice questions with radio style buttons. On the top of the quiz box there is a timer counting down, adding a bit more pressure to answer questions!
This website is the second of five projects that needs to be completed in order to receve a diploma in Software Development from The Code Institute.
Requirements for the project is that the website has to be static and responsive using HTML 5, CSS3 and Javasript.
A live version of the site can be found here: https://jodymurray.github.io/quiz/
This site has been designed for users of all ages and all fans of the great book and movie series, to test their knowledge and see if they really know the beloved series!
- To have some fun and learn something new about The Lord of the Rings!
- To have fans test their knowledge.
- To see some photos set the theme for the quiz.
The design has been inspired by a tutorial demonstration I came across: https://www.youtube.com/watch?v=49pYIMygIcU The aim for this website is to create a clean looking website with an appealing colour scheme, my colours were chosen to go with the book and fanstasy themed quiz. This website is two pages, links to each page are on both pages. The index.html contains a button stating 'Begin Quiz', which when pressed brings you to the quiz page: quiz.html. The second link is under the header on the quiz page stating 'Go Back', which brings you back to the Welcome note on the Home page.
The colour scheme I chose because dark shades of green and grey remind me of the theme of the website. The colours I chose were:
- The Welcome note has this colour: #404040, which is a soft dark grey.
- The Begin quiz button has a dark green colour, and once hovered over it turns a dark slate grey.
- The Quiz page has the colour black for the headings and questions and a black shadow on the borders.
- The 'Go Back' button is a darkgreen colour and turns a dark grey colour once it's hovered over.
- The quiz-box is this colour: rgb(182, 201, 182), which is an easy on the eyes pastel green colour. The box also has an opacity filter on it, so you can fully see the slide-show of images while you're taking the quiz.
- The submit button is an antiquewhite colour and goes beige once it's hovered over. The text is a darkgreen colour.
- The fonts used for this project were from https://fonts.google.com/
- Icons for the leaves in the header are from https://fontawesome.com/
- The fonts used for the Welcome note are: 'Bilbo', cursive;
- The fonts used for the Quiz page: 'MedievalSharp', cursive;
Images have been chosen in accordance to colour and content. The purpose of the website is to give a friendly look and express quality. Images have been sized in order to match design and consistency. The slide-show of images is the result of a javascript function and source links to the images.
- Welcome page and start button
- Quiz Header
- Quiz Section
- The Welcome note consits of a familiar quote from The Lord of the Rings series; "Not all those who wander are lost...". And next to it on a page like image is the 'Begin Quiz' Button, which brings you to the quiz page.
- The image used is an open book with two pages showing, the image used was from google. Going with the theme of books.
- The Quiz header contains a box bordering a header, stating what theme the quiz is for those who didn't know already. It also has a 'Go Back' button and leaf icons on either side.
- The quiz section is a light-coloured box with the question, a timer, three possible answers to each question and radio buttons to mark the answers.
- It also features a submit button which marks your answer correct or incorrect and takes you to the next question.
- The background features a slide-show of images from the Lord of the Rings series.
- The end of the quiz shows us the amount of questions we answered correctly out of 13 questions. And it also includes a 'Reload' button which will bring you to the first question again and it will reset the timer for you to try the quiz again!
- HTML
- CSS
- JavaScript
- HTML
- No errors were found using W3C HTML validator testing.
- CSS
- No errors were found using W3C CSS validator testing.
- JavaScript
- No errors were found using jShint validator testing.
Tests have been conducted using Google Chrome, testing different devices and screen resolutions through google dev tools. The following is the bugs I came across:
- The main Home Page image of an open book had to be changed to a similar one as the original one wouldn't work properly on Firefox web browser.
- Solution; find a similar sized and looking image and make sure it's jPeg.
- Solution; The Timer on the Quiz page carries on to finish and then says "Done" and doesn't reset automatically.
- The timer resets once the 'Reload' button is clicked.
- The border box containing the question and answers sometimes overlaps the header on smaller screens.
- Solution; Tried smaller fonts but it happens on short length screens.
- The jShint first showed errors of missing semicolons.
- Solution; Add said semicolons.
- On Firefox browser, the transition feature from the CSS doesn't work as nicely as it does on Google Chrome.
The development platform used for this project was GitPod. To track the development stage and handle version control regular commits and pushes to GitHub has been conducted. The GitPod environment was created using a template provided by Code Institute.
The live version of the project is deployed at GitHub pages.
The procedure for deployment followed the "Creating your site" steps provided in GitHub Docs.
*Log into Github. *Select the correct GitHub Repository to be deployed live. *Underneath the repository name, click the “Settings” option. *In the sub-section list on the left, under “Code and automation”, click “Pages”. *Within the ”Source” section choose ”main” as Branch and root as folder and click ”Save”. *The page refreshes and a website shall then deploy via a link.
The live deployed link can be found here - https://jodymurray.github.io/quiz/
-
The first image on the Home page I sourced from; https://www.deviantart.com/firebatata/art/Stock-Render-Old-Book-81772617
-
The image links for the slide-show are as follows;
For inspiration, for code, design help and advice, I'd like to thank;
Martina Terlevic
- My wonderful mentor at Code Institute.
The Code Institute.
Sites that provided me with helpful information and resolved many of my issues; https://www.w3schools.com/ https://stackoverflow.com/ https://youtube.com/
The top screen shot for responsive design was taken from:
Thank you