Gioco bandiere by @Luigi98 - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

References

animation-delayDetermina il tempo prima dell'avvio di una animazione in secondi (es. 1s) o millisecondi (ms)
heightDetermina l'altezza di un elemento HTML in pixel
getDefinisce un metodo di invio di dati al server
<base>Specifica l'URL di base per tutti gli URL relativi all'interno della pagina.
methodDetermina il metodo di invio dei dati di un form al server
autocompleteIndica l'opzione di auto completamento delle aree di input e/o di un form

Users

Log in to search for users

Explore

Find inspiration

Aurion Agency | Digital Alchemy

Scheda: immagine a sinistra + tab

image gattino siamese

Dashboard Palestra - MVP

AoIT Dashboard 2024 v1

FORM PROF DA PROVARE

Estratti di mitologie greche

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

<!DOCTYPE html>
<html>
<head>
  <title>Indovina la nazione</title>
  <style>
    img {
      width: 200px;
      height: auto;
      margin: 10px;
    }
  </style>
</head>
<body>
  <h1>Indovina la nazione</h1>
  
  <div id="game-container">
    <button onclick="avviaGioco()">Avvia gioco</button>
    <div id="countdown">5:00</div>
    <img id="bandiera" />
    <input type="text" id="guess-input" placeholder="Inserisci la nazione" />
    <button id="bottone" onclick="controllaRisposta()">Invia</button>
    <p id="risultato"></p>
    <p id="punteggio"></p>
  </div>
  
  <script>
    var bandiere = [
      {nazione:	"Italia"	,immagine:	"	https://translationsandmore.altervista.org/wp-content/uploads/2023/04/	it	.png"},
{nazione:	"Andorra"	,immagine:	"	https://translationsandmore.altervista.org/wp-content/uploads/2023/04/	ad	.png"},
{nazione:	"Emirati Arabi"	,immagine:	"	https://translationsandmore.altervista.org/wp-content/uploads/2023/04/	ae	.png"},
{nazione:	"Afghanistan"	,immagine:	"	https://translationsandmore.altervista.org/wp-content/uploads/2023/04/	af	.png"},
{nazione:	"Antigua e Barbuda"	,immagine:	"	https://translationsandmore.altervista.org/wp-content/uploads/2023/04/	ag	.png"},
{nazione:	"Anguilla"	,immagine:	"	https://translationsandmore.altervista.org/wp-content/uploads/2023/04/	ai	.png"},




      

          

       
      
      
      
      
   
      


      // Aggiungi altre bandiere qui
    ];
    var punteggio = 0;
    var countdownInterval;
    var countdownTimer = 300; // 5 minuti in secondi
    
    function avviaGioco() {
      document.getElementById("risultato").innerHTML = "";
      punteggio = 0;
      countdownTimer = 300;
      
      // Avvia il countdown
      countdownInterval = setInterval(updateCountdown, 1000);
      
      // Avvia il gioco
      generaBandieraCasuale();
      document.getElementById("countdown").innerHTML = "5:00";
    }
    
    function generaBandieraCasuale() {
      var indiceCasuale = Math.floor(Math.random() * bandiere.length);
      var bandieraCasuale = bandiere[indiceCasuale];
      document.getElementById("bandiera").src = bandieraCasuale.immagine;
      document.getElementById("bandiera").alt = bandieraCasuale.nazione;
    }
    
    function updateCountdown() {
      countdownTimer--;
      
      var minutes = Math.floor(countdownTimer / 60);
      var seconds = countdownTimer % 60;
      
      var countdownDisplay = document.getElementById("countdown");
      countdownDisplay.innerHTML = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
      
      if (countdownTimer <= 0) {
        clearInterval(countdownInterval);
        countdownDisplay.innerHTML = "Tempo scaduto!";
        document.getElementById("guess-input").disabled = true;
        document.getElementById("risultato").innerHTML = "Gioco terminato! Punteggio finale: " + punteggio;
      }
    }
    
    function controllaRisposta() {
      var input = document.getElementById("guess-input").value.toLowerCase();
      var risultato = document.getElementById("risultato");
      var punteggioDisplay = document.getElementById("punteggio");
      var bandieraCorrente = document.getElementById("bandiera").alt.toLowerCase();
      
      if (input === bandieraCorrente) {
        punteggio++;
        risultato.innerHTML = "Risposta corretta! Hai guadagnato 1 punto.";
      } else {
        risultato.innerHTML = "Risposta errata! Non hai guadagnato punti.";
      }
      
      punteggioDisplay.innerHTML = "Punteggio: " + punteggio;
      
      // Pulisce l'input
      document.getElementById("guess-input").value = "";
      
      // Genera una nuova bandiera casuale
      generaBandieraCasuale();
    }
    document.getElementById("bottone").addEventListener("click", controllaRisposta);
    document.addEventListener("keypress", function(event) {
  if (event.key === "Enter") {
    controllaRisposta();
  }
});
  </script>
</body>
</html>

*{ }