diff --git a/Dark/game.css b/Dark/game.css index add8ce6..15f47f0 100644 --- a/Dark/game.css +++ b/Dark/game.css @@ -236,3 +236,37 @@ 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: 9rem; + 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..a3eba05 --- /dev/null +++ b/Dark/rules.html @@ -0,0 +1,27 @@ + + + + + + + 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. +
+ 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..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); + } +});