Remix

Make your own version of Edu Metaverse

Get an exact, working copy in your account, then change anything with chat.

Original by R Zi

Start free with 40 credits. No card needed.

Start fresh from this prompt

Builds a brand new app from the first prompt only, so later changes to the original are not included.

# EDU METAVERSE — AI-POWERED INTERDISCIPLINARY LEARNING PLATFORM

Create a visually stunning, modern, interactive educational web platform called **EDU METAVERSE**.

**Project concept:** An innovative pedagogical model that integrates multiple school subjects into one visual digital world. Students explore virtual environments, complete interdisciplinary missions, solve real-life problems, collaborate, and demonstrate their knowledge.

The platform is intended for a pedagogical innovation competition in Kazakhstan. It must look like a premium educational technology product, not a generic school website.

## 1. LANGUAGE
- All user-facing interface text must be in Kazakh.
- Use correct Kazakh spelling and natural educational terminology.
- Platform name: EDU METAVERSE.
- Tagline: «Бір әлем — бірнеше пән — біртұтас білім».
- Do not use English or Russian in the visible interface, except the EDU METAVERSE brand name and internationally recognized technical terms when necessary.

## 2. VISUAL DESIGN
Create a futuristic, immersive, premium design:
- Dark navy and deep blue background with purple and turquoise accents.
- Glowing 3D buildings, floating islands, stars, soft gradients, glassmorphism cards.
- Beautiful educational illustrations and a detailed isometric virtual city.
- Animated transitions and subtle hover effects.
- Large, readable Kazakh typography.
- Responsive design for desktop, tablet, and mobile.
- Accessible contrast, adjustable font size, reduced motion option.
- Avoid excessive animations and visual clutter.
- Use real visual assets or custom CSS/SVG illustrations, not empty placeholders.

## 3. MAIN DASHBOARD — «БІЛІМ ҚАЛАСЫ»
The homepage must display a visually rich, interactive virtual educational city.

Include:
- A welcome message: «Білім әлеміне қош келдің!»
- Student profile and avatar.
- Current level, experience points, completed missions, and achievements.
- Interactive city map with clickable buildings.
- A mission of the day.
- A progress indicator.
- A clear teacher/student mode switch.

Every building must open its corresponding functional section when clicked.

## 4. VIRTUAL WORLDS
Create these educational worlds:

### A. МАТЕМАТИКА ӘЛЕМІ
- Numbers, equations, geometric shapes, graphs, measurement and proportions.
- Interactive exercises for grades 5–7.
- Real-life mathematical problems.
- Difficulty levels: жеңіл, орташа, күрделі.
- Immediate feedback and step-by-step explanations.

### B. ЖАРАТЫЛЫСТАНУ ЗЕРТХАНАСЫ
- Ecosystems, energy, water, climate and scientific observations.
- Interactive experiments or simulations where practical.
- Hypothesis, observation, conclusion.
- Cross-curricular tasks connected to mathematics and geography.

### C. ГЕОГРАФИЯ ӘЛЕМІ
- Interactive maps, routes, distances, scales and coordinates.
- Environmental challenges and city-planning missions.
- Tasks involving map interpretation and data analysis.

### D. ТАРИХ ЖӘНЕ МӘДЕНИЕТ ӘЛЕМІ
- Explore historical locations and cultural heritage.
- Connect historical events with geography, mathematics and language.
- Create virtual research missions.

### E. ИНФОРМАТИКА ЗЕРТХАНАСЫ
- Logical thinking, algorithms, patterns and digital design.
- Interactive problem-solving challenges.
- Students design a simple model of their own virtual city.

### F. ҚАЗАҚ ТІЛІ ЖӘНЕ КОММУНИКАЦИЯ
- Reading comprehension, vocabulary, writing and presentations.
- Students explain their project and justify their decisions.
- Include interdisciplinary communication tasks.

## 5. SIGNATURE FEATURE — «БОЛАШАҚТЫҢ АҚЫЛДЫ ҚАЛАСЫ»
This must be the platform's flagship interdisciplinary project.

Students receive a mission to design an environmentally friendly smart city.

Mission stages:
1. Choose a location on the map.
2. Calculate building dimensions, area, and required materials.
3. Plan roads and distances.
4. Select sustainable energy sources.
5. Analyze environmental impact.
6. Design the city layout.
7. Present and justify the final solution.

Connect each stage to its relevant school subject.

Create interactive mission cards, a progress tracker, a completion screen, points, and a final project summary.

Students should be able to make meaningful choices and see the consequences of their decisions.

## 6. INTERDISCIPLINARY MISSION SYSTEM
Create a reusable mission engine.

