# questions

**Repository Path**: youarefortunate/questions

## Basic Information

- **Project Name**: questions
- **Description**: Vue3+Vite+Pinia+Swiper实现的刷题demo
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 5
- **Forks**: 0
- **Created**: 2024-05-31
- **Last Updated**: 2026-03-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Swiper, vue3, TypeScript, element-plus

## README

<h1 align="center">基于Vue3+TS+Vite+Pinia+Swiper的刷题demo</h1>
<p align="center">
    <img src="https://img.shields.io/badge/Vue-3.3.11-brightgreen.svg"/>
    <img src="https://img.shields.io/badge/Vite-5.0.8-green.svg"/>
    <img src="https://img.shields.io/badge/Element Plus-2.5.2-blue.svg"/>
    <img src="https://img.shields.io/badge/Swiper-7.4.1-orange.svg"/>
    <img src="https://img.shields.io/badge/license-MIT-green.svg"/>
</p>

## 一.刷题demo介绍

主要实现功能：

1. xlsx文件上传并转换为json数据
2. 刷题模式支持：全部题型、单选题、多选题、判断题、三选题、二选题
3. 支持左右滑动切题，答题卡跳转试题
4. 虚拟列表渲染，提升性能，避免大量试题导致页面卡顿

## 二.demo预览

| <img src="./src/assets/preview/image-20240531155936328.png" alt="image-20240531155936328" style="zoom: 33%;" /> | <img src="./src/assets/preview/image-20240531160009339.png" alt="image-20240531160009339" style="zoom: 33%;" /> |
| :----------------------------------------------------------: | :----------------------------------------------------------: |
| <img src="./src/assets/preview/image-20240531160046069.png" alt="image-20240531160046069" style="zoom: 33%;" /> | <img src="./src/assets/preview/image-20240531160119980.png" alt="image-20240531160119980" style="zoom: 33%;" /> |

## 三.安装使用

**获取代码**

```bash
$ git clone https://gitee.com/youarefortunate/questions.git
```

**安装依赖**

```bash
$ cd questions
$ npm i
```

**运行**

```bash
$ npm run dev
```

**打包**

```bash
$ npm run build
```

## 四.xlsx支持格式

**字段说明**

| subject  |  topic   | select |
| :------: | :------: | :----: |
| 试题类型 | 题目问题 |  答案  |

![image-20240531160655739](./src/assets/preview/image-20240531160655739.png)

**导入之后的json格式**

| 单选题                                                       | 多选题                                                       | 判断题                                                       |
| ------------------------------------------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ |
| <img src="./src/assets/preview/image-20240531161155732.png" alt="image-20240531161155732" style="zoom: 80%;" /> | <img src="./src/assets/preview/image-20240531161247943.png" alt="image-20240531161247943" style="zoom:80%;" /> | <img src="./src/assets/preview/image-20240531161227125.png" alt="image-20240531161227125" style="zoom:80%;" /> |