Quiz/game.js at master · maulikaluthra/Quiz · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
const question = document.getElementById("question");
const choices = Array.from(document.getElementsByClassName("choice-text"));
const progressBar = document.getElementById('progress');
const scoreText = document.getElementById('score');
const progressBarFull = document.getElementById('progress-bar-full');
const loader = document.getElementById('loader');
const game = document.getElementById('game');

let currentQuestion = {};
let acceptingAnswer = false;
let score = 0;
let questionCounter = 0;
let availableQuestions = [];

let questions = [
{
    question: "Inside which HTML element do we put the JavaScript??",
    choice1: "<script>",
    choice2: "<javascript>",
    choice3: "<js>",
    choice4: "<scripting>",
    answer: 1
  },
  {
    question:
      "What is the correct syntax for referring to an external script called 'xxx.js'?",
    choice1: "<script href='xxx.js'>",
    choice2: "<script name='xxx.js'>",
    choice3: "<script src='xxx.js'>",
    choice4: "<script file='xxx.js'>",
    answer: 3
  },
  {
    question: " How do you write 'Hello World' in an alert box?",
    choice1: "msgBox('Hello World');",
    choice2: "alertBox('Hello World');",
    choice3: "msg('Hello World');",
    choice4: "alert('Hello World');",
    answer: 4
  }
  ];

// fetch("questions.json")
//   .then(res => {
//     return res.json();
//   })
//   .then(loadedQuestions => {
//     console.log(loadedQuestions);
//     questions = loadedQuestions;
//     startGame();
//   })
//   .catch(err => {
//     console.error(err);
//   });


//CONSTANTS

const corect_bonus = 10;
const max_questions = 3;

startGame = () =>{
	questionCounter = 0;
	score = 0;
	availableQuestions = [ ...questions];
	getNewQuestion();

	game.classList.remove("hidden");
	loader.classList.add("hidden");

};

getNewQuestion = () => {
	if (availableQuestions.length === 0 || questionCounter >= max_questions) {
    //go to the end page
    localStorage.setItem("mostRecentScore", score);
    return window.location.assign("end.html");
  	}
	questionCounter++;
	progressBar.innerText = `Question ${questionCounter}/${max_questions}`;
	//Update the progress bar
	progressBarFull.style.width = `${ (questionCounter/ max_questions ) * 100 }% `;
	const questionIndex = Math.floor(Math.random() * availableQuestions.length);
	currentQuestion = availableQuestions[questionIndex];
	question.innerText = currentQuestion.question;

	choices.forEach ( choice => {
		const number = choice.dataset['number'];
		choice.innerText = currentQuestion['choice' + number];
	});

	availableQuestions.splice(questionIndex, 1);
	acceptingAnswer = true;

};

choices.forEach ( choice => {
	choice.addEventListener("click", e => {
		if(!acceptingAnswer) return;

		acceptingAnswer = false;
		const choiceSelected = e.target;
		const selectedAnswer = choiceSelected.dataset['number'];
		let classToApply = 'incorrect';
		if (selectedAnswer == currentQuestion.answer) {
			classToApply = 'correct';
			incrementScore(corect_bonus);
		}
		choiceSelected.parentElement.classList.add(classToApply);
		setTimeout(() => {
        	choiceSelected.parentElement.classList.remove(classToApply);
        	getNewQuestion();
    	}, 1000);

	});
});

	incrementScore = num => {
		score+=num;
		scoreText.innerText = score;
	};

startGame();