From 4400a2c71936f31e1afa489e1f3828d72d5ee5e7 Mon Sep 17 00:00:00 2001 From: Garima Date: Fri, 5 Jan 2024 13:34:39 +0530 Subject: [PATCH 1/2] this is my first commit --- .vscode/settings.json | 3 +++ game.css | 8 +++++++- game.html | 6 ++++-- game.js | 32 ++++++++++++++++++++++++++++---- 4 files changed, 42 insertions(+), 7 deletions(-) create mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..6f3a291 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/game.css b/game.css index d1204ef..788af26 100644 --- a/game.css +++ b/game.css @@ -67,7 +67,13 @@ background-color: #56a5eb; width: 0%; } - +#display{ + border:2px solid black; + border-radius: 5px; + width:100%; + margin-bottom:2px; + display:block; +} /* LOADER */ #loader { border: 1.6rem solid white; diff --git a/game.html b/game.html index 2a63253..0dc11c5 100644 --- a/game.html +++ b/game.html @@ -31,7 +31,7 @@

-

+

Question

A

@@ -48,9 +48,11 @@

D

+

Correct option :

- + +
-

+

Question

A

@@ -54,6 +54,7 @@

D

+

Correct option :

diff --git a/Dark/game.js b/Dark/game.js index 57eca99..59b4048 100644 --- a/Dark/game.js +++ b/Dark/game.js @@ -8,7 +8,7 @@ const game = document.getElementById('game'); const time_line = document.querySelector(".time .time_line"); const timeText = document.querySelector(".timer .time_left_txt"); const timeCount = document.querySelector(".timer .timer_sec"); - +const question1= document.getElementById('question1'); var soundCorrect = new Audio("sounds/correctAns.mp3"); var soundIncorrect = new Audio("sounds/wrongAns.mp3"); @@ -84,6 +84,7 @@ getNewQuestion = () => { return window.location.assign('end.html'); } questionCounter++; + question1.innerText = `Question ${questionCounter}`;//update question number progressText.innerText = `Question ${questionCounter}/${MAX_QUESTIONS}`; //Update the progress bar progressBarFull.style.width = `${(questionCounter / MAX_QUESTIONS) * 100}%`; @@ -129,7 +130,10 @@ choices.forEach((choice) => { soundCorrect.play(); } else { soundIncorrect.play(); + display(currentQuestion.answer); } + setInterval(displaynone,4000); + selectedChoice.parentElement.classList.add(classToApply); setTimeout(() => { @@ -178,7 +182,27 @@ function startTimerLine(time) { } } } +let string; +function display(string) { + let display = document.getElementById('display'); + if (string == 1) { + display.innerText = `Correct option : A`; + } + if (string == 2) { + display.innerText = `Correct option : B`; + } + if (string == 3) { + display.innerText = `Correct option : C`; + } + if (string == 4) { + display.innerText = `Correct option : D`; + } +} +function displaynone() { + let display = document.getElementById('display'); + display.innerText = `Correct option : `; +} incrementScore = (num) => { score += num; scoreText.innerText = score; diff --git a/Light/game.css b/Light/game.css index 0109ee3..e224b79 100644 --- a/Light/game.css +++ b/Light/game.css @@ -82,7 +82,13 @@ background-color: #56a5eb; width: 0%; } - +#display{ + border:2px solid black; + border-radius: 5px; + width:100%; + margin-bottom:2px; + display:block; +} /* LOADER */ #loader { border: 1.6rem solid white; diff --git a/Light/game.html b/Light/game.html index 2a63253..84e49cf 100644 --- a/Light/game.html +++ b/Light/game.html @@ -31,7 +31,7 @@

-

+

Question

A

