web_aat/game_page_2.html at master · shashidhar-bm/web_aat · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Document</title>

  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body >

  <div>
    <audio id = "game-music">
      <source src = "audio/game-music.mp3">
    </audio>
  </div>
  <nav class="navbar ">
    <div class="navbar-header">
      <a class="navbar-brand " href="#">
        <!-- copied -->
        <svg viewBox="0 0 4800 1000">
        <symbol id="s-text">
            <text text-anchor="middle" x="600" y="10%">MEMO-RISE</text>
        </symbol>
        <g class = "g-ants">
            <use xlink:href="#s-text" class="text-copy"></use>
            <use xlink:href="#s-text" class="text-copy"></use>
            <use xlink:href="#s-text" class="text-copy"></use>
            <use xlink:href="#s-text" class="text-copy"></use>
            <use xlink:href="#s-text" class="text-copy"></use>
        </g>
    </svg></a>
    <!-- ------- -->
    </div>
    <div class=" navbar-btn " style="margin-right: 2%;">
      <ul class="nav navbar-nav navbar-right">
        <li class="active " ><a href="home.html" >Home</a></li>
        <li class="active switch-btn" id = "switch-btn" ><a href="#"><label for="game-mode">Game-mode : </label>
          <select name="game-mode" id="game-mode">
            <!-- <option value="medium" class = "medium">Medium</option>  -->
            <option value="difficult" class = "difficult">Difficult</option>
            <option value="easy" class = "easy">Easy</option>
          </select></a></li>
        <li class="active "  ><a href="signup.html">logout </a></li>

      </ul>`
      <ul class="nav navbar-nav navbar-right ">
      </ul>
    </div>
  </nav>

  <div class="container-fluid">
    <p class="guide">Memorize the order of the numbers</p>
    <div class="grid-container">
      <audio id = "correct">
        <source src = "audio/correct-choice-43861.mp3">
    </audio>
    <audio id = "wrong">
      <source src = "audio/wrong-ans.mp3">
  </audio>
    </div>

    <div class = "scoreboard" >
      <audio id = "audioId">
        <source src = "audio/countdown.mp3">
    </audio>
      <p class="timer-note">Countdown</p>
      <p id="timer">0</p>

      <button  data-modal-target="#modal" onClick="window.location.reload();" id = "next-button" class = "btn-design"> <span class="btn-content">New Game</span></button>
      <button  data-modal-target="#modal" onClick="endGame();" id = "end-button" class = "btn-design"> <span class = "btn-content">End game</span></button>

<!-- popup -->
<div id="myModal" class="modal">
  <!-- Modal content -->
  <div class="modal-content">
    <audio id = "game-win">
      <source src = "audio/game_overp.wav">
    </audio>
    <audio id = "game-fail">
      <source src = "audio/game-fail-sound-effect.mp3">
    </audio>
    <div class="modal-header">
      <h3 class = "pop-title">Meaning of Hello!</h3>
  </div>
  <div class="modal-body" style="background-color: aqua;">
      <p>Your Score : <span class = "score">0</span></p>
      <p> Time taken : <span class = "time-taken">0</span></p>
      <p> Accuracy : <span class = "accuracy">0</span></p>
     <button data-modal-target="#modal" id = "next-button"  onClick="window.location.reload();" class = "btn-lg btn-group-lg btn-restart"> <span class="btn-content">Restart</span></button>
     <button data-modal-target="#modal" id = "close-btn" class = "btn-lg btn-group-lg close-btn"> <span class="btn-content">Close</span> </button>
  </div>
  </div>
</div>
    <link rel="stylesheet" href="css/game_style.css">
    <link rel="stylesheet" href="css/bootstrap.css">
    <script>
      let currentScript = document.createElement('script');
          currentScript.src = 'js/game_page.js';
          document.body.appendChild(currentScript);

          let  gameMode = document.getElementById("game-mode");

gameMode.addEventListener('change',function(){

   window.location.href = "index.html";

})
  </script>
</body>
</html>