Testing App - Система онлайн тестирования

TODO: пример пулл реквеста через форки

Testing App - Система онлайн тестирования

Веб-приложение для проведения онлайн тестов на основе Nuxt 3 с системой ролей и возможностью редактирования.

🚀 Особенности

Стек: Nuxt 3, Vue 3, TypeScript, Pinia
Система ролей: Guest/Admin с динамическим переключением
Режимы работы: Просмотр и редактирование контента
API для тестов: RESTful API для управления тестами
Адаптивный дизайн: Использование Nuxt UI для красивого интерфейса
Динамические маршруты: Загрузка тестов по ID
Типизация: Полная типизация с TypeScript

📁 Структура проекта

├── app/                          # Основное приложение Nuxt 4
│   ├── pages/                    # Страницы приложения
│   │   ├── index.vue            # Главная страница
│   │   ├── editTest.vue         # Демо режима редактирования
│   │   ├── check-access.vue     # Проверка доступа админа
│   │   └── test/
│   │       └── [id]/
│   │           └── index.vue    # Динамическая страница теста
│   ├── layouts/
│   │   └── default.vue          # Layout с header и навигацией
│   ├── stores/                   # Pinia stores
│   │   ├── user.ts              # Управление ролями пользователя
│   │   ├── edit.ts              # Режимы редактирования
│   │   └── loader.ts            # Состояние загрузки
│   ├── assets/                   # Стили и ресурсы
│   └── app.config.ts            # Конфигурация приложения
├── components/                   # Vue компоненты
│   ├── test/                    # Компоненты для тестов
│   ├── loading_animation.vue    # Анимация загрузки
│   ├── questionsList.vue        # Список вопросов
│   └── ModeToggle.vue          # Переключатель режимов
├── server/                      # Серверная часть
│   └── api/
│       └── tests/
│           └── [id]/
│               ├── index.get.ts    # GET /api/tests/:id
│               ├── index.post.ts   # POST /api/tests/:id
│               └── index.delete.ts # DELETE /api/tests/:id
├── data/                        # JSON файлы с тестами
│   ├── juniour.json            # Тест для джуниоров
│   ├── junior1.json            # Тест Junior Level 1
│   └── test.json               # Базовый тест
├── composables/                 # Vue Composables
│   └── Questions.ts            # Работа с тестами и API
├── types/                       # Определения типов TypeScript
│   └── tests.d.ts              # Типы для тестов
└── public/                      # Статичные файлы

🛠 Технологический стек

Frontend

Nuxt 3.17.4 - Полноценный Vue framework
Vue 3 - Прогрессивный JavaScript фреймворк
TypeScript 5.8.3 - Типизированный JavaScript
Pinia 3.0.3 - Современное состояние для Vue
Nuxt UI 3.1.3 - UI компоненты и утилиты

Backend

Nuxt Server Engine - Встроенный сервер Nuxt
File-based API - JSON файлы как источник данных
Node.js API Routes - RESTful эндпоинты

DevTools

ESLint - Линтинг кода
TypeScript - Статическая типизация

🏗 Архитектура

Состояние приложения (Pinia Stores)

User Store (`app/stores/user.ts`)

Управляет ролями пользователя:

type UserRole = "guest" | "admin";

Состояние: Текущая роль пользователя
Геттеры: isAdmin - проверка админских прав
Действия: setRole(), toggleRole() - управление ролями
Персистентность: Сохранение в sessionStorage

Edit Store (`app/stores/edit.ts`)

Управляет режимами редактирования:

type EditMode = "default" | "edit";

Состояние: Текущий режим работы
Геттеры: isEditMode - проверка режима редактирования
Действия: setMode(), toggle() - переключение режимов
Персистентность: Сохранение в sessionStorage

Loader Store (`app/stores/loader.ts`)

Управляет состоянием загрузки для UI индикаторов.

Типизация (`types/tests.d.ts`)

namespace Test {
  interface Metadata {
    title: string;
    status: "delete" | "update" | "submit" | "unviewed";
  }

  interface question {
    id: uuid;
    question: string;
    answers: Record<string, string>; // Изменено для соответствия JSON
    correct: string[]; // Изменено для соответствия JSON
  }

  interface Test {
    metadata: Metadata;
    questions: question[];
  }
}

API Endpoints

GET `/api/tests/:id`

Загружает тест по ID из файла data/${id}.json

