Zufallsgenerator HTML Baustein für unterschiedliche Sprachen

Question

Meine Umfrage soll in Englisch als auch Deutsch verfügbar sein.
Die Umfrage beinhaltet eine Randomisierung mit Gruppe 1 und Gruppe 2.

Leider kann ich den HTML code nur in einer Sprache anzeigen lassen (also leider wird hier nicht nach Sprache unterschieden).

Gibt es eine Möglichkeit, dass die Seite mit dem HTML code in der passenden Sprache angezeigt wird, so dass die gewählte Sprache auch auf dieser Seite übereinstimmt?

Mein Code:

<h2>Neues elektrisches Auto eines <span id="country-adjective"></span> Automobilherstellers:</h2>
<div style="text-align: center; margin: 3em 0;">
  <div style="display: inline-block;">
    <img src="Bild1.png" alt="" width="250" height="150">
    <img src="Bild2.png" alt="" width="250" height="150">
  </div>
  <div style="display: inline-block;">
    <img src="Bild4.png" alt="" width="250" height="150">
    <img src="Bild5.jpg" alt="" width="250" height="150">
  </div>
</div>
<div style="text-align: center; margin: 3em 0;">
  <img src="%random%" style="max-width: 15%;" alt="">
</div>
<h2 >Spezifikationen:</h2>
<ul id="specifications" style="font-size: smaller;">
  <li><strong>Herkunftsland:</strong> <span id="country-of-origin"></span></li>
  <li><strong>Antriebsstrang:</strong>
    <ul>
      <li>Fortschrittliche Elektromotortechnologie für verbesserte Effizienz.</li>
      <li>Energierückgewinnungssystem für erweiterte Reichweite.</li>
    </ul>
  </li>
  <li><strong>Abgasanlage:</strong>
    <ul>
      <li>Umweltfreundliches Design ohne Emissionen.</li>
      <li>Integrierte Geräuschreduzierung für ein ruhiges Fahrerlebnis.</li>
    </ul>
  </li>
  <li><strong>Bremssystem:</strong>
    <ul>
      <li>Regeneratives Bremssystem zur Energierückgewinnung.</li>
      <li>Fortschrittliches ABS-System für präzises und effizientes Bremsen.</li>
    </ul>
  </li>
  <li><strong>Sicherheitsmerkmale:</strong>
    <ul>
      <li>Umfassendes Airbag-System, einschließlich Front- und Seitenairbags.</li>
      <li>Fortschrittliche Fahrerassistenzsysteme (ADAS) für erhöhte Sicherheit.</li>
      <li>Kollisionsvermeidung und Notbremsungstechnologie.</li>
    </ul>
  </li>
  <li><strong>Interieurkomfort und -technologie:</strong>
    <ul>
      <li>Ergonomisches Kabinendesign mit nachhaltigen Materialien.</li>
      <li>Infotainmentsystem mit Touchscreen-Display, das die neuesten Konnektivitätsoptionen bietet.</li>
      <li>Schlüsselloses Einsteigen mit modernem Sicherheits- und Alarmsystem.</li>
    </ul>
  </li>
  <li><strong>Räder und Aufhängung:</strong>
    <ul>
      <li>Leichtmetallräder für verbesserte Effizienz.</li>
      <li>Fortschrittliches Aufhängungssystem für eine sanfte und komfortable Fahrt.</li>
    </ul>
  </li>
</ul>
<script>
  // Get a reference to the country-of-origin element
  const countryOfOriginElement = document.getElementById('country-of-origin');
  const countryAdjectiveElement = document.getElementById('country-adjective');

  // Define the mapping of flag images to country names
  const flagToCountry = {
    'Germany.png': 'Deutschland',
    'China.png': 'China'
    // Weitere Zuordnungen hinzufügen, falls benötigt
  };

  // Get the randomly selected flag image
  const randomFlagImage = document.querySelector('[src="%random%"]');

  // Get the corresponding country name based on the flag image src
  const countryName = flagToCountry[randomFlagImage.src.split('/').pop()];

  // Update the text content of the country-of-origin element
  countryOfOriginElement.textContent = countryName;
  if (countryName === 'Deutschland') {
    countryAdjectiveElement.textContent = 'deutschen';
  } else if (countryName === 'China') {
    countryAdjectiveElement.textContent = 'chinesischen';
  }
</script>

Answer 1

Am einfachsten legen sie den HTML-Code nicht direkt unter "Fragebogen zusammenstellen" in den Fragebogen, sondern speichern ihn als "Text" im Fragenkatalog ab. Dort können Sie dann einfach eine Übersetzung hinterlegen.