From e44e05bea83bf4e0b7d33f43d2f033f8d1f3497a Mon Sep 17 00:00:00 2001 From: avanimathur Date: Wed, 17 Jan 2024 17:07:03 +0530 Subject: [PATCH 1/7] Changes --- Dark/game.css | 33 +++++++++++++++++++++++++++++++++ Dark/game.js | 9 +++++++++ Dark/index.html | 1 + Dark/rules.css | 38 ++++++++++++++++++++++++++++++++++++++ Dark/rules.html | 26 ++++++++++++++++++++++++++ Dark/rules.js | 20 ++++++++++++++++++++ Light/game.css | 33 +++++++++++++++++++++++++++++++++ Light/game.js | 9 +++++++++ Light/index.html | 1 + Light/rules.css | 38 ++++++++++++++++++++++++++++++++++++++ Light/rules.html | 26 ++++++++++++++++++++++++++ Light/rules.js | 20 ++++++++++++++++++++ 12 files changed, 254 insertions(+) create mode 100644 Dark/rules.css create mode 100644 Dark/rules.html create mode 100644 Dark/rules.js create mode 100644 Light/rules.css create mode 100644 Light/rules.html create mode 100644 Light/rules.js diff --git a/Dark/game.css b/Dark/game.css index add8ce6..21e0fd1 100644 --- a/Dark/game.css +++ b/Dark/game.css @@ -236,3 +236,36 @@ input#un-mute:checked ~ .mute img { 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/Dark/game.js b/Dark/game.js index 7aa1724..f8834c9 100644 --- a/Dark/game.js +++ b/Dark/game.js @@ -198,6 +198,15 @@ function startTimerLine(time) { 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 d86b004..b206aa2 100644 --- a/Dark/index.html +++ b/Dark/index.html @@ -15,6 +15,7 @@

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..78836f2 --- /dev/null +++ b/Dark/rules.html @@ -0,0 +1,26 @@ + + + + + + + Quiz Rules + + + + +

Quiz Rules

+
    +
  1. You get 15 seconds to answer each question; a timer is displayed to show the time left for each question.
    2. +
  2. Speed Bonus If You Answer Quickly
    3. + + +
  3. There is no negative marking for a wrong answer.
    4. +
+ 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 f376a8d..8e25957 100644 --- a/Light/game.css +++ b/Light/game.css @@ -236,3 +236,36 @@ input#un-mute:checked ~ .mute img { 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.js b/Light/game.js index 7aa1724..f8834c9 100644 --- a/Light/game.js +++ b/Light/game.js @@ -198,6 +198,15 @@ function startTimerLine(time) { 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 695979e..8ae9bc0 100644 --- a/Light/index.html +++ b/Light/index.html @@ -15,6 +15,7 @@

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..78836f2 --- /dev/null +++ b/Light/rules.html @@ -0,0 +1,26 @@ + + + + + + + Quiz Rules + + + + +

Quiz Rules

+
    +
  1. You get 15 seconds to answer each question; a timer is displayed to show the time left for each question.
    2. +
  2. Speed Bonus If You Answer Quickly
    3. + + +
  3. There is no negative marking for a wrong answer.
    4. +