diff --git a/Light/game.js b/Light/game.js index 57eca99..a9b0677 100644 --- a/Light/game.js +++ b/Light/game.js @@ -8,7 +8,7 @@ const game = document.getElementById('game'); const time_line = document.querySelector(".time .time_line"); const timeText = document.querySelector(".timer .time_left_txt"); const timeCount = document.querySelector(".timer .timer_sec"); - +const question1 = document.getElementById('question1'); var soundCorrect = new Audio("sounds/correctAns.mp3"); var soundIncorrect = new Audio("sounds/wrongAns.mp3"); @@ -84,6 +84,7 @@ getNewQuestion = () => { return window.location.assign('end.html'); } questionCounter++; + question1.innerText = `Question ${questionCounter}`;//update question number progressText.innerText = `Question ${questionCounter}/${MAX_QUESTIONS}`; //Update the progress bar progressBarFull.style.width = `${(questionCounter / MAX_QUESTIONS) * 100}%`; @@ -129,8 +130,9 @@ choices.forEach((choice) => { soundCorrect.play(); } else { soundIncorrect.play(); + display(currentQuestion.answer); } - + setInterval(displaynone,4000); selectedChoice.parentElement.classList.add(classToApply); setTimeout(() => { selectedChoice.parentElement.classList.remove(classToApply); @@ -178,7 +180,27 @@ function startTimerLine(time) { } } } +let string; +function display(string) { + let display = document.getElementById('display'); + if (string == 1) { + display.innerText = `Correct option : A`; + } + if (string == 2) { + display.innerText = `Correct option : B`; + } + if (string == 3) { + display.innerText = `Correct option : C`; + } + if (string == 4) { + display.innerText = `Correct option : D`; + } +} +function displaynone() { + let display = document.getElementById('display'); + display.innerText = `Correct option : `; +} incrementScore = (num) => { score += num; scoreText.innerText = score; diff --git a/game.js b/game.js deleted file mode 100644 index 9f96d69..0000000 --- a/game.js +++ /dev/null @@ -1,144 +0,0 @@ -const question = document.getElementById('question'); -const choices = Array.from(document.getElementsByClassName('choice-text')); -const progressText = document.getElementById('progressText'); -const scoreText = document.getElementById('score'); -const progressBarFull = document.getElementById('progressBarFull'); -const loader = document.getElementById('loader'); -const game = document.getElementById('game'); -const question1 = document.getElementById('question1'); -var soundCorrect = new Audio("sounds/correctAns.mp3"); -var soundIncorrect = new Audio("sounds/wrongAns.mp3"); - -let currentQuestion = {}; -let acceptingAnswers = false; -let score = 0; -let questionCounter = 0; -let availableQuesions = []; -let questions = []; - -fetch( - 'https://opentdb.com/api.php?amount=10&category=17&difficulty=easy&type=multiple' -) - .then((res) => { - return res.json(); - }) - .then((loadedQuestions) => { - questions = loadedQuestions.results.map((loadedQuestion) => { - const formattedQuestion = { - question:loadedQuestion.question, - }; - - const answerChoices = [...loadedQuestion.incorrect_answers]; - formattedQuestion.answer = Math.floor(Math.random() * 4) + 1; - answerChoices.splice( - formattedQuestion.answer - 1, - 0, - loadedQuestion.correct_answer - ); - - answerChoices.forEach((choice, index) => { - formattedQuestion['choice' + (index + 1)] = choice; - }); - - return formattedQuestion; - }); - - startGame(); - }) - .catch((err) => { - console.error(err); - }); - -//CONSTANTS -const CORRECT_BONUS = 10; -const MAX_QUESTIONS = 10; - -startGame = () => { - questionCounter = 0; - score = 0; - availableQuesions = [...questions]; - getNewQuestion(); - game.classList.remove('hidden'); - loader.classList.add('hidden'); -}; - -getNewQuestion = () => { - if (availableQuesions.length === 0 || questionCounter >= MAX_QUESTIONS) { - localStorage.setItem('mostRecentScore', score); - //go to the end page - return window.location.assign('end.html'); - } - questionCounter++; - question1.innerText = `Question ${questionCounter}`;//update question number - progressText.innerText = `Question ${questionCounter}/${MAX_QUESTIONS}`; - //Update the progress bar - progressBarFull.style.width = `${(questionCounter / MAX_QUESTIONS) * 100}%`; - - const questionIndex = Math.floor(Math.random() * availableQuesions.length); - currentQuestion = availableQuesions[questionIndex]; - question.innerHTML = currentQuestion.question; - - choices.forEach((choice) => { - const number = choice.dataset['number']; - choice.innerHTML = currentQuestion['choice' + number]; - }); - - availableQuesions.splice(questionIndex, 1); - acceptingAnswers = true; -}; - -choices.forEach((choice) => { - choice.addEventListener('click', (e) => { - if (!acceptingAnswers) return; - - acceptingAnswers = false; - const selectedChoice = e.target; - const selectedAnswer = selectedChoice.dataset['number']; - - const classToApply = - selectedAnswer == currentQuestion.answer ? 'correct' : 'incorrect'; - - if (classToApply === 'correct') { - incrementScore(CORRECT_BONUS); - soundCorrect.play(); - - }else { - soundIncorrect.play(); - display(currentQuestion.answer); - - } - setInterval(displaynone,4000); - selectedChoice.parentElement.classList.add(classToApply); - - - setTimeout(() => { - selectedChoice.parentElement.classList.remove(classToApply); - getNewQuestion(); - }, 1000); - }); -}); -let string; -function display(string) { - let display = document.getElementById('display'); - if (string == 1) { - display.innerText = `Correct option : A`; - } - if (string == 2) { - display.innerText = `Correct option : B`; - } - if (string == 3) { - display.innerText = `Correct option : C`; - } - if (string == 4) { - display.innerText = `Correct option : D`; - } - -} -function displaynone(){ - let display = document.getElementById('display'); - display.innerText = `Correct option : `; -} -incrementScore = (num) => { - score += num; - scoreText.innerText = score; -};