My Project 2 General Knowledge Quiz
Hi! My name is Graham. In this README page were you will find out a little about me, my website, my coding journey, my projects and who has influenced me in the development of this website.
This is my second course project, by now I have gained a little experience but still very much a novice. Of the options for this project I thought a quiz would be fun with the challenging bit of writing good questions.
My code for this project was originally heavily influenced by The WebShala YouTube channel but this 2.0 version is a much more individual effort.
I hope you have fun.
My aim for this project was to create a quiz that I would enjoy playing to ensure a positive user experience in challenging the user to test there knowledge and to achive the highest score on the leaderboard.
A flow chart for this quiz created with the help of Lucid website
For this project I decided to do a quiz as I love a good pub quiz. Quiz's in general can be very enjoyable and hopefully I acheived that. The color scheme for this website is very much tied in with the background image, the chocolate colored font adding some warmth with the light grey adding a bit of contrast. The font used on this project is Cinzel, I choosed this font as I think it adds some sharpness to the overall look. My process of constructing this project was to source all images, including favicon, draw up a mock layout then begin with the HTML. To dress everything up, CSS was added and to make it all dance, Javascript provided all the glitz and glamour.
The man page has a lovely background of the Trinity College Library, imaged sourced from Unsplash Website.
The question page has the same background as the main page with the question box centered. All questions are provided by Open Trivia Database Website. This box will contain a question and multiple choice answers. When you select your answer, click the Submit button to be taken to the next question.
All data provided by the API is available under the Creative Commons Attribution-ShareAlike 4.0 International License.
The leaderboard page will show your score and your standings, this page also includes a Start Again button to return you to the start page.
To finish off the design of this website, I added a favicon of a cartoon brain as a sign of intellegence with a dash of fun.
All my projects are also available to view on my portfolio website. www.grahamwilliamson.ie
- In the Github repository, go to setting.
- In settings go to the pages tab, located on the left.
- Under source, select the branch to master and click save.
- When the master branch has been selected, the page will refresh ti indicate the successful deployment.
Github link found here - github.com
Live link found here - project2.grahamwilliamson.ie
The project started to be developed by cloning the mock terminal repository provided by the Code Institute. The cloning phase of the project is as follows:
Go to the GitHub repository to be cloned. Click the 'Use this template' text and and then click 'Create a new repository' in the dropdown menu that opens.
The following will open on a new page. After specifying the repository name, you can create the repository without writing a description. The new repository will be created automatically.
Then, if you want, you can open with the GitPod or clone it to your computer and work on locally. Since I am running locally, I will explain how I cloned it to the computer. As in the first step, we press the 'Code' button, open the dropdown menu and copy the link indicated by the arrow.
Then, we open the terminal application we use from the computer and clone the repository to our computer with the 'git clone -link to be cloned-' command. Then you can develope your work using the source-code editor of your choice.
To fork a GitHub repo, see the Fork a GitHub repo documentation.
To ensure the functionality of this project I had 4 tasks.
- HTML Validation
The results of these test are shown below:
- HTML
- No errors returned on W3C HTML validator.
- CSS
- No errors returned on W3C CSS validator.
- No errors returned on W3C CSS validator.
- Javascript
- No errors returned on JSHint validator.
- Multiple warnings given - To fix these warnings, you can either change the configuration of your linter or validator to use ES6 or a compatible extension, or you can replace 'const with 'var or 'let, which are older keywords that work in older versions of JavaScript.
- Accessibility
- On website inspection, lighthouse results are shown below:
Code continuously tested my throught the process.
- Each step tested to ensure viability.
- I have played the game several times to check its useability.
Quiz tested on multiple browers such as Chrome, Firefox and Edge, the only issue is relating to question bank api - see Bugs.
As each bit of code was tested throughout, any bugs found were corrected. To ensure this tasks efficiency, the functionality of the code was check regularly.
The only bug remaining is an encoding problem with the question bank from Open Trivia Database Website. I have looked for the solution on multiple sources such as stackoverflow Website. This link provided code to solve the problem, unfortunately I was unsuccessful in using this code. Bug remains.
This project used HTML5, CSS3 and Javascript.
University College Dublin Website
Code Institute Website
Mike McGrath - HTML, CSS & Javascript (Special Edition) Amazon
Jon Duckett - HTML & CSS, design and build websites Amazon
Jon Duckett - JAVASCRIPT & JQUERY interactive front-end web development Amazon
The WebShala YouTube
For the initial idea for this project, I relied heavily on this channel for assistance on the Javascript section of this project.
I am a big follower of this channel, my go to for inspiration. Mike Dane, in my opinion, is a great teacher.
W3 School Website
W3 Schools web-site has it all, I would have benn lost many times without there help.
As well as the Code Institute course content, and as with my first project, I got inspiration from some online tutorials and video's and also books such as books from Mike McGraths and video tutorials from Mike Dane.
At times I found Javascript challenging and I needed to dig deep into my resourses, thankfully there are so many online tutorials out there to help.
The India based YouTube channel'The WebShala'was of great help on the project with so many helpful and inspiring tutorials. My thanks to The WebShala.