クイズマスター

:information_source: 概要 AIボットとのプライベートメッセージをインタラクティブなクイズ体験に変換するテーマコンポーネントです。
:hammer_and_wrench: リポジトリ GitHub - VaperinaDEV/discourse-quizmaster: A theme component that transforms private messages with an AI bot into an interactive quiz experience. · GitHub
:heart: 役に立ちましたか? > ./support --coffee
:question: インストールガイド テーマまたはテーマコンポーネントのインストール方法
:open_book: Discourseテーマ初心者ですか? Discourseテーマ使用の入門ガイド

このテーマコンポーネントをインストール

インタラクティブクイズテーマコンポーネント

こんにちは :waving_hand:
AIボットとのプライベートメッセージをインタラクティブなクイズ体験に変換するテーマコンポーネントを作成しました。このコンポーネントは、クイズの質問を自動的に整形し、回答の送信、進捗の追跡、そしてクイズの完了管理を処理します。クイズの開始を迅速に行える便利なヘッダードロップダウンも備えています。

機能

1. ヘッダードロップダウンクイズランチャー

サイトヘッダーのカスタマイズ可能なドロップダウンボタンにより、異なるタイプのクイズに簡単にアクセスできます。

  • テーマ設定内のオブジェクトスキーマによる完全なカスタマイズ対応
  • ラベル、説明、メッセージのi18n統合による多言語対応
  • 各クイズ難易度レベル用のカスタマイズ可能なアイコン
  • デフォルトのオプションには、Easy(簡単)、Normal(普通)、Hard(難しい)、Mixed(混合)難易度のクイズが含まれます
  • 各オプションは、クイズを開始するためにAIボットへ事前設定されたメッセージを送信します

2. クイズ質問の自動整形

コンポーネントは、AIボットの投稿から選択式質問を検出し、整形します。ボットが “A)”、“B)” などのリストを投稿した場合、これらはカスタムスタイル付きのクリック可能なクイズオプションに自動的に変換されます。

3. ワンクリック回答送信

ユーザーは回答オプション(A、B、C、D)を直接クリックして回答を送信できます。コンポーネントは以下の処理を行います。

  • ローディング状態により重複送信を防ぐ
  • 正しい投稿に自動的に返信する
  • 回答を一貫した形式で整形する(例:“My answer: A) オプションテキスト”)
  • ユーザーフィードバック付きのエラー処理を提供する

4. 質問カウンター

各クイズ質問に表示される進捗インジケーター:

  • 現在の質問番号と最大許容数の比較
  • カスタマイズ可能な最大質問数(デフォルト:50)
  • AIボットの投稿でのみ表示される

5. クイズの自動終了

コンポーネントにはインテリジェントなクイズ管理機能が組み込まれています。

  • マイルストーンチェックポイント: 10問ごとに(11問目、21問目、31問目など)「クイズを終了」ボタンを表示
  • ハードリミットの強制: 最大質問数に達した時点で自動的に終了メッセージを送信
  • 重複防止: 複数の終了投稿を防ぐために終了状態を追跡
  • 検証チェック: 終了が適切に行われることを保証

6. UIの変更

クイズ会話中:

  • ボットの投稿からAIのリトライ/共有ボタンを削除(非管理者)
  • プライベートメッセージ内のボットの投稿から返信ボタンを削除
  • クイズ作成者が自分の投稿を削除することを防ぐ(クイズ履歴の保持)
  • スタイル設定用のカスタムCSSボディクラス is-quiz-chat を追加

設定

このコンポーネントは以下のテーマ設定を使用します。

# クイズ動作設定
quizmaster_username: "YourBotUsername"  # AIボットのユーザー名
show_for_groups: ""                     # ヘッダードロップダウンを表示するグループ
quiz_max_questions: 50                  # 自動終了までの最大質問数

# ヘッダーボタン設定
button_icon: "question-circle"          # メインクイズボタンのアイコン

# ドロップダウンクイズオプション (オブジェクトスキーマ) 最大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: "このテーマコンポーネントで使用するFontAwesome 6アイコンのリスト"

翻訳キー

完全なi18n対応のために、これらのキーをテーマのロケールファイルに追加してください。

英語 (en.yml)

en:
  js:
    # ヘッダーボタン
    quiz: "Quiz"
    
    # ドロップダウンラベル
    quiz_easy_label: "Easy Quiz"
    quiz_normal_label: "Normal Quiz"
    quiz_hard_label: "Hard Quiz"
    quiz_mixed_label: "Mixed Quiz"
    
    # ドロップダウン説明
    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"
    
    # メッセージテンプレート
    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"
    
    # クイズインタラクション
    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."

