MTB Quiz App

A mountain bike multiple choice JavaScript quiz application.

Table of contents

• Overview
  • The purpose
  • Screenshot
  • Links
• My process
  • Built with
  • What I learnt
  • Useful resources
• Status
• Author

Overview

The purpose

The purpose of this project was to learn how to develop a simple quiz application using HTML, CSS and JS. I have a deep passion for mountain biking and thought it would be fun to create a quick quiz for other fellow mountain bikers and subscribers of the channel GMBN.

Users should be able to:

Select from 10 multiple choice questions and proceed onto the next question. At the very end they will be presented with their score out of 100.

Screenshot

Above is what you should see when you click on the link below.

Links

• Solution URL: Solution
• Live Site URL: Live Site

My process

Built with

• HTML5 markup
• CSS custom properties
• CSS Grid
• Vanilla JavaScript

What I learnt

• How to use the onclick event attribute to load a new question.
• How to create an array of obects for the questions in JavaScript.
• I learnt how to manipulate the DOM by using the method document.getElementById.
• Use if statements to specify a block of code to be executed, if a specified condition is true.
• Make a CSS grid container for question options.

Here are some code snippets I am proud of:

   //Hide the container to reveal the score after final question
    if(currentQuestion == totalQuestions){
        container.style.display = "none";
        resultCont.style.display = "";
        resultCont.textContent = `Your Score: ${score}/100`;
        return;
    }

Useful resources

• MDN - getElementById() - This helped me understand how getElementById() is used when you want to manipulate, or get info from, an element on your document.
• freeCodeCamp - Array of Objects - This was useful in understanding how to create an array of objects. I learnt that they are used to store multiple values in a single variable.

Status

Project is: in progress

Author

• Website - Max Lockwood