Merge pull request #54 from PranjaliBhardwaj/main

[Feature]: Added audio off button in light mode too

Light/game.css

@@ -174,4 +174,41 @@ footer{
   box-shadow: 0 0.4rem 1.4rem 0 rgba(86, 185, 235, 0.5);
   transform: translateY(-0.1rem);
   transition: transform 150ms;
-}
+}
+input#un-mute {
+  display: none;
+}
+
+.unmute img {
+  display: none;
+}
+
+input#un-mute:checked ~ .unmute img {
+  display: initial;
+}
+
+input#un-mute:checked ~ .mute img {
+  display: none;
+}
+.mute img {
+  height: 50px;
+  width: 50px;
+  margin-top: 50px;
+  margin-left:1009px;
+  border-style: groove;
+  border-color: rgb(9, 9, 54);
+  border-radius: 50%;
+  padding: 1rem;
+  position: absolute;
+}
+.unmute img {
+  position: absolute;
+  margin-top: 50px;
+  padding: 1rem;
+  border-radius: 50%;
+  border-style: groove;
+  border-color: rgb(9, 9, 54);
+  margin-left: 1009px;
+  height: 50px;
+  width: 50px;
+}

Light/game.html

@@ -54,6 +54,12 @@ <h2 id="question"></h2>
           <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>

Light/game.js

@@ -183,3 +183,22 @@ incrementScore = (num) => {
     score += num;
     scoreText.innerText = score;
 };
+var count=0;
+function muteMe(elem) {
+    elem.muted = true;
+    elem.pause();
+}
+
+var playPauseBTN = document.getElementById('playpauseBTN')
+function playpause(){
+    if(count==0){
+        count==1;
+        Audio.play();
+    }else{
+        count=0;
+        audio.pause();
+        [].slice.call(document.querySelectorAll('audio')).forEach(function(audio) {
+            Audio.muted = true;
+        });
+    }
+}