https://github.com/codesignal/learn_cosmo-activities-web
Web variants of the mobile activites
https://github.com/codesignal/learn_cosmo-activities-web
Last synced: about 2 months ago
JSON representation
Web variants of the mobile activites
- Host: GitHub
- URL: https://github.com/codesignal/learn_cosmo-activities-web
- Owner: CodeSignal
- License: other
- Created: 2025-08-22T12:59:06.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2026-02-07T19:37:22.000Z (about 2 months ago)
- Last Synced: 2026-02-08T04:25:46.620Z (about 2 months ago)
- Language: JavaScript
- Size: 450 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Cosmo Activities Web
An interactive web-based learning platform that supports multiple types of educational activities. Intended to bring mobile activities to the web experience. Built with vanilla JavaScript and Node.js, this platform provides engaging ways to practice and assess knowledge through different interactive formats.
## Features
### Activity Types
- **🎯 Swipe Left or Right**: Tinder-style interface for categorizing statements or concepts
- **📝 Fill in the Blanks**: Interactive forms for completing educational content
- **📦 Sort into Boxes**: Drag-and-drop interface for organizing items into categories
## Getting Started
### Installation
1. Clone the repository:
```bash
git clone
cd learn_cosmo-activities-web
```
2. Install dependencies:
```bash
npm install
```
3. Start the server:
```bash
npm start
```
4. Open your browser and navigate to:
```
http://localhost:3000
```
## Project Structure
```
learn_cosmo-activities-web/
├── data/ # Activity content and results
│ ├── question.md # Current activity definition
│ ├── answer.md # Stored activity results
│ └── examples/ # Example activity formats
│ ├── fill-in-the-blanks.md
│ ├── sort-into-boxes.md
│ └── swipe-left-right.md
├── public/ # Frontend assets
│ ├── index.html # Main HTML file
│ ├── app.js # Main application logic
│ ├── styles.css # Application styles
│ └── modules/ # Activity-specific modules
│ ├── fib.js # Fill-in-the-blanks functionality
│ ├── sort.js # Sort-into-boxes functionality
│ └── swipe.js # Swipe functionality
├── server.js # Node.js server
├── package.json # Dependencies and scripts
└── README.md # This file
```
## Creating Activities
Activities are defined using Markdown files with a specific format. Place your activity definition in `data/question.md`.
## API Endpoints
- `GET /api/activity` - Retrieves the current activity from `data/question.md`
- `POST /api/results` - Saves activity results to `data/answer.md`
## Development
The application uses vanilla JavaScript with ES6 modules. The server automatically serves files from the `public` directory and provides API endpoints for activity management.
### Key Components
- **app.js**: Main application orchestrator
- **modules/swipe.js**: Handles swipe-based interactions
- **modules/fib.js**: Manages fill-in-the-blank activities
- **modules/sort.js**: Implements sorting functionality
- **server.js**: Express-like HTTP server with markdown parsing
## Dependencies
- **marked**: Markdown parsing library for activity content