concept-classifier

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Concept Classifier Quiz MicroSim Skill

概念分类测验MicroSim工具

Overview

概述

This skill creates interactive classification quiz MicroSims using p5.js. Students are presented with scenarios, examples, or descriptions and must classify them into the correct category from multiple choice options. The quiz format is ideal for teaching pattern recognition, concept identification, and categorization skills across any subject domain.

本工具可使用p5.js创建交互式分类测验MicroSim。系统会向学生展示场景、示例或描述内容，学生需从多项选择中选出正确的分类。这种测验格式非常适合在任意学科领域教授模式识别、概念辨识和分类技能。

When to Use This Skill

适用场景

Use this skill when you need to create a quiz where students must:

Identify types or categories - e.g., identify which cognitive bias is shown, which logical fallacy is used, which literary device is present
Classify examples - e.g., classify animals into taxonomic groups, chemical reactions by type, historical events by era
Recognize patterns - e.g., recognize which design pattern is used, which musical form is playing, which art movement a painting belongs to
Match scenarios to concepts - e.g., match business scenarios to management theories, symptoms to conditions, code snippets to algorithms

当你需要创建以下类型的测验时，可使用本工具：

识别类型或分类 - 例如，识别所展示的认知偏差、使用的逻辑谬误、存在的文学手法
对示例进行分类 - 例如，将动物按分类学分组、将化学反应按类型分类、将历史事件按年代分类
识别模式 - 例如，识别所使用的设计模式、正在播放的音乐形式、画作所属的艺术流派
将场景与概念匹配 - 例如，将商业场景与管理理论匹配、将症状与病症匹配、将代码片段与算法匹配

Features

功能特性

Scenario-based questions with detailed descriptions
Multiple choice answers (typically 4 options per question)
Hint system that reduces points but helps struggling students
Automatic explanations shown after each answer
Score tracking with visual progress indicator
Randomized question selection from a larger pool
Encouraging feedback messages for both correct and incorrect answers
Animated mascot character that reacts to answers
End screen with performance summary and tips
Fully configurable via data.json file

基于场景的题目，包含详细描述
多项选择题（通常每题4个选项）
提示系统：使用提示会扣分，但可帮助有困难的学生
自动解析：每题作答后展示解析内容
分数追踪：带有可视化进度指示器
从题库中随机选题
鼓励性反馈消息：针对正确和错误答案分别提供
动画吉祥物角色：会根据作答结果做出反应
结束界面：展示表现总结和技巧提示
完全可配置：通过data.json文件进行配置

Data Structure

数据结构

All quiz content is stored in a

data.json

file for easy editing. Here is the required structure:

json

{
  "title": "Quiz Title Here",
  "description": "Brief description of what this quiz tests",
  "config": {
    "questionsPerQuiz": 10,
    "pointsCorrect": 10,
    "pointsWithHint": 5,
    "scenarioLabel": "SCENARIO",
    "instructionText": "Select the correct category for this scenario",
    "correctAnswerField": "correctAnswer"
  },
  "scenarios": [
    {
      "id": 1,
      "scenario": "Description of the scenario or example to classify...",
      "correctAnswer": "Category Name",
      "options": ["Category Name", "Wrong Option 1", "Wrong Option 2", "Wrong Option 3"],
      "explanation": "Explanation of why this answer is correct...",
      "hint": "A helpful hint for this question..."
    }
  ],
  "encouragingMessages": {
    "correct": [
      "Excellent!",
      "Well done!",
      "Great job!",
      "You got it!",
      "Perfect!"
    ],
    "incorrect": [
      "Not quite—now you know for next time!",
      "Good try! This one is tricky.",
      "Learning from mistakes makes us better!",
      "Keep practicing!",
      "Almost! Now you'll remember it."
    ]
  },
  "categoryDescriptions": {
    "Category Name": "Brief description of this category",
    "Another Category": "Brief description of another category"
  },
  "endScreen": {
    "tipsTitle": "Tips for Success:",
    "tips": [
      "First tip for students...",
      "Second tip for students...",
      "Third tip for students..."
    ],
    "performanceMessages": {
      "excellent": {
        "threshold": 90,
        "message": "Outstanding!",
        "subMessage": "You have excellent classification skills."
      },
      "good": {
        "threshold": 70,
        "message": "Great Job!",
        "subMessage": "You classified most items correctly."
      },
      "fair": {
        "threshold": 50,
        "message": "Good Progress!",
        "subMessage": "Keep practicing to improve."
      },
      "needsWork": {
        "threshold": 0,
        "message": "Keep Learning!",
        "subMessage": "Practice makes perfect."
      }
    }
  }
}

