Giter Club home page Giter Club logo

ms2-news-quiz's Introduction

Global News Quiz App

Version 1.0

App Location

Global News Quiz

Wireframe

How it works

The App displays random questions related to happenings around the world with 3 answer options for user to choose from.

Objectives of the App

The objective of the app is to raise user awareness of global happenings and test how conscious of global news a user is.

Functionality of the App

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.

Technologies used

  • HTML5
  • CSS3
  • Javascript
  • Balsamiq Wireframe
  • jQuery
  • Google Fonts
  • Git
  • GitPod
  • GitHub
  • Chrome DevTools
  • clipart-library.com

Deployment

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 ..."

Fork the code

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

Local Clone

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

Testing

I tested the website on the following browsers;

  • Chrome
  • Edge
  • Firefox
  • Safari

Test Plan

The user experience on all listed browsers is satisfying

Bugs

  • 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

Credits

  • 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

Acknowledgment

  • 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.

ms2-news-quiz's People

Contributors

feawos avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.