Con nome bandiera by @Luigi98 - Codewith.it

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

Referenze

<abbr>Inserisce abbreviazioni e acronimi
<map>Inserisce immagini mappa cliccabili in un documento
<hr>Inserisce una linea orizzontale
crossoriginGestisce richieste tra documenti provenienti da origini differenti.
hreflangConsente di dichiarare la lingua del documento collegato.
minImposta il valore numerico o temporale minimo per un elemento input

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Pagina di esempio

Esercitazione Informatica

Navbar Example 4

hotel stella maris

JS Strutture dati e funzioni es1

5/10/24 es. 6 - letterainform

HTML

CSS

JS

terminal console

feedback

add_box Nuovo

cookie Informativa

Informativa privacy e cookies

Utilizziamo cookie o tecnologie per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy. Il rifiuto del consenso può rendere non disponibili alcune funzioni. Leggi di più sull'informativa privacy

Clicca su “Accetta” per acconsentire.

<!DOCTYPE html>
<html>
<head>
  <title>Gioco delle Bandiere</title>
  <script>
    var bandiere = [
      { nome: "Italia", url: "https://translationsandmore.altervista.org/wp-content/uploads/2023/04/it.png	" },
      { nome: "Francia", url: "https://translationsandmore.altervista.org/wp-content/uploads/2023/04/fr.png	" },
      { nome: "Germania", url: "https://translationsandmore.altervista.org/wp-content/uploads/2023/04/de.png	" },
      // Aggiungi altre bandiere con i relativi nomi qui
    ];

    var bandieraCorrente; // Bandiera corrente da indovinare

    function caricaBandieraCasuale() {
      var indiceCasuale = Math.floor(Math.random() * bandiere.length);
      bandieraCorrente = bandiere[indiceCasuale];

      var bandieraElemento = document.getElementById("bandiera");
      bandieraElemento.src = bandieraCorrente.url;
      bandieraElemento.alt = "Bandiera";
      
      // Resetta il testo della risposta precedente
      document.getElementById("risposta").textContent = "";
    }

    function mostraNomeNazione() {
      if (bandieraCorrente) {
        document.getElementById("risposta").textContent = bandieraCorrente.nome;
      }
    }

    function verificaRisposta() {
      var input = document.getElementById("input-nazione").value;
      var rispostaElemento = document.getElementById("risposta");
      if (input.toLowerCase() === bandieraCorrente.nome.toLowerCase()) {
        rispostaElemento.textContent = "Corretto! La nazione è " + bandieraCorrente.nome;
      } else {
        rispostaElemento.textContent = "Sbagliato! Riprova.";
      }
    }
  </script>
</head>
<body>
  <h1>Gioco delle Bandiere</h1>

  <button onclick="caricaBandieraCasuale()">Nuova Bandiera</button>
  <button onclick="mostraNomeNazione()">Mostra Nome Nazione</button>

  <div>
    <img id="bandiera" src="" alt="Bandiera">
    <br>
    <input type="text" id="input-nazione" placeholder="Indovina la nazione">
    <button onclick="verificaRisposta()">Conferma</button>
    <p id="risposta"></p>
  </div>
</body>
</html>

*{ }