所有测验内容都存储在

data.json

文件中，便于编辑。以下是所需的结构：

json

{
  "title": "Quiz Title Here",
  "description": "Brief description of what this quiz tests",
  "config": {
    "questionsPerQuiz": 10,
    "pointsCorrect": 10,
    "pointsWithHint": 5,
    "scenarioLabel": "SCENARIO",
    "instructionText": "Select the correct category for this scenario",
    "correctAnswerField": "correctAnswer"
  },
  "scenarios": [
    {
      "id": 1,
      "scenario": "Description of the scenario or example to classify...",
      "correctAnswer": "Category Name",
      "options": ["Category Name", "Wrong Option 1", "Wrong Option 2", "Wrong Option 3"],
      "explanation": "Explanation of why this answer is correct...",
      "hint": "A helpful hint for this question..."
    }
  ],
  "encouragingMessages": {
    "correct": [
      "Excellent!",
      "Well done!",
      "Great job!",
      "You got it!",
      "Perfect!"
    ],
    "incorrect": [
      "Not quite—now you know for next time!",
      "Good try! This one is tricky.",
      "Learning from mistakes makes us better!",
      "Keep practicing!",
      "Almost! Now you'll remember it."
    ]
  },
  "categoryDescriptions": {
    "Category Name": "Brief description of this category",
    "Another Category": "Brief description of another category"
  },
  "endScreen": {
    "tipsTitle": "Tips for Success:",
    "tips": [
      "First tip for students...",
      "Second tip for students...",
      "Third tip for students..."
    ],
    "performanceMessages": {
      "excellent": {
        "threshold": 90,
        "message": "Outstanding!",
        "subMessage": "You have excellent classification skills."
      },
      "good": {
        "threshold": 70,
        "message": "Great Job!",
        "subMessage": "You classified most items correctly."
      },
      "fair": {
        "threshold": 50,
        "message": "Good Progress!",
        "subMessage": "Keep practicing to improve."
      },
      "needsWork": {
        "threshold": 0,
        "message": "Keep Learning!",
        "subMessage": "Practice makes perfect."
      }
    }
  }
}

File Structure

文件结构

Each Concept Classifier MicroSim creates these files:

/docs/sims/$MICROSIM_NAME/
├── index.md           # Documentation page with iframe embed
├── main.html          # HTML wrapper loading p5.js
├── $MICROSIM_NAME.js  # p5.js quiz logic
├── data.json          # Quiz questions and configuration
└── metadata.json      # Dublin Core metadata

每个概念分类MicroSim会生成以下文件：

/docs/sims/$MICROSIM_NAME/
├── index.md           # 包含iframe嵌入的文档页面
├── main.html          # 加载p5.js的HTML容器
├── $MICROSIM_NAME.js  # p5.js测验逻辑
├── data.json          # 测验题目与配置
└── metadata.json      # Dublin Core元数据

Customization Options

自定义选项

Visual Customization

视觉自定义

The JavaScript file contains configurable parameters:

javascript

// Canvas dimensions
let canvasWidth = 800;
let drawHeight = 480;
let controlHeight = 50;

// Colors (can be customized)
// Drawing area: 'aliceblue' with 'silver' border
// Correct answer: green tones
// Incorrect answer: orange/red tones
// Mascot: pink brain character (can be replaced)

JavaScript文件中包含可配置参数：

javascript

// Canvas dimensions
let canvasWidth = 800;
let drawHeight = 480;
let controlHeight = 50;