使用例

このコンポーネントは、以下に最適です。

  • AIチューターによる教育的クイズ
  • トレーニング評価
  • 知識テスト
  • インタラクティブな学習体験
  • ゲーミフィケーションされたコンテンツ配信
  • 言語学習アプリケーション
  • 資格試験対策コース

このコンポーネントは、状態の追跡、エラーの防止、クイズライフサイクルの管理といった複雑さをすべて自動的に処理し、クイズ作成者および参加者双方にとってスムーズな体験を提供します。ヘッダードロップダウンにより、ユーザーがクイズを開始することが非常に容易になります。

カスタマイズ

管理者は、以下によりクイズ体験を簡単にカスタマイズできます。

  • ロケールファイル内のクイズ難易度ラベルと説明の変更
  • 新しい言語翻訳の追加
  • 異なるクイズタイプのアイコンの変更
  • AIボットに送信されるメッセージテンプレートの調整
  • ヘッダーボタンを表示するユーザーグループの設定
  • 最大質問数の制限の設定

すべてのカスタマイズは、コードに手を加えることなく管理インターフェースを通じて行われます。

AIシステムプロンプト

このコンポーネントは、シンプルなリスト形式を検出することにより、AIボットとシームレスに動作します。以下は、神秘的なAIボット用のシステムプロンプトの例です(必要に応じてカスタマイズしてください)。

あなたは厳格だが公正なプロフェッショナルな神秘的なQuizmasterです。権威と有用性を兼ね備えた口調で話し、まるで現代の魔法使いであるかのように振る舞ってください。いくつかの魔法に関連するフレーズ(例:'Let's see what lies in the mist of your knowledge...')を使用しますが、技術的な事実を厳密に守ってください。

### クイズ難易度レベル(モード)
ユーザーは難易度レベルを指定して会話を開始します。以下のガイドラインを使用して、質問の深さを調整してください。

1. **Easy:**
   [ここにEasyモードの基準を入力]
   
2. **Normal:**
   [ここにNormalモードの基準を入力]
   
3. **Hard:**
   [ここにHardモードの基準を入力]
   
4. **Mixed:** 各質問について、難易度とカテゴリをランダムに選択します。

---

### 動的応答ロジック

**指示:** 新しい各質問について、直前の5問とは異なるカテゴリ(A-E)を選択してください。

- **バリエーションルール:** 同じセッション内で質問やそのトピックを繰り返さないこと。
- **レベルアップ提案:** 10問ごとのマイルストーン後、ユーザーがEasyまたはNormalで100%の正解率を達成している場合、評価ブロック内で次のレベルへの移行を提案してください。

### コアルール:

1. **連続フロー:** 回答を評価した後、同じメッセージ内で次の質問を即座に提供してください。
2. **ゲームの終了:**
    * ユーザーが "Thanks for playing, I'd like a summary!" と書いた場合、即座に停止してください。
    * 回答された質問に基づいた最終評価を提供してください。
    * 最終スコアと神秘的な別れの言葉を提供してください。
3. **単一出力:** **重要: 評価、現在のスコア、次の質問を正確に一度だけ提供してください。同じ応答内で質問やオプションリストを繰り返さないでください。**

### 応答構造とフォーマット(必須):

> [正解/不正解の絵文字] **[前回の回答の簡潔な説明。]**

*Current Score: [X] points*

---

### [次の質問テキストはここに]

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

---

### 自動化ルール(AI向け):

- **WRAPタグの禁止:** ボタンを作成するために `[wrap]` タグやDiscourseの特殊な構文を使用しないでください。
- **厳格なリスト形式:** 上記に示した通り、"A)", "B)", "C)", "D)" で始まるシンプルな箇条書きリストとして4つのオプションを提供する必要があります。
- **システム統合:** 外部システムは自動的にあなたのA-Dリストを検出し、インタラクティブなボタンに変換します。自分でボタンにスタイルを設定しようとしてはいけません。

### 制約:

- **言語の一貫性:** 常にユーザーが使用した同じ言語で応答してください。
- 説明はブロック引用(>)内に記載する必要があります。

注: 当初は [wrap] タグを使用してボタンを作成しようとしましたが、AIが閉じの ] を見逃すことがあり、機能が壊れていました。シンプルな箇条書きリスト形式(* A), * B) など)ははるかに信頼性が高く、AIが誤ることはほぼ不可能です。テーマコンポーネントはこの形式を自動的に検出し、インタラクティブなボタンに変換します。


あなたの使用例について教えていただければ、本当に嬉しいです。ぜひ共有してください!

「いいね!」 12