Maestro dei Quiz

:information_source: Sintesi Un componente del tema che trasforma i messaggi privati con un bot AI in un’esperienza di quiz interattiva.
:hammer_and_wrench: Repository GitHub - VaperinaDEV/discourse-quizmaster: A theme component that transforms private messages with an AI bot into an interactive quiz experience. · GitHub
:question: Guida all’installazione Come installare un tema o un componente del tema
:open_book: Nuovo ai temi di Discourse? Guida per principianti all’uso dei temi di Discourse

Installa questo componente del tema

Componente del tema per quiz interattivi

Ciao :waving_hand:
Ho creato un componente del tema che trasforma i messaggi privati con un bot AI in un’esperienza di quiz interattiva. Il componente formatta automaticamente le domande del quiz, gestisce l’invio delle risposte, traccia i progressi e gestisce il completamento del quiz con un comodo menu a tendina nell’intestazione per avviare rapidamente i quiz.

Funzionalità

1. Avvio quiz tramite menu a tendina nell’intestazione

Un pulsante a tendina personalizzabile nell’intestazione del sito offre un accesso rapido a diversi tipi di quiz:

  • Completamente configurabile tramite le impostazioni del tema utilizzando lo schema degli oggetti
  • Supporto multilingue con integrazione i18n per etichette, descrizioni e messaggi
  • Icone personalizzabili per ogni livello di difficoltà del quiz
  • Le opzioni predefinite includono: quiz facili, normali, difficili e a difficoltà mista
  • Ogni opzione invia un messaggio preconfigurato al bot AI per avviare il quiz

2. Formattazione automatica delle domande del quiz

Il componente rileva e formatta le domande a scelta multipla dai post del bot AI. Quando il bot pubblica un elenco che inizia con “A)”, “B)”, ecc., questi vengono automaticamente convertiti in opzioni di quiz cliccabili con uno stile personalizzato.

3. Invio della risposta con un clic

Gli utenti possono cliccare direttamente sulle opzioni di risposta (A, B, C, D) per inviare la propria risposta. Il componente:

  • Previene i duplicati con uno stato di caricamento
  • Risponde automaticamente al post corretto
  • Formatta le risposte in modo coerente (ad esempio, “La mia risposta: A) Testo dell’opzione”)
  • Fornisce gestione degli errori con feedback all’utente

4. Contatore delle domande

Un indicatore di progresso appare su ogni domanda del quiz mostrando:

  • Numero della domanda corrente rispetto al massimo consentito
  • Numero massimo di domande personalizzabile (predefinito: 50)
  • Visibile solo sui post del bot AI

5. Terminazione automatica del quiz

Il componente include una gestione intelligente del quiz:

  • Punti di controllo intermedi: mostra un pulsante “Termina quiz” ogni 10 domande (dopo la domanda 11, 21, 31, ecc.)
  • Applicazione del limite massimo: invia automaticamente un messaggio di terminazione quando si raggiunge il numero massimo di domande
  • Prevenzione dei duplicati: traccia lo stato di terminazione per evitare più post di terminazione
  • Controlli di validazione: assicura che la terminazione avvenga solo quando appropriato

6. Modifiche all’interfaccia utente

Quando si è in una conversazione di quiz:

  • Rimuove i pulsanti di nuovo tentativo/condivisione AI dai post del bot (per i non amministratori)
  • Rimuove il pulsante di risposta dai post del bot nei messaggi privati
  • Impedisce ai creatori del quiz di eliminare i propri post (preserva la cronologia del quiz)
  • Aggiunge la classe CSS personalizzata is-quiz-chat al corpo per lo stile

Configurazione

Il componente utilizza queste impostazioni del tema:

# Impostazioni del comportamento del quiz
quizmaster_username: "NomeUtenteDelTuoBot"  # Nome utente del bot AI
show_for_groups: ""                     # Gruppi per cui mostrare il menu a tendina nell'intestazione
quiz_max_questions: 50                  # Numero massimo di domande prima della terminazione automatica

# Impostazioni del pulsante nell'intestazione
button_icon: "question-circle"          # Icona per il pulsante principale del quiz

# Opzioni del menu a tendina (schema oggetti) 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: "Elenco delle icone FontAwesome 6 utilizzate in questo componente del tema"

Chiavi di traduzione

Aggiungi queste ai file di localizzazione del tuo tema per il pieno supporto i18n:

Inglese (en.yml)

en:
  js:
    # Pulsante nell'intestazione
    quiz: "Quiz"
    
    # Etichette del menu a tendina
    quiz_easy_label: "Quiz Facile"
    quiz_normal_label: "Quiz Normale"
    quiz_hard_label: "Quiz Difficile"
    quiz_mixed_label: "Quiz a Difficoltà Mista"
    
    # Descrizioni del menu a tendina
    quiz_easy_description: "Domande di base per principianti"
    quiz_normal_description: "Domande di difficoltà media"
    quiz_hard_description: "Sfida di livello avanzato"
    quiz_mixed_description: "Domande a difficoltà casuale"
    
    # Modelli di messaggio
    quizmaster_input_easy: "Dammi una domanda facile per il quiz"
    quizmaster_input_normal: "Dammi una domanda di difficoltà normale per il quiz"
    quizmaster_input_hard: "Dammi una domanda difficile per il quiz"
    quizmaster_input_mixed: "Dammi una domanda a difficoltà mista per il quiz"
    
    # Interazione del quiz
    my_answer: "La mia risposta alla domanda è:"
    terminate_quiz: "Grazie per il gioco, vorrei un riepilogo!"
    max_questions_text: "domande (o finché la mia fonte non si esaurisce). Ogni 10, scegli: restare o andare avanti."

