Building a Fun Blockchain Quiz App with HTML, CSS & JavaScript: A Step-by-Step Guide

Published in

Coinmonks

8 min readApr 8, 2024

· Introduction
· Project Overview
· Prerequisites
· Features of the Blockchain Quiz Application
· Code Structure
∘ Step 1. HTML Structure:
∘ Step 2. CSS Styling:
∘ Step 3. JavaScript Logic:
· Testing and Debugging
· Lessons Learned
· Deployment
· Future Improvements
· Conclusion

Introduction

In this project guide, you will learn and understand how to build a Blockchain quiz application using HTML, CSS, and JavaScript. This interactive quiz application will improve your front-end development skills while assessing your understanding of fundamental blockchain concepts.

Project Overview

The Blockchain Quiz app is an online application designed to test user’s knowledge of Blockchain technology, demonstrating its application for secure data storage. The app is aimed at students, developers, and Blockchain enthusiasts who want to learn more about this revolutionary technology in a fun and interactive way.

Prerequisites

To build this Blockchain Quiz application, you’ll need a basic understanding of HTML, CSS, and JavaScript. You should be familiar with HTML for structuring the application, CSS for styling it, and JavaScript for implementing the logic of the application.

A text editor or IDE (e.g., Visual Studio Code) is required for writing code, and a web browser is needed for testing. Optionally, having a GitHub account for hosting the application is recommended.

Features of the Blockchain Quiz Application

In this project, you are going to develop a Blockchain Quiz application that will have the following features:

Quiz Questions: Display multiple-choice questions related to Blockchain technology.
Options Selection: Allow user’s to select an option for each question.
Answer Validation: Validate the selected answer and provide feedback to the user.
Score Calculation: Calculate and display the user’s score based on the number of correct answers.
Result Display: Display the final quiz result with the user’s score after taking all the quizzes.
Responsive Design: Ensure the application is responsive and works well on different devices.

Code Structure

Create a new folder for your project, name the folder as you wish, and inside it, create three files named index.html, style.css, and script.js. These files will serve as the foundation for your project. Now open the folder in a text editor or IDE (e.g., Visual Studio Code) and follow the steps below:

Step 1. HTML Structure:

Open theindex.html file and paste the following HTML code for the Blockchain Quiz application:

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="style.css" />
  <title>Blockchain Quiz Application</title>
 </head>
 <body>
  <h1 class="header">Blockchain Online Quiz Game</h1>
  <div class="quiz-container" id="quiz">
   <div class="quiz-header">
    <h2 id="question">Question text</h2>
    <ul>
    <li>
     <input type="radio" name="answer" id="a" class="answer">
     <label for="a" id="a_text">Question</label>
    </li>

    <li>
     <input type="radio" name="answer" id="b" class="answer">
     <label for="b" id="b_text">Question</label>
    </li>

    <li>
     <input type="radio" name="answer" id="c" class="answer">
     <label for="c" id="c_text">Question</label>
    </li>

    <li>
     <input type="radio" name="answer" id="d" class="answer">
     <label for="d" id="d_text">Question</label>
    </li>
    </ul>
   </div>
   
   <div class="quiz-btns">
    <button id="skip">Skip</button>
    <button id="submit">Check</button>
   </div>

  </div>

  <script src="./script.js"></script>
 </body>
</html>

The HTML code above defines the structure of the Blockchain Quiz application. It includes a header, a container for the quiz questions and answers, and buttons for skipping and checking answers.

Each question has four multiple-choice answers (labelled from A to D). The application is linked to an external CSS file for styling and an external JavaScript file for functionality.

Step 2. CSS Styling:

Open thestyle.css file and paste the following CSS code to style the Blockchain Quiz application:

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap');

* {
 padding: 0;
 margin: 0;
 box-sizing: border-box;
}

body {
 background-color: #352a2a;
 background-image: linear-gradient(315deg, #b8c6db 0%, #f5f7fa 100%);
 font-family: 'Poppins', sans-serif;
 display: flex;
 align-items: center;
 justify-content: center;
 height: 100vh;
 overflow: hidden;
 margin: 0;
}

.header {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 background-color: white;
 color: #09098d;
 font-size: 2.7em;
 font-weight: bold;
 padding: 10px 0;
 text-align: center;
 text-transform: uppercase;
 font-family: fantasy;
 letter-spacing: 1.3px;
}

.quiz-container {
 background-color: #fff;
 border-radius: 15px;
 box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 width: 80%;
 max-width: 600px;
 margin-top: 60px;
 padding: 20px;
}

.quiz-header {
 padding: 2rem;
 font-weight: bold;
}

h2 {
 text-align: center;
 color: #000000;
 font-size: 1.5em;
 margin-bottom: 20px;
}

ul {
 list-style-type: none;
 padding: 0;
}

ul li {
 font-size: 1.2rem;
 margin: 1rem 0;
}

ul li label {
 cursor: pointer;
}

#quiz button {
 width: 20%;
}

