Technologie

Wie kann ich das Bible Widget so konfigurieren, dass es Verse zufällig anzeigt?

Melden
  1. Einführung und Grundprinzip
  2. Vers-Datenquelle vorbereiten
  3. Zufälligen Vers auswählen und anzeigen
  4. Vollständiges Beispiel als HTML mit integriertem Script
  5. Alternative: Externe Bible APIs verwenden
  6. Zusammenfassung

Einführung und Grundprinzip

Wenn Sie ein Bible Widget so einrichten möchten, dass es bei jedem Laden der Seite oder in festen Intervallen zufällig ausgewählte Verse anzeigt, müssen Sie zunächst festlegen, wie die Versdaten verfügbar gemacht werden. Das kann zum Beispiel durch eine interne Liste der Verse in einem Skript geschehen, oder indem Sie eine externe API verwenden, die Verse liefert. Im Kern geht es darum, die Verse als Datenquelle bereitzustellen und mittels JavaScript zufällig einen Eintrag auszuwählen und darzustellen.

Vers-Datenquelle vorbereiten

Zunächst brauchen Sie eine Sammlung von Versen, die Sie zufällig anzeigen möchten. Diese können Sie als Array von Objekten mit Buch, Kapitel, Versnummer und dem Text des Verses speichern. Das sieht zum Beispiel so aus:

const verses = ;

{ book: "Johannes", chapter: 3, verse: 16, text: "Denn also hat Gott die Welt geliebt, dass er seinen eingeborenen Sohn gab..." },

{ book: "Psalmen", chapter: 23, verse: 1, text: "Der Herr ist mein Hirte; mir wird nichts mangeln." },

{ book: "Römer", chapter: 8, verse: 28, text: "Wir wissen aber, dass denen, die Gott lieben, alle Dinge zum Besten dienen." }

Diese Datenstruktur ist flexibel und einfach erweiterbar.

Zufälligen Vers auswählen und anzeigen

Mit JavaScript können Sie aus dem Array per Zufallsauswahl einen Vers nehmen. Dazu nutzen Sie Math.random() kombiniert mit der Array-Länge, um einen Index zu generieren. Anschließend fügen Sie den gewählten Vers in den HTML-Container ein:

function showRandomVerse() { const randomIndex = Math.floor(Math.random() * verses.length); const verse = verses ; const verseElement = document.getElementById("bible-verse"); verseElement.innerHTML = `"${verse.text}" ${verse.book} ${verse.chapter},${verse.verse}`;}

Diese Funktion können Sie beim Laden der Seite oder bei einem Button-Klick ausführen.

Vollständiges Beispiel als HTML mit integriertem Script

Hier folgt ein einfaches Beispiel, wie ein solches Widget als eigenständige Webseite aussehen könnte:

<!DOCTYPE html><html lang="de"><head> <meta charset="UTF-8"> <title>Bibel Widget mit Zufälligen Versen</title> <style> #bible-verse { font-size: 1.2em; background: #f0f8ff; padding: 1em; border-radius: 8px; max-width: 400px; margin: 1em auto; box-shadow: 0 0 6px rgba(0,0,0,0.1); } #new-verse-btn { display: block; margin: 1em auto; padding: 0.5em 1em; font-size: 1em; cursor: pointer; } </style></head><body> <div id="bible-verse">Lade Vers...</div> <button id="new-verse-btn">Neuer Vers</button> <script> const verses = ; function showRandomVerse() { const randomIndex = Math.floor(Math.random() * verses.length); const verse = verses ; const verseElement = document.getElementById("bible-verse"); verseElement.innerHTML =

`"${verse.text}"<br /><em>${verse.book} ${verse.chapter},${verse.verse}</em>`;

}

document.getElementById("new-verse-btn").addEventListener("click", showRandomVerse);

// Vers anzeigen beim Laden der Seite window.onload = showRandomVerse; </script></body></html>

{ book: "Johannes", chapter: 3, verse: 16, text: "Denn also hat Gott die Welt geliebt, dass er seinen eingeborenen Sohn gab, damit alle, die an ihn glauben, nicht verloren werden, sondern das ewige Leben haben." },

{ book: "Psalmen", chapter: 23, verse: 1, text: "Der Herr ist mein Hirte; mir wird nichts mangeln." },

{ book: "Römer", chapter: 8, verse: 28, text: "Wir wissen aber, dass denen, die Gott lieben, alle Dinge zum Besten dienen, denen, die nach dem Vorsatz berufen sind." },

{ book: "Matthäus", chapter: 6, verse: 33, text: "Trachtet zuerst nach dem Reich Gottes und nach seiner Gerechtigkeit, so wird euch das alles zufallen." }

`"${verse.text}"<br /><em>${verse.book} ${verse.chapter},${verse.verse}</em>`;

document.getElementById("new-verse-btn").addEventListener("click", showRandomVerse);

Alternative: Externe Bible APIs verwenden

Wenn Sie keine eigenen Versdaten pflegen möchten, gibt es verschiedene öffentliche Bibel-APIs, die zufällige oder gezielte Verse bereitstellen. Beispiele sind Bible API oder Scripture API. Mit einer solchen API muss per JavaScript eine Fetch-Anfrage an den Endpunkt gestellt werden, der dann den Vers im JSON-Format zurückgibt. Dann können Sie ihn ähnlich wie oben angezeigt einfügen. Dabei ist zu beachten, dass die Nutzung meist einen API-Key erfordert und ein CORS-kompatibler Zugriff implementiert sein muss.

Zusammenfassung

Um Ihr Bible Widget so zu konfigurieren, dass es Verse zufällig anzeigt, benötigen Sie eine Datenquelle der Verse und ein Skript (meist JavaScript), das bei Seitenaufruf oder user-gesteuert einen zufälligen Vers auswählt und ins HTML einfügt. Der einfachste Weg ist, die Verse in einem Array zu hinterlegen und per Math.random() einen Index auszuwählen. Für eine professionellere Lösung können externe Bibel-APIs genutzt und deren Daten dynamisch geladen werden.

0

Kommentare