+ 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); + } +}); From e00ce85e3feb3f7563642faa0430e8649ead2918 Mon Sep 17 00:00:00 2001 From: avanimathur Date: Wed, 17 Jan 2024 17:10:54 +0530 Subject: [PATCH 2/7] Adding Rules To The Quiz --- Dark/game.css | 1 + 1 file changed, 1 insertion(+) diff --git a/Dark/game.css b/Dark/game.css index 21e0fd1..ed78cd0 100644 --- a/Dark/game.css +++ b/Dark/game.css @@ -257,6 +257,7 @@ input#un-mute:checked ~ .mute img { .choice-container { position: relative; + } .choice-container .points-display { From 8e28da0c81ec37feff413faed70ea05f78556ac0 Mon Sep 17 00:00:00 2001 From: avanimathur Date: Wed, 17 Jan 2024 17:12:29 +0530 Subject: [PATCH 3/7] Adding Rules To The Quiz --- Dark/game.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Dark/game.css b/Dark/game.css index ed78cd0..15f47f0 100644 --- a/Dark/game.css +++ b/Dark/game.css @@ -257,7 +257,7 @@ input#un-mute:checked ~ .mute img { .choice-container { position: relative; - + } .choice-container .points-display { @@ -265,7 +265,7 @@ input#un-mute:checked ~ .mute img { top: 50%; left: 50%; transform: translate(-50%, -50%); - font-size: 8rem; + font-size: 9rem; font-weight: bold; z-index: 1; animation: fadeInOut 1s ease-out; From f5c78b1678f10a74c28151d15b35cd101c711575 Mon Sep 17 00:00:00 2001 From: avanimathur Date: Wed, 17 Jan 2024 17:14:45 +0530 Subject: [PATCH 4/7] Display Score on Screen --- Dark/rules.css | 38 -------------------------------------- Dark/rules.html | 26 -------------------------- Dark/rules.js | 20 -------------------- Light/rules.css | 38 -------------------------------------- Light/rules.html | 26 -------------------------- Light/rules.js | 20 -------------------- 6 files changed, 168 deletions(-) delete mode 100644 Dark/rules.css delete mode 100644 Dark/rules.html delete mode 100644 Dark/rules.js delete mode 100644 Light/rules.css delete mode 100644 Light/rules.html delete mode 100644 Light/rules.js diff --git a/Dark/rules.css b/Dark/rules.css deleted file mode 100644 index 8a32f76..0000000 --- a/Dark/rules.css +++ /dev/null @@ -1,38 +0,0 @@ -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 deleted file mode 100644 index 78836f2..0000000 --- a/Dark/rules.html +++ /dev/null @@ -1,26 +0,0 @@ - - - - - - - Quiz Rules - - - - -

Quiz Rules

-
    -
  1. You get 15 seconds to answer each question; a timer is displayed to show the time left for each question.
    2. -
  2. Speed Bonus If You Answer Quickly
    3. -
      -
    • You will earn +10 points for providing a correct answer within the first 5 seconds.
      • -
    • If you give a correct answer after the initial 5 seconds but within 10 seconds, you get +5 points.
      • -
    • Answers given correctly after 10 seconds will still be rewarded with +2 points.
      • -
    - -
  3. There is no negative marking for a wrong answer.
    4. -
- Go Home - - diff --git a/Dark/rules.js b/Dark/rules.js deleted file mode 100644 index 86f96a5..0000000 --- a/Dark/rules.js +++ /dev/null @@ -1,20 +0,0 @@ -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/rules.css b/Light/rules.css deleted file mode 100644 index c6d4bec..0000000 --- a/Light/rules.css +++ /dev/null @@ -1,38 +0,0 @@ -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 deleted file mode 100644 index 78836f2..0000000 --- a/Light/rules.html +++ /dev/null @@ -1,26 +0,0 @@ - - - - - - - Quiz Rules - - - - -

Quiz Rules

-
    -
  1. You get 15 seconds to answer each question; a timer is displayed to show the time left for each question.
    2. -
  2. Speed Bonus If You Answer Quickly
    3. -
      -
    • You will earn +10 points for providing a correct answer within the first 5 seconds.
      • -
    • If you give a correct answer after the initial 5 seconds but within 10 seconds, you get +5 points.
      • -
    • Answers given correctly after 10 seconds will still be rewarded with +2 points.
      • -
    - -
  3. There is no negative marking for a wrong answer.
    4. -
