Wie kann ich Verse zur spontanen Auswahl und Anzeige per JavaScript hervorheben?

oder

, und gib ihnen eine gemeinsame Klasse, z. B. „verse“. Optional kannst du data-Attribute nutzen, um Metadaten (Autor, Kapitel, ID) zu speichern. Beispiel:

Erster Vers…

. Platziere außerdem einen Button, der die spontane Auswahl auslöst, und einen Bereich für Statusmeldungen (z. B. aria-live), damit Bildschirmleser die Auswahl erfahren.

CSS-Hervorhebung

Definiere eine Basisoptik für .verse und eine Hervorhebungs-Klasse wie .highlight. Die Hervorhebung sollte Farbe, Hintergrundfarbe, Rand oder Schatten nutzen; wähle ausreichenden Kontrast für Barrierefreiheit. Ergänze Übergänge (transition) für sanfte Ein-/Ausblendung und optional eine kurze Animation mit @keyframes (z. B. Pulsieren oder Aufleuchten). Beispiel-Eigenschaften: background-color, transform (leichte Skalierung), box-shadow und transition: all 300ms ease.

JavaScript-Logik für spontane Auswahl

Sammle alle Verse-Elemente mit document.querySelectorAll(".verse") und wandle die NodeList in ein Array. Verwende Math.random(), um einen zufälligen Index zu wählen. Entferne die Hervorhebungs-Klasse von zuvor markierten Versen und füge sie dem neu gewählten Vers hinzu. Sorge dafür, dass die Auswahl sichtbar ist (scrollIntoView mit smooth-Option), damit entfernte Verse in den Viewport gebracht werden. Beispielablauf: Button-Klick → zufälligen Index ermitteln → vorherige Hervorhebung entfernen → neue Hervorhebung hinzufügen → scrollIntoView → Statustext aktualisieren.

Animation und Timing

Nutze CSS-Transitions für weiche Effekte und setze optional ein kurzes Timeout, um die Hervorhebung temporär zu zeigen (z. B. 5 Sekunden) und danach zu entfernen. Für wiederholtes spontanes Auswählen kann ein Intervall mit setInterval gestartet/gestoppt werden; achte hier auf sauberes Aufräumen (clearInterval). Wenn mehrere Verse hintereinander hervorgehoben werden sollen, füge kleine Delays ein, damit die Animationen klar wahrnehmbar bleiben.

Zugänglichkeit und Nutzererlebnis

Achte auf ausreichenden Kontrast der Hervorhebung und vermeide ausschließliche Farbkennzeichnung; ergänze z. B. eine sichtbare Kontur oder Symbol. Aktualisiere ein aria-live-Region-Element, damit Nutzer von Screenreadern informiert werden. Ermögliche Tastatursteuerung (Button per Enter/Space) und setze Fokus sinnvoll (z. B. auf den hervorgehobenen Vers), ohne Nutzerkontext unerwartet zu verändern.

Beispiele und Erweiterungen

Du kannst zusätzlich Filter (Autor, Thema) einbauen, dass nur aus einer Teilmenge zufällig gewählt wird. Eine Option für gewichtete Zufallsauswahl erlaubt, häufigere Auswahl bestimmter Verse. Für persistente Markierungen speichere die ID im localStorage.

Mit dieser Struktur erhältst du eine robuste, barrierefreie und optisch ansprechende Umsetzung, bei der per JavaScript zufällig ausgewählte Verse hervorgehoben und angezeigt werden.