Building A F.R.I.E.N.D.S Quiz Using JavaScript

In this tutorial, we will learn to create our first ever project : Creating a Quiz using only JavaScript with Repl.it

Without further wait, Let us begin :

Prerequisites :-

1. Create an account on Repl.it.
2. Ready the Questions of your quiz, the options and the correct answer of the questions.
3. Make a Blueprint, involving the marking schemes and the structures of levels to be included. (optional)

Understanding Repl -

A “Repl” at Repl.it is an interactive programming environment. We can create a workspace in most popular programming languages, where we are given a container on a virtual machine where our code can run. It allows us to write code and build apps and websites using a browser. Additionally, We can also share projects through various ways.

Importing Packages

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

1. readline-sync - Allows our console to have a ‘conversation’ with the users. Basically, We use it to take input from users. The Input can be of any data-type eg- String, integer etc.
2. chalk package is used for the beautification of our project. By the help of chalk we can introduce various text-colors, background-colors and styles to our text.

We import these packages by using command -

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

Taking Input from the user -

Next, we take Username as Input from our user, in order to display their name and make the Quiz more interactive. We input username by using the readline-sync package and Display it(with enhancing their colors a bit by the chalk package) we installed in the previous step, as shown below -

var Username = myVar.question(chalk.red("Hi! What is your name?\n"));
console.log(chalk.cyanBright("Welcome " + Username));

Note - console.log() is used to print output to the console.

Introducing the Question Bank -

Now, we define a variable named questionBank which includes various JavaScript objects, in which our questions and answers would be included.

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

Below is an example, which shows the initialization of various Questions and Answers, to be asked in the quiz -

var questionBank = [{
  question : "Which of the actors on Friends unfortunately decides 
to whiten his teeth\n before going out on a first date with a girl\n
he's had a crush on for some time?\n",
  answer : "Ross"
},
{
  question : "Who was Ross's second wife?\n",
  answer : "Emily"
},
{
  question : "Who is Gunther's roommate?\n",
  answer : "Jasmine"
}]

Note - Here ‘\n’ is used to change line, that will be shown on the user’s screen.

Defining a Function, to check user-provided Answer to the Actual Answer -

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 ‘checkAnswer’, and we pass the question and answer from questionBank as its parameters. We output the respective question to the user and check their answer to our pre-defined answer.

function checkAnswer(question , answer){
  var userAnswer = myVar.question(chalk.cyanBright(question));
    if(userAnswer == answer){
    console.log(chalk.green("Correct."));
    score ++;
    }

    else{
    console.log(chalk.red("Wrong."));
    }
}

A loop to access all the questions of questionBank -

Now, we run a for loop, in order to access every object of the questionBank and then use function checkAnswer() to check the user’s answers. Additionally, we introduce a variable score, which can keep a check on the total score of the user.

var score = 0;
for(var i = 0; i<questionBank.length; i++){
    current = questionBank[i];
    checkAnswer(current.question,current.answer);
  }
  console.log(chalk.yellowBright("Total = " + score + " out of " 
+ questionBank.length));

Note -questionBank.length is used to get the number of objects present in the questionBank list, we defined earlier.

Our quiz is now complete! Press the Run command to play the quiz by yourself.

Sharing the Quiz with your Friends -

Add ?embed=1&output=1 in the URL of your project to share the Quiz. For eg- Initial URL - https://repl.it/@your-username/Project-name URL to share - https://repl.it/@your-username/Project-name?embed=1&output=1

What’s Next?

If you have followed this article till here, I’m sure you were 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 here.

If you liked this tutorial, share it with your friends and help them learn!

Also! Stay tuned for more of these informative tutorials. :)