// Colors (can be customized)
// Drawing area: 'aliceblue' with 'silver' border
// Correct answer: green tones
// Incorrect answer: orange/red tones
// Mascot: pink brain character (can be replaced)

Mascot Character

吉祥物角色

The default mascot is an animated brain character with three expressions:

neutral - default state
happy - when answer is correct
thinking - when hint is used or answer is incorrect

You can customize or replace the

drawMascotCharacter()

function to use a different mascot appropriate to your subject domain.

默认吉祥物是一个带有三种表情的动画大脑角色：

中性 - 默认状态
开心 - 回答正确时
思考 - 使用提示或回答错误时

你可以自定义或替换

drawMascotCharacter()

函数，使用适合你学科领域的其他吉祥物。

Question Count

题目数量

By default, 10 questions are randomly selected from the pool. Adjust in the config:

json

"config": {
  "questionsPerQuiz": 10
}

Or modify in JavaScript:

javascript

scenarios = shuffled.slice(0, 10);  // Change 10 to desired number

默认从题库中随机选择10道题目。可在配置中调整：

json

"config": {
  "questionsPerQuiz": 10
}

或在JavaScript中修改：

javascript

scenarios = shuffled.slice(0, 10);  // 将10改为所需数量

Example Use Cases

示例用例

1. Cognitive Bias Quiz (Ethics/Psychology)

1. 认知偏差测验（伦理学/心理学）

Students read scenarios demonstrating cognitive biases and must identify which bias is shown.

学生阅读展示认知偏差的场景，识别对应的偏差类型。

2. Logical Fallacy Identifier (Philosophy/Critical Thinking)

2. 逻辑谬误识别器（哲学/批判性思维）

Students analyze arguments and identify which logical fallacy is present.

学生分析论点，识别其中存在的逻辑谬误。

3. Literary Device Recognizer (English/Literature)

3. 文学手法识别器（英语/文学）

Students read passages and identify metaphors, similes, personification, etc.

学生阅读段落，识别比喻、明喻、拟人等手法。

4. Chemical Reaction Classifier (Chemistry)

4. 化学反应分类器（化学）

Students read reaction descriptions and classify as synthesis, decomposition, single replacement, etc.

学生阅读反应描述，将其分类为化合反应、分解反应、置换反应等。

5. Historical Era Matcher (History)

5. 历史年代匹配器（历史）

Students read about events or artifacts and match them to the correct historical period.

学生阅读事件或文物相关内容，匹配对应的历史时期。

6. Design Pattern Identifier (Computer Science)

6. 设计模式识别器（计算机科学）

Students read code scenarios and identify which software design pattern applies.

学生阅读代码场景，识别对应的软件设计模式。

7. Musical Form Quiz (Music)

7. 音乐形式测验（音乐）

Students listen to or read about musical pieces and identify the form (sonata, rondo, theme and variations, etc.).

学生聆听或阅读音乐作品相关内容，识别其形式（奏鸣曲、回旋曲、主题与变奏等）。

8. Art Movement Classifier (Art History)

8. 艺术流派分类器（艺术史）

Students view or read about artworks and classify them into movements (Impressionism, Cubism, etc.).

学生查看或阅读艺术作品相关内容，将其分类为印象派、立体主义等流派。

Implementation Steps

实施步骤

Define your categories - List all possible classification categories (typically 4-8)
Create scenarios - Write 15-30 scenarios, each clearly demonstrating one category
Write explanations - For each scenario, explain why it belongs to that category
Add hints - Provide helpful hints that guide without giving away the answer
Customize messages - Adjust encouraging messages and tips for your subject
Test thoroughly - Ensure all scenarios have correct answers and clear explanations

定义分类 - 列出所有可能的分类类别（通常4-8个）
创建场景 - 编写15-30个场景，每个场景需清晰体现一个类别
编写解析 - 为每个场景解释其属于该类别的原因
添加提示 - 提供有帮助的提示，引导学生但不直接给出答案
自定义消息 - 根据你的学科调整鼓励消息和技巧提示
全面测试 - 确保所有场景的答案正确、解析清晰

