# 题目展示

**Repository Path**: bingbingyihao/title-display

## Basic Information

- **Project Name**: 题目展示
- **Description**: 方便考试时搜索题目
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-09-26
- **Last Updated**: 2025-10-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 题目展示系统

## 📚 介绍

这是一个轻量级的前端题目展示与搜索工具，专为备考复习设计。支持本地 JSON 题目数据加载和关键词搜索，帮助你快速查找错题或重点题目，提升学习效率。

> 适用于考试刷题、面试准备、知识点回顾等场景。

## 🎯 主要功能

- 🔍 **关键词搜索**：实时搜索题目名称或选项中的关键词
- 📥 **本地文件导入**：支持通过上传 `.json` 文件动态替换题目内容
- ✅ **答题结果可视化**：
  - 绿色高亮表示答对
  - 红色高亮表示答错，并显示正确答案
- 🖥️ **响应式布局**：适配桌面与移动端浏览
- 🧩 **无需后端**：纯 HTML + CSS + JavaScript 实现，开箱即用

## 🖼️ 演示截图

![](./assets/1.png)

## 🚀 使用方法

### 方法一：直接运行（推荐）

1. 克隆或下载本仓库
2. 打开 `view.html` 文件（双击即可在浏览器中打开）
3. 系统会自动加载 `code/txt.json` 中的题目数据

> ⚠️ 注意：请确保 `txt.json` 与 `view.html` 处于同一目录下。

### 方法二：导入自定义题目

1. 准备一个符合格式的 `.json` 文件（见下方【数据格式】）
2. 点击页面上的 **“导入本地题目文件”** 按钮
3. 选择你的 JSON 文件，系统将自动渲染新题目

## 📄 数据格式说明

`txt.json` 文件需为一个数组，每个题目对象包含以下字段：

```json
[
  {
    "index": 1,
    "questionType": "单选题",
    "questionName": "题目描述...",
    "options": {
      "A": "选项A内容",
      "B": "选项B内容",
      "C": "选项C内容",
      "D": "选项D内容"
    },
    "yourAnswer": "A",         // 可为空，表示未作答
    "correctAnswer": "D",
    "analysis": null           // 可用于添加解析（当前未启用）
  }
]
```

> 💡 提示：`analysis` 字段已预留，可用于后续扩展「题目解析」功能。

## 🛠️ 技术栈

- 原生 HTML5 / CSS3 / JavaScript
- 使用 `fetch` 加载本地 JSON
- 支持 File API 导入文件
- 无依赖，无需构建流程

## 🌟 特性亮点

| 特性 | 说明 |
|------|------|
| 快速检索 | 输入关键词即可过滤相关题目 |
| 答题反馈清晰 | 明确标出对错与正确答案 |
| 跨平台使用 | 只要有浏览器就能用 |
| 易于扩展 | 可轻松添加解析、收藏、分类等功能 |

## 🔮 后续优化计划（待开发）

- ✅ 添加「题目解析」区域展示 `analysis` 内容
- 🏷️ 支持标签分类（如 Java、网络、数据库）
- 🌈 主题切换（深色/浅色模式）
- 💾 本地存储最近导入的文件记录
- 📊 统计答题正确率图表

## 🤝 贡献与反馈

欢迎提交 Issue 或 Pull Request 来改进本项目！

你可以：
- 提交新的 UI 优化建议
- 增加更多交互功能
- 补充多语言支持
- 分享你的题目 JSON 示例

---

📖 让每一次复习都更加高效！