Bergamo-Challenge/game.html at main · Smatjoy/Bergamo-Challenge · 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
<!DOCTYPE html>
<html lang="it">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Bergamo Challenge</title>
  <link rel="stylesheet" href="style.css" />
  <link rel="icon" href="./media/Bergamo-Stemma.png" />
</head>

<body>
  <audio id="correctAudio" src="./media/sound/Correct.mp3" preload="auto"></audio>
  <audio id="wrongAudio" src="./media/sound/Wrong.mp3" preload="auto"></audio>
  <audio id="gameOver" src="./media/sound/Super_Mario_Game_Over.mp3" preload="auto"></audio>
  <audio id="win" src="./media/sound/Final_Fantasy_Win.mp3" preload="auto"></audio>

  <div id="game-container">

    <!-- info button -->
    <button id="info-button">i</button>
    <div class="info-container">
      <div class="info-window" id="info-window">
        <p>
          "Bergamo Challenge" è un coinvolgente gioco interattivo che mette alla prova la tua conoscenza della
          pittoresca città di Bergamo. Il gioco presenta una serie di immagini rappresentanti vari luoghi iconici di
          Bergamo, accompagnate da tre opzioni di risposta. La sfida consiste nel riconoscere correttamente il luogo
          raffigurato e selezionare la risposta corrispondente tra le opzioni fornite.
          <br><br> Se la risposta è corretta, il giocatore guadagna due punti e passa al livello successivo.
          Se la risposta è sbagliata, il giocatore perde un punto. Se si arriva a un punteggio negativo, si perde.
        </p>
        <button id="close-button">Chiudi</button>
      </div>
    </div>

    <h1>Bergamo Challenge</h1>
    <p>Testa la Tua Conoscenza della Città</p>
    <p id="informations">Livello: 1 Punteggio: 0</p>


    <img id="game-image" src="./media/livello1.png" alt="Immagine del gioco" />
    <p id="question">Come si chiama questa piazza?</p>
    <div class="options" id="options-container">
      <button onclick="selectOption(0)">Piazza Vecchia</button>
      <button onclick="selectOption(1)">Città Bassa</button>
      <button onclick="selectOption(2)">Viale Vittorio Emanuele II</button>
    </div> <br>
  </div>

  <script src="script.js"></script>
</body>

</html>