The App displays random questions related to happenings around the world with 3 answer options for user to choose from.
The objective of the app is to raise user awareness of global happenings and test how conscious of global news a user is.
The App has a user friendly and easy to use layout, a header that displays the name of the app, an intro text that tells a user what the app does and slides of 10 questions that comes one after the other as the user progress. The app also has a progress bar that tells user how far they have come in the quiz, previous and next buttons for user to move slides, and a submit button that appears at the prompt of the last questions for the user to submit quiz. At the submission of the quiz, the app displays the quiz result to the user.
- HTML5
- CSS3
- Javascript
- Balsamiq Wireframe
- jQuery
- Google Fonts
- Git
- GitPod
- GitHub
- Chrome DevTools
- clipart-library.com
The web-App has been deployed with the following steps;
- Log in on GitHub
- Click on the repository you need to deploy
- Go on "Settings"
- Scroll down the page until you find the "GitHub pages" section
- On "source" click on "none"
- Select "master branch" from the dropdown menu
- The page re-loads automatically
- Scroll down again to "GithHub pages" section
- You will now find a link that says "Your site is published at ..."
To work on this code on your own, follow these steps;
- Log in on GitHub
- Find the project repository
- On the top-right of the page, you will find a button with the name "Fork"
- Click on it and it will automatically fork the code to your GitHub
To make a local clone of this web-app, follow these steps;
- Log in on GitHub
- Find the Project repository
- Locate a button with the name "code"
- Click on the "code" button
- On the dropdown selection,you will find a link to clone the code with HTTPS
- Copy the HTTPS link
- Open Git bash
- Open the directory you want to work on the cloned code
- Type git clone followed by the previously copied HTTPS link
- Press Enter
I tested the website on the following browsers;
- Chrome
- Edge
- Firefox
- Safari
The user experience on all listed browsers is satisfying
- Slides showing via dev tool but not showing in browser
- Bug due to a typo in code...Corrected.
- Progress bar not updating as quiz progresses
- Bug due to slides function not called along with the update progress function...fixed
- All texts, layout and design on this web-app created by me
- The World globe used as background was taken from www.clipart-library.com
- My inspiration for this project comes from my love for being up to date on current affairs and the need I believe for everyone to be aware of whats on the news.
- My Mentor Spencer Bariball is of immense support from the start to finish of the project, he provided guidance and suggested good resources which all contributed to the success of this project.
- Youtube pages like Dev Ed, Brian designs, Traversy and online resource like sitepoint inspired and contributed to the success of this project.