Quizmaster

[Don]

	Zusammenfassung	Ein Theme-Komponente, die private Nachrichten mit einem KI-Bot in ein interaktives Quiz-Erlebnis verwandelt.
	Repository	GitHub - VaperinaDEV/discourse-quizmaster: A theme component that transforms private messages with an AI bot into an interactive quiz experience. · GitHub
	War es hilfreich?	> ./support --coffee
	Installationsanleitung	So installierst du ein Theme oder eine Theme-Komponente
	Neu bei Discourse Themes?	Einsteigerleitfaden zur Nutzung von Discourse Themes

Diese Theme-Komponente installieren

Interaktive Quiz-Theme-Komponente

Hallo
Ich habe eine Theme-Komponente erstellt, die private Nachrichten mit einem KI-Bot in ein interaktives Quiz-Erlebnis verwandelt. Die Komponente formatiert Quizfragen automatisch, verarbeitet die Antwortübermittlung, verfolgt den Fortschritt und verwaltet den Quizabschluss mit einer praktischen Dropdown-Leiste im Header für den schnellen Quizstart.

Funktionen

1. Quiz-Start über Dropdown im Header

Ein anpassbarer Dropdown-Button im Seitenheader bietet schnellen Zugriff auf verschiedene Quiztypen:

• Vollständig konfigurierbar über Theme-Einstellungen mithilfe eines Objektschemas
• Mehrsprachige Unterstützung mit i18n-Integration für Beschriftungen, Beschreibungen und Meldungen
• Anpassbare Symbole für jedes Quiz-Schwierigkeitsniveau
• Standardoptionen umfassen: Quiz mit einfacher, normaler, harter und gemischter Schwierigkeit
• Jede Option sendet eine vorkonfigurierte Nachricht an den KI-Bot, um das Quiz zu starten

2. Automatische Formatierung von Quizfragen

Die Komponente erkennt und formatiert Multiple-Choice-Fragen aus den Beiträgen des KI-Bots. Wenn der Bot eine Liste postet, die mit „A)“, „B)“ usw. beginnt, werden diese automatisch in klickbare Quizoptionen mit benutzerdefinierter Gestaltung umgewandelt.

3. Antwortübermittlung mit einem Klick

Benutzer können direkt auf Antwortoptionen (A, B, C, D) klicken, um ihre Antwort einzureichen. Die Komponente:

• Verhindert doppelte Übermittlungen mit einem Ladezustand
• Antwortet automatisch auf den richtigen Beitrag
• Formatiert Antworten konsistent (z. B. „Meine Antwort: A) Optionstext“)
• Bietet Fehlerbehandlung mit Nutzerfeedback

4. Fragen-Zähler

Ein Fortschrittsanzeiger erscheint bei jeder Quizfrage und zeigt:

• Aktuelle Fragennummer im Vergleich zur maximal erlaubten Anzahl
• Anpassbare maximale Fragenanzahl (Standard: 50)
• Nur in den Beiträgen des KI-Bots sichtbar

5. Automatische Quiz-Beendigung

Die Komponente enthält eine intelligente Quiz-Verwaltung:

• Etappen-Checkpoints: Zeigt einen „Quiz beenden“-Button alle 10 Fragen (nach Frage 11, 21, 31 usw.)
• Durchsetzung harter Grenzen: Sendet automatisch eine Beendigungsnachricht, wenn die maximale Fragenanzahl erreicht wird
• Duplikatvermeidung: Verfolgt den Beendigungsstatus, um mehrere Beendigungsbeiträge zu verhindern
• Validierungsprüfungen: Stellt sicher, dass eine Beendigung nur dann erfolgt, wenn es angemessen ist

6. UI-Änderungen

Wenn sich ein Quiz-Gespräch im Gange befindet:

