Skip to content

Commit

Permalink
Background music
Browse files Browse the repository at this point in the history
  • Loading branch information
hars-21 committed Jan 16, 2024
1 parent 7758ccb commit 9374510
Show file tree
Hide file tree
Showing 18 changed files with 151 additions and 97 deletions.
Binary file added .DS_Store
Binary file not shown.
5 changes: 3 additions & 2 deletions Dark/end.html
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ <h1 id="finalScore"></h1>
<a class="btn" href="../Light/end.html">Change Theme</a>
</div>
<div class="socials">
<a href="#" onclick="shareOnFacebook()" style="font-size: 3rem;">
<a href="#" onclick="shareOnFacebook()" style="font-size: 3rem">
<svg
xmlns="http://www.w3.org/2000/svg"
height="16"
Expand All @@ -45,7 +45,7 @@ <h1 id="finalScore"></h1>
/>
</svg>
</a>
<a href="#" onclick="shareOnTwitter()"
<a href="#" onclick="shareOnTwitter()"
><svg
xmlns="http://www.w3.org/2000/svg"
height="16"
Expand All @@ -60,5 +60,6 @@ <h1 id="finalScore"></h1>
</div>
</div>
<script src="end.js"></script>
<script src="../app.js"></script>
</body>
</html>
54 changes: 34 additions & 20 deletions Dark/game.html
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,7 @@
<div id="game" class="justify-center flex-column hidden">
<div id="hud">
<div id="hud-item">
<p id="progressText" class="hud-prefix">
Question
</p>
<p id="progressText" class="hud-prefix">Question</p>
<div id="progressBar">
<div id="progressBarFull"></div>
</div>
Expand All @@ -25,19 +23,16 @@
<div class="timer">
<div class="time_left_txt">Time Left</div>
<div class="timer_sec" id="timer">15</div>
</div>
<div class="time_line"></div>
</div>
<div class="time_line"></div>
</div>
<div id="hud-item">
<p class="hud-prefix">
Score
</p>
<h1 class="hud-main-text" id="score">
0
</h1>
<div id="hud-item">
<p class="hud-prefix">Score</p>
<h1 class="hud-main-text" id="score">0</h1>
</div>
</div>
<h2 id="question1">Question </h2><h2 id="question"></h2>
<h2 id="question1">Question</h2>
<h2 id="question"></h2>
<div class="choice-container">
<p class="choice-prefix">A</p>
<p class="choice-text" data-number="1"></p>
Expand All @@ -57,17 +52,36 @@ <h2 id="question1">Question </h2><h2 id="question"></h2>

<h2 id="display">Correct option :</h2>