- Go Home - - diff --git a/Light/rules.js b/Light/rules.js deleted file mode 100644 index 86f96a5..0000000 --- a/Light/rules.js +++ /dev/null @@ -1,20 +0,0 @@ -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); - } -}); From a2080cf384e977a7fc45d29c4286777eccd82265 Mon Sep 17 00:00:00 2001 From: avanimathur Date: Wed, 17 Jan 2024 17:16:54 +0530 Subject: [PATCH 5/7] Adding Rules --- Dark/rules.css | 38 ++++++++++++++++++++++++++++++++++++++ Dark/rules.html | 26 ++++++++++++++++++++++++++ Dark/rules.js | 20 ++++++++++++++++++++ Light/rules.css | 38 ++++++++++++++++++++++++++++++++++++++ Light/rules.html | 26 ++++++++++++++++++++++++++ Light/rules.js | 20 ++++++++++++++++++++ 6 files changed, 168 insertions(+) create mode 100644 Dark/rules.css create mode 100644 Dark/rules.html create mode 100644 Dark/rules.js create mode 100644 Light/rules.css create mode 100644 Light/rules.html create mode 100644 Light/rules.js 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..78836f2 --- /dev/null +++ b/Dark/rules.html @@ -0,0 +1,26 @@ + + + + + + + Quiz Rules + + + + +

Quiz Rules

+
    +
  1. You get 15 seconds to answer each question; a timer is displayed to show the time left for each question.
    2. +
  2. Speed Bonus If You Answer Quickly
    3. +
      +
    • You will earn +10 points for providing a correct answer within the first 5 seconds.
      • +
    • If you give a correct answer after the initial 5 seconds but within 10 seconds, you get +5 points.
      • +
    • Answers given correctly after 10 seconds will still be rewarded with +2 points.
      • +
    + +
  3. There is no negative marking for a wrong answer.
    4. +
+ 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/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..78836f2 --- /dev/null +++ b/Light/rules.html @@ -0,0 +1,26 @@ + + + + + + + Quiz Rules + + + + +

Quiz Rules

+
    +
  1. You get 15 seconds to answer each question; a timer is displayed to show the time left for each question.
    2. +
  2. Speed Bonus If You Answer Quickly
    3. +
      +
    • You will earn +10 points for providing a correct answer within the first 5 seconds.
      • +
    • If you give a correct answer after the initial 5 seconds but within 10 seconds, you get +5 points.
      • +
    • Answers given correctly after 10 seconds will still be rewarded with +2 points.
      • +
    + +
  3. There is no negative marking for a wrong answer.
    4. +
+ 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); + } +}); From 4924a9b37b48f2bba771df9fbdffe639fe21f789 Mon Sep 17 00:00:00 2001 From: avanimathur Date: Wed, 17 Jan 2024 17:25:17 +0530 Subject: [PATCH 6/7] Rules --- Dark/rules.html | 2 ++ Light/rules.html | 2 ++ 2 files changed, 4 insertions(+) diff --git a/Dark/rules.html b/Dark/rules.html index 78836f2..2e5582b 100644 --- a/Dark/rules.html +++ b/Dark/rules.html @@ -11,6 +11,7 @@

Quiz Rules

    +
  1. The game consists of 10 questions!
  2. You get 15 seconds to answer each question; a timer is displayed to show the time left for each question.
  3. Speed Bonus If You Answer Quickly
      4. @@ -21,6 +22,7 @@

      Quiz Rules

    • There is no negative marking for a wrong answer.
+

ALL THE BEST!

Go Home diff --git a/Light/rules.html b/Light/rules.html index 78836f2..2e5582b 100644 --- a/Light/rules.html +++ b/Light/rules.html @@ -11,6 +11,7 @@

Quiz Rules

    +
  1. The game consists of 10 questions!
  2. You get 15 seconds to answer each question; a timer is displayed to show the time left for each question.
  3. Speed Bonus If You Answer Quickly
      4. @@ -21,6 +22,7 @@

      Quiz Rules

    • There is no negative marking for a wrong answer.
+

ALL THE BEST!

Go Home From 33c2494555b910a6ec578f306ebe04c7ae5b2bc2 Mon Sep 17 00:00:00 2001 From: avanimathur Date: Wed, 17 Jan 2024 17:29:47 +0530 Subject: [PATCH 7/7] ruleadd --- Dark/rules.html | 1 - 1 file changed, 1 deletion(-) diff --git a/Dark/rules.html b/Dark/rules.html index 2e5582b..a3eba05 100644 --- a/Dark/rules.html +++ b/Dark/rules.html @@ -22,7 +22,6 @@

Quiz Rules

  • There is no negative marking for a wrong answer.
    • -

    ALL THE BEST!

    Go Home