Mastering The Basics Of JavaScript : Creating a Math Quiz Program
Tags: javascript, beginners, python, programming
Published: 2023-06-22 23:50:13

Imagine the excitement of exploring a new programming language after months of working with Python. As a Python developer, I found myself captivated by the versatility and widespread use of JavaScript in web development. The shift from Python to JavaScript presented an opportunity for growth and expansion of my skill set. In this article, I want to share one of the projects that helped me practice the basics of JavaScript while honing my programming skills.

## Introducing the Math Quiz Project
The math quiz project served as a practical exercise to apply my newly acquired JavaScript knowledge while reinforcing the basics. The project aimed to generate random questions; random numbers had to be created within a range; check user's answers after taking their inputs; manipulate strings; and make conditional statements. The objective was to develop a program that could randomly generate math questions, providing an interactive learning experience.
In the next section, I will guide you through the step-by-step process of building the math quiz program. We will examine the key JavaScript functions, discuss the logic behind the code, and explore how the project helps solidify the language's fundamentals.



## A STEP-BY-STEP OUTLINE OF WHAT WE WANT FOR THE MATH QUIZ

1. We need to generate a random number within a range.
2. We need to generate random questions.
3. We need to check the user's answer against the correct answer while keeping track of the user's score.

## Generating Random Numbers
We need to define a function that generates and returns a random number within a minimum and maximum range.

```javascript
// GENERATE RANDOM INTEGER

function genRandomInt(min, max){
  const randomNumber = Math.random() * (max + min + 1)
  return Math.floor(randomNumber) + min;
};
```

`ThegenRandomInt()` function takes two parameters (min and max) to specify the range we want the random number to fall into. `TheMath.random()` function in JavaScript is a built-in method that generates a random floating-point number between 0 (inclusive) and 1 (exclusive), i.e., it generates a number between 0 and 1 but not 1. `(max - min + 1)` represents the range of values we want to generate, including both min and max. The product of `Math.random() * (max - min + 1)` was stored in the variable `randomNumber`.
The `Math.floor()` function is then used to round down the decimal value of the `randomNumber` to the nearest integer. However, at this point, the range is starting from 0, so in a bid to adjust it, we add the `min` value to the result. This adjusts the range and makes it start from the `min` value.


## Generating Random Questions
This function doesn't take any parameters. It is used to generate random questions.

```javascript
// RANDOM QUESTION GENERATOR

function genRandomQuestion() {
  const randomOne = genRandomInt(1, 10) // First random number
  const randomTwo = genRandomInt(1, 10) // Second random number
  const operator = genRandomInt(1, 4)

  let question;
  let answer;

  switch (operator) {
    case 1: // addition
      question = `${randomOne} + ${randomTwo}`;
      answer = randomOne + randomTwo;
      break;

    case 2: // subtraction
      question = `${randomOne} - ${randomTwo}`;
      answer = randomOne - randomTwo;
      break;

    case 3: // multiplication
      question = `${randomOne} * ${randomTwo}`;
      answer = randomOne * randomTwo;
      break;

    case 4: // division
      question = `${randomOne} / ${randomTwo}`;
      answer = randomOne / randomTwo;
      break;

    default: // default case
      question = "Invalid operator";
      answer = null;
      break;
  }
  return {question, answer};

};

```
Inside the `genRandomQuestion()` function, we generate two random numbers between 1 and 10 (both inclusive), which will be used to generate the question for users. We use another random number to determine the `operator` used for the question (1 for addition, 2 for subtraction, 3 for multiplication, and 4 for division). Based on the `operator`, using template literals, we define the question. After generating the two (2) random numbers(`randomOne` & `randomTwo`) and the random `operator`, we had to use a `switch` statement, which is used to perform different actions based on different conditions. It provides a concise way to write multiple `if...else if...else` statements when there are multiple possible cases to consider. The `switch` statement takes an expression; in this function, the expression taken is the `operator`, The expression is evaluated and compared with the values specified in the `case;` clauses. If there's a match, the code block associated with the `case;` is executed, and the `break;` statement is used to exit the `switch()`. It is good practice to have a `default` block that handles fallbacks if there are unmatched `cases`. 
At the end of the switch statement, we returned an object containing the `question` and `answer`, with the `answer` being the correct one, which we'll compare to the answer provided by the user.