<label for="un-mute" class="unmute" onclick="playpause()" id="playpauseBTN">
<img src="http://upload.wikimedia.org/wikipedia/commons/3/3f/Mute_Icon.svg" alt="Mute_Icon.svg" title="Mute icon">
</label>
<label for="un-mute" class="mute" onclick="playpause()" id="playpauseBTN">
<img src="http://upload.wikimedia.org/wikipedia/commons/2/21/Speaker_Icon.svg" alt="Speaker_Icon.svg" title="Unmute/speaker icon">
</label>
<label
for="un-mute"
class="unmute"
onclick="playpause()"
id="playpauseBTN"
>
<img
src="http://upload.wikimedia.org/wikipedia/commons/3/3f/Mute_Icon.svg"
alt="Mute_Icon.svg"
title="Mute icon"
/>
</label>
<label
for="un-mute"
class="mute"
onclick="playpause()"
id="playpauseBTN"
>
<img
src="http://upload.wikimedia.org/wikipedia/commons/2/21/Speaker_Icon.svg"
alt="Speaker_Icon.svg"
title="Unmute/speaker icon"
/>
</label>
<footer>
<button class="next_btn">Next Ques</button>
</footer>
</footer>
</div>
</div>
<script src="game.js"></script>
<script src="../app.js"></script>
</body>
</html>
1 change: 1 addition & 0 deletions Dark/highscore.html
Original file line number Diff line number Diff line change
Expand Up @@ -18,5 +18,6 @@ <h1 id="finalScore">High Scores</h1>
</div>
</div>
<script src="highscore.js"></script>
<script src="../app.js"></script>
</body>
</html>
11 changes: 6 additions & 5 deletions Dark/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -11,12 +11,13 @@
<div class="container">
<div class="container">
<div id="home" class="flex-center flex-column">
<img src="kviz-1 (9).png" style="height: 80px;"/>
<h1>Kviz</h1>
<a class="btn" href="game.html">Play</a>
<a class="btn" href="highscore.html">High Scores</a>
<img src="kviz-1 (9).png" style="height: 80px" />
<h1>Kviz</h1>
<a class="btn" href="game.html">Play</a>
<a class="btn" href="highscore.html">High Scores</a>
</div>
</div>
</div>
</div></div>
<script src="../app.js"></script>
</body>
</html>
5 changes: 3 additions & 2 deletions Light/end.html
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ <h1 id="finalScore"></h1>
<a class="btn" href="../Dark/end.html">Change Theme</a>
</div>
<div class="socials">
<a href="#" onclick="shareOnFacebook()" style="font-size: 3rem;">
<a href="#" onclick="shareOnFacebook()" style="font-size: 3rem">
<svg
xmlns="http://www.w3.org/2000/svg"
height="16"
Expand All @@ -45,7 +45,7 @@ <h1 id="finalScore"></h1>
/>
</svg>
</a>
<a href="#" onclick="shareOnTwitter()"
<a href="#" onclick="shareOnTwitter()"
><svg
xmlns="http://www.w3.org/2000/svg"
height="16"
Expand All @@ -60,5 +60,6 @@ <h1 id="finalScore"></h1>
</div>
</div>
<script src="end.js"></script>
<script src="../app.js"></script>
</body>
</html>
124 changes: 69 additions & 55 deletions Light/game.html
Original file line number Diff line number Diff line change
Expand Up @@ -7,83 +7,97 @@
<title>Game-play</title>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="game.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
/>
</head>
<body>
<div class="container">
<div id="loader"></div>
<div id="game" class="justify-center flex-column hidden">
<div id="hud">
<div id="hud-item">
<p id="progressText" class="hud-prefix">
Question
</p>
<p id="progressText" class="hud-prefix">Question</p>
<div id="progressBar">
<div id="progressBarFull"></div>
</div>
</div>

<div id="hud-item">

<div id="hud-item" class="time">
<div class="timer">
<div class="time_left_txt">Time Left</div>
<div class="timer_sec" id="timer">15</div>
<div id="hud-item" class="time">
<div class="timer">
<div class="time_left_txt">Time Left</div>
<div class="timer_sec" id="timer">15</div>
</div>
<div class="time_line"></div>
</div>
<div id="hud-item">
<p class="hud-prefix">Score</p>
<h1 class="hud-main-text" id="score">0</h1>
</div>
</div>
<div class="time_line"></div>
<h2 id="question1">Question</h2>
<h2 id="question"></h2>
<div class="choice-container">
<p class="choice-prefix">A</p>
<p class="choice-text" data-number="1"></p>
</div>
<div id="hud-item">

<p class="hud-prefix">
Score
</p>
<h1 class="hud-main-text" id="score">
0
</h1>
<div class="choice-container">
<p class="choice-prefix">B</p>
<p class="choice-text" data-number="2"></p>
</div>
<div class="choice-container">
<p class="choice-prefix">C</p>
<p class="choice-text" data-number="3"></p>
</div>
<div class="choice-container">
<p class="choice-prefix">D</p>
<p class="choice-text" data-number="4"></p>
</div>
</div>
<h2 id="question1">Question </h2><h2 id="question"></h2>
<div class="choice-container">
<p class="choice-prefix">A</p>
<p class="choice-text" data-number="1"></p>
</div>
<div class="choice-container">
<p class="choice-prefix">B</p>
<p class="choice-text" data-number="2"></p>
</div>
<div class="choice-container">
<p class="choice-prefix">C</p>
<p class="choice-text" data-number="3"></p>
</div>
<div class="choice-container">
<p class="choice-prefix">D</p>
<p class="choice-text" data-number="4"></p>
</div>

<label for="un-mute" class="unmute" onclick="playpause()" id="playpauseBTN">
<img src="http://upload.wikimedia.org/wikipedia/commons/3/3f/Mute_Icon.svg" alt="Mute_Icon.svg" title="Mute icon">
</label>
<label for="un-mute" class="mute" onclick="playpause()" id="playpauseBTN">
<img src="http://upload.wikimedia.org/wikipedia/commons/2/21/Speaker_Icon.svg" alt="Speaker_Icon.svg" title="Unmute/speaker icon">
</label>
<footer>
<button class="next_btn">Next Ques</button>
</footer>