Пример запроса:

GET /api/tests/juniour

Ответ:

{
  "metadata": {
    "title": "Основы программирования и IT",
    "status": "Update"
  },
  "questions": [
    {
      "id": 1,
      "question": "Какой тип данных используется для хранения целых чисел?",
      "answers": {
        "a": "Number",
        "b": "Integer",
        "c": "Float",
        "d": "Decimal"
      },
      "correct": ["a"]
    }
  ]
}

POST `/api/tests/:id`

Сохраняет ответы пользователя (в разработке)

DELETE `/api/tests/:id`

Удаляет тест (в разработке)

Composables (`composables/Questions.ts`)

`getTest(id: string)`

Асинхронная функция для загрузки теста по ID с обработкой ошибок.

`saveTestAnswers(testId, answers)`

Сохранение ответов пользователя через POST API.

`useTest(testId)`

Composable для удобной работы с тестами в компонентах:

const { test, loading, error, loadTest, saveAnswers } = useTest("juniour");

📄 Страницы

Главная (`/`)

Список доступных тестов
Навигация по уровням сложности
Демонстрация компонентов

Тест (`/test/:id`)

Динамическая загрузка теста по ID
Отображение разных интерфейсов для админов и пользователей:
- Admin: Сырые данные теста в JSON формате
- Guest: Интерактивный интерфейс прохождения теста
Система проверки ответов
Отображение результатов

Режимы редактирования (`/editTest`)

Демонстрация переключения режимов
Условный рендеринг контента
Интеграция с Edit Store

Проверка доступа (`/check-access`)

Демонстрация системы ролей
Разные интерфейсы для админов и гостей

🎨 Компоненты

Основные компоненты

ModeToggle - Переключатель режимов работы
loading_animation - Анимированный индикатор загрузки
questionsList - Список вопросов теста

Layout компоненты

Header в layouts/default.vue:
- Отображение текущей роли
- Кнопка переключения ролей
- Кнопка режима редактирования (только для админов)

🚀 Установка и запуск

Предварительные требования

Node.js 18+
npm или pnpm

Установка

# Клонирование репозитория
git clone <repository-url>
cd testingapp-master

# Установка зависимостей
npm install
# или
pnpm install

Разработка

# Запуск dev сервера
npm run dev
# или
pnpm dev

# Открыть http://localhost:3000

Сборка для продакшена

# Сборка приложения
npm run build

# Предпросмотр продакшен сборки
npm run preview

Линтинг

# Проверка кода
npm run lint

# Автоисправление
npm run lint:fix

📝 Использование

Переключение ролей

В header нажмите кнопку Guest или Admin
Роль автоматически сохраняется в сессии
Интерфейс адаптируется под текущую роль

Прохождение теста

Перейдите на главную страницу
Выберите тест (например, "Junior Level")
Отвечайте на вопросы
Нажмите "Отправить ответы" для проверки

Режим администратора

Переключитесь на роль Admin
В тестах увидите сырые JSON данные
Доступны дополнительные кнопки управления

Режим редактирования

Войдите как Admin
Нажмите кнопку "Включить редактирование"
Появится дополнительный контент для редактирования

🔧 Конфигурация

Nuxt Config (`nuxt.config.ts`)

export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: ["@nuxt/ui", "@nuxt/eslint", "@pinia/nuxt"],
  css: ["~/assets/css/main.css"],
  ui: { colorMode: false },
  future: { compatibilityVersion: 4 },
});

Добавление новых тестов

Создайте JSON файл в папке data/
Следуйте структуре типов из types/tests.d.ts
Файл будет автоматически доступен по API /api/tests/:filename

Пример структуры теста:

{
  "metadata": {
    "title": "Название теста",
    "status": "update"
  },
  "questions": [
    {
      "id": 1,
      "question": "Текст вопроса?",
      "answers": {
        "a": "Вариант A",
        "b": "Вариант B",
        "c": "Вариант C",
        "d": "Вариант D"
      },
      "correct": ["a", "c"]
    }
  ]
}

🛡 Система ролей

Guest (Гость)

Прохождение тестов
Просмотр результатов
Базовый интерфейс

Admin (Администратор)

Все возможности гостя
Просмотр сырых данных тестов
Доступ к режиму редактирования
Управляющие кнопки в интерфейсе

🔄 Состояния и персистентность

Приложение использует sessionStorage для сохранения:

