 |
요약 | AI 봇과의 개인 메시지를 인터랙티브 퀴즈 경험으로 변환하는 테마 컴포넌트입니다. |
 |
저장소 | GitHub - VaperinaDEV/discourse-quizmaster: A theme component that transforms private messages with an AI bot into an interactive quiz experience. · GitHub |
 |
유용하셨나요? | > ./support --coffee |
 |
설치 가이드 | 테마 또는 테마 컴포넌트 설치 방법 |
 |
디스코URS 테마 초보이신가요? | 디스코URS 테마 사용 입문가 가이드 |
이 테마 컴포넌트 설치
인터랙티브 퀴즈 테마 컴포넌트
안녕하세요 
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 봇을 위한 시스템 프롬프트 예시가 있습니다(필요에 따라 사용자 지정):
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 (>).
참고: 처음에는 [wrap] 태그를 사용하여 버튼을 만들려고 했지만, AI가 닫는 ]를 놓치는 경우가 있어 기능이 깨지는 문제가 발생했습니다. 간단한 불릿 목록 형식(* A), * B) 등)은 훨씬 더 신뢰할 수 있으며 AI가 틀릴 가능성이 거의 없습니다. 테마 컴포넌트는 이 형식을 자동으로 감지하여 인터랙티브 버튼으로 변환합니다.
당신의 사용 사례에 대해 정말로 듣고 싶습니다. 공유해 주세요!