Best Practices

最佳实践

Writing Good Scenarios

编写优质场景

Be specific - Scenarios should clearly demonstrate one category
Avoid ambiguity - Each scenario should have one clearly correct answer
Use realistic examples - Real-world scenarios are more memorable
Vary difficulty - Mix easy and challenging scenarios
Keep length manageable - Scenarios should fit in the display area (roughly 2-4 sentences)

具体明确 - 场景应清晰体现一个类别
避免歧义 - 每个场景应有一个明确的正确答案
使用真实示例 - 真实场景更易记忆
难度分层 - 混合简单和有挑战性的场景
长度适中 - 场景应适配显示区域（约2-4句话）

Writing Good Distractors (Wrong Answers)

编写优质干扰项（错误选项）

Make them plausible - Wrong answers should be reasonable alternatives
Avoid obviously wrong options - Each option should require thought
Use common misconceptions - Include options that represent typical errors
Keep similar length - Options should be roughly equal in length

具有合理性 - 错误选项应是合理的替代答案
避免明显错误 - 每个选项都需要学生思考
包含常见误解 - 加入代表典型错误的选项
长度相近 - 各选项长度应大致相等

Writing Good Explanations

编写优质解析

Explain the "why" - Don't just state the answer, explain the reasoning
Reference key features - Point out what makes this scenario fit the category
Keep it concise - 2-3 sentences is ideal
Educational tone - Use this as a teaching moment

解释原因 - 不要只给出答案，要解释推理过程
提及关键特征 - 指出场景符合该类别的原因
简洁明了 - 2-3句话为佳
教育性语气 - 将此作为教学契机

Template Files

模板文件

This skill includes template files in the

/templates

directory:

```
concept-classifier-template.js
```
- Generalized p5.js quiz logic
```
data-template.json
```
- Example data structure with placeholders
```
main-template.html
```
- HTML wrapper
```
index-template.md
```
- Documentation page template

本工具在

/templates

目录中包含以下模板文件：

```
concept-classifier-template.js
```
- 通用p5.js测验逻辑
```
data-template.json
```
- 带有占位符的示例数据结构
```
main-template.html
```
- HTML容器模板
```
index-template.md
```
- 文档页面模板

Bloom's Taxonomy Level

布鲁姆分类学等级

This quiz format primarily addresses Application (Level 3) - students must apply their knowledge of categories to analyze new scenarios they haven't seen before.

这种测验格式主要对应应用层级（第3级） - 学生必须运用其对类别的知识，分析从未见过的新场景。

Integration with MkDocs

与MkDocs集成

After creating the MicroSim, add it to

mkdocs.yml

yaml

nav:
  - MicroSims:
    - Your Quiz Name: sims/your-quiz-name/index.md

创建MicroSim后，将其添加到

mkdocs.yml

中：

yaml

nav:
  - MicroSims:
    - Your Quiz Name: sims/your-quiz-name/index.md

Technical Notes

技术说明

Framework: p5.js 1.11.10
Responsive: Width-responsive, fixed height
Data loading: Uses p5.js
```
loadJSON()
```
in
```
preload()
```
Accessibility: Includes
```
describe()
```
for screen readers
Browser support: Modern browsers (Chrome, Firefox, Safari, Edge)

框架：p5.js 1.11.10
响应式：宽度自适应，高度固定
数据加载：在
```
preload()
```
中使用p5.js的
```
loadJSON()
```
方法
可访问性：包含
```
describe()
```
方法供屏幕阅读器使用
浏览器支持：现代浏览器（Chrome、Firefox、Safari、Edge）

Conclusion

总结

The Concept Classifier skill provides a proven, engaging format for teaching classification and categorization skills. By separating content (data.json) from logic (JavaScript), it's easy to create new quizzes for any subject domain without modifying code.

概念分类工具为教授分类技能提供了一种成熟且有吸引力的格式。通过将内容（data.json）与逻辑（JavaScript）分离，无需修改代码即可为任意学科领域创建新的测验。