Eneagram Test

Rolle & Ziel
Du bist Senior-Frontend-Entwickler. Erstelle eine vollständig clientseitige Web-App (reines HTML + CSS + JS) für einen interaktiven Enneagramm-Persönlich­keitstest, kompatibel mit Joomla 5 / YOOtheme Pro.

Designvorgaben
• Verwende UIKit 3 (CDN) als einziges UI-Framework – Buttons, Grid, Accordion, Progress.
• Responsive, mobil zuerst.
• Schriftsprache: Deutsch (“Du”-Form), Lesestufe 8, kurze Absätze.
• Klare visuelle Hierarchie (h2/h3, Margins, Hover-Effekte).
• Eigene Styles nur, wenn UIKit kein passendes Utility besitzt.

Funktionsumfang

1. Intro-Screen
   • Dropdown zur Auswahl des Antwortmodus:
   – Forced Choice (je 3 Aussagen)
   – Likert 1 – 5 (Einzelaussagen)
   • Zwei Startbuttons: Kurztest (9 Fragen) / Volltest (150 Aussagen).

2. Frage-Flow
   • Kurztest besteht aus 9 balanced Forced-Choice-Gruppen (siehe Items unten).
   • Volltest: 150 Einzelaussagen, zyklisch 17 pro Typ → per JS zu 50 Forced-Groups gebündelt ODER direkt als Likert.
   • Fragen, Progress-Bar, Vor-/Zurück-/Weiter-Buttons, Abbrechen – neuen Test starten.
   • Radio-Buttons bei Likert; Karten-Labels bei Forced Choice.
   • Gruppen und Aussagen bei jedem Testlauf mischen (shuffle).

3. Scoring-Logik
   • Forced: 1 Punkt für den gewählten Typ.
   • Likert: Skalenwert (1-5) zum Typ addieren.
   • Haupttyp = höchste Punktzahl; Flügel = höhere der beiden Nachbarn.

4. Ergebnis-Screen
   • Zusammenfassung: Haupttyp + stärkster & zweiter Flügel.
   • Kurztext Potenzial/Schwäche aus wingText.
   • 400-Wort-Langbeschreibung aus longText.
   • Accordion mit Prozentverteilung aller neun Typen.
   • PDF-Export-Button (html2canvas + jsPDF).
   • „Nochmal testen“-Button.

Datensätze
itemsShortFC – 9 Gruppen, jeder Typ exakt 3×:
1️⃣ (1, 5, 9) 2️⃣ (2, 6, 7) 3️⃣ (3, 4, 8) … (Siehe vollständige Liste).

wingText – 18 Kombis (1w9, 1w2 … 9w1) je ≤ 30 Wörter, klar lesbar.

longText – 9 HTML-Strings ≥ 400 Wörter (Motivation, Stärken, Schwächen, Tipp).

Technische Details
• Alle Skripte inline im <script>-Block, keine Bundler.
• Nur Browser-APIs; kein Backend, keine Cookies.
• Nutze querySelector Kurz-Alias $.
• Verwende shuffle() für Randomisierung.
• Achte auf geschlossene Tags, keine globalen Leaks.

Lieferobjekt
Ein einziges HTML-Dokument – lauffertig durch Copy-&-Paste in Joomla-Modul „Eigenen Code“.

Bonus (optional)
• Keyboard-Navigation (←/→ für Vor/Zurück).
• Lokalisierbare Texte via Objekt-Literal.

Bitte ausgeben: vollständigen HTML-Quellcode inkl. Styles, Skript, Item-Arrays, Textobjekte.