.quiz-btns {
 display: flex;
 justify-content: space-between;
 padding: 20px;
}

button {
 background-color: #09098d;
 color: #fff;
 border: 1px solid #09098d;
 border-radius: 5px;
 cursor: pointer;
 font-size: 1rem;
 padding: 20px 20px;
 transition: background-color 0.3s, color 0.3s;
}

button:hover {
 background-color: #0404fa;
 color: #fff;
}

#skip {
 background-color: #09098d;
 border: none;
 color: #fff;
 padding: 1.1rem;
 font-size: 1.1rem;
 border-radius: 10px;
}

#submit {
 background-color: #09098d;
 border: none;
 color: #fff;
 padding: 1.1rem;
 font-size: 1.1rem;
 border-radius: 10px;
}

#skip:hover,
#submit:hover {
 background-color: #0404fa;
 color: #fff;
}

@media screen and (max-width: 680px) {
 .header {
  font-size: 2em;
 }

 .quiz-container {
  width: 70%;
  max-width: 500px;
 }

 .quiz-btns {
  padding: 15px;
 }

 button {
  font-size: .5rem;
  padding: 15px;
 }

 #skip {
  padding: 0.8rem;
  font-size: 0.8rem;
 }
 
 #submit {
  padding: 0.8em;
  font-size: 0.8rem;
 }
}

@media screen and (max-width: 520px) {
 .header {
  font-size: 1.5em;
 }

 .quiz-container {
  width: 65%;
  max-width: 450px;
 }

 .quiz-header {
  padding: 1.5rem;
 }

 ul li {
  font-size: 1rem;
 }

 .quiz-btns {
  padding: 15px;
 }

 button {
  font-size: .5rem;
  padding: 15px;
 }

 #skip {
  padding: 0.8rem;
  font-size: 0.8rem;
 }
 
 #submit {
  padding: 0.8rem;
  font-size: 0.8rem;
 }
}

@media screen and (max-width: 420px) {
 #skip {
  padding: 0.5rem;
  font-size: 0.5rem;
 }
 
 #submit {
  padding: 0.5rem;
  font-size: 0.5rem;
 }
}

The CSS code above defines the styling for the Blockchain Quiz application. It sets the background color, font, and layout for the quiz header, questions, options, and buttons. It also includes media queries for responsiveness on different screen sizes.

The design uses the Poppins font from Google Fonts and a gradient background. The quiz container has a white background with rounded corners and a shadow. Buttons have a background color, border, and hover effect to improve interactivity.

Step 3. JavaScript Logic:

Open thescript.js file and add functionality to the Blockchain Quiz application using the following JavaScript code:

const quizData = [
    {
        question: "What is a Blockchain?",
        a: "A Centralized Ledger",
        b: "An Exchange",
        c: "A Type of Cryptocurrency",
        d: "A Distributed Ledger on a Peer to Peer Network",
        correct: "d",
    },
    {
        question: "What is a DApp?",
        a: "A Decentralized Application",
        b: "A Type of Blockchain",
        c: "A Condiment",
        d: "A type of Cryptocurrency",
        correct: "a",
    },
    {
        question: "What is the term for when a Blockchain splits?",
        a: "A Division",
        b: "A Sidechain",
        c: "A Fork",
        d: "A Merger",
        correct: "c",
    },
    {
        question: "What is a Genesis Block?",
        a: "The First Block of a Blockchain",
        b: "A Famous Block that hardcoded a Hash of the Book of Genesis onto the Blockchain",
        c: "The First Block after each Block Halving",
        d: "The second Transaction of a Blockchain",
        correct: "a",
    },
    {
        question: "What is a Miner?",
        a: "An Algorithm that predicts the next part of the Chain",
        b: "Computers that validate and process Blockchain Transactions",
        c: "A type of Blockchain",
        d: "A Person doing Calculations to verify a Transaction",
        correct: "b",
    },
    {
        question: "Where is the Least Safe Place to Keep your Cryptocurrency?",
        a: "On an Exchange",
        b: "In your Pocket",
        c: "At your Work Desk",
        d: "On a Hot Wallet",
        correct: "a",
    },
    {
        question: "Where do you store your Cryptocurrency?",
        a: "Bank Account",
        b: "In your Pocket",
        c: "Floppy Disk",
        d: "Blockchain Wallet",
        correct: "d",
    },
    {
        question: "Who Created Bitcoin?",
        a: "John Mcafee",
        b: "Wasiu Akindoyin",
        c: "Satoshi Nakamoto",
        d: "None of the Above",
        correct: "c",
    },
    {
        question: "What is a Node?",
        a: "A Blockchain",
        b: "An Exchange",
        c: "A Computer on a Blockchain Network",
        d: " A Type of Cryptocurrency",
        correct: "c",
    },
    {
        question: "What does P2P stand for?",
        a: "Private Key to Public Key",
        b: "Password to Password",
        c: "Peer to Peer",
        d: "None of the Above",
        correct: "c",
    }
];

