Making your own Command Line Interface(CLI) App using Javascript [Part-2]
Hello World,
This is part 2 of the blog where we are going to make our own CLI app using Javascript.
In this blog, we are going to cover the following procedures below:
- Display the questions and options to the user to answer the questions.
- Declare a score variable to keep track of the total correct answer.
- Creating a function to iterate through questions one by one.
- Displaying the question and the following options of that question and check whether the particular answer the user selected is correct or not.
- When the user is done playing with the quiz, the command line will display the total score with a message.
Part 5:- Display the questions and options to the user to answer the questions.
var questionSet = [
{
question: '1) Which of the following country won Football world Cup maximum times?',
options: ["Germany", "Italy", "Argentina", "Brazil"],
answer: "Brazil"
},
{
question: "2) Who got FIFA Best Player 2019 Award?",
options: ["Neymar", "L.Messi", "C.Ronaldo", "Luka Modric"],
answer: "L.Messi"
},
{
question: "3) When was the first official international football match was played?",
options: [1929, 1872, 1902, 1870],
answer: 1872
},
{
question: "4) How many countries played at the World Cup 2014 tournament?",
options: [36, 32, 28, 30],
answer: 32
},
{
question: "5) Which team was awarded the FIFA Fair Play Award at the World Cup 2018 tournament?",
options: ["England", "Spain", "Japan", "Croatia"],
answer: "Spain"
}
]
Here, we have declared a variable called questionSet where we are storing the questions, options, and the exact answer of the particular question. We are storing the data in form of objects.
Part 6:- Declare a score variable to keep track of the total correct answer
var score = 0;
Here, we are declaring a variable called score to keep track of the total correct answers.
Part 7:- Creating a function to iterate through questions one by one.
function level(questionSet) {
for(var i=0;i<questionSet.length;i++) {
var currentQuestion = questionSet[i];
play(currentQuestion.question, currentQuestion.options, currentQuestion.answer);
}
}
We have created a function called level`` where we are passingquestionSet``` as a parameter.
In this function, we are looping through the questionSet and we are accessing the question, options and answer of each question.
We are using for loops to iterate through each object of questionSet.
Inside the for loop, we are declaring a variable called currentQuestion because here we are accessing through each object of questionSet. So for each question, we can ask the user whether the answer is correct or not.
We are using another function called play() where we are passing the currentQuestion's question, options and answer in that function.
We are going to explain about that function in the later step.
For now, keep that in mind that we are asking the user the questions, options and based on that it will check whether the answer is correct or not.
Part 8:- Displaying the question and the following options of that question and check whether the particular answer the user selected is correct or not.
function play(question, options, answer) {
var index = readlineSync.keyInSelect(options, question);
var userAnswer = options[index];
if(userAnswer === answer) {
score = score + 1;
console.log('Correct Answer');
} else if (userAnswer === undefined) {
console.log('You have skipped a question ');
else {
console.log('Wrong Answer');
}
}
We have declared a function called play() where we are passing the question, options and answer parameters.
Those parameters are coming from the previous function called level where we have discussed on the previous step.
In this function, we are getting each question and the following options from the parameter.
Here, to display the questions in MCQ format, I have used keyInSelect function from the readline-sync package/library that we have imported at the beginning of the program.
var index = readlineSync.keyInSelect(options, question);
var userAnswer = options[index];
Here, we are declaring a variable called index, where we are using readline-sync's keyInSelect function where we are passing the options and question in parameter.
So in command line, it will display the options first and then the actual question.
[1] 1929
[2] 1872
[3] 1902
[4] 1870
[0] CANCEL
1) When was the first official international football match was played? [1...4 / 0]:
Something like that.
the first line of the code, it is expecting the index of options where the user gives input.
In the next line, we are declaring a new variable called userAnswer where we are storing the answer of the user input based on the index that the user chooses.
if(userAnswer === answer) {
score = score + 1;
console.log('Correct Answer');
} else if (userAnswer === undefined) {
console.log('You have skipped a question ');
} else {
console.log('Wrong Answer');
}
When the user chooses the answer, we are using an if-else statement to check whether the answer is correct or not.
If the userInput's answer is equal to the answer that we defined in the questionSet, then the command line will display the "Correct Answer'' message and incrementing the score by 1.
or else if it is wrong then,
The command line will display the "Wrong Answer" message.
or else if he press '0' or something else, then
The command line will display the "You have skipped the question" message.
Part 9:- When the user is done playing with the quiz, the command line will display the total score with a message.
console.log('Congrats, your score is: " + score);
Here, when the user is done playing with the quiz, we are displaying the total score on the questions where the user answered correctly.
That's it, you have made your very own CLI app. Hope you understood the procedures that I wanted to convey here in this blog.
This blog will help you to create any CLI app from scratch and you can create your own CLI app by going through my blog.
Thank you so much for reading my blog. I hope this blog is helpful for you all. If you have any feedback about the blog, do let me know in the comments below. It will help and motivate me to write better blogs in the coming future.
I will be back with another blog on some other topic that I come across in my journey of learning web development.
See you soon :)
P.S:- I have made my own version of the CLI quiz. It is a multi-level quiz that consists of two levels. You will be able to move to Level-2 only if you clear Level-1. Hope you enjoy my own version of CLI quiz. Hope you like it.
The link is down below: