Code Monkey home page Code Monkey logo

04_code_quiz's Introduction

04_Code_Quiz

A timed code quiz with multiple-choice questions.
Built with HTML, CSS, Bootstrap library and JavaScript.

The Challenge

It is required to create a quiz application, which will include multiple-choice questions, a timer, and the possibility to register Highscores.

Main elements:

  • Intro section with instructions.
  • Questions display with answers displaying in random order.
  • Inmediate visual and audio feedback for the asnwered questions.
  • A timer.
  • Highscores sortered and registered with localStorage.

Additional given characteristics: This app will run in the browser and feature dynamically updated HTML and CSS powered by JavaScript code. It will also feature a clean and polished user interface and be responsive, ensuring that it adapts to multiple screen sizes.

The development process

In order to accomplish the challenge, the following steps were executed:

  1. Understand the challenge and the expected flow for the app.
  2. Define complementary breakdown pseudo-code.
  3. Code each breackdown element.
  4. Test, try and error, and apply corrections.
  5. Write proper documentation comments to main code parts.

The Output

With the described process we were able to create a efficient and responsive quiz application that display questions, provide feedback, show images, provide highscores, all in a friendly manner within the Disney movies context.

The application

Installation

The project was uploaded to GitHub at the following repository: https://github.com/jorguzman100/04_Code_Quiz

You can access the deployed application with the GitHup Pages link: https://jorguzman100.github.io/04_Code_Quiz/

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.