Skip to content

Commit

Permalink
Merge pull request #72 from avanimathur/New
Browse files Browse the repository at this point in the history
Adding Rules To The Quiz
  • Loading branch information
Akanchha112 authored Jan 21, 2024
2 parents f1f7685 + 33c2494 commit 34de4c0
Show file tree
Hide file tree
Showing 12 changed files with 258 additions and 0 deletions.
34 changes: 34 additions & 0 deletions Dark/game.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
9 changes: 9 additions & 0 deletions Dark/game.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
1 change: 1 addition & 0 deletions Dark/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
<h1>Kviz</h1>
<a class="btn" href="game.html">Play</a>
<a class="btn" href="highscore.html">High Scores</a>
<a class="btn" href="rules.html">Rules</a>
</div>
</div>
</div></div>
Expand Down
38 changes: 38 additions & 0 deletions Dark/rules.css
Original file line number Diff line number Diff line change
@@ -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;
}
27 changes: 27 additions & 0 deletions Dark/rules.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Quiz Rules</title>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="rules.css" />
</head>
<body>
<h1>Quiz Rules</h1>
<ol class="rules-list">
<li>The game consists of 10 questions!</li>
<li>You get 15 seconds to answer each question; a timer is displayed to show the time left for each question.</li>
<li>Speed Bonus If You Answer Quickly</li>
<ul>
<li>You will earn +10 points for providing a correct answer within the first 5 seconds.</li>
<li>If you give a correct answer after the initial 5 seconds but within 10 seconds, you get +5 points.</li>
<li>Answers given correctly after 10 seconds will still be rewarded with +2 points.</li>
</ul>

<li>There is no negative marking for a wrong answer.</li>
</ol>
<a class="btn" href="index.html" id="goHomeBtn">Go Home</a>
</body>
</html>
20 changes: 20 additions & 0 deletions Dark/rules.js
Original file line number Diff line number Diff line change
@@ -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);
}
});
33 changes: 33 additions & 0 deletions Light/game.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
9 changes: 9 additions & 0 deletions Light/game.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
1 change: 1 addition & 0 deletions Light/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
<h1>Kviz</h1>
<a class="btn" href="game.html">Play</a>
<a class="btn" href="highscore.html">High Scores</a>
<a class="btn" href="rules.html">Rules</a>
</div>
</div>
</body>
Expand Down
38 changes: 38 additions & 0 deletions Light/rules.css
Original file line number Diff line number Diff line change
@@ -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;
}
28 changes: 28 additions & 0 deletions Light/rules.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Quiz Rules</title>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="rules.css" />
</head>
<body>
<h1>Quiz Rules</h1>
<ol class="rules-list">
<li>The game consists of 10 questions!</li>
<li>You get 15 seconds to answer each question; a timer is displayed to show the time left for each question.</li>
<li>Speed Bonus If You Answer Quickly</li>
<ul>
<li>You will earn +10 points for providing a correct answer within the first 5 seconds.</li>
<li>If you give a correct answer after the initial 5 seconds but within 10 seconds, you get +5 points.</li>
<li>Answers given correctly after 10 seconds will still be rewarded with +2 points.</li>
</ul>

<li>There is no negative marking for a wrong answer.</li>
</ol>
<h2>ALL THE BEST!</h2>
<a class="btn" href="index.html" id="goHomeBtn">Go Home</a>
</body>
</html>
20 changes: 20 additions & 0 deletions Light/rules.js
Original file line number Diff line number Diff line change
@@ -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);
}
});

0 comments on commit 34de4c0

Please sign in to comment.