DEV Community: Khyati Baria

Build CLI Quiz App with nodeJs

Khyati Baria — Wed, 15 Dec 2021 11:28:25 +0000

In this blog, we will build a Food Fact CLI Quiz App in JavaScript. We will use repl.it to write a program. We will use two npm modules

readlineSync -It will have a conversation with the user via a console.
chalk: It is used for Terminal string styling and adding colors.

Planning our CLI App:

We ask the user to enter name
Then we welcome the user
We will display the Rules of the game to user
Then we let users to play game
Check that user has entered the correct answer
We will print the current score of a user on every given answer
We will display the total score of users at the end of the game

Now Let’s Start the Build We need to take the user input through the console so we will require npm package: readline-sync. Firstly we will install npm packages.

var readlineSync = require('readline-sync');
const chalk = require('chalk');

Using the above code in repl.it will automatically install these packages for us.

Asking user their Name

var userName= readlineSync.question( ("Please Enter Your Name?"));

We need a variable to store the name of the user so we will create a variable called userName.

Welcome Message for User

console.log('WELCOME '+userName+ 'FOOD FACT QUIZ \n');

Now we need to display customize welcome message for every new user. For welcome message we need name of user with some greeting message. So we use string concatenation to show welcome message.

Showing Rules of the game to the user

  console.log ("RULES OF THE GAME ARE SIMPLE"); 
  console.log ("1). All the QUESTIONS are COMPULSORY");
  console.log ("2). If you answer RIGHT you score 2 Points");
  console.log ("3). If you answer WRONG you Lose 1 Point");
  console.log ("----------LET’S START THE GAME------------");

Use inbuilt JavaScript function console.log() to print Rules on screen.

Adding Question of the quiz

To store Questions of the quiz we create an array of an objects. And to ask question to user we use readlineSync.question(question).

var quesBank=[
  { question: `
  What country is renowned for chocolate?
  a) Finland
  b) Belgium
  c) Argentina\n`,
    answer: "b"
  },
  { question: `
  Which of these was called "food of the gods" in ancient India?
  a) Yogurt
  b) Potato
  c) Bread\n`,
    answer: "a"
  },
  { question: `
  Which is the most stolen food in the world?
  a) Candy
  b) Cheese
  c) Chips\n`,
    answer: "b"
  },
  { question: `
  One food that all races eat is what?
  a) Chocolate
  b) Bread
  c) Cheese\n`,
    answer: "b"
  }];

We need a function which traverse throughout array of objects and displays the each question to user. So we need a for loop to access all elements inside an array.

function play(){
   for(var i=0; i<quesBank.length;i++){
     var currentItem= quesBank[i];
     check(currentItem.question, currentItem.answer)
   } }

Check if user answer is correct

function check(question, answer)
{
   var userAns=readlineSync.question(question);

   if( userAns.toUpperCase() === answer.toUpperCase())
   {
    console.log();
    console.log(chalk.green.italic.bold("Your are Right!!!!!"));
    console.log();
    score=score+2;
   } else{
    console.log();
    console.log(chalk.red.italic.bold("Your are Wrong!!!!!"));
    console.log();
    score=score-1;
  } 
  console.log(chalk.bgWhite.blue.bold("Your Total Score is:",score));
}

We create a function that compares user answer with correct answers in array of objects. We need a variable to store the user answer. So we create variable userAns to store user answer. Here we use branching if user answer is correct we increment score of user by 2 and if answer is wrong user score is decrease by 1. Once all questions are answered by user we will display Total score at the end of quiz Game.

So final program will look like this

const chalk = require('chalk');
var readlineSync = require('readline-sync');
var score=0;

function Welcome()
{
var userName= readlineSync.question("Please Enter Your Name?");
console.log(chalk.yellowBright.bold('WELCOME'+userName+'FOOD FACT QUIZ \n'));
console.log(chalk.cyanBright.bold("RULES OF THE GAME ARE SIMPLE")); 
console.log(chalk.cyanBright("1). All the QUESTIONS are COMPULSORY"));
console.log(chalk.cyanBright("2). If you answer RIGHT you score 2 Points"));
console.log(chalk.cyanBright("3). If you answer WRONG you Lose 1 Point"));
console.log(chalk.yellowBright.bold("-------LETS START THE GAME------"));
}

var quesBank=[
  {
    question: `
    What country is renowned for chocolate?
    a) Finland
    b) Belgium
    c) Argentina\n`,
        answer: "b"
  },
  {
    question: `
    Which of these was called "food of the gods" in ancient India?
    a) Yogurt
    b) Potato
    c) Bread\n`,
        answer: "a"
  },
  {
    question: `
    Which is the most stolen food in the world?
    a) Candy
    b) Cheese
    c) Chips\n`,
        answer: "b"
  },
  {
    question: `
    One food that all races eat is what?
    a) Chocolate
    b) Bread
    c) Cheese\n`,
        answer: "b"
  }];

