Hello everyone, Kavita here! In this tutorial(blog), we will learn to create a Explore India Quiz app using only JavaScript with the help of Repl.it . well, you can choose any of your favorite topics in which you're interested to make a quiz app and without any further wait, let us begin

Prerequisites:-

Well, you don't need to have much knowledge about coding even if you're a complete beginner you can code along.

1. Create an account on Repl.it .
2. Prepare a list of questions for your quiz, along with the options and correct answers of the questions.
3. Be ready with the blueprint on how your App is going to look like involving the marking schemes. You can add levels/stages to your app but that is totally optional.

Understanding Repl And CLI

What is Repl?

A "Repl" Repl.it is an interactive coding platform that lets you write code and host apps. It also has many educational features built-in, making it great for teachers and learners too. Additionally, we can also share projects through various ways. Read more about it here.

What is CLI?

A command-line interface (CLI) processes commands to a computer program in the form of lines of text. The program which handles the interface is called a command-line interpreter or command-line processor. Today, many users rely upon graphical user interfaces and menu-driven interactions. However, some programming and maintenance tasks may not have a graphical user interface and may still use a command line.

Let's start with the coding

Importing Packages :

This is one of the most essential commands, for creation of our projects. We import packages - readline-sync and chalk

1. readline-sync : It tries to let your script have a conversation with the user via a console, even when the input/output stream is redirected .

2. chalk : Package that is used for styling the format of text and allows us to create our own themes in the project, basically it beautifies our project. It helps to customize the color of the output of the command-line output. It helps to improve the quality of the output by providing several color options like for warning message red color and many more.

We import these packages by using command -

var readLineSync=require("readline-sync");
var chalk=require("chalk");

Taking input from the user :

1. Next, we can take userName as input from the user in order to display their name.
2. We input userName by using the readline-sync package and display its output(with enhancing their colors a bit by using the chalk package) with the help of console.log() to the console.
3. You can also display the rules of the game in the output(optional).

var userName=readLineSync.question("Hello! Enter your name :\n->");
console.log(chalk.black.bgRed.bold("\n\t\t\t\tWelcome ")+chalk.black.bgRed.bold(userName)+chalk.black.bgRed.bold(" To 'EXPLORE INDIA QUIZ'\n"));
console.log("RULES : 1)There are going to be 10 questions\n\t\t2)Each correct answer will give you 1 point\n\t\t3)There is no negative marking :)\n")
console.log(chalk.rgb(15, 100, 204).inverse("\t\t\t***********So lets start with the quiz!***********\n"))

Note : console.log() is a function used to print output to the console.

Introducing the List Of Questions :

Here, we will first define a variable named questions (you can give names to the variable according to your liking) which will be an Array of Objects, in which our list of questions and answers would be included.

What is an Array?

An array is a special variable, which can hold more than one value at a time and you can access the values by referring to an index number

Example :

const cars = ["Saab", "Volvo", "BMW"];

What is an Object?

An object is a collection of properties, and a property is an association between a name(or key) and a value

Example :

let person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

Below is an example, which shows initialization of various questions and answers, to be asked in the quiz : (Code Snippet)

var questions = [{
  question:"1) What is the capital city of India?\nA)Mumbai\nB)Gandhinagar\nC)Delhi\n(Choose one of the above)\n-->",
  answer:"C"
},{
  question:"2) What is the currency of India?\nA)Yen\nB)Rupee\nC)Peso\n(Choose one of the above)\n-->",
  answer:"B"
},{
  question:"3) Delhi is located along what river?\nA)River Ganga\nB)River Yamuna\nC)River Brahmaputra\n(Choose one of the above)\n-->",
  answer:"B"
}]

Note : Here '\n' is used to take to the next line.

Defining a Function :

-We need to define a function to check if the answer provided by the user is same as the actual answer and conditions will be given inside the function.

-To define a function, we use the keyword function, followed by the name of the functions, followed by the parameters to be passed in it. For eg : Here we define a function named 'play', and we pass the question and answer from 'questions' as its parameters. We output the respective question to the user and check their answer to our pre-defined answer.

Code Snippet :

function play(question,answer){
  var userAnswer = readLineSync.question(question);
  if(userAnswer.toLowerCase() === answer.toLowerCase()){
    console.log(chalk.green("\nYou're right! Congrats you gain 1 point:)"));
    score=score+1;
  }
  else{
    console.log(chalk.red("\nYou're wrong! OOPS:("));
  }
  console.log(chalk.yellow("Your current score is : "+score));
  console.log(chalk.grey.bold("\n------------------------\n"));

}

A loop to access all the questions of questions:

1. Now, we run a for loop, in order to access every object of the questions and then use function play() to check the user's answers. Additionally, we introduce a variable score, which can keep a check on the total score of the user.
2. Initialize the score to 0.

Code Snippet :

var score=0;
for(var i=0;i<questions.length;i=i+1){
   var currentQuestion=questions[i];
   play(currentQuestion.question,currentQuestion.answer)
 }

Note : questions.length() is used to get the number of objects present in the questions list, we defined earlier.

You can similarly make the list of the highscorers to display the highscore using the same approach.

Our quiz is completed now, you can press the Run command on the top to play the quiz by yourself and can also share it with your friends.

Share the Quiz URL with your friends :

• You need to add Add ?embed=1&output=1 in the URL of your project to share the Quiz. This is what most of us forget, even I did this mistake and shared the wrong URL.

• For eg : Initial URL - https://repl.it/@your-username/Project-name#index.js

  URL to share - https://repl.it/@your-username/Project-name?embed=1&output=1#index.js.

Now you are good to go!

Conclusion :

If you have followed this article till here first of all thank you for sticking by and I'm sure you will be able to create the Quiz successfully. If you faced any difficulties, you can always refer to my code . Also if you want to play my version of the Quiz , you can do it. I'll surely come up with more projects till then enjoy coding :)

If you liked this tutorial(blog), share it with your friends and help them learn and do leave the comments below on how you liked the blog.

Also! Stay tuned for more such amazing blogs in the future.