AI导哈

问答应用

一个用于Model Context Protocol (MCP)考试准备的前端问答应用，包含150个精心设计的问题，支持灵活导航和详细结果分析。

  • by MuhammadAbdullah95
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 MuhammadAbdullah95/mcp-quiz-app

使用说明

MCP知识问答应用📚

🚀 由……开发 穆罕默德·阿卜杜拉 🚀 表情符号“🚀”通常被用来表示火箭、快速上升或加速等含义，在中文中可以翻译为“🚀（火箭/快速上升）”。不过，由于表情符号的直观性，直接使用“🚀”在中文语境中也是完全可以理解的。

全栈开发人员 & MCP（微软认证专业人员）专家

一个全面的、仅前端实现的问答应用程序 模型上下文协议（MCP） 备考指南。包含150道精心设计的问题，难度循序渐进，融入真实场景。

✨ 采用 React、TypeScript 和 Tailwind CSS 构建，品质卓越 ✨

特色✨

  • 150道选择题 涵盖所有MCP主题
  • 无需认证 - 开始测验
  • 灵活导航 - 随时返回/前进，随时停止
  • 详细结果 - 查看正确答案及解释
  • 类别细分 - 按主题进行性能分析
  • 移动设备友好（或自适应） - 在所有设备上均可使用
  • 本地存储 - 自动保存进度
  • Vercel Ready（已准备好部署到Vercel） - 轻松部署

快速入门 🚀

先决条件

  • Node.js 18及以上版本
  • npm 或 yarn

安装

  1. 克隆项目并导航至项目目录：

    cd mcp-quiz-app

  2. 安装依赖项：

    npm install

  3. 启动开发服务器：

    npm run dev

  4. 打开您的浏览器：

    http://localhost:5173

可用脚本 📜

  • npm run dev - 启动开发服务器
  • npm run build - 为生产构建
  • npm run preview - 预览生产构建
  • npm run lint - 运行 ESLint

部署到 Vercel 🌐

选项1：Vercel CLI（推荐）

  1. 安装 Vercel CLI：

    npm i -g vercel

  2. 部署：

    vercel

  3. 按照提示操作：

    • 设置并部署？ Y
    • 哪个范围？选择您的账户
    • 链接到现有项目？ N
    • 项目名称？ mcp-quiz-app
    • 目录？ ./
    • 覆盖设置？ N

选项2：Vercel仪表板

  1. 构建项目：

    npm run build

  2. 首选 vercel.com（中文可表述为“Vercel官网”或直接保留原域名，根据上下文选择更合适的表述）

  3. 导入您的项目：

    • 点击“新建项目”
    • 从Git仓库导入
    • 选择这个项目

  4. 配置设置：

    • 框架预设： Vite
    • 构建命令： npm run build
    • 输出目录： dist

  5. 部署！

项目结构 📁

mcp-quiz-app/
├── src/
│   ├── components/
│   │   ├── HomePage.tsx          # Landing page
│   │   ├── QuizInterface.tsx     # Main quiz interface
│   │   ├── ResultsPage.tsx       # Results and review
│   │   └── ProgressBar.tsx       # Progress indicator
│   ├── data/
│   │   └── questions.json        # Question bank (150 MCQs)
│   ├── types/
│   │   └── quiz.types.ts         # TypeScript definitions
│   ├── App.tsx                   # Main app component
│   ├── main.tsx                  # App entry point
│   └── index.css                 # Global styles
├── public/                       # Static assets
├── package.json                  # Dependencies
└── README.md                     # This file

题库 📝

该应用程序包含150道精心设计的多项选择题，涵盖：

  • HTTP理论 (20个问题) - HTTP基础、生命周期、结构化示例
  • REST API（Representational State Transfer Application Programming Interface，表述性状态传递应用程序编程接口） (15个问题) - RESTful服务模式
  • JSON-RPC（JSON远程过程调用） (12个问题) - 远程过程调用协议
  • MCP 基础知识 (45个问题) - 核心概念、工具、资源、提示
  • 能力与运输 (25道题) - 高级MCP功能
  • OpenAI 集成 (15个问题) - 代理SDK集成
  • OAuth 安全性 (10个问题) - 认证与授权
  • 高级功能 （8个问题）- 状态化功能及其他

定制化🎨

添加更多问题

编辑 src/data/questions.json：

{
  "id": 151,
  "question": "Your question here?",
  "options": [
    "Option A",
    "Option B", 
    "Option C",
    "Option D"
  ],
  "correctAnswer": 0,
  "explanation": "Detailed explanation here.",
  "category": "Category Name",
  "difficulty": "easy|medium|hard"
}

改变及格分数线

编辑 PASSING_PERCENTAGE 在 src/App.tsx：

const PASSING_PERCENTAGE = 70; // Change to desired percentage

造型

该应用使用了Tailwind CSS。请在以下位置修改样式：

  • src/index.css - 全局样式
  • 组件文件 - 组件特定的样式
  • tailwind.config.js - Tailwind 配置

浏览器支持 🌐

  • Chrome 90及以上版本
  • Firefox 88及以上版本
  • Safari 14+
  • Edge 90+

贡献力量🤝

  1. 为仓库创建分支
  2. 创建一个特性分支
  3. 做出你的更改
  4. 彻底测试
  5. 提交一个拉取请求

许可证 📄

MIT 许可证 - 欢迎自由使用此项目来开发您自己的测验应用程序！

支持💬

如果您遇到任何问题：

  1. 检查浏览器控制台中的错误
  2. 确保您使用的是受支持的浏览器
  3. 尝试清除localStorage： localStorage.clear()
  4. 刷新页面

👨‍💻 关于开发者

穆罕默德·阿卜杜拉

全栈开发人员 & MCP（微软认证专家）

🚀 表情符号“🚀”在中文中通常被翻译为“火箭”或直接用作表示火箭发射、快速前进等意思的符号。它本身没有具体的文字含义，但在网络和日常交流中，常用来表达兴奋、期待或快速进展的情绪。 专业知识： React，TypeScript，Node.js，Python，AI集成
🎯（瞄准目标） 专业领域： 模型上下文协议，OpenAI智能体软件开发工具包，FastMCP（快速模型上下文协议）
💻 表示电脑或笔记本电脑的符号。 焦点： 构建可扩展的Web应用程序和AI驱动的工具
🏆（奖杯/冠军标志） 使命： 利用尖端技术打造卓越用户体验

“以每一行代码，构建AI驱动应用的未来”

祝你学习愉快！ 🎓 祝你MCP考试准备顺利！

由穆罕默德·阿卜杜拉倾心打造

相关 MCP