function check(question, answer)
{
   var userAns=readlineSync.question(question);
   if( userAns.toUpperCase() === answer.toUpperCase())
   {
    console.log(chalk.green.italic.bold("Your are Right!!!!!"));
    score=score+2;
   } else{
    console.log(chalk.red.italic.bold("Your are Wrong!!!!!"));
    score=score-1;
  } 
  console.log(chalk.bgWhite.blue.bold("Your Score is:",score));
  console.log();
  console.log(chalk.yellowBright.bold("------------------------------")); 
  console.log();
}

function play(){
   for(var i=0; i<quesBank.length;i++){
     var currentItem= quesBank[i];
     check(currentItem.question, currentItem.answer)
   }
}

Welcome();
play();

Thanks for reading. If you like this articles, consider following me.

Data Types in JavaScript

Khyati Baria — Thu, 09 Dec 2021 09:50:19 +0000

Data types describe the characteristics of data stored in a variable. Data types can be divided into two:

Primitive Data types
Non-primitive Data types

1. Primitive Data Types
Primitive data types are immutable or non-modifiable data types. Once a primitive data type is created we cannot modify it. Primitive data types in JavaScript include:-

Number
Number datatype can stores both integers and decimal values. Using Number data type we can do all the arithmetic operations.
let age = 21; var quantity= 12; const gravity = 9.81 // we use const for non-changing values

Strings
Strings data type are used to store textual data. To declare a string, we need a variable name, assignment operator, and a value under a single quote, double quote, or backtick quote.
let userName = "Khyati"; let city = 'Mumbai'; let language = 'JavaScript'; let space = ' '; // an empty space string

Booleans
The Boolean data type can store only two values i.e. true and false.This type is commonly used to store yes or no types values.
var yes = true; var no= false;

Null
null data type is special type of placeholder in JavaScript. Null value represents the intentional absence of any object value.
var vaule = null;

Undefined
The undefined data type is special type of placeholder in JavaScript, undefined means “value is not assigned”. If a variable is declared, but not assigned, then its value is undefined.
var userName; console.log(userName); // shows "undefined"

2. Non-primitive Data Types
Non-primitive data types are modifiable or mutable. We can modify the value of non-primitive data types even after it gets created. Non-primitive data types in JavaScript includes:-

Arrays
Arrays data type are used to store multiple values at a time in single variable. An array is a list of values store within a variable, and can access these values by referring to their index number.
let numbers = [1, 2, 3]; let fruits=['apple', 'banana', 'mango'];

Objects
Objects are the complex data type in JavaScript. Object tries to map real like things in programing. Object stores the data in form of key value pair. Where key is string and value can be anything.
let car={ name: 'Honda City', model: 'VMT' , color: 'Black', }

So this is it for this article. If you find it informative please leave a like and consider following me. Thanks for reading.

How JavaScript Code is Executed?

Khyati Baria — Wed, 08 Dec 2021 10:43:53 +0000

JavaScript is a synchronous single-threaded language meaning JavaScript can only execute one command at a time in a specific order. It can only go to the next line of code once the previous line of code is executed. Everything in JavaScript happens inside an Execution Context. Imagine Execution Context as a big box inside which the whole JavaScript codes gets executed whenever a JavaScript program is run an execution context is created. Execution Context has two components they are:-

Variable Environment (Memory Component)
Thread of Execution (Code Component)

Example
1) var number=10; 2) function add (n) 3) { 4) var result=n+n; 5) return result; 6) } 7) var result1= add(n); 8) var result2= add(4);

When the above code is executed a global execution context is created. Global execution context gets created in two-phase

Memory Creation Phase in this phase, the JavaScript engine runs through the whole program and allocates the memory space for all the variables and functions present in the program. The variables in the program are store with placeholder undefined and the function is stored as it is.

Code Execution Phase is the 2nd phase, in which JavaScript code is executed line by line when the engine executes the 1st line of code the variable value is updated from undefined to 10. It comes to the 2nd line where the function is declared and it skips lines 2 to 6 since the function is not invoked yet. Now line 7 in the program is executed where a function is invoked so it goes back to where a function is declared on line 2 and starts executing the function.

Function in JavaScript are like mini-programs whenever JavaScript executes a function a new execution context is created. so when line 7 of program gets executed a function is invoked and execution context for function gets created in two phases Memory Creation phase where variables in a function are store with placeholder undefined. In the 2nd phase i.e. Code execution phase variable n is assigned to value 10 and line 4 is executed result value is calculated and stored in the result variable. Now it comes to line 5 where the return result indicates the function to return the calculated result value to the global execution context and control goes to the global execution context. Now execution context created for function gets deleted. And the value of variable result1 is updated to 20.

Js engine goes to next line 8 again here the function is invoked and new execution context gets created same as mention above process happens once the function returns the value and control goes back to the global execution context. And execution context created for function gets deleted. Value of variable on line 8 is updated to 8. Now the whole JavaScript program is executed so global context also gets delete.

A Call stack is used by JavaScript to maintain the "Order of execution in execution contexts". Global execution context is created at the start of the program execution and all other new execution context is pushed on top of it. It works similarly as a stack whenever a new function is invoked its execution context is pushed into the call stack. When function execution gets finished its execution context is pop out from the call stack.

So this is it for this article. If you find it informative please leave a like and consider following me. Thanks for reading.