const quiz = document.getElementById('quiz');
const answerEls = document.querySelectorAll('.answer');
const questionEl = document.getElementById('question');
const a_text = document.getElementById('a_text');
const b_text = document.getElementById('b_text');
const c_text = document.getElementById('c_text');
const d_text = document.getElementById('d_text');
const skipBtn = document.getElementById("skip");
const submitBtn = document.getElementById('submit');

let currentQuiz = 0;
let score = 0;

loadQuiz();

function loadQuiz() {
    deselectAnswers();

    const currentQuizData = quizData[currentQuiz];

    questionEl.innerText = currentQuizData.question;
    a_text.innerText = currentQuizData.a;
    b_text.innerText = currentQuizData.b;
    c_text.innerText = currentQuizData.c;
    d_text.innerText = currentQuizData.d;
}

function deselectAnswers() {
    answerEls.forEach(answerEl => answerEl.checked = false);
}

function getSelected() {
    let answer;

    answerEls.forEach(answerEl => {
        if(answerEl.checked) {
            answer = answerEl.id;
        }
    });

    return answer;
}

skipBtn.addEventListener('click', () => {
    if (currentQuiz < quizData.length - 1) {
        currentQuiz++;
        loadQuiz();
    } else {
        console.log("No more questions to skip to.");
    }
});

submitBtn.addEventListener('click', () => {
    const answer = getSelected();
    
    if(answer) {
        if(answer === quizData[currentQuiz].correct) {
            score++;
        }

        currentQuiz++;

        if(currentQuiz < quizData.length) {
            loadQuiz();
        } else {
            showResult();
        }
    }
});

function showResult() {
    quiz.innerHTML = `
        <h2 style="font-size: 1.5em;">You Answered ${score}/${quizData.length} Questions Correctly</h2>
        <button style="width: 100%; font-weight: bold; font-size: 1.3em;" onclick="location.reload()">Reload Quiz</button>
    `;
}

The JavaScript code above defines the Blockchain Quiz application with questions about blockchain and cryptocurrency. It includes an array of quiz questions and correct answers, as well as functions to load and display quiz questions, check answers, and show the final result. The code also handles skipping questions and reloading the quiz.

Testing and Debugging

To test the application in your web browser, you can follow these steps:

Open the HTML File: Make sure you have saved all your HTML, CSS, and JavaScript files in the same folder as stated earlier. Then, open the HTML file in your web browser by double-clicking on it. This will open the file in your default web browser.
Inspect Element: Once the app is loaded in the browser, right-click on the page and select “Inspect” or press “Ctrl+Shift+I” to open the developer tools. This will allow you to see any errors in the console and inspect elements on the page.
Test Functionality: Interact with your app to test its functionality. This will help you identify any bugs or issues in your code.
Debugging: If you encounter any errors or issues, use the console in the developer tools to debug your JavaScript code. Look for error messages and line numbers to pinpoint where the issue is occurring.
Make Changes: If you need to make changes to your code, go back to your code editor, make the necessary adjustments, save the file, and then refresh the browser to see the changes reflected in your app.

Lessons Learned

This project taught me the importance of planning and designing the application logic before coding. I also improved my understanding of CSS stylings, JavaScript events, and DOM manipulation, which are crucial for creating interactive web applications.

Deployment

The Blockchain quiz application project is hosted on GitHub Pages and can be taken online by visiting the following link:

Take the Quiz: https://wasiu-akindoyin.github.io/Blockchain-Quiz-App/

You can access the GitHub repository here to view or contribute to the source code.

Future Improvements

In the future, I plan to add more features, such as:

Timer: Add a timer for each question to make the quiz more challenging.
Levels or Categories: Introduce different levels or categories of quizzes to cater to different skill levels or interests.
Leaderboard: Add a leaderboard to display high scores and encourage competition among users.
Mobile Responsiveness: Optimize your quiz for mobile devices to improve the user experience on smaller screens.

Conclusion

This project demonstrates the power of combining web development with blockchain education. By building a fun and interactive quiz application, you’ve not only gained practical experience with HTML, CSS, and JavaScript, but you’ve also taken a step towards understanding the core principles of blockchain technology.

If you find this project guide helpful, please clap, share, and follow me to learn more about front-end development, blockchain networks, and a whole lot more. Thank you for sticking around till the end, and see you on the next one.