diff --git a/Dark/game.css b/Dark/game.css index 07fc936..0f60cd8 100644 --- a/Dark/game.css +++ b/Dark/game.css @@ -85,20 +85,7 @@ background-color: #56a5eb; width: 0%; } -#display{ - border:2px solid black; - border-radius: 5px; - width:100%; - margin-bottom:2px; - display:block; -} -#display{ - border:2px solid black; - border-radius: 5px; - width:100%; - margin-bottom:2px; - display:block; -} + /* LOADER */ #loader { border: 1.6rem solid white; @@ -231,7 +218,7 @@ input#un-mute:checked ~ .mute img { height: 50px; width: 50px; margin-top: 50px; - margin-left:1009px; + right: 0; border-style: groove; border-color: rgb(9, 9, 54); border-radius: 50%; @@ -245,7 +232,41 @@ input#un-mute:checked ~ .mute img { border-radius: 50%; border-style: groove; border-color: rgb(9, 9, 54); - margin-left: 1009px; + right: 0; height: 50px; width: 50px; } + +@keyframes fadeInOut { + 0% { opacity: 1; transform: scale(1); } + 50% { opacity: 1; transform: scale(1.5); } + 100% { opacity: 0; transform: scale(2); } +} + +.points-display { + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + font-size: 8rem; + color: green; + font-weight: bold; + z-index: 9999; + animation: fadeInOut 1s ease-out; +} + +.choice-container { + position: relative; + +} + +.choice-container .points-display { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + font-size: 9rem; + font-weight: bold; + z-index: 1; + animation: fadeInOut 1s ease-out; +} \ No newline at end of file diff --git a/Dark/game.html b/Dark/game.html index 2893388..5c4f5a8 100644 --- a/Dark/game.html +++ b/Dark/game.html @@ -32,7 +32,10 @@

0

-

Question

+ + + +

A

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

+

Correct option :

+ + diff --git a/Dark/game.js b/Dark/game.js index 2a81b0e..f8834c9 100644 --- a/Dark/game.js +++ b/Dark/game.js @@ -9,9 +9,6 @@ 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"); var myMusic = new Audio("sounds/gametheme.mp3"); @@ -85,7 +82,6 @@ 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}%`; @@ -141,10 +137,7 @@ choices.forEach((choice) => { soundCorrect.play(); } else { soundIncorrect.play(); - display(currentQuestion.answer); } - setInterval(displaynone,4000); - selectedChoice.parentElement.classList.add(classToApply); setTimeout(() => { @@ -201,30 +194,19 @@ 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; + + const pointsDisplay = document.createElement('div'); + pointsDisplay.classList.add('points-display'); + pointsDisplay.innerText = `+${num}`; + document.body.appendChild(pointsDisplay); + + setTimeout(() => { + pointsDisplay.remove(); + }, 1000); }; var count=0; diff --git a/Dark/index.html b/Dark/index.html index 1b109aa..a5168ae 100644 --- a/Dark/index.html +++ b/Dark/index.html @@ -12,11 +12,13 @@
- -

Kviz

- Play - High Scores -
+ + +

Kviz