<label
for="un-mute"
class="unmute"
onclick="playpause()"
id="playpauseBTN"
>
<img
src="http://upload.wikimedia.org/wikipedia/commons/3/3f/Mute_Icon.svg"
alt="Mute_Icon.svg"
title="Mute icon"
/>
</label>
<label
for="un-mute"
class="mute"
onclick="playpause()"
id="playpauseBTN"
>
<img
src="http://upload.wikimedia.org/wikipedia/commons/2/21/Speaker_Icon.svg"
alt="Speaker_Icon.svg"
title="Unmute/speaker icon"
/>
</label>
<footer>
<button class="next_btn">Next Ques</button>
</footer>
</div>
</div>
</div>

<div>
<input type="checkbox" class="checkbox" id="checkbox">
<label for="checkbox" class="label">
<i class="fas fa-moon"></i>
<i class='fas fa-sun'></i>
<div class='ball'>
</label>
<div>
<input type="checkbox" class="checkbox" id="checkbox" />
<label for="checkbox" class="label">
<i class="fas fa-moon"></i>
<i class="fas fa-sun"></i>
<div class="ball"></div>
</label>
</div>
</div>
</div>

<script src="toggle.js"></script>
<script src="game.js"></script>
<script src="../app.js"></script>
</body>
</html>
1 change: 1 addition & 0 deletions Light/highscore.html
Original file line number Diff line number Diff line change
Expand Up @@ -18,5 +18,6 @@ <h1 id="finalScore">High Scores</h1>
</div>
</div>
<script src="highscore.js"></script>
<script src="../app.js"></script>
</body>
</html>
12 changes: 7 additions & 5 deletions Light/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,14 @@
<body>
<div class="container">
<div class="container">
<div id="home" class="flex-center flex-column">
<img src="kviz-1 (8).png" style="height: 80px;"/>
<h1>Kviz</h1>
<a class="btn" href="game.html">Play</a>
<a class="btn" href="highscore.html">High Scores</a>
<div id="home" class="flex-center flex-column">
<img src="kviz-1 (8).png" style="height: 80px" />
<h1>Kviz</h1>
<a class="btn" href="game.html">Play</a>
<a class="btn" href="highscore.html">High Scores</a>
</div>
</div>
</div>
<script src="../app.js"></script>
</body>
</html>
19 changes: 19 additions & 0 deletions app.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
let index = Math.floor(Math.random() * 5) + 1;
let bgMusic = new Audio(`/assets/music_bg/${index}.mp3`);

function changeMusic() {
bgMusic.src = `/assets/music_bg${index}.mp3`;
if (index <= music.length) {
index += 1;
} else {
index = 1;
}
}

window.addEventListener("load", () => {
bgMusic.play();
});

bgMusic.addEventListener("ended", () => {
changeMusic();
});
Binary file added assets/.DS_Store
Binary file not shown.
Binary file added assets/music_bg/.DS_Store
Binary file not shown.
Binary file added assets/music_bg/1.mp3
Binary file not shown.
Binary file added assets/music_bg/2.mp3
Binary file not shown.
Binary file added assets/music_bg/3.mp3
Binary file not shown.
Binary file added assets/music_bg/4.mp3
Binary file not shown.
Binary file added assets/music_bg/5.mp3
Binary file not shown.
16 changes: 8 additions & 8 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -9,16 +9,16 @@
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div id="home" class="flex-center flex-column">
<h1>Kviz</h1>
<div class="flex-row">
<a class="btn" href="/Dark/index.html">Dark Theme</a>
<a class="btn" href="/Light/index.html">Light Theme</a>
</div>
<div class="container">
<div id="home" class="flex-center flex-column">
<h1>Kviz</h1>
<div class="flex-row">
<a class="btn" href="/Dark/index.html">Dark Theme</a>
<a class="btn" href="/Light/index.html">Light Theme</a>
</div>
</div>
</div>

<script src="app.js"></script>
<!-- <script src="toggle.js"></script> -->
</body>
</html>

0 comments on commit 9374510

Please sign in to comment.