## Checking the User's answer
We'll need to write a function that checks if the answer provided by the user is correct or incorrect, and if it is correct, we increase their count.

```javascript
// USER ANSWER CHECKER

function checkAnswer(userAnswer, correctAnswer, count) {
   if (userAnswer === correctAnswer) {
    console.log('Correct answer!!!');
    count++ ; // increases the count if the user gets the correct answer
   } else { // What happens if the user's answer is wrong?
    console.log('Incorrect answer!!!');
   }

};
```
The `checkAnswer()` function takes three parameters (userAnswer, correctAnswer, and count). The if statement was used to check the strict equality (if the operands have the same type and the same value, the expression evaluates to true) of the `userAnswer` and the `correctAnswer`. If the `answer` is correct, the `count` increases; otherwise, it doesn't.

## Main Math's Quiz Program
Here, after writing the other functions, we need to write the main function that will be called for our script to run.

```javascript
// QUIZ STARTER FUNCTION

function startQuiz() {
  const numberOfQuestions = 10; // number of quiz questions
  let count = 0;
  
  for (let i=0; i < numberOfQuestions; i++) {
    [question, answer] = genRandomQuestion()
    console.log(`Question $i + 1: ${question}`) // The question is logged for the user.
    response = prompt(`What is your answer?: `);
    const userAnswer = parseFloat(response); //converts string to floating point numb.
    checkAnswer (userAnswer, answer, count)
  }  
  console.log(`Quiz complete, your score is: ${count} out of ${numberOfQuestions}`)

};

// Start THE QUIZ
startQuiz()

```

After defining the `startQuiz()` function, we declared a `numberOfQuestion` variable to indicate the number of questions for the quiz. After that, we used the `let` keyword to declare the `count` variable with a starting value of 0, because it gives the `count` variable a block scope and allows the variable to be manipulated.
We proceed to write a `for loop` that keeps on running as long as the value of `i` that started as 0 continues to be less than the `numberOfQuestions`.

The block of code inside `for loop ()`, calls the `genRandomQuestion()` function that we defined earlier; this function returns an object that contains the `question` and `answer`. After the assignment of the question and answer object[`question`, `answer`], we logged the question into the console, asking for the user's response via a `prompt`.
For this line of code: `response = prompt('What is your answer? ');` to work, we need to install and import the prompt module if we are not running the code in a browser environment. If you are working with JavaScript in other environments, such as Node.js for server-side JavaScript, the prompt function is not available. In such a case, we will need to use an alternative method to capture user input.
Open the command prompt or terminal in the directory where your project file is located and run the command below:
```javascript
npm install prompt-sync  // This is used to download the prompt-sync module.
``` 
After running this line of code, go to the top of the JavaScript file and declare the variable `prompt` above all the functions we've written so far.

```javascript
// Declare this at the top of the script
const prompt = require('prompt-sync')();
```
After the user responds, the response is parsed into a floating-point number before being passed as a parameter together with the answer and counted into the `checkAnswer()` function to check if the user input is correct. At the end of the `for loop`, the User gets to see their score.
The code is executed when the `startQuiz()` function is called.

## Conclusion
In conclusion, the math quiz project has been an invaluable exercise for reinforcing my understanding of JavaScript fundamentals. Through its practical implementation, I successfully applied my knowledge of JavaScript syntax, logic, and functionality. This project provided me with valuable insights into JavaScript's capabilities, allowing me to create dynamic and interactive applications. I look forward to further exploring advanced topics and tackling more complex projects in JavaScript.