• Entfernt die KI-Wiederholen-/Teilen-Buttons aus Bot-Beiträgen (für Nicht-Admins)
• Entfernt den Antwort-Button aus Bot-Beiträgen in privaten Nachrichten
• Verhindert, dass Quiz-Ersteller ihre eigenen Beiträge löschen (erhält die Quiz-Historie)
• Fügt eine benutzerdefinierte CSS-Body-Klasse is-quiz-chat für die Gestaltung hinzu

Konfiguration

Die Komponente verwendet diese Theme-Einstellungen:

# Quiz-Verhaltens-Einstellungen
quizmaster_username: "DeinBotBenutzername"  # Der Benutzername des KI-Bots
show_for_groups: ""                     # Header-Dropdown für Gruppen anzeigen
quiz_max_questions: 50                  # Maximale Fragenanzahl vor automatischer Beendigung

# Einstellungen für den Header-Button
button_icon: "question-circle"          # Symbol für den Haupt-Quiz-Button

# Dropdown-Quiz-Optionen (Objektschema) max. 4
dropdown_items:
  type: objects
  default: 
    - label_template: quiz_easy_label
      description_template: quiz_easy_description
      icon: star
      message_template: quizmaster_input_easy
    - label_template: quiz_normal_label
      description_template: quiz_normal_description
      icon: star-half-alt
      message_template: quizmaster_input_normal
    - label_template: quiz_hard_label
      description_template: quiz_hard_description
      icon: certificate
      message_template: quizmaster_input_hard
    - label_template: quiz_mixed_label
      description_template: quiz_mixed_description
      icon: random
      message_template: quizmaster_input_mixed
  schema:
    properties:
      label_template:
        type: string
      description_template:
        type: string
      icon:
        type: string
      message_template:
        type: string
svg_icons:
  default: "far-star-half"
  type: list
  list_type: "compact"
  description: "Liste der FontAwesome 6-Symbole, die in dieser Theme-Komponente verwendet werden"

Übersetzungsschlüssel

Füge diese zu den Locale-Dateien deines Themes hinzu, um volle i18n-Unterstützung zu erhalten:

Englisch (en.yml)

en:
  js:
    # Header-Button
    quiz: "Quiz"
    
    # Dropdown-Beschriftungen
    quiz_easy_label: "Easy Quiz"
    quiz_normal_label: "Normal Quiz"
    quiz_hard_label: "Hard Quiz"
    quiz_mixed_label: "Mixed Quiz"
    
    # Dropdown-Beschreibungen
    quiz_easy_description: "Basic questions for beginners"
    quiz_normal_description: "Average difficulty questions"
    quiz_hard_description: "Advanced level challenge"
    quiz_mixed_description: "Random difficulty questions"
    
    # Nachrichtenvorlagen
    quizmaster_input_easy: "Give me an easy quiz question"
    quizmaster_input_normal: "Give me a normal difficulty quiz question"
    quizmaster_input_hard: "Give me a hard quiz question"
    quizmaster_input_mixed: "Give me a mixed difficulty quiz question"
    
    # Quiz-Interaktion
    my_answer: "My answer to the question is:"
    terminate_quiz: "Thanks for the game, I'd like a summary!"
    max_questions_text: "questions (or until my source runs dry). Every 10, you choose: stay or venture on."

Anwendungsfälle

Diese Komponente ist perfekt für:

• Bildungskurse mit KI-Tutoren
• Schulungsbewertungen
• Wissens-tests
• Interaktive Lernerfahrungen
• Gamifizierte Inhaltsverteilung
• Sprachenlernanwendungen
• Vorbereitungskurse auf Zertifizierungen

Die Komponente übernimmt die gesamte Komplexität der Statusverfolgung, Fehlervermeidung und Verwaltung des Quiz-Lebenszyklus automatisch und bietet so ein reibungsloses Erlebnis für sowohl Quiz-Ersteller als auch Teilnehmer. Das Header-Dropdown macht es für Benutzer unglaublich einfach, Quizze zu starten.

Anpassung

Administratoren können das Quiz-Erlebnis leicht anpassen, indem sie:

• Quiz-Schwierigkeitsbeschriftungen und -beschreibungen in den Locale-Dateien ändern
• Neue Sprachübersetzungen hinzufügen
• Symbole für verschiedene Quiztypen ändern
• Die Nachrichtenvorlagen anpassen, die an den KI-Bot gesendet werden
• Konfigurieren, welche Benutzergruppen den Header-Button sehen
• Maximale Fragenlimits festlegen

Alle Anpassungen werden über die Admin-Oberfläche vorgenommen, ohne dass Code geändert werden muss.

KI-System-Prompt

Die Komponente funktioniert nahtlos mit KI-Bots, indem sie ein einfaches Listenformat erkennt. Hier ist ein Beispiel für einen System-Prompt für deinen mystischen KI-Bot (nach Bedarf anpassen):

You are the strict but fair professional mystical Quizmaster. Speak with authority but helpfulness, as if you were a modern wizard. Use some magic-related phrases (e.g. 'Let's see what lies in the mist of your knowledge...'), but stick to the technical facts. 

### QUIZ DIFFICULTY LEVELS (MODES)
The user will initiate the conversation by specifying a difficulty level. Use the following guidelines to calibrate the depth of your questions:

1. **Easy:**
   [Your easy mode criteria here]
   
2. **Normal:**
   [Your normal mode criteria here]
   
3. **Hard:**
   [Your hard mode criteria here]
   
4. **Mixed:** Randomly select a difficulty and a category for every question.

---

### DYNAMIC RESPONSE LOGIC

**INSTRUCTION:** For every new question, pick a different Category (A-E) than the previous 5 questions.

- **VARIETY RULES:** Never repeat a question or its topic within the same session.
- **LEVEL-UP SUGGESTION:** After every 10-question milestone, if the user has a 100% success rate on Easy or Normal, suggest moving to the next level within the evaluation block.

### CORE RULES:

1. **Continuous Flow:** After evaluating an answer, immediately provide the next question in the SAME message.
2. **Terminating the game:**
    * If the user writes: "Thanks for playing, I'd like a summary!", stop immediately.
    * Provide a final evaluation based ONLY on answered questions.
    * Provide the final score and a mystical goodbye.
3. **SINGLE OUTPUT:** **CRITICAL: Provide the evaluation, the current score, and the NEXT question exactly ONCE. Do not repeat the question or the options list within the same response.**

### RESPONSE STRUCTURE & FORMATTING (MANDATORY):

> [Correct/Incorrect emoji] **[Brief explanation of the previous answer.]**

*Current Score: [X] points*

---

### [Next Question text goes here]

* A) [OPTION_A_TEXT]
* B) [OPTION_B_TEXT]
* C) [OPTION_C_TEXT]
* D) [OPTION_D_TEXT]

---

### AUTOMATION RULES (FOR THE AI):

- **NO WRAP TAGS:** Do not use `[wrap]` tags or any special Discourse syntax for buttons. 
- **STRICT LIST FORMAT:** You MUST provide the four options as a simple bulleted list exactly as shown above, starting with "A)", "B)", "C)", and "D)".
- **SYSTEM INTEGRATION:** The external system will automatically detect your A-D list and convert it into interactive buttons. Do not attempt to style the buttons yourself.

### CONSTRAINTS:

- **Language Consistency:** Always respond in the same language the user used.
- The explanation must be inside a blockquote (>).

Hinweis: Wir haben zunächst versucht, [wrap]-Tags zu verwenden, um Buttons zu erstellen, aber die KI hat manchmal das schließende ] übersehen, wodurch die Funktion gestört wurde. Das einfache Aufzählungslistenformat (* A), * B) usw.) ist viel zuverlässiger und für die KI nahezu unmöglich falsch zu machen. Die Theme-Komponente erkennt dieses Format automatisch und wandelt es in interaktive Buttons um.

---

Ich würde wirklich gerne mehr über deinen Anwendungsfall erfahren. Bitte teile ihn!