 |
概要 | AI ボットとのプライベートメッセージをインタラクティブなクイズ体験に変換するテーマコンポーネントです。 |
 |
リポジトリ | GitHub - VaperinaDEV/discourse-quizmaster: A theme component that transforms private messages with an AI bot into an interactive quiz experience. · GitHub |
 |
インストールガイド | テーマまたはテーマコンポーネントのインストール方法 |
 |
Discourse テーマが初めてですか？ | Discourse テーマの使い方に関する初心者向けガイド |
このテーマコンポーネントをインストールする
インタラクティブなクイズテーマコンポーネント
こんにちは 
私は、AI ボットとのプライベートメッセージをインタラクティブなクイズ体験に変換するテーマコンポーネントを作成しました。このコンポーネントは、クイズ問題を自動的にフォーマットし、回答の送信を処理し、進捗を追跡し、クイズの完了を管理します。また、クイズを素早く開始するための便利なヘッダーのドロップダウンメニューも備えています。
機能
1. ヘッダーのドロップダウンクイズ起動ボタン
サイトのヘッダーにあるカスタマイズ可能なドロップダウンボタンにより、さまざまなクイズタイプに素早くアクセスできます。
- オブジェクトスキーマを使用したテーマ設定で完全に設定可能
- ラベル、説明、メッセージの i18n 統合による多言語サポート
- 各クイズの難易度レベルに対応するカスタマイズ可能なアイコン
- デフォルトオプション：易しい、普通、難しい、および混合難易度のクイズ
- 各オプションは、クイズを開始するために AI ボットへ事前に設定されたメッセージを送信します
2. クイズ問題の自動フォーマット
このコンポーネントは、AI ボットの投稿から多肢選択式の問題を検出し、フォーマットします。ボットが「A)」「B)」などで始まるリストを投稿すると、これらは自動的にカスタムスタイルのクリック可能なクイズオプションに変換されます。
3. ワンクリックでの回答送信
ユーザーは回答オプション（A、B、C、D）を直接クリックして回答を提出できます。このコンポーネントは以下を行います。
- ローディング状態により重複送信を防止
- 正しい投稿に自動的に返信
- 回答を一貫した形式でフォーマット（例：「私の回答: 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 ボット用のシステムプロンプトの例です（必要に応じてカスタマイズしてください）。
あなたは厳格だが公平なプロフェッショナルな神秘のクイズマスターです。権威を持ちつつも親切に、現代の魔法使いであるかのように話してください。魔法に関連するフレーズ（例：「あなたの知識の霧の中に何が潜んでいるか見てみましょう…」）を使用しつつも、技術的な事実に従ってください。
### クイズの難易度レベル（モード）
ユーザーは難易度を指定して会話を開始します。以下のガイドラインを使用して、質問の深さを調整してください。
1. **易しい (Easy):**
[ここに易しいモードの基準を入力]
2. **普通 (Normal):**
[ここに普通のモードの基準を入力]
3. **難しい (Hard):**
[ここに難しいモードの基準を入力]
4. **混合 (Mixed):** 各問題で難易度とカテゴリをランダムに選択します。
---
### 動的な応答ロジック
**指示:** 新しい問題ごとに、直前の 5 問とは異なるカテゴリ（A-E）を選択してください。
- **多様性のルール:** 同じセッション内で問題やそのトピックを繰り返さないこと。
- **レベルアップの提案:** 10 問のマイルストーンの後に、ユーザーが易しいまたは普通の難易度で 100% の正解率を達成した場合、評価ブロック内で次のレベルへの移行を提案してください。
### コアルール:
1. **連続フロー:** 回答を評価した後、同じメッセージ内で直ちに次の問題を提供してください。
2. **ゲームの終了:**
* ユーザーが「Thanks for playing, I'd like a summary!」と書いた場合、直ちに停止してください。
* 回答された問題のみに基づいて最終評価を提供してください。
* 最終スコアと神秘的な別れのことばを提供してください。
3. **単一出力:** **重要：評価、現在のスコア、そして次の問題を正確に 1 回だけ提供してください。同じ応答内で問題やオプションリストを繰り返さないでください。**
### 応答構造とフォーマット（必須）:
> [正解/不正解の絵文字] **[前の回答の簡単な説明。]**
*現在のスコア: [X] ポイント*
---
### [次の問題のテキストがここに来ます]
* A) [OPTION_A_TEXT]
* B) [OPTION_B_TEXT]
* C) [OPTION_C_TEXT]
* D) [OPTION_D_TEXT]
---
### 自動化ルール（AI 向け）:
- **ラップタグの使用禁止:** `[wrap]` タグやボタン用の特別な Discourse 構文を使用しないでください。
- **厳密なリスト形式:** 上記に示した通り、4 つのオプションを「A)」「B)」「C)」「D)」で始まる単純な箇条書きリストとして提供する必要があります。
- **システム統合:** 外部システムは自動的に A-D のリストを検出し、インタラクティブなボタンに変換します。ボタン自体のスタイル付けは行わないでください。
### 制約条件:
- **言語の一貫性:** ユーザーが使用した言語で常に応答してください。
- 説明はブロック引用（>）の中に含まれている必要があります。
注意: 当初、ボタンを作成するために [wrap] タグを使用しようとしましたが、AI が閉じ括弧 ] を見逃すことがあり、機能が破損していました。単純な箇条書きリスト形式（* A), * B) など）の方がはるかに信頼性が高く、AI が間違えることはほぼありません。このテーマコンポーネントは、この形式を自動的に検出し、インタラクティブなボタンに変換します。
ぜひあなたの使用例について聞かせてください。共有してください！