+ Play + High Scores + Rules +
diff --git a/Dark/rules.css b/Dark/rules.css new file mode 100644 index 0000000..8a32f76 --- /dev/null +++ b/Dark/rules.css @@ -0,0 +1,38 @@ +body { + font-size: 25px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100vh; +} + +.rules-list { + font-size: 18px; + text-align: left; + margin-top: 60px; +} + +.rules-list li { + margin-bottom: 15px; +} + +.btn { + font-size: 1.8rem; + padding: 1rem 0; + margin-top: 40px; + width: 20rem; + text-align: center; + border: 0.1rem solid #56a5eb; + margin-bottom: 1rem; + text-decoration: none; + color: #56a5eb; + background-color: rgb(235, 244, 253); + } + + .btn:hover { + cursor: pointer; + box-shadow: 0 0.4rem 1.4rem 0 rgba(86, 185, 235, 0.5); + transform: translateY(-0.1rem); + transition: transform 150ms; + } diff --git a/Dark/rules.html b/Dark/rules.html new file mode 100644 index 0000000..2e5582b --- /dev/null +++ b/Dark/rules.html @@ -0,0 +1,28 @@ + + + + + + + Quiz Rules + + + + +

Quiz Rules

+
    +
  1. The game consists of 10 questions!
    2. +
  2. You get 15 seconds to answer each question; a timer is displayed to show the time left for each question.
    3. +
  3. Speed Bonus If You Answer Quickly
    4. + + +
  4. There is no negative marking for a wrong answer.
    5. +
+

ALL THE BEST!

+ Go Home + + diff --git a/Dark/rules.js b/Dark/rules.js new file mode 100644 index 0000000..86f96a5 --- /dev/null +++ b/Dark/rules.js @@ -0,0 +1,20 @@ +function openRulesPage() { + window.location.href = 'rules.html'; +} + +function goHome() { + window.location.href = 'index.html'; +} + +document.addEventListener('DOMContentLoaded', function () { + const rulesBtn = document.getElementById('rulesBtn'); + const goHomeBtn = document.getElementById('goHomeBtn'); + + if (rulesBtn) { + rulesBtn.addEventListener('click', openRulesPage); + } + + if (goHomeBtn) { + goHomeBtn.addEventListener('click', goHome); + } +}); diff --git a/Light/game.css b/Light/game.css index 740f553..6aada51 100644 --- a/Light/game.css +++ b/Light/game.css @@ -82,13 +82,7 @@ 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; @@ -224,7 +218,7 @@ input#un-mute:checked ~ .mute img { height: 50px; width: 50px; margin-top: 50px; - margin-left:1009px; + right: 0; border-style: groove; border-color: rgb(9, 9, 54); border-radius: 50%; @@ -238,7 +232,40 @@ input#un-mute:checked ~ .mute img { border-radius: 50%; border-style: groove; border-color: rgb(9, 9, 54); - margin-left: 1009px; + right: 0; height: 50px; width: 50px; } + +@keyframes fadeInOut { + 0% { opacity: 1; transform: scale(1); } + 50% { opacity: 1; transform: scale(1.5); } + 100% { opacity: 0; transform: scale(2); } +} + +.points-display { + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + font-size: 8rem; + color: green; + font-weight: bold; + z-index: 9999; + animation: fadeInOut 1s ease-out; +} + +.choice-container { + position: relative; +} + +.choice-container .points-display { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + font-size: 8rem; + font-weight: bold; + z-index: 1; + animation: fadeInOut 1s ease-out; +} \ No newline at end of file diff --git a/Light/game.html b/Light/game.html index 1ded413..09e6629 100644 --- a/Light/game.html +++ b/Light/game.html @@ -8,10 +8,13 @@ + + +
@@ -25,6 +28,7 @@
+
@@ -37,6 +41,7 @@

Score

0

+

Question

@@ -44,6 +49,7 @@

A

+

B

@@ -98,6 +104,45 @@

+ +
+

+ Score +

+

+ 0 +

+
+ +

+
+

A

+

+
+
+

B

+

+
+
+

C

+

+
+
+

D

+

+
+ + + + + + diff --git a/Light/game.js b/Light/game.js index bd637d4..f8834c9 100644 --- a/Light/game.js +++ b/Light/game.js @@ -9,9 +9,6 @@ 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"); var myMusic = new Audio("sounds/gametheme.mp3"); @@ -85,7 +82,6 @@ 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}%`; @@ -141,9 +137,8 @@ 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); @@ -199,30 +194,19 @@ 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; + + const pointsDisplay = document.createElement('div'); + pointsDisplay.classList.add('points-display'); + pointsDisplay.innerText = `+${num}`; + document.body.appendChild(pointsDisplay); + + setTimeout(() => { + pointsDisplay.remove(); + }, 1000); }; var count=0; diff --git a/Light/index.html b/Light/index.html index c113cce..6e24d71 100644 --- a/Light/index.html +++ b/Light/index.html @@ -11,12 +11,15 @@
-
- -

Kviz

- Play - High Scores -
+ + +
+ +

Kviz

+ Play + High Scores + Rules +
diff --git a/Light/rules.css b/Light/rules.css new file mode 100644 index 0000000..c6d4bec --- /dev/null +++ b/Light/rules.css @@ -0,0 +1,38 @@ +body { + font-size: 25px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100vh; +} + +.rules-list { + font-size: 18px; + text-align: left; + margin-top: 60px; +} + +.rules-list li { + margin-bottom: 15px; +} + +.btn { + font-size: 1.8rem; + padding: 1rem 0; + margin-top: 40px; + width: 20rem; + text-align: center; + border: 0.1rem solid #56a5eb; + margin-bottom: 1rem; + text-decoration: none; + color: #56a5eb; + background-color: rgb(235, 244, 253); + } + + .btn:hover { + cursor: pointer; + box-shadow: 0 0.4rem 1.4rem 0 rgba(86, 185, 235, 0.5); + transform: translateY(-0.1rem); + transition: transform 150ms; + } \ No newline at end of file diff --git a/Light/rules.html b/Light/rules.html new file mode 100644 index 0000000..2e5582b --- /dev/null +++ b/Light/rules.html @@ -0,0 +1,28 @@ + + + + + + + Quiz Rules + + + + +

Quiz Rules

+
    +
  1. The game consists of 10 questions!
    2. +
  2. You get 15 seconds to answer each question; a timer is displayed to show the time left for each question.
    3. +
  3. Speed Bonus If You Answer Quickly
    4. + + +
  4. There is no negative marking for a wrong answer.
    5. +
+

ALL THE BEST!

+ Go Home + + diff --git a/Light/rules.js b/Light/rules.js new file mode 100644 index 0000000..86f96a5 --- /dev/null +++ b/Light/rules.js @@ -0,0 +1,20 @@ +function openRulesPage() { + window.location.href = 'rules.html'; +} + +function goHome() { + window.location.href = 'index.html'; +} + +document.addEventListener('DOMContentLoaded', function () { + const rulesBtn = document.getElementById('rulesBtn'); + const goHomeBtn = document.getElementById('goHomeBtn'); + + if (rulesBtn) { + rulesBtn.addEventListener('click', openRulesPage); + } + + if (goHomeBtn) { + goHomeBtn.addEventListener('click', goHome); + } +}); diff --git a/SPINNER.js b/SPINNER.js new file mode 100644 index 0000000..9197c0c --- /dev/null +++ b/SPINNER.js @@ -0,0 +1,18 @@ + +function showSpinner() { + var spinner = document.getElementById("spinner"); + if (spinner) { + spinner.style.display = "block"; + } + } + + // Function to hide the spinner + function hideSpinner() { + var spinner = document.getElementById("spinner"); + if (spinner) { + spinner.style.display = "none"; + } + } + showSpinner(); + setTimeout(hideSpinner, 3000); + \ No newline at end of file diff --git a/index,js b/index,js new file mode 100644 index 0000000..8525852 --- /dev/null +++ b/index,js @@ -0,0 +1,18 @@ + +const scores = [ + { date: "2024-01-06", score: 80 }, + { date: "2024-01-05", score: 75 }, + // Add more scores as needed +]; + +// Function to display score history +function displayScoreHistory() { + const scoreList = document.getElementById("score-list"); + scoreList.innerHTML = ''; // Clear existing list + + scores.forEach((entry) => { + const listItem = document.createElement("li"); + listItem.textContent = `Date: ${entry.date}, Score: ${entry.score}%`; + scoreList.appendChild(listItem); + }); +} \ No newline at end of file diff --git a/index.html b/index.html index af41e7d..fb400eb 100644 --- a/index.html +++ b/index.html @@ -1,24 +1,77 @@ - + - - - - - Kviz: A quiz app - - - - -
-
-

Kviz

-
- Dark Theme - Light Theme -
+ + + + + + Kviz: A quiz app + + + + + +
+ - - - + + + + + + + + + + + +
+

Score History

+
    +
    + + + + + + + + + + + + + + + + + diff --git a/style.css b/style.css index 9095f9e..e139867 100644 --- a/style.css +++ b/style.css @@ -214,3 +214,18 @@ input { input::placeholder { color: #aaa; } +.spinner { + border: 4px solid rgba(0, 0, 0, 0.1); + border-top: 4px solid #3498db; + border-radius: 50%; + width: 30px; + height: 30px; + animation: spin 1s linear infinite; + display: none; /* Initially hidden */ +} + +@keyframes spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } +} +