Quizmaster

[Don]

	Résumé	Un composant de thème qui transforme les messages privés avec un bot IA en une expérience de quiz interactive.
	Dépôt	GitHub - VaperinaDEV/discourse-quizmaster: A theme component that transforms private messages with an AI bot into an interactive quiz experience. · GitHub
	Vous l’avez trouvé utile ?	> ./support --coffee
	Guide d’installation	Comment installer un thème ou un composant de thème
	Nouveau aux thèmes Discourse ?	Guide du débutant pour utiliser les thèmes Discourse

Installer ce composant de thème

Composant de thème Quiz interactif

Bonjour
J’ai créé un composant de thème qui transforme les messages privés avec un bot IA en une expérience de quiz interactive. Le composant formate automatiquement les questions de quiz, gère la soumission des réponses, suit les progrès et gère la fin du quiz avec un menu déroulant pratique dans l’en-tête pour lancer rapidement un quiz.

Fonctionnalités

1. Lanceur de quiz dans le menu déroulant de l’en-tête

Un bouton déroulant personnalisable dans l’en-tête du site offre un accès rapide à différents types de quiz :

• Entièrement configurable via les paramètres du thème en utilisant un schéma d’objet
• Prise en charge multilingue avec intégration i18n pour les libellés, les descriptions et les messages
• Icônes personnalisables pour chaque niveau de difficulté du quiz
• Les options par défaut incluent : des quiz de difficulté Facile, Normale, Difficile et Mixte
• Chaque option envoie un message préconfiguré au bot IA pour démarrer le quiz

2. Mise en forme automatique des questions de quiz

Le composant détecte et met en forme les questions à choix multiples des publications du bot IA. Lorsque le bot publie une liste commençant par « A) », « B) », etc., celles-ci sont automatiquement converties en options de quiz cliquables avec un style personnalisé.

3. Soumission de réponse en un clic

Les utilisateurs peuvent cliquer directement sur les options de réponse (A, B, C, D) pour soumettre leur réponse. Le composant :

• Empêche les soumissions en double avec un état de chargement
• Répond automatiquement au bon message
• Formate les réponses de manière cohérente (par exemple, « Ma réponse : A) Texte de l’option »)
• Fournit une gestion des erreurs avec un retour d’information à l’utilisateur

4. Compteur de questions

Un indicateur de progression apparaît sur chaque question de quiz et affiche :

• Le numéro de la question actuelle par rapport au nombre maximum autorisé
• Nombre de questions maximum personnalisable (par défaut : 50)
• Visible uniquement sur les publications du bot IA

5. Terminaison automatique du quiz

Le composant inclut une gestion intelligente du quiz :

• Points de contrôle : Affiche un bouton « Terminer le quiz » toutes les 10 questions (après la question 11, 21, 31, etc.)
• Application de la limite stricte : Envoie automatiquement un message de terminaison lorsque le nombre maximum de questions est atteint
• Prévention des doublons : Suit l’état de terminaison pour empêcher plusieurs messages de terminaison
• Vérifications de validation : S’assure que la terminaison n’a lieu que lorsque c’est approprié

6. Modifications de l’interface utilisateur

Lors d’une conversation de quiz :

• Supprime les boutons de réessai/partage de l’IA des publications du bot (pour les non-administrateurs)
• Supprime le bouton de réponse des publications du bot dans les messages privés
• Empêche les créateurs de quiz de supprimer leurs propres publications (préserve l’historique du quiz)
• Ajoute une classe CSS de corps personnalisée is-quiz-chat pour le style

Configuration

Le composant utilise ces paramètres de thème :

# Paramètres de comportement du quiz
quizmaster_username: "NomDUtilisateurDeVotreBot"  # Nom d'utilisateur du bot IA
show_for_groups: ""                     # Affichage du menu déroulant de l'en-tête pour les groupes
quiz_max_questions: 50                  # Nombre maximum de questions avant terminaison automatique

# Paramètres du bouton de l'en-tête
button_icon: "question-circle"          # Icône pour le bouton principal du quiz

# Options du quiz dans le menu déroulant (schéma d'objet) 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 des icônes FontAwesome 6 utilisées dans ce composant de thème"

Clés de traduction

Ajoutez-les aux fichiers de langue de votre thème pour une prise en charge i18n complète :

Anglais (en.yml)

en:
  js:
    # Bouton de l'en-tête
    quiz: "Quiz"
    
    # Libellés du menu déroulant
    quiz_easy_label: "Easy Quiz"
    quiz_normal_label: "Normal Quiz"
    quiz_hard_label: "Hard Quiz"
    quiz_mixed_label: "Mixed Quiz"
    
    # Descriptions du menu déroulant
    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"
    
    # Modèles de message
    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"
    
    # Interaction du quiz
    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."

Cas d’utilisation

Ce composant est parfait pour :

• Quiz éducatifs avec des tuteurs IA
• Évaluations de formation
• Tests de connaissances
• Expériences d’apprentissage interactives
• Livraison de contenu gamifié
• Applications d’apprentissage des langues
• Cours de préparation aux certifications

Le composant gère toute la complexité du suivi de l’état, de la prévention des erreurs et de la gestion du cycle de vie du quiz automatiquement, offrant une expérience fluide pour les créateurs de quiz et les participants. Le menu déroulant de l’en-tête rend le lancement des quiz incroyablement facile pour les utilisateurs.

Personnalisation

Les administrateurs peuvent facilement personnaliser l’expérience du quiz en :

• Modifiant les libellés et descriptions de difficulté du quiz dans les fichiers de langue
• Ajoutant de nouvelles traductions de langue
• Changeant les icônes pour différents types de quiz
• Ajustant les modèles de messages envoyés au bot IA
• Configurant les groupes d’utilisateurs qui voient le bouton de l’en-tête
• Définissant les limites de nombre de questions

Toutes les personnalisations sont effectuées via l’interface d’administration sans toucher au code.

Invite système IA

Le composant fonctionne parfaitement avec les bots IA en détectant un simple format de liste. Voici un exemple d’invite système pour votre bot IA mystique (à personnaliser selon vos besoins) :

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 (>).

Note : Nous avons initialement essayé d’utiliser les balises [wrap] pour créer des boutons, mais l’IA omettait parfois le ] de fermeture, ce qui cassait la fonctionnalité. Le format de liste à puces simple (* A), * B), etc.) est beaucoup plus fiable et quasi impossible à mal faire pour l’IA. Le composant de thème détecte automatiquement ce format et le convertit en boutons interactifs.

---

J’aimerais vraiment entendre à propos de votre cas d’utilisation. Merci de partager !