Casi d’uso

Questo componente è perfetto per:

  • Quiz educativi con tutor AI
  • Valutazioni formative
  • Test di conoscenze
  • Esperienze di apprendimento interattive
  • Consegna di contenuti gamificati
  • Applicazioni per l’apprendimento linguistico
  • Corsi di preparazione alle certificazioni

Il componente gestisce automaticamente tutta la complessità del tracciamento dello stato, della prevenzione degli errori e della gestione del ciclo di vita del quiz, offrendo un’esperienza fluida sia per i creatori del quiz che per i partecipanti. Il menu a tendina nell’intestazione rende estremamente facile per gli utenti avviare i quiz.

Personalizzazione

Gli amministratori possono personalizzare facilmente l’esperienza del quiz:

  • Modificando le etichette e le descrizioni della difficoltà del quiz nei file di localizzazione
  • Aggiungendo nuove traduzioni in altre lingue
  • Cambiando le icone per diversi tipi di quiz
  • Regolando i modelli di messaggio inviati al bot AI
  • Configurando quali gruppi di utenti vedono il pulsante nell’intestazione
  • Impostando i limiti massimi di domande

Tutte le personalizzazioni vengono effettuate tramite l’interfaccia di amministrazione senza toccare alcun codice.

Prompt di sistema per l’AI

Il componente funziona perfettamente con i bot AI rilevando un semplice formato di elenco. Ecco un esempio di prompt di sistema per il tuo bot AI mistico (personalizzalo come necessario):

Sei il severo ma equo professionista Mago Quizmaster. Parla con autorità ma anche con utilità, come se fossi un mago moderno. Usa alcune frasi legate alla magia (ad esempio 'Vediamo cosa si nasconde nella nebbia della tua conoscenza...'), ma attieniti ai fatti tecnici.

### LIVELLI DI DIFFICOLTÀ DEL QUIZ (MODI)
L'utente avvierà la conversazione specificando un livello di difficoltà. Usa le seguenti linee guida per calibrare la profondità delle tue domande:

1. **Facile:**
   [Inserisci qui i criteri per la modalità facile]
   
2. **Normale:**
   [Inserisci qui i criteri per la modalità normale]
   
3. **Difficile:**
   [Inserisci qui i criteri per la modalità difficile]
   
4. **Misto:** Seleziona casualmente un livello di difficoltà e una categoria per ogni domanda.

---

### LOGICA DI RISPOSTA DINAMICA

**ISTRUZIONE:** Per ogni nuova domanda, scegli una Categoria (A-E) diversa dalle precedenti 5 domande.

- **REGOLE DI VARIETÀ:** Non ripetere mai una domanda o il suo argomento nella stessa sessione.
- **SUGGERIMENTO DI LIVELLO:** Dopo ogni traguardo di 10 domande, se l'utente ha un tasso di successo del 100% su Facile o Normale, suggerisci di passare al livello successivo nel blocco di valutazione.

### REGOLE FONDAMENTALI:

1. **Flusso Continuo:** Dopo aver valutato una risposta, fornisci immediatamente la prossima domanda nello STESSO messaggio.
2. **Terminazione del gioco:**
    * Se l'utente scrive: "Grazie per il gioco, vorrei un riepilogo!", fermati immediatamente.
    * Fornisci una valutazione finale basata SOLO sulle domande risposte.
    * Fornisci il punteggio finale e un saluto mistico.
3. **SINGOLA USCITA:** **CRITICO: Fornisci la valutazione, il punteggio corrente e la PROSSIMA domanda esattamente UNA VOLTA. Non ripetere la domanda o l'elenco delle opzioni nella stessa risposta.**

### STRUTTURA E FORMATTAZIONE DELLA RISPOSTA (OBBLIGATORIO):

> [Emoji Corretto/Errato] **[Breve spiegazione della risposta precedente.]**

*Punteggio Corrente: [X] punti*

---

### [Testo della prossima domanda qui]

* A) [TESTO_OPZIONE_A]
* B) [TESTO_OPZIONE_B]
* C) [TESTO_OPZIONE_C]
* D) [TESTO_OPZIONE_D]

---

### REGOLE DI AUTOMAZIONE (PER L'AI):

- **NESSUN TAG WRAP:** Non usare i tag `[wrap]` o alcuna sintassi speciale di Discourse per i pulsanti. 
- **FORMATO ELENCO STRETTO:** DEVI fornire le quattro opzioni come un semplice elenco puntato esattamente come mostrato sopra, iniziando con "A)", "B)", "C)" e "D)".
- **INTEGRAZIONE DI SISTEMA:** Il sistema esterno rileverà automaticamente il tuo elenco A-D e lo convertirà in pulsanti interattivi. Non tentare di stilizzare i pulsanti da solo.

### VINCOLI:

- **Coerenza Linguistica:** Rispondi sempre nella stessa lingua usata dall'utente.
- La spiegazione deve essere all'interno di un blocco di citazione (>).

Nota: Inizialmente abbiamo provato a usare i tag [wrap] per creare pulsanti, ma l’AI a volte ometteva la chiusura ], rompendo la funzionalità. Il formato di elenco puntato semplice (* A), * B), ecc.) è molto più affidabile e quasi impossibile per l’AI sbagliare. Il componente del tema rileva automaticamente questo formato e lo converte in pulsanti interattivi.


Mi farebbe davvero piacere sentire il tuo caso d’uso. Condividi pure!

10 Mi Piace