Each mission must include:
- Mission title and story.
- Related subjects.
- Grade level.
- Learning objectives.
- Instructions.
- Interactive tasks.
- Answer checking.
- Hints.
- Feedback and explanations.
- Points and completion status.

Include individual, pair, and group activities.

Provide at least 10 sample interdisciplinary missions, with at least 3 fully functional missions.

Do not use fake completion states. Progress must reflect actual task performance.

## 7. INTERACTIVE LEARNING
Implement:
- Multiple-choice quizzes.
- Numeric answer fields.
- Matching activities.
- Sorting and classification tasks.
- Step-by-step problem-solving.
- Interactive maps or diagrams where practical.
- Instant feedback with explanations.
- Retry functionality.
- Difficulty selection.

Questions and answer options must be educationally accurate.

## 8. AI LEARNING ASSISTANT
Create a dedicated section called «ЖИ ЗЕРТТЕУШІ КӨМЕКШІСІ».

The assistant should help students:
- Understand a concept in simple language.
- Receive hints without immediately revealing the answer.
- Break a problem into steps.
- Connect two or more school subjects.
- Generate similar practice questions.
- Reflect on mistakes.
- Develop their own solution.

Use a secure server-side AI integration if an API is configured. Never expose API keys in client-side code. If no API is configured, provide a functional rule-based demonstration and clearly indicate that advanced AI assistance requires configuration. Never pretend a simulated response is a live AI response.

## 9. INCLUSIVE LEARNING
Create an inclusive learning mode with:
- Adjustable font size.
- High-contrast display.
- Read-aloud support where available.
- Simplified instructions.
- Step-by-step task presentation.
- Visual hints.
- Reduced animation.
- Flexible difficulty levels.
- Supportive feedback without penalizing students for retries.

Do not label students negatively or lock them into a fixed ability group.

## 10. TEACHER DASHBOARD
Create a separate teacher workspace where teachers can:
- View student progress.
- See completed and unfinished missions.
- Review scores and common errors.
- Assign missions by grade, subject and difficulty.
- Create a custom interdisciplinary mission.
- View class-level performance summaries.
- Export a simple progress report where technically supported.

Use actual stored data, not invented statistics.

## 11. STUDENT ACCOUNTS AND DATA
Implement a functional authentication system if backend services are available:
- Student registration and login.
- Teacher registration and login.
- Role-based access.
- Student profile and progress.
- Persistent mission results.
- Protected teacher dashboard.

Use Supabase or Lovable's supported backend integration if appropriate. Enforce database access rules and role permissions. Do not expose private student information publicly.

If authentication is not configured, provide a clearly labeled demonstration mode without pretending that real accounts have been created.

## 12. ASSESSMENT AND ANALYTICS
Track:
- Missions attempted.
- Correct answers.
- Completion rate.
- Subject areas practiced.
- Skills demonstrated.
- Areas needing further practice.

Show simple visual charts based on actual recorded data. Clearly distinguish practice performance from formal assessment.

## 13. ADDITIONAL SECTIONS
Include:
- «Менің жетістіктерім» — badges and completed missions.
- «Білім картасы» — a visual map of available learning paths.
- «Мұғалімге арналған нұсқаулық» — how to use the model in a lesson.
- «Педагогикалық модель» — concept, objectives, novelty, methodology and expected learning outcomes.
- «Жоба нәтижелері» — a section for entering and presenting real pilot results.

## 14. TECHNICAL REQUIREMENTS
- Build a real, working web application using a modern React and TypeScript stack.
- Use reusable components and clean architecture.
- Ensure navigation works across all pages.
- Every visible button must perform its advertised action.
- Forms must validate input.
- Search, filters, tabs and dialogs must work.
- Persist user progress when a backend is configured.
- Include loading, empty and error states.
- Make the application responsive.
- Avoid broken routes, dead buttons, dummy links and misleading data.
- Do not build a static mockup only.
- Do not attempt to implement every feature in a single oversized component.
- Prioritize a working interactive city, three complete missions, assessment and student progress before expanding the platform.

## 15. FINAL DELIVERABLE
Deliver a polished, usable prototype of EDU METAVERSE suitable for live demonstration at a pedagogical innovation competition.

The first experience should immediately communicate the innovation: students enter a virtual city, explore subject worlds, solve an interdisciplinary real-world challenge, receive feedback, and demonstrate what they learned.

Start by building the complete visual foundation and interactive city map. Then implement the navigation and the first three functional missions. Verify every primary interaction before adding more features.

Start fresh from this prompt

Builds a brand new app from the first prompt only, so later changes to the original are not included.