Роль пользователя (role)
Режим редактирования (editMode)

При обновлении страницы состояние восстанавливается автоматически.

🧪 Доступные тесты

Junior Level (`/test/juniour`)

20 вопросов по основам программирования
HTML, CSS, JavaScript
Базовые концепции веб-разработки

Другие тесты

junior1.json - Альтернативная версия junior теста
test.json - Базовый тест
ab.json - Тестовые данные

🚧 Разработка и расширение

Добавление новых страниц

Создайте .vue файл в app/pages/
Используйте файловую маршрутизацию Nuxt
Примените layout через definePageMeta()

Создание новых компонентов

Добавьте .vue файл в components/
Компоненты автоматически доступны везде
Используйте TypeScript для типизации props

Расширение API

Создайте файлы в server/api/
Используйте defineEventHandler()
Следуйте RESTful принципам

📦 Зависимости

Основные

nuxt: ^3.17.4 - Основной фреймворк
@nuxt/ui: ^3.1.3 - UI компоненты
@pinia/nuxt: 0.11.1 - Состояние приложения
pinia: ^3.0.3 - Store менеджер

Разработка

@nuxt/eslint: ^1.4.1 - Линтинг
typescript: ^5.8.3 - Типизация
@types/uuid: ^10.0.0 - Типы для UUID

📄 Лицензия

Проект находится в разработке. Подробности лицензирования уточняются.

🤝 Участие в разработке

Форкните репозиторий
Создайте ветку для фичи (git checkout -b feature/amazing-feature)
Коммитьте изменения (git commit -m 'Add amazing feature')
Пушьте в ветку (git push origin feature/amazing-feature)
Создайте Pull Request

Разработано с использованием Nuxt 3 и Vue 3 🚀

Name		Name	Last commit message	Last commit date
app		app
components		components
composables		composables
data		data
public		public
server		server
types		types
.gitignore		.gitignore
.npmrc		.npmrc
README.md		README.md
app.vue		app.vue
eslint.config.mjs		eslint.config.mjs
nuxt.config.ts		nuxt.config.ts
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
tsconfig.json		tsconfig.json

Latest commit

History

Folders and files

Repository files navigation

Testing App - Система онлайн тестирования

🚀 Особенности

📁 Структура проекта

🛠 Технологический стек

Frontend

Backend

DevTools

🏗 Архитектура

Состояние приложения (Pinia Stores)

User Store (app/stores/user.ts)

Edit Store (app/stores/edit.ts)

Loader Store (app/stores/loader.ts)

Типизация (types/tests.d.ts)

API Endpoints

GET /api/tests/:id

POST /api/tests/:id

DELETE /api/tests/:id

Composables (composables/Questions.ts)

getTest(id: string)

saveTestAnswers(testId, answers)

useTest(testId)

📄 Страницы

Главная (/)

Тест (/test/:id)

Режимы редактирования (/editTest)

Проверка доступа (/check-access)

🎨 Компоненты

Основные компоненты

Layout компоненты

🚀 Установка и запуск

Предварительные требования

Установка

Разработка

Сборка для продакшена

Линтинг

📝 Использование

Переключение ролей

Прохождение теста

Режим администратора

Режим редактирования

🔧 Конфигурация

Nuxt Config (nuxt.config.ts)

Добавление новых тестов

🛡 Система ролей

Guest (Гость)

Admin (Администратор)

🔄 Состояния и персистентность

🧪 Доступные тесты

Junior Level (/test/juniour)

Другие тесты

🚧 Разработка и расширение

Добавление новых страниц

Создание новых компонентов

Расширение API

📦 Зависимости

Основные

Разработка

📄 Лицензия

🤝 Участие в разработке

About

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages

User Store (`app/stores/user.ts`)

Edit Store (`app/stores/edit.ts`)

Loader Store (`app/stores/loader.ts`)

Типизация (`types/tests.d.ts`)

GET `/api/tests/:id`

POST `/api/tests/:id`

DELETE `/api/tests/:id`

Composables (`composables/Questions.ts`)

`getTest(id: string)`

`saveTestAnswers(testId, answers)`

`useTest(testId)`

Главная (`/`)

Тест (`/test/:id`)

Режимы редактирования (`/editTest`)

Проверка доступа (`/check-access`)

Nuxt Config (`nuxt.config.ts`)

Junior Level (`/test/juniour`)