Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Display of Score on The Screen #70

Closed
wants to merge 3 commits into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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;
}
26 changes: 26 additions & 0 deletions Dark/rules.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
<!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>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;
}
26 changes: 26 additions & 0 deletions Light/rules.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
<!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>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 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);
}
});