Abkürzen von Listen?

Hallo, ich kenne mich noch nicht gut aus mit programmieren aber ich habe versucht mit js ein Spiel auf einer Webseite zu erstellen (eine Art Länder raten spiel) aber für das Spiel brauche ich eine Liste mit möglichen Lösungen, allerdings wird diese bei allen Ländern ziemlich lang und wenn ich noch mehr Spielmodi mit einbringen möchte wird sie noch viel länger, gibt es da Möglichkeiten dies zu kürzen oder so? (Passende APIs oder so habe ich nicht gefunden)

hier ein kleiner Ausschnitt aus der aktuellen Liste (Beispiel mit zwei Ländern):

{
                                country: "Germany",
                                hint: "The country is located in central Europe and known for its beer and castles",
                                hint2: '<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/01/Flag_of_West_Germany%3B_Flag_of_Germany_%281990%E2%80%931996%29.svg/300px-Flag_of_West_Germany%3B_Flag_of_Germany_%281990%E2%80%931996%29.svg.png" alt="The country is known for being the birthplace of the automobile industry">',
                                country_de: "Deutschland",
                                hint_de: "Das Land befindet sich in Mitteleuropa und ist bekannt für sein Bier und Burgen",
                                hint2_de: '<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/01/Flag_of_West_Germany%3B_Flag_of_Germany_%281990%E2%80%931996%29.svg/300px-Flag_of_West_Germany%3B_Flag_of_Germany_%281990%E2%80%931996%29.svg.png" alt="Das Land ist bekannt als Geburtsort der Automobilindustrie">'
                     },
                     {
                                country: "France",
                                hint: "The country is located in Western Europe and known for its wine, fashion, and cuisine",
                                hint2: '<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/Flag_of_France_%281794%E2%80%931815%2C_1830%E2%80%931974%2C_2020%E2%80%93present%29.svg/300px-Flag_of_France_%281794%E2%80%931815%2C_1830%E2%80%931974%2C_2020%E2%80%93present%29.svg.png" alt="The country is home to the famous landmark, the Eiffel Tower">',
                                country_de: "Frankreich",
                                hint_de: "Das Land befindet sich in Westeuropa und ist bekannt für seinen Wein, Mode und Küche",
                                hint2_de: '<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bc/Flag_of_France_%281794%E2%80%931815%2C_1830%E2%80%931974%2C_2020%E2%80%93present%29.svg/300px-Flag_of_France_%281794%E2%80%931815%2C_1830%E2%80%931974%2C_2020%E2%80%93present%29.svg.png" alt="Das Land ist Heimat des berühmten Wahrzeichens, dem Eiffelturm">'
                     },

Answer 1

[regex9]

1) Die Daten würde ich in eine JSON-Datei auslagern. Für den Produktiveinsatz kann sie komprimiert werden.

2) Wenn der Tipp immer das gleiche Muster hat, brauchst du dir nur die variablen Daten im JSON merken.

The country is located in ? and known for its ? and ?

Du kannst sie später dynamisch einfügen:

const specials = data.hint1.join(" and ");
const hint = `The country is located in ${data.location} and known for its ${specials}`;

In meinen Snippets nutze ich das Format, was ich unter Punkt 4 vorstelle.

3) Bei den Bildern brauchst du ebenso nur die URL und den alternativen Text. Das HTML drumherum kann später dynamisch generiert werden.

const image = document.createElement("img");
const imageData = data[language].hint2;
image.alt = imageData.alt;
image.src = imageData.src;

4) Folgendermaßen würde ich vermutlich so eine Struktur aufbauen:

{
  "en": {
    "country": "Germany",
    "location": "Central Europe"
    "hint1": [ "beer", "castles" ],
    "hint2": {
      "alt": "..."
      "src": "..."
    }
  }
  "de": {
    /* ... */
}

So und so wird es dennoch irgendwann unweigerlich lang.

Man könnte zwar überlegen, ob man die Übersetzungen von einem Third-Party-Tool einholt, allerdings hast du damit auch unschöne Abhängigkeiten (der Dienst muss zuverlässig erreichbar sein, Anfragen sollten nicht extrem lang dauern, Übersetzungen sind womöglich nicht immer passend). Wenn, würde ich das nur einmal zur Entwicklungszeit anstoßen. Du bräuchtest also ein Skript, welches dein JSON um Übersetzungen vervollständigt.

Alternativ zu dem JSON kannst du die Daten auch in einer Datenbank abspeichern. Das vereinfacht die Wartung etwas. Zur Laufzeit lässt sich ein JSON zu allen Einträgen bilden, was anschließend an den Browser geschickt werden kann, wo deine JavaScript-Anwendung damit weiterarbeitet. Dafür müsstest du dir allerdings eine Serveranwendung bauen oder einen Dienstleister wie Firebase nutzen.

Comments

[Luna93136]

Dankeschön, das ist genau das was ich gesucht habe! Jetzt weiß ich aber leider nicht wie ich ein zufälliges country herausnehmen kann wenn en und de so getrennt sind, vorher ging es einfach mit:

function getRandomCountry() {
      return countries[Math.floor(Math.random() * countries.length)];
    }

[Luna93136]

@Luna93136

Gut irgendwie funktioniert überhaupt nichts mehr und anscheinend sollen ":" falsch sein, das ist wirklich schwerer als gedacht..

[regex9]

@Luna93136

Dann ist deine Struktur falsch. Oben ist nur ein einzelner Eintrag abgebildet. Dein JSON-Array würde so aussehen:

[
  {
    "en": { /* ... */ },
    "de": { /* ... */ }
  },
  {
    "en": { /* ... */ },
    "de": { /* ... */ },
  },
  /* etc. ... */
]

[regex9]

@Luna93136

Du kannst einen Validator zur Prüfung nutzen. Dieser validiert, formatiert und behebt auch kleinere Fehler, wie fehlende Anführungszeichen.

Answer 2

[IchMalWiederXY]

Hier eine Anleitung wie man Multiple Choice macht.
JavaScript/Tutorials/Spiele/Multiple-Choice-Quiz – SELFHTML-Wiki

Comments

[Luna93136]

Danke aber wofür?