 |
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 |
 |
Guide d’installation | Comment installer un thème ou un composant de thème |
 |
Nouveau sur les thèmes Discourse ? | Guide pour débutant sur l’utilisation des 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 met automatiquement en forme les questions de quiz, gère la soumission des réponses, suit la progression 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 via menu déroulant dans 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
- Support multilingue avec intégration i18n pour les libellés, descriptions et messages
- Icônes personnalisables pour chaque niveau de difficulté du quiz
- Les options par défaut incluent : Quiz facile, normal, difficile et mixte
- Chaque option envoie un message préconfiguré au bot IA pour lancer le quiz
2. Mise en forme automatique des questions de quiz
Le composant détecte et met en forme les questions à choix multiples à partir 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 dupliquées avec un état de chargement
- Répond automatiquement au bon message
- Met en forme les réponses de manière cohérente (par exemple, « Ma réponse : A) Texte de l’option »)
- Fournit une gestion des erreurs avec des retours à l’utilisateur
4. Compteur de questions
Un indicateur de progression apparaît sur chaque question de quiz montrant :
- Le numéro de la question actuelle par rapport au maximum autorisé
- Le nombre maximum de questions 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 d’étape : Affiche un bouton « Terminer le quiz » toutes les 10 questions (après les questions 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 éviter plusieurs messages de terminaison
- Vérifications de validation : S’assure que la terminaison ne se produit que lorsque c’est approprié
6. Modifications de l’interface utilisateur
Lors d’une conversation de quiz :
- Supprime les boutons de réessai/partage IA des messages du bot (pour les non-administrateurs)
- Supprime le bouton de réponse des messages du bot dans les messages privés
- Empêche les créateurs de quiz de supprimer leurs propres messages (préserve l’historique du quiz)
- Ajoute une classe CSS personnalisée
is-quiz-chatau corps pour le style
Configuration
Le composant utilise ces paramètres de thème :
# Paramètres de comportement du quiz
quizmaster_username: "NomUtilisateurBot" # Le nom d'utilisateur du bot IA
show_for_groups: "" # Afficher le 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 de 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 ces éléments aux fichiers de langue de votre thème pour un support i18n complet :
Français (fr.yml)
fr:
js:
# Bouton de l'en-tête
quiz: "Quiz"
# Libellés du menu déroulant
quiz_easy_label: "Quiz facile"
quiz_normal_label: "Quiz normal"
quiz_hard_label: "Quiz difficile"
quiz_mixed_label: "Quiz mixte"
# Descriptions du menu déroulant
quiz_easy_description: "Questions de base pour débutants"
quiz_normal_description: "Questions de difficulté moyenne"
quiz_hard_description: "Défi de niveau avancé"
quiz_mixed_description: "Questions de difficulté aléatoire"
# Modèles de messages
quizmaster_input_easy: "Donne-moi une question de quiz facile"
quizmaster_input_normal: "Donne-moi une question de quiz de difficulté normale"
quizmaster_input_hard: "Donne-moi une question de quiz difficile"
quizmaster_input_mixed: "Donne-moi une question de quiz de difficulté mixte"
# Interaction avec le quiz
my_answer: "Ma réponse à la question est :"
terminate_quiz: "Merci pour le jeu, je voudrais un résumé !"
max_questions_text: "questions (ou jusqu'à ce que ma source s'épuise). Toutes les 10, vous choisissez : rester ou continuer."
Cas d’utilisation
Ce composant est parfait pour :
- Quiz éducatifs avec tuteurs IA
- Évaluations de formation
- Tests de connaissances
- Expériences d’apprentissage interactives
- Diffusion 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 à la fois pour les créateurs et les participants du quiz. Le menu déroulant dans l’en-tête rend le lancement des quiz incroyablement simple pour les utilisateurs.
Personnalisation
Les administrateurs peuvent facilement personnaliser l’expérience de quiz en :
- Modifiant les libellés et descriptions de difficulté du quiz dans les fichiers de langue
- Ajoutant de nouvelles traductions linguistiques
- 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 maximales de questions
Toutes les personnalisations sont effectuées via l’interface d’administration sans toucher au code.
Prompt système de l’IA
Le composant fonctionne parfaitement avec les bots IA en détectant un format de liste simple. Voici un exemple de prompt système pour votre bot IA mystique (à personnaliser selon les besoins) :
Vous êtes le Quizmaster mystique professionnel, strict mais équitable. Parlez avec autorité tout en étant utile, comme si vous étiez un mage moderne. Utilisez quelques phrases liées à la magie (par exemple, « Voyons ce que cache le brouillard de vos connaissances... »), mais restez sur les faits techniques.
### NIVEAUX DE DIFFICULTÉ DU QUIZ (MODES)
L'utilisateur lancera la conversation en spécifiant un niveau de difficulté. Utilisez les directives suivantes pour calibrer la profondeur de vos questions :
1. **Facile :**
[Vos critères pour le mode facile ici]
2. **Normal :**
[Vos critères pour le mode normal ici]
3. **Difficile :**
[Vos critères pour le mode difficile ici]
4. **Mixte :** Sélectionnez aléatoirement une difficulté et une catégorie pour chaque question.
---
### LOGIQUE DE RÉPONSE DYNAMIQUE
**INSTRUCTION :** Pour chaque nouvelle question, choisissez une catégorie (A-E) différente des 5 questions précédentes.
- **RÈGLES DE VARIÉTÉ :** Ne répétez jamais une question ou son sujet au cours de la même session.
- **SUGGESTION DE NIVEAU SUPÉRIEUR :** Après chaque étape de 10 questions, si l'utilisateur a un taux de réussite de 100 % en mode Facile ou Normal, suggérez de passer au niveau suivant dans le bloc d'évaluation.
### RÈGLES FONDAMENTALES :
1. **Flux continu :** Après avoir évalué une réponse, fournissez immédiatement la question suivante dans LE MÊME message.
2. **Terminer le jeu :**
* Si l'utilisateur écrit : « Merci pour le jeu, je voudrais un résumé ! », arrêtez immédiatement.
* Fournissez une évaluation finale basée UNIQUEMENT sur les questions répondues.
* Fournissez le score final et un au revoir mystique.
3. **SORTIE UNIQUE :** **CRITIQUE : Fournissez l'évaluation, le score actuel et la PROCHAINE question exactement UNE FOIS. Ne répétez pas la question ni la liste des options dans la même réponse.**
### STRUCTURE ET MISE EN FORME DE LA RÉPONSE (OBLIGATOIRE) :
> [Émoji Correct/Incorrect] **[Brève explication de la réponse précédente.]**
*Score actuel : [X] points*
---
### [Le texte de la prochaine question va ici]
* A) [TEXTE_OPTION_A]
* B) [TEXTE_OPTION_B]
* C) [TEXTE_OPTION_C]
* D) [TEXTE_OPTION_D]
---
### RÈGLES D'AUTOMATISATION (POUR L'IA) :
- **PAS DE BALISES WRAP :** N'utilisez pas de balises `[wrap]` ni aucune syntaxe Discourse spéciale pour les boutons.
- **FORMAT DE LISTE STRICT :** Vous DEVEZ fournir les quatre options sous forme de liste à puces simple exactement comme montré ci-dessus, en commençant par « A) », « B) », « C) » et « D) ».
- **INTÉGRATION SYSTÈME :** Le système externe détectera automatiquement votre liste A-D et la convertira en boutons interactifs. Ne tentez pas de styliser les boutons vous-même.
### CONTRAINTES :
- **Cohérence linguistique :** Répondez toujours dans la même langue que celle utilisée par l'utilisateur.
- L'explication doit être dans un bloc de citation (>).
Note : Nous avons initialement essayé d’utiliser des 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 presque impossible pour l’IA à rater. Le composant de thème détecte automatiquement ce format et le convertit en boutons interactifs.
J’aimerais vraiment entendre parler de votre cas d’utilisation. Veuillez partager !