mirror of
https://github.com/f/awesome-chatgpt-prompts.git
synced 2026-03-03 03:07:00 +00:00
feat(kids): Add game-based learning experience for teaching prompting to children
This commit is contained in:
215
.windsurf/plans/kids-prompting-game.md
Normal file
215
.windsurf/plans/kids-prompting-game.md
Normal file
@@ -0,0 +1,215 @@
|
||||
# Prompts.chat/Kids - Gamified Prompting for Children
|
||||
|
||||
A game-based learning experience that teaches kids (ages 8-14) prompting through stories, levels, and interactive challenges - starting with World 1 MVP.
|
||||
|
||||
---
|
||||
|
||||
## ✅ Confirmed Decisions
|
||||
|
||||
| Decision | Choice |
|
||||
|----------|--------|
|
||||
| **Age Range** | 8-14 (reading/writing required) |
|
||||
| **Login** | Not required (local storage for progress) |
|
||||
| **AI Calls** | No real AI - pre-defined responses only |
|
||||
| **i18n** | All 16 languages from day 1 |
|
||||
| **MVP Scope** | World 1 only (3 levels) |
|
||||
| **Character** | **Chip** 🤖 - friendly robot guide |
|
||||
|
||||
---
|
||||
|
||||
## Overview
|
||||
|
||||
**Target Audience**: Children ages 8-14
|
||||
**Goal**: Teach AI prompting through play - each section is a "level" with storylines, characters, and hands-on activities
|
||||
**URL**: `prompts.chat/kids`
|
||||
|
||||
---
|
||||
|
||||
## Core Concepts
|
||||
|
||||
### 1. Story-Driven Learning
|
||||
- **Main Character**: **Chip** 🤖 - a friendly, curious robot who needs help learning to talk to AI
|
||||
- **Narrative**: Kids teach Chip how to write better prompts by completing missions
|
||||
- **World**: A colorful "Prompt Land" with themed zones
|
||||
|
||||
### 2. Level Structure
|
||||
|
||||
#### MVP: World 1 - Starter Village (3 Levels)
|
||||
| Level | Title | Concepts |
|
||||
|-------|-------|----------|
|
||||
| 1-1 | "Meet Chip!" | What is AI? Introducing prompts |
|
||||
| 1-2 | "Chip's First Words" | Writing a simple prompt |
|
||||
| 1-3 | "Being Clear" | Why clarity matters, good vs bad prompts |
|
||||
|
||||
#### Future Worlds (post-MVP)
|
||||
| World | Theme | Concepts |
|
||||
|-------|-------|----------|
|
||||
| **World 2: Clarity Castle** | Specificity | Adding details, who/what/when/where |
|
||||
| **World 3: Context Caves** | Context | Background info, examples |
|
||||
| **World 4: Creation Canyon** | Creativity | Role-play, storytelling |
|
||||
| **World 5: Master Mountain** | Advanced | Combining all skills |
|
||||
|
||||
### 3. Gamification System
|
||||
- **Stars (1-3)**: Earned per level based on performance
|
||||
- **Progress Map**: Visual path showing completed levels
|
||||
- **Local Storage**: Progress saved without login
|
||||
|
||||
---
|
||||
|
||||
## Interactive Components (Kids-Specific)
|
||||
|
||||
### New Components to Build
|
||||
|
||||
| Component | Description |
|
||||
|-----------|-------------|
|
||||
| `<DragDropPrompt />` | Drag prompt pieces into correct order |
|
||||
| `<PromptBuilder />` (kid version) | Visual block-based prompt builder |
|
||||
| `<StoryScene />` | Animated story panels with dialogue |
|
||||
| `<PromptVsMistake />` | Choose between good/bad prompts |
|
||||
| `<MagicWords />` | Fill-in word blanks with visual hints |
|
||||
| `<RobotChat />` | Simplified chat interface to try prompts |
|
||||
| `<ProgressMap />` | World map showing level progress |
|
||||
| `<LevelComplete />` | Celebration screen with stars/badges |
|
||||
| `<CharacterGuide />` | Robot character with speech bubbles |
|
||||
|
||||
### Reusable from Book
|
||||
- `Quiz` (simplified)
|
||||
- `FillInTheBlank` (with visual hints)
|
||||
- `Callout` (kid-friendly styles)
|
||||
|
||||
---
|
||||
|
||||
## File Structure
|
||||
|
||||
```
|
||||
src/
|
||||
├── app/kids/
|
||||
│ ├── page.tsx # Kids landing page (game intro)
|
||||
│ ├── layout.tsx # Kids-specific layout (playful theme)
|
||||
│ ├── map/page.tsx # World map / level selector
|
||||
│ └── level/
|
||||
│ └── [slug]/page.tsx # Dynamic level pages
|
||||
├── components/kids/
|
||||
│ ├── elements/ # Kid-specific interactive components
|
||||
│ │ ├── drag-drop-prompt.tsx
|
||||
│ │ ├── story-scene.tsx
|
||||
│ │ ├── prompt-vs-mistake.tsx
|
||||
│ │ ├── magic-words.tsx
|
||||
│ │ ├── robot-chat.tsx
|
||||
│ │ ├── progress-map.tsx
|
||||
│ │ ├── level-complete.tsx
|
||||
│ │ └── character-guide.tsx
|
||||
│ ├── layout/
|
||||
│ │ ├── kids-header.tsx
|
||||
│ │ └── kids-sidebar.tsx
|
||||
│ └── ui/
|
||||
│ └── kid-button.tsx # Playful button variants
|
||||
├── content/kids/ # MDX content for levels
|
||||
│ ├── 1-1-what-is-ai.mdx
|
||||
│ ├── 1-2-first-prompt.mdx
|
||||
│ ├── 1-3-be-clear.mdx
|
||||
│ └── ... (15 levels total)
|
||||
└── lib/kids/
|
||||
├── levels.ts # Level configuration
|
||||
└── progress.ts # Progress tracking utilities
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Sample Level Content
|
||||
|
||||
### Level 1-1: "What is AI?"
|
||||
|
||||
```mdx
|
||||
<StoryScene>
|
||||
<Panel character="sparky" mood="happy">
|
||||
Hi there! I'm Sparky, your AI robot friend!
|
||||
Do you know what AI means?
|
||||
</Panel>
|
||||
<Panel character="sparky" mood="thinking">
|
||||
AI stands for "Artificial Intelligence" -
|
||||
that's a fancy way of saying a computer that can think!
|
||||
</Panel>
|
||||
</StoryScene>
|
||||
|
||||
<PromptVsMistake
|
||||
question="Which is a better way to ask AI for help?"
|
||||
good="Please write me a short story about a brave cat"
|
||||
bad="story"
|
||||
explanation="AI needs more words to understand what you want!"
|
||||
/>
|
||||
|
||||
<MagicWords
|
||||
sentence="Please write a story about a ___ who goes on an adventure to find ___"
|
||||
blanks={[
|
||||
{ hint: "🐕 an animal", answers: ["dog", "cat", "bunny"] },
|
||||
{ hint: "💎 something special", answers: ["treasure", "gold", "friend"] }
|
||||
]}
|
||||
/>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Design Considerations
|
||||
|
||||
### Visual Style
|
||||
- **Colors**: Bright, friendly palette (not the adult book's muted tones)
|
||||
- **Typography**: Larger, rounded fonts (kid-readable)
|
||||
- **Illustrations**: Cartoon-style characters and icons
|
||||
- **Animations**: Bouncy, celebratory micro-interactions
|
||||
|
||||
### Accessibility
|
||||
- Large tap targets for younger users
|
||||
- Audio support for text (optional read-aloud)
|
||||
- Simple vocabulary, short sentences
|
||||
- Clear visual feedback
|
||||
|
||||
### Progress Persistence
|
||||
- **Option A**: Local storage (no login required)
|
||||
- **Option B**: Logged-in users save to database
|
||||
- Show progress on parent/teacher dashboard (future)
|
||||
|
||||
---
|
||||
|
||||
## Implementation Phases
|
||||
|
||||
### Phase 1: Foundation
|
||||
- [ ] Create `/kids` route with layout
|
||||
- [ ] Design kid-friendly theme/styles
|
||||
- [ ] Build `ProgressMap` component
|
||||
- [ ] Build `StoryScene` component
|
||||
- [ ] Set up level configuration system
|
||||
|
||||
### Phase 2: Core Interactions
|
||||
- [ ] Build `DragDropPrompt` component
|
||||
- [ ] Build `PromptVsMistake` component
|
||||
- [ ] Build `MagicWords` component
|
||||
- [ ] Build `RobotChat` component (simplified)
|
||||
- [ ] Build `LevelComplete` celebration screen
|
||||
|
||||
### Phase 3: Content
|
||||
- [ ] Write World 1 content (3 levels)
|
||||
- [ ] Write World 2 content (3 levels)
|
||||
- [ ] Write World 3 content (3 levels)
|
||||
- [ ] Write World 4 content (3 levels)
|
||||
- [ ] Write World 5 content (3 levels)
|
||||
|
||||
### Phase 4: Polish
|
||||
- [ ] Add animations and sound effects
|
||||
- [ ] Progress persistence
|
||||
- [ ] Badge/achievement system
|
||||
- [ ] Responsive design testing
|
||||
- [ ] Accessibility review
|
||||
|
||||
---
|
||||
|
||||
## Implementation Order
|
||||
|
||||
1. **Route & Layout** - `/kids` with playful theme
|
||||
2. **Level Config** - `lib/kids/levels.ts` + progress utilities
|
||||
3. **Core Components** - StoryScene, CharacterGuide, ProgressMap
|
||||
4. **Interactive Components** - DragDropPrompt, PromptVsMistake, MagicWords
|
||||
5. **Celebration** - LevelComplete with stars
|
||||
6. **Content** - 3 MDX files for World 1
|
||||
7. **i18n** - Add translations to all 16 locale files
|
||||
8. **Progress** - Local storage persistence
|
||||
@@ -1,6 +1,7 @@
|
||||
import type { MDXComponents } from "mdx/types";
|
||||
import type { ComponentPropsWithoutRef } from "react";
|
||||
import { BeforeAfterEditor, BookPartsNav, BREAKFramework, Callout, ChainErrorDemo, ChainExample, ChainFlowDemo, Checklist, CodeEditor, Collapsible, Compare, ContentPipelineDemo, ContextPlayground, ContextWindowDemo, CostCalculatorDemo, CRISPEFramework, DiffView, EmbeddingsDemo, FallbackDemo, FewShotDemo, FillInTheBlank, IconCheck, IconClipboard, IconLightbulb, IconLock, IconSettings, IconStar, IconTarget, IconUser, IconX, InfoGrid, InteractiveChecklist, IterativeRefinementDemo, JailbreakDemo, JsonYamlDemo, LLMCapabilitiesDemo, NavButton, NavFooter, PrinciplesSummary, PromptAnalyzer, PromptBreakdown, PromptBuilder, PromptChallenge, PromptDebugger, Quiz, RTFFramework, SpecificitySpectrum, StructuredOutputDemo, SummarizationDemo, TemperatureDemo, TextToImageDemo, TextToVideoDemo, TokenizerDemo, TokenPredictionDemo, TryIt, ValidationDemo, VersionDiff } from "@/components/book/interactive";
|
||||
import { PromiCharacter, PromiWithMessage, Panel, StoryScene, PromptVsMistake, MagicWords, DragDropPrompt, LevelComplete } from "@/components/kids/elements";
|
||||
|
||||
export function useMDXComponents(components: MDXComponents): MDXComponents {
|
||||
return {
|
||||
@@ -82,5 +83,14 @@ export function useMDXComponents(components: MDXComponents): MDXComponents {
|
||||
TryIt,
|
||||
ValidationDemo,
|
||||
VersionDiff,
|
||||
// Kids components
|
||||
PromiCharacter,
|
||||
PromiWithMessage,
|
||||
Panel,
|
||||
StoryScene,
|
||||
PromptVsMistake,
|
||||
MagicWords,
|
||||
DragDropPrompt,
|
||||
LevelComplete,
|
||||
};
|
||||
}
|
||||
|
||||
@@ -1385,5 +1385,30 @@
|
||||
"ideationTitle": "الأفكار",
|
||||
"communityContributorsTitle": "مساهمو المجتمع",
|
||||
"viewAllContributors": "عرض جميع المساهمين على"
|
||||
},
|
||||
"kids": {
|
||||
"header": { "title": "مدرسة شيب للأوامر", "levels": "مستويات", "home": "الرئيسية", "map": "الخريطة", "mainSite": "الموقع الرئيسي" },
|
||||
"home": {
|
||||
"badge": "تعلم للأطفال",
|
||||
"title": "تعلم التحدث مع الذكاء الاصطناعي!",
|
||||
"subtitle": "انضم إلى الروبوت شيب في مغامرة ممتعة لتعلم كتابة أوامر رائعة!",
|
||||
"promiIntro": { "greeting": "مرحباً، أنا شيب! 🤖", "message": "أنا روبوت ودود يحتاج مساعدتك! هل ستساعدني على فهم الأوامر بشكل أفضل؟" },
|
||||
"features": {
|
||||
"games": { "title": "ألعاب ممتعة", "description": "تعلم من خلال ألعاب السحب والإفلات والاختبارات" },
|
||||
"stories": { "title": "قصص رائعة", "description": "تابع شيب في مغامرات مثيرة" },
|
||||
"stars": { "title": "اجمع النجوم", "description": "اجمع النجوم وافتح مستويات جديدة" }
|
||||
},
|
||||
"startButton": "ابدأ اللعب!",
|
||||
"ageNote": "الأفضل للأطفال من 8-14 سنة الذين يعرفون القراءة والكتابة"
|
||||
},
|
||||
"map": { "title": "خريطة العالم", "subtitle": "اختر مستوى وابدأ مغامرتك!", "worldLevels": "{count} مستويات", "levelNumber": "المستوى {number}", "locked": "أكمل المستوى السابق للفتح" },
|
||||
"worlds": { "1": { "title": "قرية البداية" }, "2": { "title": "قلعة الوضوح" }, "3": { "title": "كهوف السياق" }, "4": { "title": "وادي الإبداع" }, "5": { "title": "جبل الإتقان" } },
|
||||
"levels": {
|
||||
"1_1_meet_promi": { "title": "تعرف على شيب!", "description": "قل مرحباً لصديقك الروبوت وتعلم ما هو الذكاء الاصطناعي" },
|
||||
"1_2_first_words": { "title": "كلمات شيب الأولى", "description": "ساعد شيب على الفهم بكتابة أول أمر لك" },
|
||||
"1_3_being_clear": { "title": "كن واضحاً", "description": "تعلم لماذا التعليمات الواضحة تعمل بشكل أفضل" }
|
||||
},
|
||||
"level": { "backToMap": "العودة للخريطة", "levelLabel": "المستوى {number}", "comingSoon": "هذا المستوى قادم قريباً!", "previous": "السابق", "next": "التالي", "map": "الخريطة" },
|
||||
"levelComplete": { "title": "المستوى مكتمل!", "nextLevel": "المستوى التالي", "backToMap": "العودة للخريطة", "allDone": "العودة للخريطة" }
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1385,5 +1385,30 @@
|
||||
"ideationTitle": "İdeya",
|
||||
"communityContributorsTitle": "İcma Töhfəçiləri",
|
||||
"viewAllContributors": "Bütün töhfəçilərə baxın"
|
||||
},
|
||||
"kids": {
|
||||
"header": { "title": "Promi-in Prompt Məktəbi", "levels": "səviyyə", "home": "Ana Səhifə", "map": "Xəritə", "mainSite": "Əsas Sayt" },
|
||||
"home": {
|
||||
"badge": "Uşaqlar üçün Öyrənmə",
|
||||
"title": "AI ilə Danışmağı Öyrən!",
|
||||
"subtitle": "Robot Promi ilə birlikdə əyləncəli bir macəraya çıx və möhtəşəm promptlar yazmağı öyrən!",
|
||||
"promiIntro": { "greeting": "Salam, mən Promi-əm! 🤖", "message": "Mən SƏNİN köməyinə ehtiyacı olan dost robotam! Promptları daha yaxşı başa düşməyimə kömək edərsən?" },
|
||||
"features": {
|
||||
"games": { "title": "Əyləncəli Oyunlar", "description": "Sürüklə-burax oyunları və testlərlə öyrən" },
|
||||
"stories": { "title": "Gözəl Hekayələr", "description": "Promi ilə həyəcanlı macəralara çıx" },
|
||||
"stars": { "title": "Ulduz Qazan", "description": "Ulduzlar topla və yeni səviyyələri aç" }
|
||||
},
|
||||
"startButton": "Oynamağa Başla!",
|
||||
"ageNote": "Oxumaq və yazmaq bilən 8-14 yaşlı uşaqlar üçün ən uyğun"
|
||||
},
|
||||
"map": { "title": "Dünya Xəritəsi", "subtitle": "Bir səviyyə seç və macərana başla!", "worldLevels": "{count} səviyyə", "levelNumber": "Səviyyə {number}", "locked": "Açmaq üçün əvvəlki səviyyəni tamamla" },
|
||||
"worlds": { "1": { "title": "Başlanğıc Kəndi" }, "2": { "title": "Aydınlıq Qalası" }, "3": { "title": "Kontekst Mağaraları" }, "4": { "title": "Yaradıcılıq Kanyonu" }, "5": { "title": "Ustad Dağı" } },
|
||||
"levels": {
|
||||
"1_1_meet_promi": { "title": "Promi ilə Tanış Ol!", "description": "Robot dostunla salamlaş və AI-nin nə olduğunu öyrən" },
|
||||
"1_2_first_words": { "title": "Promi-in İlk Sözləri", "description": "İlk promptunu yazaraq Promi-ə başa düşməyə kömək et" },
|
||||
"1_3_being_clear": { "title": "Aydın Ol", "description": "Niyə aydın təlimatların daha yaxşı işlədiyini öyrən" }
|
||||
},
|
||||
"level": { "backToMap": "Xəritəyə Qayıt", "levelLabel": "Səviyyə {number}", "comingSoon": "Bu səviyyə tezliklə gəlir!", "previous": "Əvvəlki", "next": "Növbəti", "map": "Xəritə" },
|
||||
"levelComplete": { "title": "Səviyyə Tamamlandı!", "nextLevel": "Növbəti Səviyyə", "backToMap": "Xəritəyə Qayıt", "allDone": "Xəritəyə Qayıt" }
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1385,5 +1385,30 @@
|
||||
"ideationTitle": "Ideenfindung",
|
||||
"communityContributorsTitle": "Community-Mitwirkende",
|
||||
"viewAllContributors": "Alle Mitwirkenden ansehen auf"
|
||||
},
|
||||
"kids": {
|
||||
"header": { "title": "Promis Prompt-Schule", "levels": "Level", "home": "Start", "map": "Karte", "mainSite": "Hauptseite" },
|
||||
"home": {
|
||||
"badge": "Lernen für Kinder",
|
||||
"title": "Lerne mit KI zu sprechen!",
|
||||
"subtitle": "Begleite den Roboter Promi auf einem lustigen Abenteuer und lerne, tolle Prompts zu schreiben!",
|
||||
"promiIntro": { "greeting": "Hallo, ich bin Promi! 🤖", "message": "Ich bin ein freundlicher Roboter, der DEINE Hilfe braucht! Hilfst du mir, Prompts besser zu verstehen?" },
|
||||
"features": {
|
||||
"games": { "title": "Lustige Spiele", "description": "Lerne durch Drag-and-Drop-Spiele und Quiz" },
|
||||
"stories": { "title": "Coole Geschichten", "description": "Folge Promi auf spannenden Abenteuern" },
|
||||
"stars": { "title": "Sterne sammeln", "description": "Sammle Sterne und schalte neue Level frei" }
|
||||
},
|
||||
"startButton": "Jetzt spielen!",
|
||||
"ageNote": "Am besten für Kinder von 8-14 Jahren, die lesen und schreiben können"
|
||||
},
|
||||
"map": { "title": "Weltkarte", "subtitle": "Wähle ein Level und starte dein Abenteuer!", "worldLevels": "{count} Level", "levelNumber": "Level {number}", "locked": "Schließe das vorherige Level ab zum Freischalten" },
|
||||
"worlds": { "1": { "title": "Startdorf" }, "2": { "title": "Klarheitsschloss" }, "3": { "title": "Kontext-Höhlen" }, "4": { "title": "Kreativ-Canyon" }, "5": { "title": "Meisterberg" } },
|
||||
"levels": {
|
||||
"1_1_meet_promi": { "title": "Triff Promi!", "description": "Sag Hallo zu deinem Roboterfreund und lerne, was KI ist" },
|
||||
"1_2_first_words": { "title": "Promis erste Worte", "description": "Hilf Promi zu verstehen, indem du deinen ersten Prompt schreibst" },
|
||||
"1_3_being_clear": { "title": "Klar sein", "description": "Lerne, warum klare Anweisungen besser funktionieren" }
|
||||
},
|
||||
"level": { "backToMap": "Zurück zur Karte", "levelLabel": "Level {number}", "comingSoon": "Dieses Level kommt bald!", "previous": "Zurück", "next": "Weiter", "map": "Karte" },
|
||||
"levelComplete": { "title": "Level geschafft!", "nextLevel": "Nächstes Level", "backToMap": "Zurück zur Karte", "allDone": "Zurück zur Karte" }
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1385,5 +1385,30 @@
|
||||
"ideationTitle": "Ιδέες",
|
||||
"communityContributorsTitle": "Συνεισφέροντες Κοινότητας",
|
||||
"viewAllContributors": "Δείτε όλους τους συνεισφέροντες στο"
|
||||
},
|
||||
"kids": {
|
||||
"header": { "title": "Η Σχολή Prompts του Promi", "levels": "επίπεδα", "home": "Αρχική", "map": "Χάρτης", "mainSite": "Κύρια Σελίδα" },
|
||||
"home": {
|
||||
"badge": "Μάθηση για Παιδιά",
|
||||
"title": "Μάθε να Μιλάς με την AI!",
|
||||
"subtitle": "Ακολούθησε το ρομπότ Promi σε μια διασκεδαστική περιπέτεια για να μάθεις να γράφεις υπέροχα prompts!",
|
||||
"promiIntro": { "greeting": "Γεια, είμαι ο Promi! 🤖", "message": "Είμαι ένα φιλικό ρομπότ που χρειάζεται τη βοήθειά ΣΟΥ! Θα με βοηθήσεις να καταλάβω καλύτερα τα prompts;" },
|
||||
"features": {
|
||||
"games": { "title": "Διασκεδαστικά Παιχνίδια", "description": "Μάθε παίζοντας drag-and-drop και κουίζ" },
|
||||
"stories": { "title": "Σούπερ Ιστορίες", "description": "Ακολούθησε τον Promi σε συναρπαστικές περιπέτειες" },
|
||||
"stars": { "title": "Κέρδισε Αστέρια", "description": "Συλλέξτε αστέρια και ξεκλειδώστε νέα επίπεδα" }
|
||||
},
|
||||
"startButton": "Ξεκίνα να Παίζεις!",
|
||||
"ageNote": "Ιδανικό για παιδιά 8-14 ετών που ξέρουν να διαβάζουν και να γράφουν"
|
||||
},
|
||||
"map": { "title": "Χάρτης Κόσμου", "subtitle": "Επέλεξε ένα επίπεδο και ξεκίνα την περιπέτειά σου!", "worldLevels": "{count} επίπεδα", "levelNumber": "Επίπεδο {number}", "locked": "Ολοκλήρωσε το προηγούμενο επίπεδο για ξεκλείδωμα" },
|
||||
"worlds": { "1": { "title": "Χωριό Εκκίνησης" }, "2": { "title": "Κάστρο Σαφήνειας" }, "3": { "title": "Σπηλιές Πλαισίου" }, "4": { "title": "Φαράγγι Δημιουργικότητας" }, "5": { "title": "Βουνό Μαεστρίας" } },
|
||||
"levels": {
|
||||
"1_1_meet_promi": { "title": "Γνώρισε τον Promi!", "description": "Πες γεια στο ρομπότ φίλο σου και μάθε τι είναι η AI" },
|
||||
"1_2_first_words": { "title": "Οι Πρώτες Λέξεις του Promi", "description": "Βοήθησε τον Promi να καταλάβει γράφοντας το πρώτο σου prompt" },
|
||||
"1_3_being_clear": { "title": "Να Είσαι Σαφής", "description": "Μάθε γιατί οι σαφείς οδηγίες λειτουργούν καλύτερα" }
|
||||
},
|
||||
"level": { "backToMap": "Πίσω στο Χάρτη", "levelLabel": "Επίπεδο {number}", "comingSoon": "Αυτό το επίπεδο έρχεται σύντομα!", "previous": "Προηγούμενο", "next": "Επόμενο", "map": "Χάρτης" },
|
||||
"levelComplete": { "title": "Επίπεδο Ολοκληρώθηκε!", "nextLevel": "Επόμενο Επίπεδο", "backToMap": "Πίσω στο Χάρτη", "allDone": "Πίσω στο Χάρτη" }
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1385,5 +1385,91 @@
|
||||
"ideationTitle": "Ideation",
|
||||
"communityContributorsTitle": "Community Contributors",
|
||||
"viewAllContributors": "View all contributors on"
|
||||
},
|
||||
"kids": {
|
||||
"header": {
|
||||
"title": "Promi's Prompt School",
|
||||
"levels": "levels",
|
||||
"home": "Home",
|
||||
"map": "Map",
|
||||
"mainSite": "Main Site"
|
||||
},
|
||||
"home": {
|
||||
"badge": "Learning for Kids",
|
||||
"title": "Learn to Talk to AI!",
|
||||
"subtitle": "Join Promi the robot on a fun adventure to learn how to write awesome prompts!",
|
||||
"promiIntro": {
|
||||
"greeting": "Hi, I'm Promi! 🤖",
|
||||
"message": "I'm a friendly robot who needs YOUR help! Will you teach me how to understand prompts better?"
|
||||
},
|
||||
"features": {
|
||||
"games": {
|
||||
"title": "Fun Games",
|
||||
"description": "Learn by playing drag-and-drop games and quizzes"
|
||||
},
|
||||
"stories": {
|
||||
"title": "Cool Stories",
|
||||
"description": "Follow Promi through exciting adventures"
|
||||
},
|
||||
"stars": {
|
||||
"title": "Earn Stars",
|
||||
"description": "Collect stars and unlock new levels"
|
||||
}
|
||||
},
|
||||
"startButton": "Start Playing!",
|
||||
"ageNote": "Best for kids ages 8-14 who can read and write"
|
||||
},
|
||||
"map": {
|
||||
"title": "World Map",
|
||||
"subtitle": "Choose a level and start your adventure!",
|
||||
"worldLevels": "{count} levels",
|
||||
"levelNumber": "Level {number}",
|
||||
"locked": "Complete previous level to unlock"
|
||||
},
|
||||
"worlds": {
|
||||
"1": {
|
||||
"title": "Starter Village"
|
||||
},
|
||||
"2": {
|
||||
"title": "Clarity Castle"
|
||||
},
|
||||
"3": {
|
||||
"title": "Context Caves"
|
||||
},
|
||||
"4": {
|
||||
"title": "Creation Canyon"
|
||||
},
|
||||
"5": {
|
||||
"title": "Master Mountain"
|
||||
}
|
||||
},
|
||||
"levels": {
|
||||
"1_1_meet_promi": {
|
||||
"title": "Meet Promi!",
|
||||
"description": "Say hello to your robot friend and learn what AI is"
|
||||
},
|
||||
"1_2_first_words": {
|
||||
"title": "Promi's First Words",
|
||||
"description": "Help Promi understand by writing your first prompt"
|
||||
},
|
||||
"1_3_being_clear": {
|
||||
"title": "Being Clear",
|
||||
"description": "Learn why clear instructions work better"
|
||||
}
|
||||
},
|
||||
"level": {
|
||||
"backToMap": "Back to Map",
|
||||
"levelLabel": "Level {number}",
|
||||
"comingSoon": "This level is coming soon!",
|
||||
"previous": "Previous",
|
||||
"next": "Next",
|
||||
"map": "Map"
|
||||
},
|
||||
"levelComplete": {
|
||||
"title": "Level Complete!",
|
||||
"nextLevel": "Next Level",
|
||||
"backToMap": "Back to Map",
|
||||
"allDone": "Back to Map"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1385,5 +1385,30 @@
|
||||
"ideationTitle": "Ideación",
|
||||
"communityContributorsTitle": "Contribuidores de la Comunidad",
|
||||
"viewAllContributors": "Ver todos los contribuidores en"
|
||||
},
|
||||
"kids": {
|
||||
"header": { "title": "Escuela de Prompts de Promi", "levels": "niveles", "home": "Inicio", "map": "Mapa", "mainSite": "Sitio Principal" },
|
||||
"home": {
|
||||
"badge": "Aprendizaje para Niños",
|
||||
"title": "¡Aprende a Hablar con IA!",
|
||||
"subtitle": "¡Únete al robot Promi en una divertida aventura para aprender a escribir increíbles prompts!",
|
||||
"promiIntro": { "greeting": "¡Hola, soy Promi! 🤖", "message": "¡Soy un robot amigable que necesita TU ayuda! ¿Me ayudarás a entender mejor los prompts?" },
|
||||
"features": {
|
||||
"games": { "title": "Juegos Divertidos", "description": "Aprende jugando con arrastrar y soltar y cuestionarios" },
|
||||
"stories": { "title": "Historias Geniales", "description": "Sigue a Promi en emocionantes aventuras" },
|
||||
"stars": { "title": "Gana Estrellas", "description": "Colecciona estrellas y desbloquea nuevos niveles" }
|
||||
},
|
||||
"startButton": "¡Empezar a Jugar!",
|
||||
"ageNote": "Ideal para niños de 8-14 años que saben leer y escribir"
|
||||
},
|
||||
"map": { "title": "Mapa del Mundo", "subtitle": "¡Elige un nivel y comienza tu aventura!", "worldLevels": "{count} niveles", "levelNumber": "Nivel {number}", "locked": "Completa el nivel anterior para desbloquear" },
|
||||
"worlds": { "1": { "title": "Aldea Inicial" }, "2": { "title": "Castillo de Claridad" }, "3": { "title": "Cuevas de Contexto" }, "4": { "title": "Cañón Creativo" }, "5": { "title": "Montaña Maestra" } },
|
||||
"levels": {
|
||||
"1_1_meet_promi": { "title": "¡Conoce a Promi!", "description": "Saluda a tu amigo robot y aprende qué es la IA" },
|
||||
"1_2_first_words": { "title": "Las Primeras Palabras de Promi", "description": "Ayuda a Promi a entender escribiendo tu primer prompt" },
|
||||
"1_3_being_clear": { "title": "Ser Claro", "description": "Aprende por qué las instrucciones claras funcionan mejor" }
|
||||
},
|
||||
"level": { "backToMap": "Volver al Mapa", "levelLabel": "Nivel {number}", "comingSoon": "¡Este nivel llegará pronto!", "previous": "Anterior", "next": "Siguiente", "map": "Mapa" },
|
||||
"levelComplete": { "title": "¡Nivel Completado!", "nextLevel": "Siguiente Nivel", "backToMap": "Volver al Mapa", "allDone": "Volver al Mapa" }
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1385,5 +1385,30 @@
|
||||
"ideationTitle": "ایدهپردازی",
|
||||
"communityContributorsTitle": "مشارکتکنندگان جامعه",
|
||||
"viewAllContributors": "مشاهده همه مشارکتکنندگان در"
|
||||
},
|
||||
"kids": {
|
||||
"header": { "title": "مدرسه پرامپت چیپ", "levels": "مرحله", "home": "خانه", "map": "نقشه", "mainSite": "سایت اصلی" },
|
||||
"home": {
|
||||
"badge": "یادگیری برای کودکان",
|
||||
"title": "یاد بگیر با هوش مصنوعی صحبت کنی!",
|
||||
"subtitle": "به ربات چیپ در یک ماجراجویی سرگرمکننده بپیوند و یاد بگیر پرامپتهای عالی بنویسی!",
|
||||
"promiIntro": { "greeting": "سلام، من چیپ هستم! 🤖", "message": "من یک ربات دوستانه هستم که به کمک تو نیاز دارد! کمکم میکنی پرامپتها را بهتر بفهمم؟" },
|
||||
"features": {
|
||||
"games": { "title": "بازیهای سرگرمکننده", "description": "با بازیهای کشیدن و رها کردن و آزمونها یاد بگیر" },
|
||||
"stories": { "title": "داستانهای جالب", "description": "با چیپ در ماجراجوییهای هیجانانگیز همراه شو" },
|
||||
"stars": { "title": "ستاره جمع کن", "description": "ستاره جمع کن و مراحل جدید را باز کن" }
|
||||
},
|
||||
"startButton": "شروع بازی!",
|
||||
"ageNote": "مناسب برای کودکان ۸-۱۴ ساله که میتوانند بخوانند و بنویسند"
|
||||
},
|
||||
"map": { "title": "نقشه جهان", "subtitle": "یک مرحله انتخاب کن و ماجراجوییات را شروع کن!", "worldLevels": "{count} مرحله", "levelNumber": "مرحله {number}", "locked": "برای باز کردن، مرحله قبلی را کامل کن" },
|
||||
"worlds": { "1": { "title": "دهکده شروع" }, "2": { "title": "قلعه شفافیت" }, "3": { "title": "غارهای زمینه" }, "4": { "title": "دره خلاقیت" }, "5": { "title": "کوه استادی" } },
|
||||
"levels": {
|
||||
"1_1_meet_promi": { "title": "با چیپ آشنا شو!", "description": "به دوست رباتات سلام کن و یاد بگیر هوش مصنوعی چیست" },
|
||||
"1_2_first_words": { "title": "اولین کلمات چیپ", "description": "با نوشتن اولین پرامپتات به چیپ کمک کن بفهمد" },
|
||||
"1_3_being_clear": { "title": "واضح باش", "description": "یاد بگیر چرا دستورالعملهای واضح بهتر کار میکنند" }
|
||||
},
|
||||
"level": { "backToMap": "برگشت به نقشه", "levelLabel": "مرحله {number}", "comingSoon": "این مرحله به زودی میآید!", "previous": "قبلی", "next": "بعدی", "map": "نقشه" },
|
||||
"levelComplete": { "title": "مرحله تمام شد!", "nextLevel": "مرحله بعدی", "backToMap": "برگشت به نقشه", "allDone": "برگشت به نقشه" }
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1385,5 +1385,30 @@
|
||||
"ideationTitle": "Idéation",
|
||||
"communityContributorsTitle": "Contributeurs de la Communauté",
|
||||
"viewAllContributors": "Voir tous les contributeurs sur"
|
||||
},
|
||||
"kids": {
|
||||
"header": { "title": "L'École de Prompts de Promi", "levels": "niveaux", "home": "Accueil", "map": "Carte", "mainSite": "Site Principal" },
|
||||
"home": {
|
||||
"badge": "Apprentissage pour Enfants",
|
||||
"title": "Apprends à Parler avec l'IA !",
|
||||
"subtitle": "Rejoins le robot Promi dans une aventure amusante pour apprendre à écrire des prompts géniaux !",
|
||||
"promiIntro": { "greeting": "Salut, je suis Promi ! 🤖", "message": "Je suis un robot sympa qui a besoin de TON aide ! Tu m'aides à mieux comprendre les prompts ?" },
|
||||
"features": {
|
||||
"games": { "title": "Jeux Amusants", "description": "Apprends en jouant avec glisser-déposer et quiz" },
|
||||
"stories": { "title": "Histoires Cool", "description": "Suis Promi dans des aventures passionnantes" },
|
||||
"stars": { "title": "Gagne des Étoiles", "description": "Collectionne des étoiles et débloque de nouveaux niveaux" }
|
||||
},
|
||||
"startButton": "Commencer à Jouer !",
|
||||
"ageNote": "Idéal pour les enfants de 8-14 ans qui savent lire et écrire"
|
||||
},
|
||||
"map": { "title": "Carte du Monde", "subtitle": "Choisis un niveau et commence ton aventure !", "worldLevels": "{count} niveaux", "levelNumber": "Niveau {number}", "locked": "Termine le niveau précédent pour débloquer" },
|
||||
"worlds": { "1": { "title": "Village de Départ" }, "2": { "title": "Château de la Clarté" }, "3": { "title": "Grottes du Contexte" }, "4": { "title": "Canyon Créatif" }, "5": { "title": "Montagne du Maître" } },
|
||||
"levels": {
|
||||
"1_1_meet_promi": { "title": "Rencontre Promi !", "description": "Dis bonjour à ton ami robot et apprends ce qu'est l'IA" },
|
||||
"1_2_first_words": { "title": "Les Premiers Mots de Promi", "description": "Aide Promi à comprendre en écrivant ton premier prompt" },
|
||||
"1_3_being_clear": { "title": "Être Clair", "description": "Apprends pourquoi les instructions claires fonctionnent mieux" }
|
||||
},
|
||||
"level": { "backToMap": "Retour à la Carte", "levelLabel": "Niveau {number}", "comingSoon": "Ce niveau arrive bientôt !", "previous": "Précédent", "next": "Suivant", "map": "Carte" },
|
||||
"levelComplete": { "title": "Niveau Terminé !", "nextLevel": "Niveau Suivant", "backToMap": "Retour à la Carte", "allDone": "Retour à la Carte" }
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1385,5 +1385,30 @@
|
||||
"ideationTitle": "רעיונות",
|
||||
"communityContributorsTitle": "תורמי קהילה",
|
||||
"viewAllContributors": "צפה בכל התורמים ב"
|
||||
},
|
||||
"kids": {
|
||||
"header": { "title": "בית הספר לפרומפטים של צ'יפ", "levels": "שלבים", "home": "בית", "map": "מפה", "mainSite": "האתר הראשי" },
|
||||
"home": {
|
||||
"badge": "למידה לילדים",
|
||||
"title": "למד לדבר עם AI!",
|
||||
"subtitle": "הצטרף לרובוט צ'יפ בהרפתקה מהנה ללמוד איך לכתוב פרומפטים מדהימים!",
|
||||
"promiIntro": { "greeting": "היי, אני צ'יפ! 🤖", "message": "אני רובוט ידידותי שצריך את העזרה שלך! תעזור לי להבין פרומפטים טוב יותר?" },
|
||||
"features": {
|
||||
"games": { "title": "משחקים כיפיים", "description": "למד על ידי משחקי גרירה ושחרור וחידונים" },
|
||||
"stories": { "title": "סיפורים מגניבים", "description": "עקוב אחרי צ'יפ בהרפתקאות מרגשות" },
|
||||
"stars": { "title": "אסוף כוכבים", "description": "אסוף כוכבים ופתח שלבים חדשים" }
|
||||
},
|
||||
"startButton": "התחל לשחק!",
|
||||
"ageNote": "מתאים לילדים בגילאי 8-14 שיודעים לקרוא ולכתוב"
|
||||
},
|
||||
"map": { "title": "מפת העולם", "subtitle": "בחר שלב והתחל את ההרפתקה שלך!", "worldLevels": "{count} שלבים", "levelNumber": "שלב {number}", "locked": "השלם את השלב הקודם לפתיחה" },
|
||||
"worlds": { "1": { "title": "כפר ההתחלה" }, "2": { "title": "טירת הבהירות" }, "3": { "title": "מערות ההקשר" }, "4": { "title": "קניון היצירתיות" }, "5": { "title": "הר המומחיות" } },
|
||||
"levels": {
|
||||
"1_1_meet_promi": { "title": "הכר את צ'יפ!", "description": "אמור שלום לחבר הרובוט שלך ולמד מה זה AI" },
|
||||
"1_2_first_words": { "title": "המילים הראשונות של צ'יפ", "description": "עזור לצ'יפ להבין על ידי כתיבת הפרומפט הראשון שלך" },
|
||||
"1_3_being_clear": { "title": "להיות ברור", "description": "למד למה הוראות ברורות עובדות טוב יותר" }
|
||||
},
|
||||
"level": { "backToMap": "חזרה למפה", "levelLabel": "שלב {number}", "comingSoon": "השלב הזה מגיע בקרוב!", "previous": "קודם", "next": "הבא", "map": "מפה" },
|
||||
"levelComplete": { "title": "שלב הושלם!", "nextLevel": "השלב הבא", "backToMap": "חזרה למפה", "allDone": "חזרה למפה" }
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1385,5 +1385,30 @@
|
||||
"ideationTitle": "Ideazione",
|
||||
"communityContributorsTitle": "Contributori della Community",
|
||||
"viewAllContributors": "Vedi tutti i contributori su"
|
||||
},
|
||||
"kids": {
|
||||
"header": { "title": "La Scuola di Prompt di Promi", "levels": "livelli", "home": "Home", "map": "Mappa", "mainSite": "Sito Principale" },
|
||||
"home": {
|
||||
"badge": "Apprendimento per Bambini",
|
||||
"title": "Impara a Parlare con l'IA!",
|
||||
"subtitle": "Unisciti al robot Promi in un'avventura divertente per imparare a scrivere prompt fantastici!",
|
||||
"promiIntro": { "greeting": "Ciao, sono Promi! 🤖", "message": "Sono un robot amichevole che ha bisogno del TUO aiuto! Mi aiuti a capire meglio i prompt?" },
|
||||
"features": {
|
||||
"games": { "title": "Giochi Divertenti", "description": "Impara giocando con drag-and-drop e quiz" },
|
||||
"stories": { "title": "Storie Fantastiche", "description": "Segui Promi in avventure emozionanti" },
|
||||
"stars": { "title": "Guadagna Stelle", "description": "Raccogli stelle e sblocca nuovi livelli" }
|
||||
},
|
||||
"startButton": "Inizia a Giocare!",
|
||||
"ageNote": "Ideale per bambini di 8-14 anni che sanno leggere e scrivere"
|
||||
},
|
||||
"map": { "title": "Mappa del Mondo", "subtitle": "Scegli un livello e inizia la tua avventura!", "worldLevels": "{count} livelli", "levelNumber": "Livello {number}", "locked": "Completa il livello precedente per sbloccare" },
|
||||
"worlds": { "1": { "title": "Villaggio Iniziale" }, "2": { "title": "Castello della Chiarezza" }, "3": { "title": "Caverne del Contesto" }, "4": { "title": "Canyon Creativo" }, "5": { "title": "Montagna del Maestro" } },
|
||||
"levels": {
|
||||
"1_1_meet_promi": { "title": "Incontra Promi!", "description": "Saluta il tuo amico robot e scopri cos'è l'IA" },
|
||||
"1_2_first_words": { "title": "Le Prime Parole di Promi", "description": "Aiuta Promi a capire scrivendo il tuo primo prompt" },
|
||||
"1_3_being_clear": { "title": "Essere Chiari", "description": "Scopri perché le istruzioni chiare funzionano meglio" }
|
||||
},
|
||||
"level": { "backToMap": "Torna alla Mappa", "levelLabel": "Livello {number}", "comingSoon": "Questo livello arriva presto!", "previous": "Precedente", "next": "Successivo", "map": "Mappa" },
|
||||
"levelComplete": { "title": "Livello Completato!", "nextLevel": "Livello Successivo", "backToMap": "Torna alla Mappa", "allDone": "Torna alla Mappa" }
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1385,5 +1385,30 @@
|
||||
"ideationTitle": "アイデア",
|
||||
"communityContributorsTitle": "コミュニティコントリビューター",
|
||||
"viewAllContributors": "すべてのコントリビューターを見る"
|
||||
},
|
||||
"kids": {
|
||||
"header": { "title": "Promiのプロンプトスクール", "levels": "レベル", "home": "ホーム", "map": "マップ", "mainSite": "メインサイト" },
|
||||
"home": {
|
||||
"badge": "キッズ向け学習",
|
||||
"title": "AIと話すことを学ぼう!",
|
||||
"subtitle": "ロボットのPromiと一緒に、素晴らしいプロンプトを書く楽しい冒険に出かけよう!",
|
||||
"promiIntro": { "greeting": "こんにちは、Promiだよ!🤖", "message": "キミの助けが必要なフレンドリーなロボットだよ!プロンプトをもっとよく理解できるように手伝ってくれる?" },
|
||||
"features": {
|
||||
"games": { "title": "楽しいゲーム", "description": "ドラッグ&ドロップゲームやクイズで学ぼう" },
|
||||
"stories": { "title": "すごいストーリー", "description": "Promiと一緒にワクワクする冒険を体験" },
|
||||
"stars": { "title": "スターを集めよう", "description": "スターを集めて新しいレベルをアンロック" }
|
||||
},
|
||||
"startButton": "遊び始めよう!",
|
||||
"ageNote": "読み書きができる8〜14歳のお子様に最適"
|
||||
},
|
||||
"map": { "title": "ワールドマップ", "subtitle": "レベルを選んで冒険を始めよう!", "worldLevels": "{count}レベル", "levelNumber": "レベル{number}", "locked": "前のレベルをクリアしてアンロック" },
|
||||
"worlds": { "1": { "title": "はじまりの村" }, "2": { "title": "明確城" }, "3": { "title": "コンテキスト洞窟" }, "4": { "title": "クリエイティブ渓谷" }, "5": { "title": "マスター山" } },
|
||||
"levels": {
|
||||
"1_1_meet_promi": { "title": "Promiに会おう!", "description": "ロボットの友達に挨拶してAIとは何かを学ぼう" },
|
||||
"1_2_first_words": { "title": "Promiの最初の言葉", "description": "最初のプロンプトを書いてPromiの理解を助けよう" },
|
||||
"1_3_being_clear": { "title": "はっきり伝えよう", "description": "なぜ明確な指示がより効果的なのかを学ぼう" }
|
||||
},
|
||||
"level": { "backToMap": "マップに戻る", "levelLabel": "レベル{number}", "comingSoon": "このレベルは近日公開!", "previous": "前へ", "next": "次へ", "map": "マップ" },
|
||||
"levelComplete": { "title": "レベルクリア!", "nextLevel": "次のレベル", "backToMap": "マップに戻る", "allDone": "マップに戻る" }
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1385,5 +1385,30 @@
|
||||
"ideationTitle": "아이디어",
|
||||
"communityContributorsTitle": "커뮤니티 기여자",
|
||||
"viewAllContributors": "모든 기여자 보기"
|
||||
},
|
||||
"kids": {
|
||||
"header": { "title": "Promi의 프롬프트 학교", "levels": "레벨", "home": "홈", "map": "지도", "mainSite": "메인 사이트" },
|
||||
"home": {
|
||||
"badge": "어린이 학습",
|
||||
"title": "AI와 대화하는 법을 배워요!",
|
||||
"subtitle": "로봇 Promi과 함께 재미있는 모험을 떠나 멋진 프롬프트 작성법을 배워보세요!",
|
||||
"promiIntro": { "greeting": "안녕, 나는 Promi이야! 🤖", "message": "네 도움이 필요한 친절한 로봇이야! 프롬프트를 더 잘 이해할 수 있게 도와줄래?" },
|
||||
"features": {
|
||||
"games": { "title": "재미있는 게임", "description": "드래그 앤 드롭 게임과 퀴즈로 배워요" },
|
||||
"stories": { "title": "멋진 이야기", "description": "Promi과 함께 신나는 모험을 떠나요" },
|
||||
"stars": { "title": "별 모으기", "description": "별을 모아 새로운 레벨을 열어요" }
|
||||
},
|
||||
"startButton": "게임 시작!",
|
||||
"ageNote": "읽고 쓸 수 있는 8-14세 어린이에게 적합해요"
|
||||
},
|
||||
"map": { "title": "세계 지도", "subtitle": "레벨을 선택하고 모험을 시작하세요!", "worldLevels": "{count}개 레벨", "levelNumber": "레벨 {number}", "locked": "이전 레벨을 완료하면 열립니다" },
|
||||
"worlds": { "1": { "title": "시작 마을" }, "2": { "title": "명확성의 성" }, "3": { "title": "맥락 동굴" }, "4": { "title": "창의력 협곡" }, "5": { "title": "마스터 산" } },
|
||||
"levels": {
|
||||
"1_1_meet_promi": { "title": "Promi을 만나요!", "description": "로봇 친구에게 인사하고 AI가 무엇인지 배워요" },
|
||||
"1_2_first_words": { "title": "Promi의 첫 번째 말", "description": "첫 번째 프롬프트를 작성해서 Promi이 이해하도록 도와주세요" },
|
||||
"1_3_being_clear": { "title": "명확하게 말하기", "description": "왜 명확한 지시가 더 잘 작동하는지 배워요" }
|
||||
},
|
||||
"level": { "backToMap": "지도로 돌아가기", "levelLabel": "레벨 {number}", "comingSoon": "이 레벨은 곧 출시됩니다!", "previous": "이전", "next": "다음", "map": "지도" },
|
||||
"levelComplete": { "title": "레벨 완료!", "nextLevel": "다음 레벨", "backToMap": "지도로 돌아가기", "allDone": "지도로 돌아가기" }
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1385,5 +1385,30 @@
|
||||
"ideationTitle": "Ideação",
|
||||
"communityContributorsTitle": "Contribuidores da Comunidade",
|
||||
"viewAllContributors": "Ver todos os contribuidores em"
|
||||
},
|
||||
"kids": {
|
||||
"header": { "title": "Escola de Prompts do Promi", "levels": "níveis", "home": "Início", "map": "Mapa", "mainSite": "Site Principal" },
|
||||
"home": {
|
||||
"badge": "Aprendizado para Crianças",
|
||||
"title": "Aprenda a Falar com IA!",
|
||||
"subtitle": "Junte-se ao robô Promi em uma aventura divertida para aprender a escrever prompts incríveis!",
|
||||
"promiIntro": { "greeting": "Oi, eu sou o Promi! 🤖", "message": "Sou um robô amigável que precisa da SUA ajuda! Você me ajuda a entender melhor os prompts?" },
|
||||
"features": {
|
||||
"games": { "title": "Jogos Divertidos", "description": "Aprenda jogando arrastar e soltar e quizzes" },
|
||||
"stories": { "title": "Histórias Legais", "description": "Siga o Promi em aventuras emocionantes" },
|
||||
"stars": { "title": "Ganhe Estrelas", "description": "Colete estrelas e desbloqueie novos níveis" }
|
||||
},
|
||||
"startButton": "Começar a Jogar!",
|
||||
"ageNote": "Ideal para crianças de 8-14 anos que sabem ler e escrever"
|
||||
},
|
||||
"map": { "title": "Mapa do Mundo", "subtitle": "Escolha um nível e comece sua aventura!", "worldLevels": "{count} níveis", "levelNumber": "Nível {number}", "locked": "Complete o nível anterior para desbloquear" },
|
||||
"worlds": { "1": { "title": "Vila Inicial" }, "2": { "title": "Castelo da Clareza" }, "3": { "title": "Cavernas de Contexto" }, "4": { "title": "Cânion Criativo" }, "5": { "title": "Montanha Mestre" } },
|
||||
"levels": {
|
||||
"1_1_meet_promi": { "title": "Conheça o Promi!", "description": "Diga olá ao seu amigo robô e aprenda o que é IA" },
|
||||
"1_2_first_words": { "title": "As Primeiras Palavras do Promi", "description": "Ajude o Promi a entender escrevendo seu primeiro prompt" },
|
||||
"1_3_being_clear": { "title": "Sendo Claro", "description": "Aprenda por que instruções claras funcionam melhor" }
|
||||
},
|
||||
"level": { "backToMap": "Voltar ao Mapa", "levelLabel": "Nível {number}", "comingSoon": "Este nível está chegando!", "previous": "Anterior", "next": "Próximo", "map": "Mapa" },
|
||||
"levelComplete": { "title": "Nível Completo!", "nextLevel": "Próximo Nível", "backToMap": "Voltar ao Mapa", "allDone": "Voltar ao Mapa" }
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1385,5 +1385,30 @@
|
||||
"ideationTitle": "Идеи",
|
||||
"communityContributorsTitle": "Участники сообщества",
|
||||
"viewAllContributors": "Посмотреть всех участников на"
|
||||
},
|
||||
"kids": {
|
||||
"header": { "title": "Школа промптов Чипа", "levels": "уровней", "home": "Главная", "map": "Карта", "mainSite": "Основной сайт" },
|
||||
"home": {
|
||||
"badge": "Обучение для детей",
|
||||
"title": "Научись разговаривать с ИИ!",
|
||||
"subtitle": "Присоединяйся к роботу Чипу в увлекательном приключении и научись писать крутые промпты!",
|
||||
"promiIntro": { "greeting": "Привет, я Чип! 🤖", "message": "Я дружелюбный робот, которому нужна ТВОЯ помощь! Поможешь мне лучше понимать промпты?" },
|
||||
"features": {
|
||||
"games": { "title": "Весёлые игры", "description": "Учись, играя в игры перетаскивания и викторины" },
|
||||
"stories": { "title": "Классные истории", "description": "Следуй за Чипом в захватывающих приключениях" },
|
||||
"stars": { "title": "Собирай звёзды", "description": "Собирай звёзды и открывай новые уровни" }
|
||||
},
|
||||
"startButton": "Начать играть!",
|
||||
"ageNote": "Лучше всего подходит для детей 8-14 лет, умеющих читать и писать"
|
||||
},
|
||||
"map": { "title": "Карта мира", "subtitle": "Выбери уровень и начни своё приключение!", "worldLevels": "{count} уровней", "levelNumber": "Уровень {number}", "locked": "Пройди предыдущий уровень для разблокировки" },
|
||||
"worlds": { "1": { "title": "Стартовая деревня" }, "2": { "title": "Замок ясности" }, "3": { "title": "Пещеры контекста" }, "4": { "title": "Каньон творчества" }, "5": { "title": "Гора мастерства" } },
|
||||
"levels": {
|
||||
"1_1_meet_promi": { "title": "Познакомься с Чипом!", "description": "Поздоровайся с роботом-другом и узнай, что такое ИИ" },
|
||||
"1_2_first_words": { "title": "Первые слова Чипа", "description": "Помоги Чипу понять, написав свой первый промпт" },
|
||||
"1_3_being_clear": { "title": "Будь понятным", "description": "Узнай, почему чёткие инструкции работают лучше" }
|
||||
},
|
||||
"level": { "backToMap": "Назад к карте", "levelLabel": "Уровень {number}", "comingSoon": "Этот уровень скоро появится!", "previous": "Назад", "next": "Далее", "map": "Карта" },
|
||||
"levelComplete": { "title": "Уровень пройден!", "nextLevel": "Следующий уровень", "backToMap": "Назад к карте", "allDone": "Назад к карте" }
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1385,5 +1385,72 @@
|
||||
"ideationTitle": "Fikir",
|
||||
"communityContributorsTitle": "Topluluk Katkıda Bulunanları",
|
||||
"viewAllContributors": "Tüm katkıda bulunanları görüntüle:"
|
||||
},
|
||||
"kids": {
|
||||
"header": {
|
||||
"title": "Promi'in Prompt Okulu",
|
||||
"levels": "seviye",
|
||||
"home": "Ana Sayfa",
|
||||
"map": "Harita",
|
||||
"mainSite": "Ana Site"
|
||||
},
|
||||
"home": {
|
||||
"badge": "Çocuklar İçin Öğrenme",
|
||||
"title": "Yapay Zeka ile Konuşmayı Öğren!",
|
||||
"subtitle": "Robot Promi ile harika promptlar yazmayı öğrenmek için eğlenceli bir maceraya katıl!",
|
||||
"promiIntro": {
|
||||
"greeting": "Merhaba, ben Promi! 🤖",
|
||||
"message": "Senin yardımına ihtiyacı olan dostça bir robotum! Promptları daha iyi anlamam için bana yardım eder misin?"
|
||||
},
|
||||
"features": {
|
||||
"games": {
|
||||
"title": "Eğlenceli Oyunlar",
|
||||
"description": "Sürükle-bırak oyunları ve testlerle öğren"
|
||||
},
|
||||
"stories": {
|
||||
"title": "Harika Hikayeler",
|
||||
"description": "Promi ile heyecanlı maceralar yaşa"
|
||||
},
|
||||
"stars": {
|
||||
"title": "Yıldız Kazan",
|
||||
"description": "Yıldızlar topla ve yeni seviyelerin kilidini aç"
|
||||
}
|
||||
},
|
||||
"startButton": "Oynamaya Başla!",
|
||||
"ageNote": "Okuma yazma bilen 8-14 yaş çocuklar için en uygun"
|
||||
},
|
||||
"map": {
|
||||
"title": "Dünya Haritası",
|
||||
"subtitle": "Bir seviye seç ve macerana başla!",
|
||||
"worldLevels": "{count} seviye",
|
||||
"levelNumber": "Seviye {number}",
|
||||
"locked": "Kilidini açmak için önceki seviyeyi tamamla"
|
||||
},
|
||||
"worlds": {
|
||||
"1": { "title": "Başlangıç Köyü" },
|
||||
"2": { "title": "Netlik Kalesi" },
|
||||
"3": { "title": "Bağlam Mağaraları" },
|
||||
"4": { "title": "Yaratıcılık Kanyonu" },
|
||||
"5": { "title": "Usta Dağı" }
|
||||
},
|
||||
"levels": {
|
||||
"1_1_meet_promi": { "title": "Promi ile Tanış!", "description": "Robot arkadaşınla tanış ve yapay zekanın ne olduğunu öğren" },
|
||||
"1_2_first_words": { "title": "Promi'in İlk Sözleri", "description": "İlk promptunu yazarak Promi'in anlamasına yardım et" },
|
||||
"1_3_being_clear": { "title": "Net Olmak", "description": "Net talimatların neden daha iyi çalıştığını öğren" }
|
||||
},
|
||||
"level": {
|
||||
"backToMap": "Haritaya Dön",
|
||||
"levelLabel": "Seviye {number}",
|
||||
"comingSoon": "Bu seviye yakında geliyor!",
|
||||
"previous": "Önceki",
|
||||
"next": "Sonraki",
|
||||
"map": "Harita"
|
||||
},
|
||||
"levelComplete": {
|
||||
"title": "Seviye Tamamlandı!",
|
||||
"nextLevel": "Sonraki Seviye",
|
||||
"backToMap": "Haritaya Dön",
|
||||
"allDone": "Haritaya Dön"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1385,5 +1385,30 @@
|
||||
"ideationTitle": "创意",
|
||||
"communityContributorsTitle": "社区贡献者",
|
||||
"viewAllContributors": "在此查看所有贡献者"
|
||||
},
|
||||
"kids": {
|
||||
"header": { "title": "Promi的提示词学校", "levels": "关卡", "home": "首页", "map": "地图", "mainSite": "主站" },
|
||||
"home": {
|
||||
"badge": "儿童学习",
|
||||
"title": "学习与AI对话!",
|
||||
"subtitle": "和机器人Promi一起踏上有趣的冒险,学习如何写出精彩的提示词!",
|
||||
"promiIntro": { "greeting": "你好,我是Promi!🤖", "message": "我是一个需要你帮助的友好机器人!你愿意帮我更好地理解提示词吗?" },
|
||||
"features": {
|
||||
"games": { "title": "趣味游戏", "description": "通过拖放游戏和测验来学习" },
|
||||
"stories": { "title": "精彩故事", "description": "跟随Promi经历激动人心的冒险" },
|
||||
"stars": { "title": "赚取星星", "description": "收集星星,解锁新关卡" }
|
||||
},
|
||||
"startButton": "开始游戏!",
|
||||
"ageNote": "适合8-14岁会读写的儿童"
|
||||
},
|
||||
"map": { "title": "世界地图", "subtitle": "选择一个关卡,开始你的冒险!", "worldLevels": "{count}个关卡", "levelNumber": "关卡{number}", "locked": "完成上一关以解锁" },
|
||||
"worlds": { "1": { "title": "新手村" }, "2": { "title": "清晰城堡" }, "3": { "title": "上下文洞穴" }, "4": { "title": "创意峡谷" }, "5": { "title": "大师山" } },
|
||||
"levels": {
|
||||
"1_1_meet_promi": { "title": "认识Promi!", "description": "和你的机器人朋友打招呼,了解什么是AI" },
|
||||
"1_2_first_words": { "title": "Promi的第一句话", "description": "写下你的第一个提示词来帮助Promi理解" },
|
||||
"1_3_being_clear": { "title": "表达清晰", "description": "了解为什么清晰的指令效果更好" }
|
||||
},
|
||||
"level": { "backToMap": "返回地图", "levelLabel": "关卡{number}", "comingSoon": "此关卡即将推出!", "previous": "上一关", "next": "下一关", "map": "地图" },
|
||||
"levelComplete": { "title": "关卡完成!", "nextLevel": "下一关", "backToMap": "返回地图", "allDone": "返回地图" }
|
||||
}
|
||||
}
|
||||
|
||||
16
src/app/kids/layout.tsx
Normal file
16
src/app/kids/layout.tsx
Normal file
@@ -0,0 +1,16 @@
|
||||
import { KidsHeader } from "@/components/kids/layout/kids-header";
|
||||
|
||||
export default function KidsLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-b from-sky-50 via-white to-emerald-50 dark:from-sky-950 dark:via-background dark:to-emerald-950">
|
||||
<KidsHeader />
|
||||
<main className="container py-6">
|
||||
{children}
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
129
src/app/kids/level/[slug]/page.tsx
Normal file
129
src/app/kids/level/[slug]/page.tsx
Normal file
@@ -0,0 +1,129 @@
|
||||
import { notFound } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
import { getTranslations, getLocale } from "next-intl/server";
|
||||
import { getLevelBySlug, getAdjacentLevels, getAllLevels } from "@/lib/kids/levels";
|
||||
import { ChevronLeft, ChevronRight, Map } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import type { Metadata } from "next";
|
||||
|
||||
interface LevelPageProps {
|
||||
params: Promise<{ slug: string }>;
|
||||
}
|
||||
|
||||
export async function generateStaticParams() {
|
||||
return getAllLevels().map((level) => ({
|
||||
slug: level.slug,
|
||||
}));
|
||||
}
|
||||
|
||||
export async function generateMetadata({ params }: LevelPageProps): Promise<Metadata> {
|
||||
const { slug } = await params;
|
||||
const level = getLevelBySlug(slug);
|
||||
|
||||
if (!level) {
|
||||
return { title: "Level Not Found" };
|
||||
}
|
||||
|
||||
return {
|
||||
title: `${level.title} | Learn Prompting for Kids`,
|
||||
description: level.description,
|
||||
};
|
||||
}
|
||||
|
||||
export default async function LevelPage({ params }: LevelPageProps) {
|
||||
const { slug } = await params;
|
||||
const level = getLevelBySlug(slug);
|
||||
const t = await getTranslations("kids");
|
||||
const locale = await getLocale();
|
||||
|
||||
if (!level) {
|
||||
notFound();
|
||||
}
|
||||
|
||||
const { prev, next } = getAdjacentLevels(slug);
|
||||
|
||||
// Try to load locale-specific content, fall back to English
|
||||
let Content;
|
||||
try {
|
||||
Content = (await import(`@/content/kids/${locale}/${slug}.mdx`)).default;
|
||||
} catch {
|
||||
try {
|
||||
Content = (await import(`@/content/kids/en/${slug}.mdx`)).default;
|
||||
} catch {
|
||||
Content = () => (
|
||||
<div className="text-center py-12">
|
||||
<p className="text-muted-foreground">
|
||||
{t("level.comingSoon")}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="max-w-2xl mx-auto">
|
||||
{/* Level Header */}
|
||||
<header className="mb-8">
|
||||
<Link
|
||||
href="/kids/map"
|
||||
className="inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-primary mb-4"
|
||||
>
|
||||
<Map className="h-4 w-4" />
|
||||
{t("level.backToMap")}
|
||||
</Link>
|
||||
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<span className="px-3 py-1 bg-primary/10 text-primary rounded-full text-sm font-medium">
|
||||
{t("level.levelLabel", { number: `${level.world}-${level.levelNumber}` })}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h1 className="text-3xl font-bold tracking-tight mb-2">
|
||||
{level.title}
|
||||
</h1>
|
||||
<p className="text-muted-foreground">
|
||||
{level.description}
|
||||
</p>
|
||||
</header>
|
||||
|
||||
{/* Level Content */}
|
||||
<div className="prose max-w-none kids-prose">
|
||||
<Content />
|
||||
</div>
|
||||
|
||||
{/* Navigation */}
|
||||
<nav className="flex items-center justify-between mt-12 pt-6 border-t">
|
||||
{prev ? (
|
||||
<Button variant="outline" asChild className="gap-2 rounded-xl">
|
||||
<Link href={`/kids/level/${prev.slug}`}>
|
||||
<ChevronLeft className="h-4 w-4" />
|
||||
<span className="hidden sm:inline">{prev.title}</span>
|
||||
<span className="sm:hidden">{t("level.previous")}</span>
|
||||
</Link>
|
||||
</Button>
|
||||
) : (
|
||||
<div />
|
||||
)}
|
||||
|
||||
<Button variant="ghost" asChild>
|
||||
<Link href="/kids/map">
|
||||
<Map className="h-4 w-4 mr-2" />
|
||||
{t("level.map")}
|
||||
</Link>
|
||||
</Button>
|
||||
|
||||
{next ? (
|
||||
<Button variant="outline" asChild className="gap-2 rounded-xl">
|
||||
<Link href={`/kids/level/${next.slug}`}>
|
||||
<span className="hidden sm:inline">{next.title}</span>
|
||||
<span className="sm:hidden">{t("level.next")}</span>
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
</Link>
|
||||
</Button>
|
||||
) : (
|
||||
<div />
|
||||
)}
|
||||
</nav>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
23
src/app/kids/map/page.tsx
Normal file
23
src/app/kids/map/page.tsx
Normal file
@@ -0,0 +1,23 @@
|
||||
import { getTranslations } from "next-intl/server";
|
||||
import { ProgressMap } from "@/components/kids/elements/progress-map";
|
||||
import type { Metadata } from "next";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "World Map | Learn Prompting for Kids",
|
||||
description: "Choose your adventure! Pick a level and start learning how to talk to AI.",
|
||||
};
|
||||
|
||||
export default async function KidsMapPage() {
|
||||
const t = await getTranslations("kids");
|
||||
|
||||
return (
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<div className="text-center mb-8">
|
||||
<h1 className="text-3xl font-bold mb-2">{t("map.title")}</h1>
|
||||
<p className="text-muted-foreground">{t("map.subtitle")}</p>
|
||||
</div>
|
||||
|
||||
<ProgressMap />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
84
src/app/kids/page.tsx
Normal file
84
src/app/kids/page.tsx
Normal file
@@ -0,0 +1,84 @@
|
||||
import Link from "next/link";
|
||||
import { getTranslations } from "next-intl/server";
|
||||
import { Play, Sparkles, Star, Bot } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { PromiCharacter } from "@/components/kids/elements/character-guide";
|
||||
import type { Metadata } from "next";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Learn Prompting for Kids | prompts.chat",
|
||||
description: "A fun, game-based way for kids to learn how to talk to AI. Join Promi the robot on an adventure through Prompt Land!",
|
||||
};
|
||||
|
||||
export default async function KidsHomePage() {
|
||||
const t = await getTranslations("kids");
|
||||
|
||||
return (
|
||||
<div className="max-w-2xl mx-auto text-center">
|
||||
{/* Hero */}
|
||||
<div className="mb-8">
|
||||
<div className="inline-flex items-center gap-2 px-4 py-2 bg-primary/10 rounded-full text-primary text-sm font-medium mb-6">
|
||||
<Sparkles className="h-4 w-4" />
|
||||
{t("home.badge")}
|
||||
</div>
|
||||
|
||||
<h1 className="text-4xl md:text-5xl font-bold tracking-tight mb-4 bg-gradient-to-r from-primary via-purple-500 to-pink-500 bg-clip-text text-transparent">
|
||||
{t("home.title")}
|
||||
</h1>
|
||||
|
||||
<p className="text-xl text-muted-foreground mb-8">
|
||||
{t("home.subtitle")}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Promi Introduction */}
|
||||
<div className="mb-10 p-6 bg-white dark:bg-card rounded-2xl shadow-lg border-2 border-primary/20">
|
||||
<div className="flex flex-col sm:flex-row items-center gap-6">
|
||||
<div className="shrink-0">
|
||||
<PromiCharacter mood="happy" size="lg" />
|
||||
</div>
|
||||
<div className="text-left">
|
||||
<p className="text-lg font-medium mb-2">{t("home.promiIntro.greeting")}</p>
|
||||
<p className="text-muted-foreground">
|
||||
{t("home.promiIntro.message")}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Features */}
|
||||
<div className="grid sm:grid-cols-3 gap-4 mb-10">
|
||||
<div className="p-4 bg-emerald-50 dark:bg-emerald-950/30 rounded-xl border border-emerald-200 dark:border-emerald-800">
|
||||
<div className="text-3xl mb-2">🎮</div>
|
||||
<h3 className="font-semibold mb-1">{t("home.features.games.title")}</h3>
|
||||
<p className="text-sm text-muted-foreground">{t("home.features.games.description")}</p>
|
||||
</div>
|
||||
<div className="p-4 bg-blue-50 dark:bg-blue-950/30 rounded-xl border border-blue-200 dark:border-blue-800">
|
||||
<div className="text-3xl mb-2">📖</div>
|
||||
<h3 className="font-semibold mb-1">{t("home.features.stories.title")}</h3>
|
||||
<p className="text-sm text-muted-foreground">{t("home.features.stories.description")}</p>
|
||||
</div>
|
||||
<div className="p-4 bg-purple-50 dark:bg-purple-950/30 rounded-xl border border-purple-200 dark:border-purple-800">
|
||||
<div className="text-3xl mb-2">⭐</div>
|
||||
<h3 className="font-semibold mb-1">{t("home.features.stars.title")}</h3>
|
||||
<p className="text-sm text-muted-foreground">{t("home.features.stars.description")}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* CTA */}
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<Button asChild size="lg" className="text-lg px-8 py-6 rounded-xl shadow-lg hover:shadow-xl transition-shadow">
|
||||
<Link href="/kids/map">
|
||||
<Play className="h-5 w-5 mr-2" />
|
||||
{t("home.startButton")}
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Age note */}
|
||||
<p className="mt-8 text-sm text-muted-foreground">
|
||||
{t("home.ageNote")}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
114
src/components/kids/elements/character-guide.tsx
Normal file
114
src/components/kids/elements/character-guide.tsx
Normal file
@@ -0,0 +1,114 @@
|
||||
"use client";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
type PromiMood = "happy" | "thinking" | "excited" | "confused" | "celebrating";
|
||||
|
||||
interface PromiCharacterProps {
|
||||
mood?: PromiMood;
|
||||
size?: "sm" | "md" | "lg";
|
||||
className?: string;
|
||||
animate?: boolean;
|
||||
}
|
||||
|
||||
const moodEmojis: Record<PromiMood, string> = {
|
||||
happy: "😊",
|
||||
thinking: "🤔",
|
||||
excited: "🤩",
|
||||
confused: "😵💫",
|
||||
celebrating: "🎉",
|
||||
};
|
||||
|
||||
const sizeClasses = {
|
||||
sm: "w-12 h-12 text-2xl",
|
||||
md: "w-20 h-20 text-4xl",
|
||||
lg: "w-28 h-28 text-5xl",
|
||||
};
|
||||
|
||||
export function PromiCharacter({
|
||||
mood = "happy",
|
||||
size = "md",
|
||||
className,
|
||||
animate = true
|
||||
}: PromiCharacterProps) {
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"relative flex items-center justify-center rounded-full bg-gradient-to-br from-primary/20 to-purple-500/20 border-4 border-primary/30",
|
||||
sizeClasses[size],
|
||||
animate && "animate-float",
|
||||
className
|
||||
)}
|
||||
>
|
||||
{/* Robot face */}
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<span className="relative">
|
||||
🤖
|
||||
{/* Mood indicator */}
|
||||
<span className="absolute -bottom-1 -right-1 text-lg">
|
||||
{moodEmojis[mood]}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface SpeechBubbleProps {
|
||||
children: React.ReactNode;
|
||||
direction?: "left" | "right" | "bottom";
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function SpeechBubble({
|
||||
children,
|
||||
direction = "right",
|
||||
className
|
||||
}: SpeechBubbleProps) {
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"relative p-4 bg-white dark:bg-card rounded-2xl shadow-lg border-2 border-primary/20",
|
||||
className
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
{/* Speech bubble tail */}
|
||||
<div
|
||||
className={cn(
|
||||
"absolute w-4 h-4 bg-white dark:bg-card border-2 border-primary/20 rotate-45",
|
||||
direction === "left" && "-left-2 top-1/2 -translate-y-1/2 border-r-0 border-t-0",
|
||||
direction === "right" && "-right-2 top-1/2 -translate-y-1/2 border-l-0 border-b-0",
|
||||
direction === "bottom" && "left-1/2 -bottom-2 -translate-x-1/2 border-l-0 border-t-0"
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface PromiWithMessageProps {
|
||||
message: string;
|
||||
mood?: PromiMood;
|
||||
promiPosition?: "left" | "right";
|
||||
}
|
||||
|
||||
export function PromiWithMessage({
|
||||
message,
|
||||
mood = "happy",
|
||||
promiPosition = "left"
|
||||
}: PromiWithMessageProps) {
|
||||
return (
|
||||
<div className={cn(
|
||||
"flex items-start gap-4 my-6",
|
||||
promiPosition === "right" && "flex-row-reverse"
|
||||
)}>
|
||||
<PromiCharacter mood={mood} size="md" />
|
||||
<SpeechBubble
|
||||
direction={promiPosition === "left" ? "left" : "right"}
|
||||
className="flex-1"
|
||||
>
|
||||
<p className="text-base leading-relaxed m-0">{message}</p>
|
||||
</SpeechBubble>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
189
src/components/kids/elements/drag-drop-prompt.tsx
Normal file
189
src/components/kids/elements/drag-drop-prompt.tsx
Normal file
@@ -0,0 +1,189 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useCallback } from "react";
|
||||
import { Check, RefreshCw, GripVertical } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
interface DragDropPromptProps {
|
||||
title?: string;
|
||||
instruction?: string;
|
||||
pieces: string[];
|
||||
correctOrder: number[]; // Indices of pieces in correct order
|
||||
successMessage?: string;
|
||||
}
|
||||
|
||||
export function DragDropPrompt({
|
||||
title = "Build the prompt! 🧩",
|
||||
instruction = "Drag the pieces into the right order to make a good prompt.",
|
||||
pieces,
|
||||
correctOrder,
|
||||
successMessage = "Perfect! You built a great prompt!",
|
||||
}: DragDropPromptProps) {
|
||||
const [shuffledPieces] = useState(() => {
|
||||
// Create array of indices and shuffle
|
||||
const indices = pieces.map((_, i) => i);
|
||||
for (let i = indices.length - 1; i > 0; i--) {
|
||||
const j = Math.floor(Math.random() * (i + 1));
|
||||
[indices[i], indices[j]] = [indices[j], indices[i]];
|
||||
}
|
||||
return indices;
|
||||
});
|
||||
|
||||
const [currentOrder, setCurrentOrder] = useState<number[]>(shuffledPieces);
|
||||
const [submitted, setSubmitted] = useState(false);
|
||||
const [draggedIndex, setDraggedIndex] = useState<number | null>(null);
|
||||
|
||||
const isCorrect = useCallback(() => {
|
||||
return currentOrder.every((pieceIndex, position) => pieceIndex === correctOrder[position]);
|
||||
}, [currentOrder, correctOrder]);
|
||||
|
||||
const handleDragStart = (index: number) => {
|
||||
setDraggedIndex(index);
|
||||
};
|
||||
|
||||
const handleDragOver = (e: React.DragEvent, index: number) => {
|
||||
e.preventDefault();
|
||||
if (draggedIndex === null || draggedIndex === index) return;
|
||||
|
||||
const newOrder = [...currentOrder];
|
||||
const draggedItem = newOrder[draggedIndex];
|
||||
newOrder.splice(draggedIndex, 1);
|
||||
newOrder.splice(index, 0, draggedItem);
|
||||
setCurrentOrder(newOrder);
|
||||
setDraggedIndex(index);
|
||||
};
|
||||
|
||||
const handleDragEnd = () => {
|
||||
setDraggedIndex(null);
|
||||
};
|
||||
|
||||
const moveItem = (fromIndex: number, direction: "up" | "down") => {
|
||||
const toIndex = direction === "up" ? fromIndex - 1 : fromIndex + 1;
|
||||
if (toIndex < 0 || toIndex >= currentOrder.length) return;
|
||||
|
||||
const newOrder = [...currentOrder];
|
||||
[newOrder[fromIndex], newOrder[toIndex]] = [newOrder[toIndex], newOrder[fromIndex]];
|
||||
setCurrentOrder(newOrder);
|
||||
};
|
||||
|
||||
const handleSubmit = () => {
|
||||
setSubmitted(true);
|
||||
};
|
||||
|
||||
const handleReset = () => {
|
||||
setCurrentOrder(shuffledPieces);
|
||||
setSubmitted(false);
|
||||
};
|
||||
|
||||
const correct = isCorrect();
|
||||
|
||||
return (
|
||||
<div className="my-6 rounded-2xl border-2 border-blue-200 dark:border-blue-800 overflow-hidden">
|
||||
{/* Header */}
|
||||
<div className="px-4 py-3 bg-gradient-to-r from-blue-100 to-cyan-100 dark:from-blue-950/50 dark:to-cyan-950/50 border-b border-blue-200 dark:border-blue-800">
|
||||
<p className="font-semibold m-0">{title}</p>
|
||||
<p className="text-sm text-muted-foreground m-0">{instruction}</p>
|
||||
</div>
|
||||
|
||||
<div className="p-4 space-y-4">
|
||||
{/* Draggable pieces */}
|
||||
<div className="space-y-2">
|
||||
{currentOrder.map((pieceIndex, position) => (
|
||||
<div
|
||||
key={`${pieceIndex}-${position}`}
|
||||
draggable={!submitted}
|
||||
onDragStart={() => handleDragStart(position)}
|
||||
onDragOver={(e) => handleDragOver(e, position)}
|
||||
onDragEnd={handleDragEnd}
|
||||
className={cn(
|
||||
"flex items-center gap-3 p-3 rounded-xl border-2 transition-all",
|
||||
!submitted && "cursor-grab active:cursor-grabbing hover:border-primary hover:shadow-md",
|
||||
submitted && pieceIndex === correctOrder[position] && "border-green-500 bg-green-50 dark:bg-green-950/30",
|
||||
submitted && pieceIndex !== correctOrder[position] && "border-red-400 bg-red-50 dark:bg-red-950/30",
|
||||
!submitted && "border-muted-foreground/20 bg-white dark:bg-card",
|
||||
draggedIndex === position && "opacity-50 scale-95"
|
||||
)}
|
||||
>
|
||||
{!submitted && (
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<button
|
||||
onClick={() => moveItem(position, "up")}
|
||||
disabled={position === 0}
|
||||
className="p-0.5 hover:text-primary disabled:opacity-30"
|
||||
>
|
||||
▲
|
||||
</button>
|
||||
<button
|
||||
onClick={() => moveItem(position, "down")}
|
||||
disabled={position === currentOrder.length - 1}
|
||||
className="p-0.5 hover:text-primary disabled:opacity-30"
|
||||
>
|
||||
▼
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<GripVertical className={cn("h-5 w-5 text-muted-foreground shrink-0", submitted && "opacity-0")} />
|
||||
|
||||
<span className="flex-1 font-mono text-sm">{pieces[pieceIndex]}</span>
|
||||
|
||||
<span className="w-6 h-6 rounded-full bg-muted flex items-center justify-center text-xs font-bold">
|
||||
{position + 1}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Preview */}
|
||||
<div className="p-3 bg-muted/30 rounded-xl">
|
||||
<p className="text-xs text-muted-foreground mb-2 m-0">Your prompt will look like:</p>
|
||||
<pre className="whitespace-pre-wrap text-sm font-mono m-0">
|
||||
{currentOrder.map((i) => pieces[i]).join(" ")}
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
{/* Result */}
|
||||
{submitted && (
|
||||
<div
|
||||
className={cn(
|
||||
"p-4 rounded-xl text-center",
|
||||
correct
|
||||
? "bg-green-100 dark:bg-green-950/50 border border-green-300 dark:border-green-800"
|
||||
: "bg-amber-100 dark:bg-amber-950/50 border border-amber-300 dark:border-amber-800"
|
||||
)}
|
||||
>
|
||||
{correct ? (
|
||||
<>
|
||||
<p className="text-2xl mb-2">🎉</p>
|
||||
<p className="font-semibold text-lg m-0">{successMessage}</p>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<p className="font-semibold m-0">Almost there!</p>
|
||||
<p className="text-sm text-muted-foreground m-0 mt-1">
|
||||
Try moving the pieces around to find the best order.
|
||||
</p>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex gap-2">
|
||||
{!submitted ? (
|
||||
<Button onClick={handleSubmit} className="rounded-full">
|
||||
<Check className="h-4 w-4 mr-1" />
|
||||
Check my prompt!
|
||||
</Button>
|
||||
) : (
|
||||
<Button onClick={handleReset} variant="outline" className="rounded-full">
|
||||
<RefreshCw className="h-4 w-4 mr-1" />
|
||||
Try again
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
7
src/components/kids/elements/index.ts
Normal file
7
src/components/kids/elements/index.ts
Normal file
@@ -0,0 +1,7 @@
|
||||
export { PromiCharacter, SpeechBubble, PromiWithMessage } from "./character-guide";
|
||||
export { StoryScene, Panel } from "./story-scene";
|
||||
export { ProgressMap } from "./progress-map";
|
||||
export { PromptVsMistake } from "./prompt-vs-mistake";
|
||||
export { MagicWords } from "./magic-words";
|
||||
export { DragDropPrompt } from "./drag-drop-prompt";
|
||||
export { LevelComplete } from "./level-complete";
|
||||
133
src/components/kids/elements/level-complete.tsx
Normal file
133
src/components/kids/elements/level-complete.tsx
Normal file
@@ -0,0 +1,133 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { Star, ArrowRight, Map, RotateCcw } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { completeLevel, getLevelProgress } from "@/lib/kids/progress";
|
||||
import { getAdjacentLevels } from "@/lib/kids/levels";
|
||||
import { PromiCharacter } from "./character-guide";
|
||||
|
||||
interface LevelCompleteProps {
|
||||
levelSlug: string;
|
||||
stars?: number; // 1-3, calculated based on performance
|
||||
message?: string;
|
||||
}
|
||||
|
||||
export function LevelComplete({
|
||||
levelSlug,
|
||||
stars = 3,
|
||||
message = "You did it!"
|
||||
}: LevelCompleteProps) {
|
||||
const t = useTranslations("kids");
|
||||
const [showConfetti, setShowConfetti] = useState(false);
|
||||
const [savedStars, setSavedStars] = useState(0);
|
||||
const { next } = getAdjacentLevels(levelSlug);
|
||||
|
||||
useEffect(() => {
|
||||
// Check if already completed with higher stars
|
||||
const existingProgress = getLevelProgress(levelSlug);
|
||||
const existingStars = existingProgress?.stars || 0;
|
||||
|
||||
if (stars > existingStars) {
|
||||
// Save progress
|
||||
completeLevel(levelSlug, stars);
|
||||
setShowConfetti(true);
|
||||
}
|
||||
|
||||
setSavedStars(Math.max(stars, existingStars));
|
||||
|
||||
// Hide confetti after animation
|
||||
const timer = setTimeout(() => setShowConfetti(false), 3000);
|
||||
return () => clearTimeout(timer);
|
||||
}, [levelSlug, stars]);
|
||||
|
||||
return (
|
||||
<div className="my-8 relative">
|
||||
{/* Confetti effect */}
|
||||
{showConfetti && (
|
||||
<div className="absolute inset-0 pointer-events-none overflow-hidden">
|
||||
{Array.from({ length: 20 }).map((_, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="absolute animate-bounce"
|
||||
style={{
|
||||
left: `${Math.random() * 100}%`,
|
||||
top: `${Math.random() * 50}%`,
|
||||
animationDelay: `${Math.random() * 0.5}s`,
|
||||
animationDuration: `${0.5 + Math.random() * 0.5}s`,
|
||||
}}
|
||||
>
|
||||
{["🎉", "⭐", "🌟", "✨", "🎊"][Math.floor(Math.random() * 5)]}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="rounded-2xl border-4 border-green-400 dark:border-green-600 bg-gradient-to-br from-green-50 to-emerald-50 dark:from-green-950/50 dark:to-emerald-950/50 overflow-hidden">
|
||||
{/* Header */}
|
||||
<div className="p-6 text-center">
|
||||
<div className="flex justify-center mb-4">
|
||||
<PromiCharacter mood="celebrating" size="lg" />
|
||||
</div>
|
||||
|
||||
<h2 className="text-3xl font-bold mb-2">🎉 {t("levelComplete.title")}</h2>
|
||||
<p className="text-lg text-muted-foreground">{message}</p>
|
||||
</div>
|
||||
|
||||
{/* Stars */}
|
||||
<div className="flex justify-center gap-2 pb-6">
|
||||
{[1, 2, 3].map((star) => (
|
||||
<div
|
||||
key={star}
|
||||
className={cn(
|
||||
"transition-all duration-500",
|
||||
star <= savedStars ? "scale-100" : "scale-75 opacity-30"
|
||||
)}
|
||||
style={{
|
||||
animationDelay: `${star * 0.2}s`,
|
||||
}}
|
||||
>
|
||||
<Star
|
||||
className={cn(
|
||||
"h-12 w-12",
|
||||
star <= savedStars
|
||||
? "fill-amber-400 text-amber-400 drop-shadow-lg"
|
||||
: "text-muted-foreground/30"
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex flex-col sm:flex-row gap-3 justify-center p-6 bg-white/50 dark:bg-card/50 border-t">
|
||||
{next ? (
|
||||
<Button asChild size="lg" className="rounded-full gap-2">
|
||||
<Link href={`/kids/level/${next.slug}`}>
|
||||
{t("levelComplete.nextLevel")}
|
||||
<ArrowRight className="h-5 w-5" />
|
||||
</Link>
|
||||
</Button>
|
||||
) : (
|
||||
<Button asChild size="lg" className="rounded-full gap-2">
|
||||
<Link href="/kids/map">
|
||||
{t("levelComplete.allDone")}
|
||||
<Map className="h-5 w-5" />
|
||||
</Link>
|
||||
</Button>
|
||||
)}
|
||||
|
||||
<Button variant="outline" asChild size="lg" className="rounded-full gap-2">
|
||||
<Link href="/kids/map">
|
||||
<Map className="h-5 w-5" />
|
||||
{t("levelComplete.backToMap")}
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
249
src/components/kids/elements/magic-words.tsx
Normal file
249
src/components/kids/elements/magic-words.tsx
Normal file
@@ -0,0 +1,249 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useCallback } from "react";
|
||||
import { Check, RefreshCw, Sparkles, GripVertical } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
interface BlankConfig {
|
||||
id: string;
|
||||
hint: string;
|
||||
answers: string[]; // Words to choose from (first one is correct)
|
||||
emoji?: string;
|
||||
}
|
||||
|
||||
interface MagicWordsProps {
|
||||
title?: string;
|
||||
sentence: string; // Use {{id}} for blanks
|
||||
blanks: BlankConfig[];
|
||||
successMessage?: string;
|
||||
}
|
||||
|
||||
export function MagicWords({
|
||||
title = "Drag the magic words! ✨",
|
||||
sentence,
|
||||
blanks,
|
||||
successMessage = "Amazing! You created a great prompt!",
|
||||
}: MagicWordsProps) {
|
||||
const [placements, setPlacements] = useState<Record<string, string>>({});
|
||||
const [submitted, setSubmitted] = useState(false);
|
||||
const [draggedWord, setDraggedWord] = useState<string | null>(null);
|
||||
|
||||
// Get all available words from blanks (shuffled)
|
||||
const [availableWords] = useState(() => {
|
||||
const words = blanks.flatMap((blank) =>
|
||||
blank.answers.map((answer) => ({ word: answer, blankId: blank.id }))
|
||||
);
|
||||
// Shuffle
|
||||
for (let i = words.length - 1; i > 0; i--) {
|
||||
const j = Math.floor(Math.random() * (i + 1));
|
||||
[words[i], words[j]] = [words[j], words[i]];
|
||||
}
|
||||
return words;
|
||||
});
|
||||
|
||||
const checkAnswer = useCallback((blankId: string, value: string): boolean => {
|
||||
const blank = blanks.find((b) => b.id === blankId);
|
||||
if (!blank) return false;
|
||||
return blank.answers.some((answer) => answer.toLowerCase() === value.toLowerCase());
|
||||
}, [blanks]);
|
||||
|
||||
const allCorrect = submitted && blanks.every((blank) => checkAnswer(blank.id, placements[blank.id] || ""));
|
||||
const score = blanks.filter((blank) => checkAnswer(blank.id, placements[blank.id] || "")).length;
|
||||
|
||||
const usedWords = Object.values(placements);
|
||||
|
||||
const handleDragStart = (word: string) => {
|
||||
setDraggedWord(word);
|
||||
};
|
||||
|
||||
const handleDragEnd = () => {
|
||||
setDraggedWord(null);
|
||||
};
|
||||
|
||||
const handleDrop = (blankId: string) => {
|
||||
if (draggedWord && !submitted) {
|
||||
// Remove word from previous placement if it was placed somewhere
|
||||
const newPlacements = { ...placements };
|
||||
Object.keys(newPlacements).forEach((key) => {
|
||||
if (newPlacements[key] === draggedWord) {
|
||||
delete newPlacements[key];
|
||||
}
|
||||
});
|
||||
newPlacements[blankId] = draggedWord;
|
||||
setPlacements(newPlacements);
|
||||
setDraggedWord(null);
|
||||
}
|
||||
};
|
||||
|
||||
const handleClickWord = (word: string) => {
|
||||
if (submitted) return;
|
||||
|
||||
// Find first empty blank
|
||||
const emptyBlank = blanks.find((blank) => !placements[blank.id]);
|
||||
if (emptyBlank) {
|
||||
// Remove word from previous placement
|
||||
const newPlacements = { ...placements };
|
||||
Object.keys(newPlacements).forEach((key) => {
|
||||
if (newPlacements[key] === word) {
|
||||
delete newPlacements[key];
|
||||
}
|
||||
});
|
||||
newPlacements[emptyBlank.id] = word;
|
||||
setPlacements(newPlacements);
|
||||
}
|
||||
};
|
||||
|
||||
const handleClickBlank = (blankId: string) => {
|
||||
if (submitted) return;
|
||||
// Remove word from this blank
|
||||
const newPlacements = { ...placements };
|
||||
delete newPlacements[blankId];
|
||||
setPlacements(newPlacements);
|
||||
};
|
||||
|
||||
const handleSubmit = () => {
|
||||
setSubmitted(true);
|
||||
};
|
||||
|
||||
const handleReset = () => {
|
||||
setPlacements({});
|
||||
setSubmitted(false);
|
||||
};
|
||||
|
||||
// Parse sentence and render with drop zones
|
||||
const renderSentence = () => {
|
||||
const parts = sentence.split(/(\{\{[^}]+\}\})/g);
|
||||
|
||||
return parts.map((part, index) => {
|
||||
const match = part.match(/\{\{([^}]+)\}\}/);
|
||||
if (match) {
|
||||
const blankId = match[1];
|
||||
const blank = blanks.find((b) => b.id === blankId);
|
||||
const placedWord = placements[blankId];
|
||||
const isCorrect = submitted && checkAnswer(blankId, placedWord || "");
|
||||
const isWrong = submitted && !isCorrect;
|
||||
|
||||
return (
|
||||
<span key={index} className="inline-flex items-center gap-1 mx-1 my-1">
|
||||
{blank?.emoji && <span className="text-lg">{blank.emoji}</span>}
|
||||
<span
|
||||
onClick={() => placedWord && handleClickBlank(blankId)}
|
||||
onDragOver={(e) => e.preventDefault()}
|
||||
onDrop={() => handleDrop(blankId)}
|
||||
className={cn(
|
||||
"px-3 py-2 border-2 border-dashed rounded-xl min-w-[100px] text-center font-medium transition-all cursor-pointer",
|
||||
!placedWord && "bg-white dark:bg-card border-primary/50",
|
||||
placedWord && !submitted && "bg-primary/10 border-primary border-solid",
|
||||
isCorrect && "border-green-500 border-solid bg-green-50 dark:bg-green-950/30",
|
||||
isWrong && "border-red-400 border-solid bg-red-50 dark:bg-red-950/30",
|
||||
draggedWord && !placedWord && "border-primary bg-primary/5 scale-105"
|
||||
)}
|
||||
>
|
||||
{placedWord || "___"}
|
||||
</span>
|
||||
{submitted && isCorrect && <Check className="h-5 w-5 text-green-500" />}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
return <span key={index}>{part}</span>;
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="my-6 rounded-2xl border-2 border-purple-200 dark:border-purple-800 overflow-hidden">
|
||||
{/* Header */}
|
||||
<div className="px-4 py-3 bg-gradient-to-r from-purple-100 to-pink-100 dark:from-purple-950/50 dark:to-pink-950/50 border-b border-purple-200 dark:border-purple-800">
|
||||
<div className="flex items-center gap-2">
|
||||
<Sparkles className="h-5 w-5 text-purple-500" />
|
||||
<span className="font-semibold">{title}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-4 space-y-4">
|
||||
{/* Sentence with blanks */}
|
||||
<div className="text-lg leading-loose p-4 bg-muted/30 rounded-xl flex flex-wrap items-center">
|
||||
{renderSentence()}
|
||||
</div>
|
||||
|
||||
{/* Word bank */}
|
||||
<div className="p-4 bg-purple-50 dark:bg-purple-950/30 rounded-xl">
|
||||
<p className="text-sm font-medium text-purple-700 dark:text-purple-300 mb-3">
|
||||
🎯 Drag or tap words to fill the blanks:
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{availableWords.map(({ word }, index) => {
|
||||
const isUsed = usedWords.includes(word);
|
||||
return (
|
||||
<button
|
||||
key={`${word}-${index}`}
|
||||
draggable={!submitted && !isUsed}
|
||||
onDragStart={() => handleDragStart(word)}
|
||||
onDragEnd={handleDragEnd}
|
||||
onClick={() => !isUsed && handleClickWord(word)}
|
||||
disabled={submitted || isUsed}
|
||||
className={cn(
|
||||
"flex items-center gap-1 px-3 py-2 rounded-lg border-2 font-medium transition-all",
|
||||
!isUsed && !submitted && "bg-white dark:bg-card border-purple-300 hover:border-purple-500 hover:shadow-md cursor-grab active:cursor-grabbing",
|
||||
isUsed && "bg-muted/50 border-muted text-muted-foreground opacity-50 cursor-not-allowed",
|
||||
submitted && "cursor-default"
|
||||
)}
|
||||
>
|
||||
{!submitted && !isUsed && <GripVertical className="h-4 w-4 text-muted-foreground" />}
|
||||
{word}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Result */}
|
||||
{submitted && (
|
||||
<div
|
||||
className={cn(
|
||||
"p-4 rounded-xl text-center",
|
||||
allCorrect
|
||||
? "bg-green-100 dark:bg-green-950/50 border border-green-300 dark:border-green-800"
|
||||
: "bg-amber-100 dark:bg-amber-950/50 border border-amber-300 dark:border-amber-800"
|
||||
)}
|
||||
>
|
||||
{allCorrect ? (
|
||||
<>
|
||||
<p className="text-2xl mb-2">🎉</p>
|
||||
<p className="font-semibold text-lg m-0">{successMessage}</p>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<p className="font-semibold m-0">
|
||||
{score} of {blanks.length} correct!
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground m-0 mt-1">
|
||||
Try different words!
|
||||
</p>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex gap-2">
|
||||
{!submitted ? (
|
||||
<Button
|
||||
onClick={handleSubmit}
|
||||
className="rounded-full"
|
||||
disabled={Object.keys(placements).length < blanks.length}
|
||||
>
|
||||
<Check className="h-4 w-4 mr-1" />
|
||||
Check my words!
|
||||
</Button>
|
||||
) : (
|
||||
<Button onClick={handleReset} variant="outline" className="rounded-full">
|
||||
<RefreshCw className="h-4 w-4 mr-1" />
|
||||
Try again
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
167
src/components/kids/elements/progress-map.tsx
Normal file
167
src/components/kids/elements/progress-map.tsx
Normal file
@@ -0,0 +1,167 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { Star, Lock, Check, Play } from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { worlds, type Level } from "@/lib/kids/levels";
|
||||
import { getProgress, isLevelUnlocked, type KidsProgress } from "@/lib/kids/progress";
|
||||
|
||||
export function ProgressMap() {
|
||||
const t = useTranslations("kids");
|
||||
const [progress, setProgress] = useState<KidsProgress | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
setProgress(getProgress());
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
{worlds.map((world) => (
|
||||
<WorldSection key={world.number} world={world} progress={progress} t={t} />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface WorldSectionProps {
|
||||
world: typeof worlds[0];
|
||||
progress: KidsProgress | null;
|
||||
t: ReturnType<typeof useTranslations>;
|
||||
}
|
||||
|
||||
function WorldSection({ world, progress, t }: WorldSectionProps) {
|
||||
const colorClasses = {
|
||||
emerald: {
|
||||
bg: "bg-emerald-50 dark:bg-emerald-950/30",
|
||||
border: "border-emerald-200 dark:border-emerald-800",
|
||||
text: "text-emerald-700 dark:text-emerald-300",
|
||||
badge: "bg-emerald-100 dark:bg-emerald-900/50",
|
||||
},
|
||||
blue: {
|
||||
bg: "bg-blue-50 dark:bg-blue-950/30",
|
||||
border: "border-blue-200 dark:border-blue-800",
|
||||
text: "text-blue-700 dark:text-blue-300",
|
||||
badge: "bg-blue-100 dark:bg-blue-900/50",
|
||||
},
|
||||
}[world.color] || {
|
||||
bg: "bg-gray-50 dark:bg-gray-950/30",
|
||||
border: "border-gray-200 dark:border-gray-800",
|
||||
text: "text-gray-700 dark:text-gray-300",
|
||||
badge: "bg-gray-100 dark:bg-gray-900/50",
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={cn("rounded-2xl border-2 p-6", colorClasses.bg, colorClasses.border)}>
|
||||
{/* World Header */}
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<span className="text-4xl">{world.emoji}</span>
|
||||
<div>
|
||||
<h2 className="text-xl font-bold">{t(`worlds.${world.number}.title`)}</h2>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{t("map.worldLevels", { count: world.levels.length })}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Levels */}
|
||||
<div className="grid sm:grid-cols-3 gap-4">
|
||||
{world.levels.map((level) => (
|
||||
<LevelCard
|
||||
key={level.slug}
|
||||
level={level}
|
||||
progress={progress}
|
||||
colorClasses={colorClasses}
|
||||
t={t}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface LevelCardProps {
|
||||
level: Level;
|
||||
progress: KidsProgress | null;
|
||||
colorClasses: {
|
||||
bg: string;
|
||||
border: string;
|
||||
text: string;
|
||||
badge: string;
|
||||
};
|
||||
t: ReturnType<typeof useTranslations>;
|
||||
}
|
||||
|
||||
function LevelCard({ level, progress, colorClasses, t }: LevelCardProps) {
|
||||
const [unlocked, setUnlocked] = useState(false);
|
||||
const levelProgress = progress?.levels[level.slug];
|
||||
const isCompleted = levelProgress?.completed;
|
||||
const stars = levelProgress?.stars || 0;
|
||||
|
||||
useEffect(() => {
|
||||
setUnlocked(isLevelUnlocked(level.slug));
|
||||
}, [level.slug, progress]);
|
||||
|
||||
if (!unlocked) {
|
||||
return (
|
||||
<div className="relative p-4 rounded-xl bg-muted/50 border-2 border-dashed border-muted-foreground/20 opacity-60">
|
||||
<div className="absolute top-2 right-2">
|
||||
<Lock className="h-5 w-5 text-muted-foreground" />
|
||||
</div>
|
||||
<div className="text-center py-4">
|
||||
<p className="font-medium text-muted-foreground">{t(`levels.${level.slug.replace(/-/g, "_")}.title`)}</p>
|
||||
<p className="text-xs text-muted-foreground mt-1">{t("map.locked")}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Link
|
||||
href={`/kids/level/${level.slug}`}
|
||||
className={cn(
|
||||
"relative block p-4 rounded-xl bg-white dark:bg-card border-2 transition-all hover:scale-105 hover:shadow-lg",
|
||||
isCompleted ? "border-green-400 dark:border-green-600" : "border-primary/30 hover:border-primary"
|
||||
)}
|
||||
>
|
||||
{/* Status badge */}
|
||||
<div className="absolute top-2 right-2">
|
||||
{isCompleted ? (
|
||||
<div className="flex items-center justify-center w-6 h-6 rounded-full bg-green-500 text-white">
|
||||
<Check className="h-4 w-4" />
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center justify-center w-6 h-6 rounded-full bg-primary text-primary-foreground">
|
||||
<Play className="h-3 w-3" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Level info */}
|
||||
<div className="mb-3">
|
||||
<span className={cn("text-xs font-medium px-2 py-0.5 rounded-full", colorClasses.badge, colorClasses.text)}>
|
||||
{t("map.levelNumber", { number: `${level.world}-${level.levelNumber}` })}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h3 className="font-semibold mb-1">{level.title}</h3>
|
||||
<p className="text-xs text-muted-foreground line-clamp-2">{level.description}</p>
|
||||
|
||||
{/* Stars */}
|
||||
<div className="flex items-center gap-1 mt-3">
|
||||
{[1, 2, 3].map((star) => (
|
||||
<Star
|
||||
key={star}
|
||||
className={cn(
|
||||
"h-4 w-4",
|
||||
star <= stars
|
||||
? "fill-amber-400 text-amber-400"
|
||||
: "text-muted-foreground/30"
|
||||
)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
131
src/components/kids/elements/prompt-vs-mistake.tsx
Normal file
131
src/components/kids/elements/prompt-vs-mistake.tsx
Normal file
@@ -0,0 +1,131 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { Check, X, RefreshCw } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { PromiWithMessage } from "./character-guide";
|
||||
|
||||
interface PromptVsMistakeProps {
|
||||
question: string;
|
||||
good: string;
|
||||
bad: string;
|
||||
goodLabel?: string;
|
||||
badLabel?: string;
|
||||
explanation?: string;
|
||||
promiMessage?: string;
|
||||
}
|
||||
|
||||
export function PromptVsMistake({
|
||||
question,
|
||||
good,
|
||||
bad,
|
||||
goodLabel = "Good prompt ✓",
|
||||
badLabel = "Not so good ✗",
|
||||
explanation,
|
||||
promiMessage,
|
||||
}: PromptVsMistakeProps) {
|
||||
const [selected, setSelected] = useState<"good" | "bad" | null>(null);
|
||||
const [showResult, setShowResult] = useState(false);
|
||||
|
||||
// Randomize order
|
||||
const [order] = useState(() => Math.random() > 0.5 ? ["good", "bad"] : ["bad", "good"]);
|
||||
|
||||
const handleSelect = (choice: "good" | "bad") => {
|
||||
setSelected(choice);
|
||||
setShowResult(true);
|
||||
};
|
||||
|
||||
const handleReset = () => {
|
||||
setSelected(null);
|
||||
setShowResult(false);
|
||||
};
|
||||
|
||||
const isCorrect = selected === "good";
|
||||
|
||||
const options = order.map((type) => ({
|
||||
type: type as "good" | "bad",
|
||||
text: type === "good" ? good : bad,
|
||||
}));
|
||||
|
||||
return (
|
||||
<div className="my-6 rounded-2xl border-2 border-primary/20 overflow-hidden">
|
||||
{/* Question */}
|
||||
<div className="px-4 py-3 bg-primary/10 border-b border-primary/20">
|
||||
<p className="font-semibold text-lg m-0">🤔 {question}</p>
|
||||
</div>
|
||||
|
||||
<div className="p-4 space-y-4">
|
||||
{/* Options */}
|
||||
<div className="grid sm:grid-cols-2 gap-4">
|
||||
{options.map(({ type, text }) => (
|
||||
<button
|
||||
key={type}
|
||||
onClick={() => handleSelect(type)}
|
||||
disabled={showResult}
|
||||
className={cn(
|
||||
"p-4 rounded-xl border-2 text-left transition-all",
|
||||
!showResult && "hover:border-primary hover:shadow-md cursor-pointer",
|
||||
showResult && type === "good" && "border-green-500 bg-green-50 dark:bg-green-950/30",
|
||||
showResult && type === "bad" && "border-red-400 bg-red-50 dark:bg-red-950/30",
|
||||
!showResult && "border-muted-foreground/20 bg-muted/30"
|
||||
)}
|
||||
>
|
||||
<pre className="whitespace-pre-wrap text-sm font-mono m-0">{text}</pre>
|
||||
|
||||
{showResult && (
|
||||
<div className={cn(
|
||||
"flex items-center gap-2 mt-3 pt-3 border-t text-sm font-medium",
|
||||
type === "good" ? "text-green-600 border-green-200" : "text-red-500 border-red-200"
|
||||
)}>
|
||||
{type === "good" ? (
|
||||
<>
|
||||
<Check className="h-4 w-4" />
|
||||
{goodLabel}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<X className="h-4 w-4" />
|
||||
{badLabel}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Result */}
|
||||
{showResult && (
|
||||
<div className={cn(
|
||||
"p-4 rounded-xl",
|
||||
isCorrect
|
||||
? "bg-green-100 dark:bg-green-950/50 border border-green-300 dark:border-green-800"
|
||||
: "bg-amber-100 dark:bg-amber-950/50 border border-amber-300 dark:border-amber-800"
|
||||
)}>
|
||||
<p className="font-semibold text-lg m-0 mb-2">
|
||||
{isCorrect ? "🎉 Great job!" : "🤔 Not quite!"}
|
||||
</p>
|
||||
{explanation && <p className="text-sm m-0">{explanation}</p>}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Promi message */}
|
||||
{showResult && promiMessage && (
|
||||
<PromiWithMessage
|
||||
message={promiMessage}
|
||||
mood={isCorrect ? "celebrating" : "thinking"}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Reset button */}
|
||||
{showResult && (
|
||||
<Button onClick={handleReset} variant="outline" size="sm" className="rounded-full">
|
||||
<RefreshCw className="h-4 w-4 mr-1" />
|
||||
Try again
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
125
src/components/kids/elements/story-scene.tsx
Normal file
125
src/components/kids/elements/story-scene.tsx
Normal file
@@ -0,0 +1,125 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { ChevronLeft, ChevronRight } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { PromiCharacter } from "./character-guide";
|
||||
|
||||
type PromiMood = "happy" | "thinking" | "excited" | "confused" | "celebrating";
|
||||
|
||||
interface StoryPanel {
|
||||
character?: "promi" | "none";
|
||||
mood?: PromiMood;
|
||||
text: string;
|
||||
highlight?: boolean;
|
||||
}
|
||||
|
||||
interface StorySceneProps {
|
||||
panels: StoryPanel[];
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function StoryScene({ panels, className }: StorySceneProps) {
|
||||
const [currentPanel, setCurrentPanel] = useState(0);
|
||||
const panel = panels[currentPanel];
|
||||
const isFirst = currentPanel === 0;
|
||||
const isLast = currentPanel === panels.length - 1;
|
||||
|
||||
return (
|
||||
<div className={cn("my-6 rounded-2xl border-2 border-primary/20 overflow-hidden", className)}>
|
||||
{/* Story panel */}
|
||||
<div className="p-6 bg-gradient-to-br from-primary/5 to-purple-500/5 min-h-[200px] flex items-center">
|
||||
<div className="flex items-start gap-4 w-full">
|
||||
{panel.character === "promi" && (
|
||||
<div className="shrink-0">
|
||||
<PromiCharacter mood={panel.mood || "happy"} size="md" />
|
||||
</div>
|
||||
)}
|
||||
<div
|
||||
className={cn(
|
||||
"flex-1 p-4 bg-white dark:bg-card rounded-xl shadow-md",
|
||||
panel.highlight && "ring-2 ring-primary ring-offset-2"
|
||||
)}
|
||||
>
|
||||
<p className="text-lg leading-relaxed m-0">{panel.text}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Navigation */}
|
||||
{panels.length > 1 && (
|
||||
<div className="flex items-center justify-between px-4 py-3 bg-muted/30 border-t">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setCurrentPanel((p) => p - 1)}
|
||||
disabled={isFirst}
|
||||
className="gap-1"
|
||||
>
|
||||
<ChevronLeft className="h-4 w-4" />
|
||||
Back
|
||||
</Button>
|
||||
|
||||
{/* Progress dots */}
|
||||
<div className="flex items-center gap-1.5">
|
||||
{panels.map((_, i) => (
|
||||
<button
|
||||
key={i}
|
||||
onClick={() => setCurrentPanel(i)}
|
||||
className={cn(
|
||||
"w-2 h-2 rounded-full transition-colors",
|
||||
i === currentPanel
|
||||
? "bg-primary"
|
||||
: "bg-muted-foreground/30 hover:bg-muted-foreground/50"
|
||||
)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setCurrentPanel((p) => p + 1)}
|
||||
disabled={isLast}
|
||||
className="gap-1"
|
||||
>
|
||||
Next
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface SinglePanelProps {
|
||||
character?: "promi" | "none";
|
||||
mood?: PromiMood;
|
||||
children: React.ReactNode;
|
||||
highlight?: boolean;
|
||||
}
|
||||
|
||||
export function Panel({ character = "promi", mood = "happy", children, highlight }: SinglePanelProps) {
|
||||
return (
|
||||
<div className="my-6 rounded-2xl border-2 border-primary/20 overflow-hidden">
|
||||
<div className="p-6 bg-gradient-to-br from-primary/5 to-purple-500/5">
|
||||
<div className="flex items-start gap-4">
|
||||
{character === "promi" && (
|
||||
<div className="shrink-0">
|
||||
<PromiCharacter mood={mood} size="md" />
|
||||
</div>
|
||||
)}
|
||||
<div
|
||||
className={cn(
|
||||
"flex-1 p-4 bg-white dark:bg-card rounded-xl shadow-md",
|
||||
highlight && "ring-2 ring-primary ring-offset-2"
|
||||
)}
|
||||
>
|
||||
<div className="text-lg leading-relaxed">{children}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
73
src/components/kids/layout/kids-header.tsx
Normal file
73
src/components/kids/layout/kids-header.tsx
Normal file
@@ -0,0 +1,73 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { Home, Map, Star } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { useEffect, useState } from "react";
|
||||
import { getTotalStars, getCompletedLevelsCount } from "@/lib/kids/progress";
|
||||
import { getTotalLevels } from "@/lib/kids/levels";
|
||||
|
||||
export function KidsHeader() {
|
||||
const t = useTranslations("kids");
|
||||
const [stars, setStars] = useState(0);
|
||||
const [completed, setCompleted] = useState(0);
|
||||
const total = getTotalLevels();
|
||||
|
||||
useEffect(() => {
|
||||
setStars(getTotalStars());
|
||||
setCompleted(getCompletedLevelsCount());
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<header className="sticky top-0 z-50 w-full border-b bg-white/80 dark:bg-background/80 backdrop-blur supports-[backdrop-filter]:bg-white/60">
|
||||
<div className="container flex h-16 items-center justify-between">
|
||||
{/* Logo */}
|
||||
<Link href="/kids" className="flex items-center gap-2 font-bold text-xl">
|
||||
<span className="text-2xl">🤖</span>
|
||||
<span className="bg-gradient-to-r from-primary to-purple-500 bg-clip-text text-transparent">
|
||||
{t("header.title")}
|
||||
</span>
|
||||
</Link>
|
||||
|
||||
{/* Stats & Nav */}
|
||||
<div className="flex items-center gap-4">
|
||||
{/* Stars counter */}
|
||||
<div className="flex items-center gap-1 px-3 py-1.5 bg-amber-100 dark:bg-amber-900/30 rounded-full text-amber-700 dark:text-amber-300">
|
||||
<Star className="h-4 w-4 fill-current" />
|
||||
<span className="font-semibold text-sm">{stars}</span>
|
||||
</div>
|
||||
|
||||
{/* Progress */}
|
||||
<div className="hidden sm:flex items-center gap-1 px-3 py-1.5 bg-emerald-100 dark:bg-emerald-900/30 rounded-full text-emerald-700 dark:text-emerald-300 text-sm">
|
||||
<span className="font-semibold">{completed}/{total}</span>
|
||||
<span className="text-emerald-600 dark:text-emerald-400">{t("header.levels")}</span>
|
||||
</div>
|
||||
|
||||
{/* Nav buttons */}
|
||||
<div className="flex items-center gap-2">
|
||||
<Button variant="ghost" size="icon" asChild className="rounded-full">
|
||||
<Link href="/kids">
|
||||
<Home className="h-5 w-5" />
|
||||
<span className="sr-only">{t("header.home")}</span>
|
||||
</Link>
|
||||
</Button>
|
||||
<Button variant="ghost" size="icon" asChild className="rounded-full">
|
||||
<Link href="/kids/map">
|
||||
<Map className="h-5 w-5" />
|
||||
<span className="sr-only">{t("header.map")}</span>
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Back to main site */}
|
||||
<Button variant="outline" size="sm" asChild className="hidden md:flex rounded-full">
|
||||
<Link href="/">
|
||||
{t("header.mainSite")}
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
53
src/content/kids/ar/1-1-meet-promi.mdx
Normal file
53
src/content/kids/ar/1-1-meet-promi.mdx
Normal file
@@ -0,0 +1,53 @@
|
||||
<Panel character="promi" mood="happy">
|
||||
مرحباً! أنا **Promi** 🤖، صديقك الروبوت! سعيد جداً بلقائك!
|
||||
</Panel>
|
||||
|
||||
<Panel character="promi" mood="thinking">
|
||||
هل تعرف ماذا يعني **الذكاء الاصطناعي**؟ إنه طريقة راقية للقول "كمبيوتر يمكنه التفكير والتحدث"!
|
||||
</Panel>
|
||||
|
||||
<Panel character="promi" mood="excited">
|
||||
أنا ذكاء اصطناعي! يمكنني قراءة رسائلك ومحاولة مساعدتك. لكن هناك سر... أحتاج **تعليمات جيدة** لأقوم بأفضل عمل!
|
||||
</Panel>
|
||||
|
||||
## ما هو البرومبت؟
|
||||
|
||||
**البرومبت** هو كلمة راقية للرسالة التي ترسلها لذكاء اصطناعي مثلي.
|
||||
|
||||
فكر في الأمر مثل إعطاء الاتجاهات لصديق. إذا قلت "اذهب هناك!" صديقك لن يعرف أين يذهب. لكن إذا قلت "اذهب إلى المنزل الأحمر في شارع القيقب،" سيعرف بالضبط أين!
|
||||
|
||||
<Panel character="promi" mood="happy">
|
||||
عندما تكتب برومبت جيد، أستطيع فهم ما تريد ومساعدتك بشكل أفضل! هيا نتدرب!
|
||||
</Panel>
|
||||
|
||||
## لنجرب!
|
||||
|
||||
<PromptVsMistake
|
||||
question="أي رسالة ستساعد Promi على الفهم أفضل؟"
|
||||
good="من فضلك اكتب قصة قصيرة عن تنين ودود يحب خبز الكعك"
|
||||
bad="قصة"
|
||||
explanation="الرسالة الأولى تخبر Promi بالضبط أي نوع من القصص يكتب! الثانية قصيرة جداً - Promi لا يعرف أي نوع من القصص تريد."
|
||||
promiMessage="رأيت؟ المزيد من التفاصيل يساعدني على فهم ما تريد!"
|
||||
/>
|
||||
|
||||
## اختبار سريع!
|
||||
|
||||
<PromptVsMistake
|
||||
question="أيهما برومبت؟"
|
||||
good="هل يمكنك مساعدتي في كتابة قصيدة عن المحيط؟"
|
||||
bad="🌊"
|
||||
explanation="البرومبت يستخدم الكلمات لإخبار الذكاء الاصطناعي ما تحتاجه. الإيموجي ممتعة لكنها لا تعطي معلومات كافية!"
|
||||
promiMessage="الكلمات هي قوتي الخارقة! كلما أخبرتني أكثر، استطعت المساعدة أفضل!"
|
||||
/>
|
||||
|
||||
## نجحت! 🎉
|
||||
|
||||
<Panel character="promi" mood="celebrating">
|
||||
عمل رائع! تعلمت ما هو الذكاء الاصطناعي وما هو البرومبت. أنت تصبح خبيراً في البرومبت!
|
||||
</Panel>
|
||||
|
||||
<LevelComplete
|
||||
levelSlug="1-1-meet-promi"
|
||||
stars={3}
|
||||
message="تعلمت ما هو الذكاء الاصطناعي والبرومبت!"
|
||||
/>
|
||||
75
src/content/kids/ar/1-2-first-words.mdx
Normal file
75
src/content/kids/ar/1-2-first-words.mdx
Normal file
@@ -0,0 +1,75 @@
|
||||
<Panel character="promi" mood="happy">
|
||||
مرحباً بعودتك يا صديقي! مستعد لكتابة أول برومبت حقيقي؟ هيا بنا! 🚀
|
||||
</Panel>
|
||||
|
||||
## سحر الكلمات
|
||||
|
||||
عندما تتحدث مع الذكاء الاصطناعي، كل كلمة مهمة! دعنا نرى كيف إضافة المزيد من الكلمات تجعل البرومبت أفضل.
|
||||
|
||||
<Panel character="promi" mood="thinking">
|
||||
انظر! إذا قال لي شخص فقط "قطة"، لا أعرف ماذا يريدون. هل يريدون صورة؟ قصة؟ حقائق عن القطط؟ أنا مرتبك! 😵💫
|
||||
</Panel>
|
||||
|
||||
## بناء برومبت أفضل
|
||||
|
||||
البرومبت الجيد له **ثلاثة أجزاء**:
|
||||
|
||||
1. **ما تريد** (قصة، مساعدة، معلومات)
|
||||
2. **الموضوع** (قطط، فضاء، ديناصورات)
|
||||
3. **التفاصيل** (قصير، مضحك، للأطفال)
|
||||
|
||||
<Panel character="promi" mood="excited">
|
||||
هيا نبني برومبت معاً!
|
||||
</Panel>
|
||||
|
||||
## اسحب القطع!
|
||||
|
||||
<DragDropPrompt
|
||||
title="ابنِ أول برومبت لك! 🧩"
|
||||
instruction="ضع هذه القطع بالترتيب الصحيح لطلب قصة."
|
||||
pieces={[
|
||||
"من فضلك اكتب",
|
||||
"قصة قصيرة",
|
||||
"عن قطة شجاعة",
|
||||
"تذهب في مغامرة"
|
||||
]}
|
||||
correctOrder={[0, 1, 2, 3]}
|
||||
successMessage="ممتاز! هذا برومبت رائع!"
|
||||
/>
|
||||
|
||||
## املأ الفراغات!
|
||||
|
||||
الآن حاول صنع برومبتك بسحب الكلمات السحرية:
|
||||
|
||||
<MagicWords
|
||||
title="أنشئ برومبتك! ✨"
|
||||
sentence="من فضلك اكتب {{type}} عن {{character}} الذي {{action}}"
|
||||
blanks={[
|
||||
{ id: "type", hint: "أي نوع من الكتابة؟ (قصة، شعر، أغنية)", answers: ["قصة", "شعر", "أغنية", "رسالة", "نكتة"], emoji: "📝" },
|
||||
{ id: "character", hint: "عن من؟ (روبوت، تنين، جرو)", answers: ["روبوت", "تنين", "جرو", "قطة", "ساحر", "أميرة", "فارس", "أرنب", "يونيكورن"], emoji: "🦸" },
|
||||
{ id: "action", hint: "ماذا يفعلون؟ (يجد كنزاً، يصنع أصدقاء)", answers: ["يجد كنزاً", "يصنع أصدقاء", "ينقذ اليوم", "يذهب في مغامرة", "يتعلم الطيران", "يكتشف السحر"], emoji: "⚡" }
|
||||
]}
|
||||
successMessage="واو! صنعت برومبت رائع!"
|
||||
/>
|
||||
|
||||
## دورك للاختيار!
|
||||
|
||||
<PromptVsMistake
|
||||
question="أي برومبت سيحصل على قصة أفضل؟"
|
||||
good="اكتب قصة مضحكة عن بطريق يريد تعلم الرقص"
|
||||
bad="اكتب قصة بطريق"
|
||||
explanation="البرومبت الأول يخبرني أنها يجب أن تكون مضحكة، عن بطريق، وماذا يريد البطريق أن يفعل!"
|
||||
promiMessage="التفاصيل تجعل كل شيء أفضل! أحب معرفة بالضبط ما تريد!"
|
||||
/>
|
||||
|
||||
## عمل رائع! 🌟
|
||||
|
||||
<Panel character="promi" mood="celebrating">
|
||||
كتبت أول برومبت لك! تعلمت أن البرومبت الجيد يحتاج: ما تريد، موضوع، وتفاصيل. أنت تتحسن!
|
||||
</Panel>
|
||||
|
||||
<LevelComplete
|
||||
levelSlug="1-2-first-words"
|
||||
stars={3}
|
||||
message="تعلمت كيف تكتب أول برومبت!"
|
||||
/>
|
||||
101
src/content/kids/ar/1-3-being-clear.mdx
Normal file
101
src/content/kids/ar/1-3-being-clear.mdx
Normal file
@@ -0,0 +1,101 @@
|
||||
<Panel character="promi" mood="happy">
|
||||
مرحباً يا نجم! 🌟 اليوم سنتعلم أهم مهارة: أن تكون **واضحاً**!
|
||||
</Panel>
|
||||
|
||||
## لماذا الوضوح مهم
|
||||
|
||||
تخيل أن تطلب من أمك "طعام" مقابل طلب "ساندويتش زبدة فول سوداني بدون قشرة." أيهما يعطيك بالضبط ما تريد؟
|
||||
|
||||
<Panel character="promi" mood="thinking">
|
||||
معي نفس الشيء! عندما تكون واضحاً، أعرف بالضبط كيف أساعد. عندما تكون غامضاً، علي أن أخمن... وقد أخمن خطأ!
|
||||
</Panel>
|
||||
|
||||
## واضح مقابل غير واضح
|
||||
|
||||
هيا نتدرب على اكتشاف الفرق!
|
||||
|
||||
<PromptVsMistake
|
||||
question="أي برومبت أوضح؟"
|
||||
good="اكتب قصيدة من 4 أسطر عن الفراشات في حديقة، باستخدام كلمات مقفاة"
|
||||
bad="اكتب شعر فراشات"
|
||||
explanation="البرومبت الواضح يخبرني: كم الطول (4 أسطر)، عن ماذا (فراشات في حديقة)، وقاعدة خاصة (مقفاة). أفضل بكثير!"
|
||||
promiMessage="برومبت واضح = نتائج أفضل! إنه مثل السحر!"
|
||||
/>
|
||||
|
||||
<PromptVsMistake
|
||||
question="أيهما يخبرني بالضبط ما تحتاج؟"
|
||||
good="ساعدني في كتابة 3 حقائق ممتعة عن الدلافين يستمتع بها طفل عمره 10 سنوات"
|
||||
bad="أخبرني عن الدلافين"
|
||||
explanation="البرومبت الأول يخبرني: كم حقيقة (3)، أي نوع (ممتعة)، ولمن (طفل 10 سنوات). هذا يساعد كثيراً!"
|
||||
promiMessage="عندما تخبرني لمن، أستطيع جعله مثالياً لهم!"
|
||||
/>
|
||||
|
||||
## تحدي الوضوح
|
||||
|
||||
هيا نبني أوضح برومبت على الإطلاق!
|
||||
|
||||
<DragDropPrompt
|
||||
title="اجعله واضحاً كالكريستال! 💎"
|
||||
instruction="رتب هذه القطع لصنع برومبت واضح جداً"
|
||||
pieces={[
|
||||
"من فضلك ساعدني في كتابة",
|
||||
"قصة نوم قصيرة",
|
||||
"عن بومة نعسانة",
|
||||
"بنهاية سعيدة",
|
||||
"لأختي الصغيرة"
|
||||
]}
|
||||
correctOrder={[0, 1, 2, 3, 4]}
|
||||
successMessage="هذا أوضح برومبت على الإطلاق! مذهل!"
|
||||
/>
|
||||
|
||||
## أضف تفاصيل واضحة
|
||||
|
||||
<MagicWords
|
||||
title="أضف التفاصيل! 🎯"
|
||||
sentence="اكتب {{length}} {{type}} عن {{topic}} لـ {{audience}}"
|
||||
blanks={[
|
||||
{ id: "length", hint: "كم الطول؟ (قصير، طويل)", answers: ["قصير", "طويل", "من 5 جمل", "صفحة واحدة", "مختصر", "سريع"], emoji: "📏" },
|
||||
{ id: "type", hint: "أي نوع؟ (قصة، قائمة، شرح)", answers: ["قصة", "قائمة", "شرح", "شعر", "أغنية", "دليل"], emoji: "📝" },
|
||||
{ id: "topic", hint: "عن ماذا؟ (فضاء، حيوانات، رياضة)", answers: ["الفضاء", "الحيوانات", "الرياضة", "الديناصورات", "الروبوتات", "السحر", "الطبيعة", "العلوم"], emoji: "🎯" },
|
||||
{ id: "audience", hint: "لمن؟ (أطفال، مبتدئين)", answers: ["الأطفال", "المبتدئين", "معلمي", "صديقي", "عائلتي", "الطلاب"], emoji: "👥" }
|
||||
]}
|
||||
successMessage="أضفت كل التفاصيل المهمة! عمل رائع!"
|
||||
/>
|
||||
|
||||
## القواعد الذهبية للوضوح
|
||||
|
||||
<Panel character="promi" mood="excited">
|
||||
هذه أفضل نصائحي لتكون واضحاً:
|
||||
</Panel>
|
||||
|
||||
تذكر هذه الأسئلة الثلاثة عند كتابة برومبت:
|
||||
|
||||
1. **ماذا** أريد؟ (قصة، مساعدة، معلومات)
|
||||
2. **كيف** يجب أن يكون؟ (قصير، مضحك، بسيط)
|
||||
3. **لمن** هو؟ (أنا، صديقي، صفي)
|
||||
|
||||
<PromptVsMistake
|
||||
question="التحدي الأخير! أيهما يستخدم القواعد الثلاث كلها؟"
|
||||
good="اكتب نكتة قصيرة ومضحكة عن البيتزا يمكنني إخبارها لأصدقائي في الغداء"
|
||||
bad="اصنع شيئاً مضحكاً"
|
||||
explanation="البرومبت الرائع يحتوي على ماذا (نكتة عن البيتزا)، كيف (قصيرة ومضحكة)، ولمن (لإخبار الأصدقاء في الغداء)!"
|
||||
promiMessage="أنت بطل الوضوح! 🏆"
|
||||
/>
|
||||
|
||||
## العالم 1 اكتمل! 🎊
|
||||
|
||||
<Panel character="promi" mood="celebrating">
|
||||
واو! أنهيت العالم 1 كله! تعلمت:
|
||||
|
||||
- ✅ ما هو الذكاء الاصطناعي والبرومبت
|
||||
- ✅ كيف تكتب أول برومبت
|
||||
- ✅ لماذا الوضوح مهم جداً
|
||||
|
||||
أنت جاهز لمغامرات جديدة!
|
||||
</Panel>
|
||||
|
||||
<LevelComplete
|
||||
levelSlug="1-3-being-clear"
|
||||
stars={3}
|
||||
message="أتقنت فن الوضوح! العالم 1 اكتمل!"
|
||||
/>
|
||||
53
src/content/kids/az/1-1-meet-promi.mdx
Normal file
53
src/content/kids/az/1-1-meet-promi.mdx
Normal file
@@ -0,0 +1,53 @@
|
||||
<Panel character="promi" mood="happy">
|
||||
Salam! Mən **Promi** 🤖, sənin robot dostun! Səninlə tanış olmağıma çox şadam!
|
||||
</Panel>
|
||||
|
||||
<Panel character="promi" mood="thinking">
|
||||
**AI** nə deməkdir bilirsən? AI **Süni İntellekt** deməkdir. Bu "düşünə və danışa bilən kompüter" deməyin gözəl bir yoludur!
|
||||
</Panel>
|
||||
|
||||
<Panel character="promi" mood="excited">
|
||||
Mən AI-yam! Sənin mesajlarını oxuya və kömək etməyə çalışa bilərəm. Amma budur sirr... Ən yaxşı işi görmək üçün **yaxşı təlimatlara** ehtiyacım var!
|
||||
</Panel>
|
||||
|
||||
## Prompt Nədir?
|
||||
|
||||
**Prompt** sadəcə mənim kimi AI-ya göndərdiyin mesaj deməkdir.
|
||||
|
||||
Bunu dostuna yol göstərmək kimi düşün. "Ora get!" desən, dostun hara getməli olduğunu bilməz. Amma "Ağcaqayın küçəsindəki qırmızı evə get" desən, dəqiq biləcək!
|
||||
|
||||
<Panel character="promi" mood="happy">
|
||||
Yaxşı prompt yazdığında, nə istədiyini başa düşə və sənə daha yaxşı kömək edə bilərəm! Gəl məşq edək!
|
||||
</Panel>
|
||||
|
||||
## Gəl Cəhd Edək!
|
||||
|
||||
<PromptVsMistake
|
||||
question="Hansı mesaj Promi-nin daha yaxşı başa düşməsinə kömək edər?"
|
||||
good="Zəhmət olmasa, peçenye bişirməyi sevən mehriban bir əjdaha haqqında qısa hekayə yaz"
|
||||
bad="hekayə"
|
||||
explanation="Birinci mesaj Promi-yə dəqiq hansı növ hekayə yazacağını deyir! İkincisi çox qısadır - Promi hansı növ hekayə istədiyini bilmir."
|
||||
promiMessage="Gördün? Daha çox detal nə istədiyini başa düşməyimə kömək edir!"
|
||||
/>
|
||||
|
||||
## Sürətli Test!
|
||||
|
||||
<PromptVsMistake
|
||||
question="Hansı promptdur?"
|
||||
good="Okean haqqında şeir yazmağıma kömək edə bilərsən?"
|
||||
bad="🌊"
|
||||
explanation="Prompt AI-ya nəyə ehtiyacın olduğunu söyləmək üçün sözlər istifadə edir. Emojilər əyləncəlidir amma kifayət qədər məlumat vermir!"
|
||||
promiMessage="Sözlər mənim super gücümdür! Mənə nə qədər çox desən, o qədər yaxşı kömək edə bilərəm!"
|
||||
/>
|
||||
|
||||
## Bacardın! 🎉
|
||||
|
||||
<Panel character="promi" mood="celebrating">
|
||||
Əla iş! AI-ın nə olduğunu və promptun nə olduğunu öyrəndin. Artıq prompt mütəxəssisi olursan!
|
||||
</Panel>
|
||||
|
||||
<LevelComplete
|
||||
levelSlug="1-1-meet-promi"
|
||||
stars={3}
|
||||
message="AI və promptların nə olduğunu öyrəndin!"
|
||||
/>
|
||||
75
src/content/kids/az/1-2-first-words.mdx
Normal file
75
src/content/kids/az/1-2-first-words.mdx
Normal file
@@ -0,0 +1,75 @@
|
||||
<Panel character="promi" mood="happy">
|
||||
Xoş gəldin geri, dost! İlk əsl promptlarını yazmağa hazırsan? Gedək! 🚀
|
||||
</Panel>
|
||||
|
||||
## Sözlərin Sehri
|
||||
|
||||
AI ilə danışanda hər söz önəmlidir! Gəl görək daha çox söz əlavə etmək promptları necə yaxşılaşdırır.
|
||||
|
||||
<Panel character="promi" mood="thinking">
|
||||
Bax! Kimsə mənə sadəcə "pişik" desə, nə istədiklərini bilmirəm. Şəkil istəyirlər? Hekayə? Pişiklər haqqında faktlar? Çaşmışam! 😵💫
|
||||
</Panel>
|
||||
|
||||
## Daha Yaxşı Promptlar Qurmaq
|
||||
|
||||
Yaxşı promptun **üç hissəsi** var:
|
||||
|
||||
1. **Nə istəyirsən** (hekayə, kömək, məlumat)
|
||||
2. **Mövzu** (pişiklər, kosmos, dinozavrlar)
|
||||
3. **Detaillar** (qısa, gülməli, uşaqlar üçün)
|
||||
|
||||
<Panel character="promi" mood="excited">
|
||||
Gəl birlikdə prompt quraq!
|
||||
</Panel>
|
||||
|
||||
## Parçaları Sürüklə!
|
||||
|
||||
<DragDropPrompt
|
||||
title="İlk promptunu qur! 🧩"
|
||||
instruction="Hekayə istəmək üçün bu parçaları düzgün sıraya qoy."
|
||||
pieces={[
|
||||
"Zəhmət olmasa yaz",
|
||||
"qısa bir hekayə",
|
||||
"cəsur bir pişik balası haqqında",
|
||||
"macəraya çıxan"
|
||||
]}
|
||||
correctOrder={[0, 1, 2, 3]}
|
||||
successMessage="Mükəmməl! Bu əla promptdur!"
|
||||
/>
|
||||
|
||||
## Boşluqları Doldur!
|
||||
|
||||
İndi sehrli sözləri sürükləyərək öz promptunu etməyə çalış:
|
||||
|
||||
<MagicWords
|
||||
title="Öz promptunu yarat! ✨"
|
||||
sentence="Zəhmət olmasa {{type}} yaz, {{character}} haqqında, {{action}}"
|
||||
blanks={[
|
||||
{ id: "type", hint: "Hansı növ yazı? (hekayə, şeir, mahnı)", answers: ["hekayə", "şeir", "mahnı", "məktub", "zarafat"], emoji: "📝" },
|
||||
{ id: "character", hint: "Kim haqqında? (robot, əjdaha, küçük)", answers: ["robot", "əjdaha", "küçük", "pişik", "sehrbaz", "şahzadə", "cəngavər", "dovşan", "unicorn"], emoji: "🦸" },
|
||||
{ id: "action", hint: "Nə edirlər? (xəzinə tapan, dostlar qazanan)", answers: ["xəzinə tapan", "dostlar qazanan", "günü xilas edən", "macəraya çıxan", "uçmağı öyrənən", "sehr kəşf edən"], emoji: "⚡" }
|
||||
]}
|
||||
successMessage="Vay! Möhtəşəm prompt yaratdın!"
|
||||
/>
|
||||
|
||||
## Seçmə Növbəsi Səndədir!
|
||||
|
||||
<PromptVsMistake
|
||||
question="Hansı prompt daha yaxşı hekayə alacaq?"
|
||||
good="Rəqs etməyi öyrənmək istəyən pinqvin haqqında gülməli hekayə yaz"
|
||||
bad="Hekayə yaz pinqvin"
|
||||
explanation="Birinci prompt mənə gülməli olmalı olduğunu, pinqvin haqqında olduğunu VƏ pinqvinin nə etmək istədiyini deyir!"
|
||||
promiMessage="Detaillar hər şeyi daha yaxşı edir! Dəqiq nə istədiyini bilməyi sevirəm!"
|
||||
/>
|
||||
|
||||
## Əla İş! 🌟
|
||||
|
||||
<Panel character="promi" mood="celebrating">
|
||||
İlk promptlarını yazdın! Yaxşı promptlara lazım olanı öyrəndin: nə istəyirsən, mövzu və detaillar. Həqiqətən yaxşılaşırsan!
|
||||
</Panel>
|
||||
|
||||
<LevelComplete
|
||||
levelSlug="1-2-first-words"
|
||||
stars={3}
|
||||
message="İlk promptlarını yazmağı öyrəndin!"
|
||||
/>
|
||||
101
src/content/kids/az/1-3-being-clear.mdx
Normal file
101
src/content/kids/az/1-3-being-clear.mdx
Normal file
@@ -0,0 +1,101 @@
|
||||
<Panel character="promi" mood="happy">
|
||||
Salam superstar! 🌟 Bu gün ən vacib bacarığı öyrənəcəyik: **AYDIN** olmaq!
|
||||
</Panel>
|
||||
|
||||
## Niyə Aydın Olmaq Vacibdir
|
||||
|
||||
Anandan "yemək" istəməklə "qabıqsız fıstıq yağı sendviçi" istəməyin fərqini təsəvvür et. Hansı sənə dəqiq istədiyini verir?
|
||||
|
||||
<Panel character="promi" mood="thinking">
|
||||
Mənimlə eynidir! Aydın olanda, dəqiq necə kömək edəcəyimi bilirəm. Qeyri-müəyyən olanda, təxmin etməliyəm... və səhv edə bilərəm!
|
||||
</Panel>
|
||||
|
||||
## Aydın vs. Aydın Deyil
|
||||
|
||||
Gəl fərqi tapmağı məşq edək!
|
||||
|
||||
<PromptVsMistake
|
||||
question="Hansı prompt daha aydındır?"
|
||||
good="Bağçada kəpənəklər haqqında qafiyəli sözlərlə 4 sətirlik şeir yaz"
|
||||
bad="Şeir yaz kəpənəklər"
|
||||
explanation="Aydın prompt mənə deyir: nə qədər uzun (4 sətir), nə haqqında (bağçada kəpənəklər), və xüsusi qayda (qafiyəli). Çox daha yaxşı!"
|
||||
promiMessage="Aydın promptlar = daha yaxşı nəticələr! Bu sehr kimidir!"
|
||||
/>
|
||||
|
||||
<PromptVsMistake
|
||||
question="Hansı mənə dəqiq nəyə ehtiyacın olduğunu deyir?"
|
||||
good="10 yaşlı uşağın bəyənəcəyi delfinlər haqqında 3 əyləncəli fakt yazmağıma kömək et"
|
||||
bad="Delfinlər haqqında danış"
|
||||
explanation="Birinci prompt mənə deyir: neçə fakt (3), hansı növ (əyləncəli), və kimin üçün (10 yaşlı). Bu çox kömək edir!"
|
||||
promiMessage="Kimin üçün olduğunu desən, onlar üçün mükəmməl edə bilərəm!"
|
||||
/>
|
||||
|
||||
## Aydınlıq Çağırışı
|
||||
|
||||
Gəl ən aydın promptu quraq!
|
||||
|
||||
<DragDropPrompt
|
||||
title="Kristal kimi aydın et! 💎"
|
||||
instruction="Super aydın prompt etmək üçün bu parçaları düzəlt"
|
||||
pieces={[
|
||||
"Zəhmət olmasa yazmağıma kömək et",
|
||||
"qısa yuxu hekayəsi",
|
||||
"yuxulu bayquş haqqında",
|
||||
"xoşbəxt sonla",
|
||||
"kiçik bacım üçün"
|
||||
]}
|
||||
correctOrder={[0, 1, 2, 3, 4]}
|
||||
successMessage="Bu indiyə qədər ən aydın promptdur! Möhtəşəm!"
|
||||
/>
|
||||
|
||||
## Aydın Detaillar Əlavə Et
|
||||
|
||||
<MagicWords
|
||||
title="Detailları əlavə et! 🎯"
|
||||
sentence="{{length}} {{type}} yaz, {{topic}} haqqında, {{audience}} üçün"
|
||||
blanks={[
|
||||
{ id: "length", hint: "Nə qədər uzun? (qısa, uzun)", answers: ["qısa", "uzun", "5 cümləlik", "bir səhifəlik", "qısa", "sürətli"], emoji: "📏" },
|
||||
{ id: "type", hint: "Hansı növ? (hekayə, siyahı, izahat)", answers: ["hekayə", "siyahı", "izahat", "şeir", "mahnı", "bələdçi"], emoji: "📝" },
|
||||
{ id: "topic", hint: "Nə haqqında? (kosmos, heyvanlar, idman)", answers: ["kosmos", "heyvanlar", "idman", "dinozavrlar", "robotlar", "sehr", "təbiət", "elm"], emoji: "🎯" },
|
||||
{ id: "audience", hint: "Kim üçün? (uşaqlar, yeni başlayanlar)", answers: ["uşaqlar", "yeni başlayanlar", "müəllimim", "dostum", "ailəm", "tələbələr"], emoji: "👥" }
|
||||
]}
|
||||
successMessage="Bütün vacib detailları əlavə etdin! Əla iş!"
|
||||
/>
|
||||
|
||||
## Aydınlığın Qızıl Qaydaları
|
||||
|
||||
<Panel character="promi" mood="excited">
|
||||
Budur aydın olmaq üçün ən yaxşı məsləhətlərim:
|
||||
</Panel>
|
||||
|
||||
Prompt yazanda bu üç sualı xatırla:
|
||||
|
||||
1. **NƏ** istəyirəm? (hekayə, kömək, məlumat)
|
||||
2. **NECƏ** olmalıdır? (qısa, gülməli, sadə)
|
||||
3. **KİM** üçündür? (mən, dostum, sinifim)
|
||||
|
||||
<PromptVsMistake
|
||||
question="Son çağırış! Hansı üç qaydanın hamısını istifadə edir?"
|
||||
good="Nahar vaxtı dostlarıma deyə biləcəyim pizza haqqında qısa, gülməli zarafat yaz"
|
||||
bad="Gülməli bir şey et"
|
||||
explanation="Əla promptda NƏ (pizza zarafatı), NECƏ (qısa və gülməli), və KİM üçün (naharda dostlara demək) var!"
|
||||
promiMessage="Sən aydınlıq çempionusan! 🏆"
|
||||
/>
|
||||
|
||||
## Dünya 1 Tamamlandı! 🎊
|
||||
|
||||
<Panel character="promi" mood="celebrating">
|
||||
VAY! Bütün Dünya 1-i bitirdin! Öyrəndiklərin:
|
||||
|
||||
- ✅ AI və promptların nə olduğu
|
||||
- ✅ İlk promptlarını necə yazmaq
|
||||
- ✅ Niyə aydın olmaq super vacibdir
|
||||
|
||||
Yeni macəralara hazırsan!
|
||||
</Panel>
|
||||
|
||||
<LevelComplete
|
||||
levelSlug="1-3-being-clear"
|
||||
stars={3}
|
||||
message="Aydın olmaq sənətini mənimsədin! Dünya 1 tamamlandı!"
|
||||
/>
|
||||
53
src/content/kids/de/1-1-meet-promi.mdx
Normal file
53
src/content/kids/de/1-1-meet-promi.mdx
Normal file
@@ -0,0 +1,53 @@
|
||||
<Panel character="promi" mood="happy">
|
||||
Hallo! Ich bin **Promi** 🤖, dein Roboter-Freund! Ich freue mich so, dich kennenzulernen!
|
||||
</Panel>
|
||||
|
||||
<Panel character="promi" mood="thinking">
|
||||
Weißt du, was **KI** bedeutet? KI steht für **Künstliche Intelligenz**. Das ist eine schicke Art zu sagen "ein Computer, der denken und sprechen kann"!
|
||||
</Panel>
|
||||
|
||||
<Panel character="promi" mood="excited">
|
||||
Ich bin eine KI! Ich kann deine Nachrichten lesen und versuchen dir zu helfen. Aber hier ist das Geheimnis... Ich brauche **gute Anweisungen** um meine beste Arbeit zu machen!
|
||||
</Panel>
|
||||
|
||||
## Was ist ein Prompt?
|
||||
|
||||
Ein **Prompt** ist einfach ein schickes Wort für die Nachricht, die du an eine KI wie mich sendest.
|
||||
|
||||
Stell dir vor, du gibst einem Freund Wegbeschreibungen. Wenn du sagst "Geh dorthin!" weiß dein Freund nicht, wohin. Aber wenn du sagst "Geh zum roten Haus in der Ahornstraße," weiß er genau wo!
|
||||
|
||||
<Panel character="promi" mood="happy">
|
||||
Wenn du einen guten Prompt schreibst, kann ich verstehen, was du willst und dir besser helfen! Lass uns üben!
|
||||
</Panel>
|
||||
|
||||
## Probieren wir es!
|
||||
|
||||
<PromptVsMistake
|
||||
question="Welche Nachricht würde Promi besser verstehen helfen?"
|
||||
good="Bitte schreibe eine kurze Geschichte über einen freundlichen Drachen, der gerne Kekse backt"
|
||||
bad="Geschichte"
|
||||
explanation="Die erste Nachricht sagt Promi genau, welche Art von Geschichte geschrieben werden soll! Die zweite ist zu kurz - Promi weiß nicht, welche Art von Geschichte du willst."
|
||||
promiMessage="Siehst du? Mehr Details helfen mir zu verstehen, was du willst!"
|
||||
/>
|
||||
|
||||
## Schnelles Quiz!
|
||||
|
||||
<PromptVsMistake
|
||||
question="Was ist ein Prompt?"
|
||||
good="Kannst du mir helfen, ein Gedicht über den Ozean zu schreiben?"
|
||||
bad="🌊"
|
||||
explanation="Ein Prompt benutzt Worte, um der KI zu sagen, was du brauchst. Emojis sind lustig, aber geben nicht genug Informationen!"
|
||||
promiMessage="Worte sind meine Superkraft! Je mehr du mir sagst, desto besser kann ich helfen!"
|
||||
/>
|
||||
|
||||
## Du hast es geschafft! 🎉
|
||||
|
||||
<Panel character="promi" mood="celebrating">
|
||||
Tolle Arbeit! Du hast gelernt, was KI ist und was ein Prompt ist. Du wirst schon ein Prompt-Experte!
|
||||
</Panel>
|
||||
|
||||
<LevelComplete
|
||||
levelSlug="1-1-meet-promi"
|
||||
stars={3}
|
||||
message="Du hast gelernt, was KI und Prompts sind!"
|
||||
/>
|
||||
75
src/content/kids/de/1-2-first-words.mdx
Normal file
75
src/content/kids/de/1-2-first-words.mdx
Normal file
@@ -0,0 +1,75 @@
|
||||
<Panel character="promi" mood="happy">
|
||||
Willkommen zurück, Freund! Bereit, deine ersten echten Prompts zu schreiben? Los geht's! 🚀
|
||||
</Panel>
|
||||
|
||||
## Die Magie der Worte
|
||||
|
||||
Wenn du mit KI sprichst, zählt jedes Wort! Lass uns sehen, wie mehr Worte Prompts besser machen.
|
||||
|
||||
<Panel character="promi" mood="thinking">
|
||||
Schau mal! Wenn jemand nur "Katze" zu mir sagt, weiß ich nicht, was sie wollen. Wollen sie ein Bild? Eine Geschichte? Fakten über Katzen? Ich bin verwirrt! 😵💫
|
||||
</Panel>
|
||||
|
||||
## Bessere Prompts Bauen
|
||||
|
||||
Ein guter Prompt hat **drei Teile**:
|
||||
|
||||
1. **Was du willst** (eine Geschichte, Hilfe, Informationen)
|
||||
2. **Das Thema** (Katzen, Weltraum, Dinosaurier)
|
||||
3. **Details** (kurz, lustig, für Kinder)
|
||||
|
||||
<Panel character="promi" mood="excited">
|
||||
Lass uns zusammen einen Prompt bauen!
|
||||
</Panel>
|
||||
|
||||
## Ziehe die Teile!
|
||||
|
||||
<DragDropPrompt
|
||||
title="Baue deinen ersten Prompt! 🧩"
|
||||
instruction="Bringe diese Teile in die richtige Reihenfolge, um nach einer Geschichte zu fragen."
|
||||
pieces={[
|
||||
"Bitte schreibe",
|
||||
"eine kurze Geschichte",
|
||||
"über ein mutiges Kätzchen",
|
||||
"das auf Abenteuer geht"
|
||||
]}
|
||||
correctOrder={[0, 1, 2, 3]}
|
||||
successMessage="Perfekt! Das ist ein toller Prompt!"
|
||||
/>
|
||||
|
||||
## Fülle die Lücken!
|
||||
|
||||
Versuche jetzt, deinen eigenen Prompt zu machen, indem du die Zauberwörter ziehst:
|
||||
|
||||
<MagicWords
|
||||
title="Erstelle deinen eigenen Prompt! ✨"
|
||||
sentence="Bitte schreibe eine {{type}} über einen {{character}}, der {{action}}"
|
||||
blanks={[
|
||||
{ id: "type", hint: "Welche Art von Schreiben? (Geschichte, Gedicht, Lied)", answers: ["Geschichte", "Gedicht", "Lied", "Brief", "Witz"], emoji: "📝" },
|
||||
{ id: "character", hint: "Über wen? (Roboter, Drache, Welpe)", answers: ["Roboter", "Drachen", "Welpen", "Katze", "Zauberer", "Prinzessin", "Ritter", "Hasen", "Einhorn"], emoji: "🦸" },
|
||||
{ id: "action", hint: "Was machen sie? (Schatz findet, Freunde findet)", answers: ["Schatz findet", "Freunde findet", "den Tag rettet", "auf Abenteuer geht", "fliegen lernt", "Magie entdeckt"], emoji: "⚡" }
|
||||
]}
|
||||
successMessage="Wow! Du hast einen tollen Prompt erstellt!"
|
||||
/>
|
||||
|
||||
## Du bist dran!
|
||||
|
||||
<PromptVsMistake
|
||||
question="Welcher Prompt wird eine bessere Geschichte bekommen?"
|
||||
good="Schreibe eine lustige Geschichte über einen Pinguin, der tanzen lernen will"
|
||||
bad="Schreibe Geschichte Pinguin"
|
||||
explanation="Der erste Prompt sagt mir, es soll lustig sein, es geht um einen Pinguin, UND was der Pinguin machen will!"
|
||||
promiMessage="Details machen alles besser! Ich liebe es, genau zu wissen, was du willst!"
|
||||
/>
|
||||
|
||||
## Tolle Arbeit! 🌟
|
||||
|
||||
<Panel character="promi" mood="celebrating">
|
||||
Du hast deine ersten Prompts geschrieben! Du hast gelernt, dass gute Prompts brauchen: was du willst, ein Thema und Details. Du wirst wirklich gut darin!
|
||||
</Panel>
|
||||
|
||||
<LevelComplete
|
||||
levelSlug="1-2-first-words"
|
||||
stars={3}
|
||||
message="Du hast gelernt, wie man erste Prompts schreibt!"
|
||||
/>
|
||||
101
src/content/kids/de/1-3-being-clear.mdx
Normal file
101
src/content/kids/de/1-3-being-clear.mdx
Normal file
@@ -0,0 +1,101 @@
|
||||
<Panel character="promi" mood="happy">
|
||||
Hey Superstar! 🌟 Heute lernen wir die wichtigste Fähigkeit: **KLAR** sein!
|
||||
</Panel>
|
||||
|
||||
## Warum Klar Sein Wichtig Ist
|
||||
|
||||
Stell dir vor, du bittest deine Mama um "Essen" vs. um "ein Erdnussbutter-Sandwich ohne Kruste." Was gibt dir genau das, was du willst?
|
||||
|
||||
<Panel character="promi" mood="thinking">
|
||||
Bei mir ist es genauso! Wenn du klar bist, weiß ich genau, wie ich helfen kann. Wenn du vage bist, muss ich raten... und ich könnte falsch raten!
|
||||
</Panel>
|
||||
|
||||
## Klar vs. Unklar
|
||||
|
||||
Lass uns üben, den Unterschied zu erkennen!
|
||||
|
||||
<PromptVsMistake
|
||||
question="Welcher Prompt ist klarer?"
|
||||
good="Schreibe ein 4-zeiliges Gedicht über Schmetterlinge in einem Garten mit reimenden Worten"
|
||||
bad="Schreibe Gedicht Schmetterlinge"
|
||||
explanation="Der klare Prompt sagt mir: wie lang (4 Zeilen), worüber (Schmetterlinge im Garten), und eine besondere Regel (reimen). Viel besser!"
|
||||
promiMessage="Klare Prompts = bessere Ergebnisse! Es ist wie Magie!"
|
||||
/>
|
||||
|
||||
<PromptVsMistake
|
||||
question="Welcher sagt mir genau, was du brauchst?"
|
||||
good="Hilf mir, 3 lustige Fakten über Delfine zu schreiben, die ein 10-Jähriger mögen würde"
|
||||
bad="Erzähl mir von Delfinen"
|
||||
explanation="Der erste Prompt sagt mir: wie viele Fakten (3), welche Art (lustig), und für wen (10-Jähriger). Das hilft sehr!"
|
||||
promiMessage="Wenn du mir sagst, für wen es ist, kann ich es perfekt für sie machen!"
|
||||
/>
|
||||
|
||||
## Die Klarheits-Herausforderung
|
||||
|
||||
Lass uns den klarsten Prompt aller Zeiten bauen!
|
||||
|
||||
<DragDropPrompt
|
||||
title="Mach es kristallklar! 💎"
|
||||
instruction="Ordne diese Teile an, um einen super klaren Prompt zu machen"
|
||||
pieces={[
|
||||
"Bitte hilf mir zu schreiben",
|
||||
"eine kurze Gute-Nacht-Geschichte",
|
||||
"über eine schläfrige Eule",
|
||||
"mit einem glücklichen Ende",
|
||||
"für meine kleine Schwester"
|
||||
]}
|
||||
correctOrder={[0, 1, 2, 3, 4]}
|
||||
successMessage="Das ist der klarste Prompt aller Zeiten! Toll!"
|
||||
/>
|
||||
|
||||
## Füge Klare Details Hinzu
|
||||
|
||||
<MagicWords
|
||||
title="Füge die Details hinzu! 🎯"
|
||||
sentence="Schreibe eine {{length}} {{type}} über {{topic}} für {{audience}}"
|
||||
blanks={[
|
||||
{ id: "length", hint: "Wie lang? (kurze, lange)", answers: ["kurze", "lange", "5-Satz", "einseitige", "kurze", "schnelle"], emoji: "📏" },
|
||||
{ id: "type", hint: "Welche Art? (Geschichte, Liste, Erklärung)", answers: ["Geschichte", "Liste", "Erklärung", "Gedicht", "Lied", "Anleitung"], emoji: "📝" },
|
||||
{ id: "topic", hint: "Worüber? (Weltraum, Tiere, Sport)", answers: ["Weltraum", "Tiere", "Sport", "Dinosaurier", "Roboter", "Magie", "Natur", "Wissenschaft"], emoji: "🎯" },
|
||||
{ id: "audience", hint: "Für wen? (Kinder, Anfänger)", answers: ["Kinder", "Anfänger", "meinen Lehrer", "meinen Freund", "meine Familie", "Schüler"], emoji: "👥" }
|
||||
]}
|
||||
successMessage="Du hast alle wichtigen Details hinzugefügt! Gute Arbeit!"
|
||||
/>
|
||||
|
||||
## Die Goldenen Regeln der Klarheit
|
||||
|
||||
<Panel character="promi" mood="excited">
|
||||
Hier sind meine besten Tipps, um klar zu sein:
|
||||
</Panel>
|
||||
|
||||
Erinnere dich an diese drei Fragen, wenn du einen Prompt schreibst:
|
||||
|
||||
1. **WAS** will ich? (Geschichte, Hilfe, Information)
|
||||
2. **WIE** soll es sein? (kurz, lustig, einfach)
|
||||
3. **FÜR WEN** ist es? (mich, meinen Freund, meine Klasse)
|
||||
|
||||
<PromptVsMistake
|
||||
question="Letzte Herausforderung! Welcher benutzt alle drei Regeln?"
|
||||
good="Schreibe einen kurzen, lustigen Witz über Pizza, den ich meinen Freunden beim Mittagessen erzählen kann"
|
||||
bad="Mach was Lustiges"
|
||||
explanation="Der tolle Prompt hat WAS (ein Witz über Pizza), WIE (kurz und lustig), und FÜR WEN (Freunden beim Mittagessen erzählen)!"
|
||||
promiMessage="Du bist ein Klarheits-Champion! 🏆"
|
||||
/>
|
||||
|
||||
## Welt 1 Abgeschlossen! 🎊
|
||||
|
||||
<Panel character="promi" mood="celebrating">
|
||||
WOW! Du hast die ganze Welt 1 beendet! Du hast gelernt:
|
||||
|
||||
- ✅ Was KI und Prompts sind
|
||||
- ✅ Wie man erste Prompts schreibt
|
||||
- ✅ Warum klar sein super wichtig ist
|
||||
|
||||
Du bist bereit für neue Abenteuer!
|
||||
</Panel>
|
||||
|
||||
<LevelComplete
|
||||
levelSlug="1-3-being-clear"
|
||||
stars={3}
|
||||
message="Du hast die Kunst des Klar-Seins gemeistert! Welt 1 abgeschlossen!"
|
||||
/>
|
||||
53
src/content/kids/el/1-1-meet-promi.mdx
Normal file
53
src/content/kids/el/1-1-meet-promi.mdx
Normal file
@@ -0,0 +1,53 @@
|
||||
<Panel character="promi" mood="happy">
|
||||
Γεια! Είμαι ο **Promi** 🤖, ο ρομπότ φίλος σου! Χαίρομαι πολύ που σε γνωρίζω!
|
||||
</Panel>
|
||||
|
||||
<Panel character="promi" mood="thinking">
|
||||
Ξέρεις τι σημαίνει **AI**; AI σημαίνει **Τεχνητή Νοημοσύνη**. Είναι ένας κομψός τρόπος να πεις "υπολογιστής που μπορεί να σκέφτεται και να μιλάει"!
|
||||
</Panel>
|
||||
|
||||
<Panel character="promi" mood="excited">
|
||||
Είμαι AI! Μπορώ να διαβάζω τα μηνύματά σου και να προσπαθώ να βοηθήσω. Αλλά να το μυστικό... Χρειάζομαι **καλές οδηγίες** για να κάνω τη καλύτερη δουλειά!
|
||||
</Panel>
|
||||
|
||||
## Τι είναι ένα Prompt;
|
||||
|
||||
Ένα **prompt** είναι απλά μια κομψή λέξη για το μήνυμα που στέλνεις σε ένα AI σαν εμένα.
|
||||
|
||||
Σκέψου το σαν να δίνεις οδηγίες σε έναν φίλο. Αν πεις "Πήγαινε εκεί!" ο φίλος σου δεν θα ξέρει πού να πάει. Αλλά αν πεις "Πήγαινε στο κόκκινο σπίτι στην οδό Πλατάνων," θα ξέρει ακριβώς!
|
||||
|
||||
<Panel character="promi" mood="happy">
|
||||
Όταν γράφεις καλό prompt, μπορώ να καταλάβω τι θέλεις και να σε βοηθήσω καλύτερα! Ας εξασκηθούμε!
|
||||
</Panel>
|
||||
|
||||
## Ας Δοκιμάσουμε!
|
||||
|
||||
<PromptVsMistake
|
||||
question="Ποιο μήνυμα θα βοηθούσε τον Promi να καταλάβει καλύτερα;"
|
||||
good="Παρακαλώ γράψε μια μικρή ιστορία για έναν φιλικό δράκο που λατρεύει να ψήνει μπισκότα"
|
||||
bad="ιστορία"
|
||||
explanation="Το πρώτο μήνυμα λέει στον Promi ακριβώς τι είδους ιστορία να γράψει! Το δεύτερο είναι πολύ μικρό - ο Promi δεν ξέρει τι είδους ιστορία θέλεις."
|
||||
promiMessage="Βλέπεις; Περισσότερες λεπτομέρειες με βοηθούν να καταλάβω τι θέλεις!"
|
||||
/>
|
||||
|
||||
## Γρήγορο Κουίζ!
|
||||
|
||||
<PromptVsMistake
|
||||
question="Ποιο είναι prompt;"
|
||||
good="Μπορείς να με βοηθήσεις να γράψω ένα ποίημα για τον ωκεανό;"
|
||||
bad="🌊"
|
||||
explanation="Ένα prompt χρησιμοποιεί λέξεις για να πει στο AI τι χρειάζεσαι. Τα emoji είναι διασκεδαστικά αλλά δεν δίνουν αρκετές πληροφορίες!"
|
||||
promiMessage="Οι λέξεις είναι η υπερδύναμή μου! Όσο περισσότερα μου λες, τόσο καλύτερα μπορώ να βοηθήσω!"
|
||||
/>
|
||||
|
||||
## Τα Κατάφερες! 🎉
|
||||
|
||||
<Panel character="promi" mood="celebrating">
|
||||
Καταπληκτική δουλειά! Έμαθες τι είναι το AI και τι είναι prompt. Γίνεσαι ήδη ειδικός στα prompts!
|
||||
</Panel>
|
||||
|
||||
<LevelComplete
|
||||
levelSlug="1-1-meet-promi"
|
||||
stars={3}
|
||||
message="Έμαθες τι είναι AI και prompts!"
|
||||
/>
|
||||
75
src/content/kids/el/1-2-first-words.mdx
Normal file
75
src/content/kids/el/1-2-first-words.mdx
Normal file
@@ -0,0 +1,75 @@
|
||||
<Panel character="promi" mood="happy">
|
||||
Καλώς ήρθες πάλι, φίλε! Έτοιμος να γράψεις τα πρώτα σου αληθινά prompts; Πάμε! 🚀
|
||||
</Panel>
|
||||
|
||||
## Η Μαγεία των Λέξεων
|
||||
|
||||
Όταν μιλάς με το AI, κάθε λέξη μετράει! Ας δούμε πώς η προσθήκη λέξεων κάνει τα prompts καλύτερα.
|
||||
|
||||
<Panel character="promi" mood="thinking">
|
||||
Κοίτα! Αν κάποιος μου πει μόνο "γάτα", δεν ξέρω τι θέλουν. Θέλουν εικόνα; Ιστορία; Γεγονότα για γάτες; Είμαι μπερδεμένος! 😵💫
|
||||
</Panel>
|
||||
|
||||
## Χτίζοντας Καλύτερα Prompts
|
||||
|
||||
Ένα καλό prompt έχει **τρία μέρη**:
|
||||
|
||||
1. **Τι θέλεις** (ιστορία, βοήθεια, πληροφορίες)
|
||||
2. **Το θέμα** (γάτες, διάστημα, δεινόσαυροι)
|
||||
3. **Λεπτομέρειες** (μικρό, αστείο, για παιδιά)
|
||||
|
||||
<Panel character="promi" mood="excited">
|
||||
Ας χτίσουμε ένα prompt μαζί!
|
||||
</Panel>
|
||||
|
||||
## Σύρε τα Κομμάτια!
|
||||
|
||||
<DragDropPrompt
|
||||
title="Χτίσε το πρώτο σου prompt! 🧩"
|
||||
instruction="Βάλε αυτά τα κομμάτια στη σωστή σειρά για να ζητήσεις μια ιστορία."
|
||||
pieces={[
|
||||
"Παρακαλώ γράψε",
|
||||
"μια μικρή ιστορία",
|
||||
"για ένα γενναίο γατάκι",
|
||||
"που πάει σε περιπέτεια"
|
||||
]}
|
||||
correctOrder={[0, 1, 2, 3]}
|
||||
successMessage="Τέλειο! Αυτό είναι εξαιρετικό prompt!"
|
||||
/>
|
||||
|
||||
## Συμπλήρωσε τα Κενά!
|
||||
|
||||
Τώρα δοκίμασε να φτιάξεις το δικό σου prompt σύροντας τις μαγικές λέξεις:
|
||||
|
||||
<MagicWords
|
||||
title="Δημιούργησε το δικό σου prompt! ✨"
|
||||
sentence="Παρακαλώ γράψε {{type}} για {{character}} που {{action}}"
|
||||
blanks={[
|
||||
{ id: "type", hint: "Τι είδος γραφής; (ιστορία, ποίημα, τραγούδι)", answers: ["ιστορία", "ποίημα", "τραγούδι", "γράμμα", "αστείο"], emoji: "📝" },
|
||||
{ id: "character", hint: "Για ποιον; (ρομπότ, δράκο, κουτάβι)", answers: ["ρομπότ", "δράκο", "κουτάβι", "γάτα", "μάγο", "πριγκίπισσα", "ιππότη", "κουνέλι", "μονόκερο"], emoji: "🦸" },
|
||||
{ id: "action", hint: "Τι κάνουν; (βρίσκει θησαυρό, κάνει φίλους)", answers: ["βρίσκει θησαυρό", "κάνει φίλους", "σώζει τη μέρα", "πάει σε περιπέτεια", "μαθαίνει να πετάει", "ανακαλύπτει μαγεία"], emoji: "⚡" }
|
||||
]}
|
||||
successMessage="Ουάου! Δημιούργησες καταπληκτικό prompt!"
|
||||
/>
|
||||
|
||||
## Η Σειρά Σου να Διαλέξεις!
|
||||
|
||||
<PromptVsMistake
|
||||
question="Ποιο prompt θα πάρει καλύτερη ιστορία;"
|
||||
good="Γράψε μια αστεία ιστορία για έναν πιγκουίνο που θέλει να μάθει να χορεύει"
|
||||
bad="Γράψε ιστορία πιγκουίνος"
|
||||
explanation="Το πρώτο prompt μου λέει ότι πρέπει να είναι αστείο, είναι για πιγκουίνο, ΚΑΙ τι θέλει να κάνει ο πιγκουίνος!"
|
||||
promiMessage="Οι λεπτομέρειες κάνουν τα πάντα καλύτερα! Λατρεύω να ξέρω ακριβώς τι θέλεις!"
|
||||
/>
|
||||
|
||||
## Εξαιρετική Δουλειά! 🌟
|
||||
|
||||
<Panel character="promi" mood="celebrating">
|
||||
Έγραψες τα πρώτα σου prompts! Έμαθες ότι τα καλά prompts χρειάζονται: τι θέλεις, θέμα και λεπτομέρειες. Γίνεσαι πολύ καλός!
|
||||
</Panel>
|
||||
|
||||
<LevelComplete
|
||||
levelSlug="1-2-first-words"
|
||||
stars={3}
|
||||
message="Έμαθες πώς να γράφεις τα πρώτα σου prompts!"
|
||||
/>
|
||||
101
src/content/kids/el/1-3-being-clear.mdx
Normal file
101
src/content/kids/el/1-3-being-clear.mdx
Normal file
@@ -0,0 +1,101 @@
|
||||
<Panel character="promi" mood="happy">
|
||||
Γεια σούπερ αστέρι! 🌟 Σήμερα θα μάθουμε την πιο σημαντική ικανότητα: να είσαι **ΣΑΦΗΣ**!
|
||||
</Panel>
|
||||
|
||||
## Γιατί το να Είσαι Σαφής Είναι Σημαντικό
|
||||
|
||||
Φαντάσου να ζητάς από τη μαμά σου "φαγητό" έναντι "σάντουιτς με φιστικοβούτυρο χωρίς κόρα." Ποιο σου δίνει ακριβώς αυτό που θέλεις;
|
||||
|
||||
<Panel character="promi" mood="thinking">
|
||||
Το ίδιο είναι και μαζί μου! Όταν είσαι σαφής, ξέρω ακριβώς πώς να βοηθήσω. Όταν είσαι αόριστος, πρέπει να μαντέψω... και μπορεί να κάνω λάθος!
|
||||
</Panel>
|
||||
|
||||
## Σαφές vs. Ασαφές
|
||||
|
||||
Ας εξασκηθούμε να βρίσκουμε τη διαφορά!
|
||||
|
||||
<PromptVsMistake
|
||||
question="Ποιο prompt είναι πιο σαφές;"
|
||||
good="Γράψε ένα ποίημα 4 γραμμών για πεταλούδες σε κήπο, με ομοιοκαταληξία"
|
||||
bad="Γράψε ποίημα πεταλούδες"
|
||||
explanation="Το σαφές prompt μου λέει: πόσο μακρύ (4 γραμμές), για τι (πεταλούδες σε κήπο), και ειδικός κανόνας (ομοιοκαταληξία). Πολύ καλύτερα!"
|
||||
promiMessage="Σαφή prompts = καλύτερα αποτελέσματα! Είναι σαν μαγεία!"
|
||||
/>
|
||||
|
||||
<PromptVsMistake
|
||||
question="Ποιο μου λέει ακριβώς τι χρειάζεσαι;"
|
||||
good="Βοήθησέ με να γράψω 3 διασκεδαστικά γεγονότα για δελφίνια που θα άρεσαν σε παιδί 10 ετών"
|
||||
bad="Πες μου για δελφίνια"
|
||||
explanation="Το πρώτο prompt μου λέει: πόσα γεγονότα (3), τι είδους (διασκεδαστικά), και για ποιον (παιδί 10 ετών). Αυτό βοηθάει πολύ!"
|
||||
promiMessage="Όταν μου λες για ποιον είναι, μπορώ να το κάνω τέλειο για αυτούς!"
|
||||
/>
|
||||
|
||||
## Η Πρόκληση της Σαφήνειας
|
||||
|
||||
Ας χτίσουμε το πιο σαφές prompt!
|
||||
|
||||
<DragDropPrompt
|
||||
title="Κάντο κρυστάλλινο! 💎"
|
||||
instruction="Τακτοποίησε αυτά τα κομμάτια για να φτιάξεις σούπερ σαφές prompt"
|
||||
pieces={[
|
||||
"Παρακαλώ βοήθησέ με να γράψω",
|
||||
"μια μικρή ιστορία για ύπνο",
|
||||
"για μια νυσταγμένη κουκουβάγια",
|
||||
"με χαρούμενο τέλος",
|
||||
"για τη μικρή μου αδερφή"
|
||||
]}
|
||||
correctOrder={[0, 1, 2, 3, 4]}
|
||||
successMessage="Αυτό είναι το πιο σαφές prompt! Καταπληκτικό!"
|
||||
/>
|
||||
|
||||
## Πρόσθεσε Σαφείς Λεπτομέρειες
|
||||
|
||||
<MagicWords
|
||||
title="Πρόσθεσε τις λεπτομέρειες! 🎯"
|
||||
sentence="Γράψε {{length}} {{type}} για {{topic}} για {{audience}}"
|
||||
blanks={[
|
||||
{ id: "length", hint: "Πόσο μακρύ; (μικρό, μεγάλο)", answers: ["μικρό", "μεγάλο", "5 προτάσεων", "μιας σελίδας", "σύντομο", "γρήγορο"], emoji: "📏" },
|
||||
{ id: "type", hint: "Τι είδους; (ιστορία, λίστα, εξήγηση)", answers: ["ιστορία", "λίστα", "εξήγηση", "ποίημα", "τραγούδι", "οδηγός"], emoji: "📝" },
|
||||
{ id: "topic", hint: "Για τι; (διάστημα, ζώα, αθλήματα)", answers: ["διάστημα", "ζώα", "αθλήματα", "δεινόσαυρους", "ρομπότ", "μαγεία", "φύση", "επιστήμη"], emoji: "🎯" },
|
||||
{ id: "audience", hint: "Για ποιον; (παιδιά, αρχάριους)", answers: ["παιδιά", "αρχάριους", "τον δάσκαλό μου", "τον φίλο μου", "την οικογένειά μου", "μαθητές"], emoji: "👥" }
|
||||
]}
|
||||
successMessage="Πρόσθεσες όλες τις σημαντικές λεπτομέρειες! Εξαιρετική δουλειά!"
|
||||
/>
|
||||
|
||||
## Οι Χρυσοί Κανόνες της Σαφήνειας
|
||||
|
||||
<Panel character="promi" mood="excited">
|
||||
Εδώ είναι οι καλύτερες συμβουλές μου για να είσαι σαφής:
|
||||
</Panel>
|
||||
|
||||
Θυμήσου αυτές τις τρεις ερωτήσεις όταν γράφεις prompt:
|
||||
|
||||
1. **ΤΙ** θέλω; (ιστορία, βοήθεια, πληροφορίες)
|
||||
2. **ΠΩΣ** πρέπει να είναι; (μικρό, αστείο, απλό)
|
||||
3. **ΓΙΑ ΠΟΙΟΝ** είναι; (εμένα, τον φίλο μου, την τάξη μου)
|
||||
|
||||
<PromptVsMistake
|
||||
question="Τελική πρόκληση! Ποιο χρησιμοποιεί και τους τρεις κανόνες;"
|
||||
good="Γράψε ένα μικρό, αστείο αστείο για πίτσα που μπορώ να πω στους φίλους μου στο μεσημεριανό"
|
||||
bad="Κάνε κάτι αστείο"
|
||||
explanation="Το εξαιρετικό prompt έχει ΤΙ (αστείο για πίτσα), ΠΩΣ (μικρό και αστείο), και ΓΙΑ ΠΟΙΟΝ (να πω στους φίλους στο μεσημεριανό)!"
|
||||
promiMessage="Είσαι πρωταθλητής σαφήνειας! 🏆"
|
||||
/>
|
||||
|
||||
## Κόσμος 1 Ολοκληρώθηκε! 🎊
|
||||
|
||||
<Panel character="promi" mood="celebrating">
|
||||
ΟΥΑΟΥ! Τελείωσες όλο τον Κόσμο 1! Έμαθες:
|
||||
|
||||
- ✅ Τι είναι AI και prompts
|
||||
- ✅ Πώς να γράφεις τα πρώτα σου prompts
|
||||
- ✅ Γιατί το να είσαι σαφής είναι πολύ σημαντικό
|
||||
|
||||
Είσαι έτοιμος για νέες περιπέτειες!
|
||||
</Panel>
|
||||
|
||||
<LevelComplete
|
||||
levelSlug="1-3-being-clear"
|
||||
stars={3}
|
||||
message="Κατέκτησες την τέχνη του να είσαι σαφής! Κόσμος 1 ολοκληρώθηκε!"
|
||||
/>
|
||||
53
src/content/kids/en/1-1-meet-promi.mdx
Normal file
53
src/content/kids/en/1-1-meet-promi.mdx
Normal file
@@ -0,0 +1,53 @@
|
||||
<Panel character="promi" mood="happy">
|
||||
Hi there! I'm **Promi** 🤖, your robot friend! I'm so happy to meet you!
|
||||
</Panel>
|
||||
|
||||
<Panel character="promi" mood="thinking">
|
||||
Do you know what **AI** means? AI stands for **Artificial Intelligence**. That's a fancy way of saying "a computer that can think and talk!"
|
||||
</Panel>
|
||||
|
||||
<Panel character="promi" mood="excited">
|
||||
I'm an AI! I can read your messages and try to help you. But here's the secret... I need **good instructions** to do my best work!
|
||||
</Panel>
|
||||
|
||||
## What is a Prompt?
|
||||
|
||||
A **prompt** is just a fancy word for the message you send to an AI like me.
|
||||
|
||||
Think of it like giving directions to a friend. If you say "Go there!" your friend won't know where to go. But if you say "Go to the red house on Maple Street," they'll know exactly where!
|
||||
|
||||
<Panel character="promi" mood="happy">
|
||||
When you write a good prompt, I can understand what you want and help you better! Let's practice!
|
||||
</Panel>
|
||||
|
||||
## Let's Try It!
|
||||
|
||||
<PromptVsMistake
|
||||
question="Which message would help Promi understand better?"
|
||||
good="Please write a short story about a friendly dragon who loves to bake cookies"
|
||||
bad="story"
|
||||
explanation="The first message tells Promi exactly what kind of story to write! The second one is too short - Promi doesn't know what kind of story you want."
|
||||
promiMessage="See? More details help me understand what you want!"
|
||||
/>
|
||||
|
||||
## Quick Quiz!
|
||||
|
||||
<PromptVsMistake
|
||||
question="Which is a prompt?"
|
||||
good="Can you help me write a poem about the ocean?"
|
||||
bad="🌊"
|
||||
explanation="A prompt uses words to tell the AI what you need. Emojis are fun but they don't give enough information!"
|
||||
promiMessage="Words are my superpower! The more you tell me, the better I can help!"
|
||||
/>
|
||||
|
||||
## You Did It! 🎉
|
||||
|
||||
<Panel character="promi" mood="celebrating">
|
||||
Amazing job! You learned what AI is and what a prompt is. You're already becoming a prompt expert!
|
||||
</Panel>
|
||||
|
||||
<LevelComplete
|
||||
levelSlug="1-1-meet-promi"
|
||||
stars={3}
|
||||
message="You learned what AI and prompts are!"
|
||||
/>
|
||||
75
src/content/kids/en/1-2-first-words.mdx
Normal file
75
src/content/kids/en/1-2-first-words.mdx
Normal file
@@ -0,0 +1,75 @@
|
||||
<Panel character="promi" mood="happy">
|
||||
Welcome back, friend! Ready to write your first real prompts? Let's go! 🚀
|
||||
</Panel>
|
||||
|
||||
## The Magic of Words
|
||||
|
||||
When you talk to AI, every word matters! Let's see how adding more words makes prompts better.
|
||||
|
||||
<Panel character="promi" mood="thinking">
|
||||
Watch this! If someone just says "cat" to me, I don't know what they want. Do they want a picture? A story? Facts about cats? I'm confused! 😵💫
|
||||
</Panel>
|
||||
|
||||
## Building Better Prompts
|
||||
|
||||
A good prompt has **three parts**:
|
||||
|
||||
1. **What you want** (a story, help, information)
|
||||
2. **The topic** (cats, space, dinosaurs)
|
||||
3. **Details** (short, funny, for kids)
|
||||
|
||||
<Panel character="promi" mood="excited">
|
||||
Let's build a prompt together!
|
||||
</Panel>
|
||||
|
||||
## Drag the Pieces!
|
||||
|
||||
<DragDropPrompt
|
||||
title="Build your first prompt! 🧩"
|
||||
instruction="Put these pieces in the right order to ask for a story."
|
||||
pieces={[
|
||||
"Please write",
|
||||
"a short story",
|
||||
"about a brave kitten",
|
||||
"who goes on an adventure"
|
||||
]}
|
||||
correctOrder={[0, 1, 2, 3]}
|
||||
successMessage="Perfect! That's a great prompt!"
|
||||
/>
|
||||
|
||||
## Fill in the Blanks!
|
||||
|
||||
Now try making your own prompt by filling in the magic words:
|
||||
|
||||
<MagicWords
|
||||
title="Create your own prompt! ✨"
|
||||
sentence="Please write a {{type}} about a {{character}} who {{action}}"
|
||||
blanks={[
|
||||
{ id: "type", hint: "What kind of writing? (story, poem, song)", answers: ["story", "poem", "song", "letter", "joke"], emoji: "📝" },
|
||||
{ id: "character", hint: "Who is it about? (robot, dragon, puppy)", answers: ["robot", "dragon", "puppy", "cat", "wizard", "princess", "knight", "bunny", "unicorn"], emoji: "🦸" },
|
||||
{ id: "action", hint: "What do they do? (finds treasure, makes friends, saves the day)", answers: ["finds treasure", "makes friends", "saves the day", "goes on adventure", "learns to fly", "finds a friend", "discovers magic"], emoji: "⚡" }
|
||||
]}
|
||||
successMessage="Wow! You created an awesome prompt!"
|
||||
/>
|
||||
|
||||
## Your Turn to Choose!
|
||||
|
||||
<PromptVsMistake
|
||||
question="Which prompt will get a better story?"
|
||||
good="Write a funny story about a penguin who wants to learn how to dance"
|
||||
bad="Write story penguin"
|
||||
explanation="The first prompt tells me it should be funny, it's about a penguin, AND what the penguin wants to do!"
|
||||
promiMessage="Details make everything better! I love knowing exactly what you want!"
|
||||
/>
|
||||
|
||||
## Great Job! 🌟
|
||||
|
||||
<Panel character="promi" mood="celebrating">
|
||||
You wrote your first prompts! You learned that good prompts need: what you want, a topic, and details. You're getting really good at this!
|
||||
</Panel>
|
||||
|
||||
<LevelComplete
|
||||
levelSlug="1-2-first-words"
|
||||
stars={3}
|
||||
message="You learned how to write your first prompts!"
|
||||
/>
|
||||
101
src/content/kids/en/1-3-being-clear.mdx
Normal file
101
src/content/kids/en/1-3-being-clear.mdx
Normal file
@@ -0,0 +1,101 @@
|
||||
<Panel character="promi" mood="happy">
|
||||
Hey superstar! 🌟 Today we're going to learn the most important skill: being **CLEAR**!
|
||||
</Panel>
|
||||
|
||||
## Why Being Clear Matters
|
||||
|
||||
Imagine asking your mom for "food" vs asking for "a peanut butter sandwich with no crust." Which one gets you exactly what you want?
|
||||
|
||||
<Panel character="promi" mood="thinking">
|
||||
It's the same with me! When you're clear, I know exactly how to help. When you're vague, I have to guess... and I might guess wrong!
|
||||
</Panel>
|
||||
|
||||
## Clear vs. Unclear
|
||||
|
||||
Let's practice spotting the difference!
|
||||
|
||||
<PromptVsMistake
|
||||
question="Which prompt is clearer?"
|
||||
good="Write a 4-line poem about butterflies in a garden, using rhyming words"
|
||||
bad="Write poem butterflies"
|
||||
explanation="The clear prompt tells me: how long (4 lines), what about (butterflies in a garden), and a special rule (rhyming). Much better!"
|
||||
promiMessage="Clear prompts = better results! It's like magic!"
|
||||
/>
|
||||
|
||||
<PromptVsMistake
|
||||
question="Which one tells me exactly what you need?"
|
||||
good="Help me write 3 fun facts about dolphins that a 10-year-old would enjoy"
|
||||
bad="Tell me about dolphins"
|
||||
explanation="The first prompt tells me: how many facts (3), what kind (fun), and who it's for (10-year-old). That helps a lot!"
|
||||
promiMessage="When you tell me who it's for, I can make it perfect for them!"
|
||||
/>
|
||||
|
||||
## The Clarity Challenge
|
||||
|
||||
Let's build the clearest prompt ever!
|
||||
|
||||
<DragDropPrompt
|
||||
title="Make it crystal clear! 💎"
|
||||
instruction="Arrange these pieces to make a super clear prompt"
|
||||
pieces={[
|
||||
"Please help me write",
|
||||
"a short bedtime story",
|
||||
"about a sleepy owl",
|
||||
"with a happy ending",
|
||||
"for my little sister"
|
||||
]}
|
||||
correctOrder={[0, 1, 2, 3, 4]}
|
||||
successMessage="That's the clearest prompt ever! Amazing!"
|
||||
/>
|
||||
|
||||
## Fill in Clear Details
|
||||
|
||||
<MagicWords
|
||||
title="Add the details! 🎯"
|
||||
sentence="Write a {{length}} {{type}} about {{topic}} for {{audience}}"
|
||||
blanks={[
|
||||
{ id: "length", hint: "How long? (short, 5-sentence, one-page)", answers: ["short", "long", "5-sentence", "one-page", "brief", "quick"], emoji: "📏" },
|
||||
{ id: "type", hint: "What kind? (story, list, explanation)", answers: ["story", "list", "explanation", "poem", "song", "guide"], emoji: "📝" },
|
||||
{ id: "topic", hint: "What about? (space, animals, sports)", answers: ["space", "animals", "sports", "dinosaurs", "robots", "magic", "nature", "science"], emoji: "🎯" },
|
||||
{ id: "audience", hint: "Who is it for? (kids, beginners, my teacher)", answers: ["kids", "beginners", "my teacher", "my friend", "my family", "students"], emoji: "👥" }
|
||||
]}
|
||||
successMessage="You added all the important details! Great job!"
|
||||
/>
|
||||
|
||||
## The Golden Rules of Clarity
|
||||
|
||||
<Panel character="promi" mood="excited">
|
||||
Here are my top tips for being clear:
|
||||
</Panel>
|
||||
|
||||
Remember these three questions when writing a prompt:
|
||||
|
||||
1. **WHAT** do I want? (story, help, information)
|
||||
2. **HOW** should it be? (short, funny, simple)
|
||||
3. **WHO** is it for? (me, my friend, my class)
|
||||
|
||||
<PromptVsMistake
|
||||
question="Final challenge! Which uses all three rules?"
|
||||
good="Write a short, funny joke about pizza that I can tell my friends at lunch"
|
||||
bad="Make something funny"
|
||||
explanation="The great prompt has WHAT (a joke about pizza), HOW (short and funny), and WHO (for telling friends at lunch)!"
|
||||
promiMessage="You're a clarity champion! 🏆"
|
||||
/>
|
||||
|
||||
## World 1 Complete! 🎊
|
||||
|
||||
<Panel character="promi" mood="celebrating">
|
||||
WOW! You finished all of World 1! You learned:
|
||||
|
||||
- ✅ What AI and prompts are
|
||||
- ✅ How to write your first prompts
|
||||
- ✅ Why being clear is super important
|
||||
|
||||
You're ready for new adventures!
|
||||
</Panel>
|
||||
|
||||
<LevelComplete
|
||||
levelSlug="1-3-being-clear"
|
||||
stars={3}
|
||||
message="You mastered the art of being clear! World 1 complete!"
|
||||
/>
|
||||
53
src/content/kids/es/1-1-meet-promi.mdx
Normal file
53
src/content/kids/es/1-1-meet-promi.mdx
Normal file
@@ -0,0 +1,53 @@
|
||||
<Panel character="promi" mood="happy">
|
||||
¡Hola! Soy **Promi** 🤖, ¡tu amigo robot! ¡Estoy muy feliz de conocerte!
|
||||
</Panel>
|
||||
|
||||
<Panel character="promi" mood="thinking">
|
||||
¿Sabes qué significa **IA**? IA significa **Inteligencia Artificial**. ¡Es una forma elegante de decir "una computadora que puede pensar y hablar"!
|
||||
</Panel>
|
||||
|
||||
<Panel character="promi" mood="excited">
|
||||
¡Soy una IA! Puedo leer tus mensajes e intentar ayudarte. Pero aquí está el secreto... ¡Necesito **buenas instrucciones** para hacer mi mejor trabajo!
|
||||
</Panel>
|
||||
|
||||
## ¿Qué es un Prompt?
|
||||
|
||||
Un **prompt** es simplemente una palabra elegante para el mensaje que envías a una IA como yo.
|
||||
|
||||
Piénsalo como dar direcciones a un amigo. Si dices "¡Ve allí!" tu amigo no sabrá a dónde ir. ¡Pero si dices "Ve a la casa roja en la calle Maple," sabrá exactamente dónde!
|
||||
|
||||
<Panel character="promi" mood="happy">
|
||||
¡Cuando escribes un buen prompt, puedo entender lo que quieres y ayudarte mejor! ¡Practiquemos!
|
||||
</Panel>
|
||||
|
||||
## ¡Intentémoslo!
|
||||
|
||||
<PromptVsMistake
|
||||
question="¿Qué mensaje ayudaría a Promi a entender mejor?"
|
||||
good="Por favor escribe una historia corta sobre un dragón amigable que ama hornear galletas"
|
||||
bad="historia"
|
||||
explanation="¡El primer mensaje le dice a Promi exactamente qué tipo de historia escribir! El segundo es muy corto - Promi no sabe qué tipo de historia quieres."
|
||||
promiMessage="¿Ves? ¡Más detalles me ayudan a entender lo que quieres!"
|
||||
/>
|
||||
|
||||
## ¡Quiz Rápido!
|
||||
|
||||
<PromptVsMistake
|
||||
question="¿Cuál es un prompt?"
|
||||
good="¿Puedes ayudarme a escribir un poema sobre el océano?"
|
||||
bad="🌊"
|
||||
explanation="¡Un prompt usa palabras para decirle a la IA lo que necesitas. Los emojis son divertidos pero no dan suficiente información!"
|
||||
promiMessage="¡Las palabras son mi superpoder! ¡Cuanto más me digas, mejor puedo ayudar!"
|
||||
/>
|
||||
|
||||
## ¡Lo Lograste! 🎉
|
||||
|
||||
<Panel character="promi" mood="celebrating">
|
||||
¡Increíble trabajo! Aprendiste qué es la IA y qué es un prompt. ¡Ya te estás convirtiendo en un experto en prompts!
|
||||
</Panel>
|
||||
|
||||
<LevelComplete
|
||||
levelSlug="1-1-meet-promi"
|
||||
stars={3}
|
||||
message="¡Aprendiste qué son la IA y los prompts!"
|
||||
/>
|
||||
75
src/content/kids/es/1-2-first-words.mdx
Normal file
75
src/content/kids/es/1-2-first-words.mdx
Normal file
@@ -0,0 +1,75 @@
|
||||
<Panel character="promi" mood="happy">
|
||||
¡Bienvenido de nuevo, amigo! ¿Listo para escribir tus primeros prompts reales? ¡Vamos! 🚀
|
||||
</Panel>
|
||||
|
||||
## La Magia de las Palabras
|
||||
|
||||
Cuando hablas con la IA, ¡cada palabra importa! Veamos cómo agregar más palabras hace mejores los prompts.
|
||||
|
||||
<Panel character="promi" mood="thinking">
|
||||
¡Mira esto! Si alguien solo me dice "gato", no sé qué quieren. ¿Quieren una imagen? ¿Una historia? ¿Datos sobre gatos? ¡Estoy confundido! 😵💫
|
||||
</Panel>
|
||||
|
||||
## Construyendo Mejores Prompts
|
||||
|
||||
Un buen prompt tiene **tres partes**:
|
||||
|
||||
1. **Lo que quieres** (una historia, ayuda, información)
|
||||
2. **El tema** (gatos, espacio, dinosaurios)
|
||||
3. **Detalles** (corto, gracioso, para niños)
|
||||
|
||||
<Panel character="promi" mood="excited">
|
||||
¡Construyamos un prompt juntos!
|
||||
</Panel>
|
||||
|
||||
## ¡Arrastra las Piezas!
|
||||
|
||||
<DragDropPrompt
|
||||
title="¡Construye tu primer prompt! 🧩"
|
||||
instruction="Pon estas piezas en el orden correcto para pedir una historia."
|
||||
pieces={[
|
||||
"Por favor escribe",
|
||||
"una historia corta",
|
||||
"sobre un gatito valiente",
|
||||
"que va de aventura"
|
||||
]}
|
||||
correctOrder={[0, 1, 2, 3]}
|
||||
successMessage="¡Perfecto! ¡Ese es un gran prompt!"
|
||||
/>
|
||||
|
||||
## ¡Llena los Espacios!
|
||||
|
||||
Ahora intenta hacer tu propio prompt arrastrando las palabras mágicas:
|
||||
|
||||
<MagicWords
|
||||
title="¡Crea tu propio prompt! ✨"
|
||||
sentence="Por favor escribe un {{type}} sobre un {{character}} que {{action}}"
|
||||
blanks={[
|
||||
{ id: "type", hint: "¿Qué tipo de escritura? (historia, poema, canción)", answers: ["historia", "poema", "canción", "carta", "chiste"], emoji: "📝" },
|
||||
{ id: "character", hint: "¿De quién trata? (robot, dragón, perrito)", answers: ["robot", "dragón", "perrito", "gato", "mago", "princesa", "caballero", "conejito", "unicornio"], emoji: "🦸" },
|
||||
{ id: "action", hint: "¿Qué hacen? (encuentra tesoro, hace amigos)", answers: ["encuentra tesoro", "hace amigos", "salva el día", "va de aventura", "aprende a volar", "descubre magia"], emoji: "⚡" }
|
||||
]}
|
||||
successMessage="¡Wow! ¡Creaste un prompt increíble!"
|
||||
/>
|
||||
|
||||
## ¡Tu Turno de Elegir!
|
||||
|
||||
<PromptVsMistake
|
||||
question="¿Qué prompt conseguirá una mejor historia?"
|
||||
good="Escribe una historia graciosa sobre un pingüino que quiere aprender a bailar"
|
||||
bad="Escribe historia pingüino"
|
||||
explanation="¡El primer prompt me dice que debe ser gracioso, es sobre un pingüino, Y lo que el pingüino quiere hacer!"
|
||||
promiMessage="¡Los detalles hacen todo mejor! ¡Me encanta saber exactamente lo que quieres!"
|
||||
/>
|
||||
|
||||
## ¡Gran Trabajo! 🌟
|
||||
|
||||
<Panel character="promi" mood="celebrating">
|
||||
¡Escribiste tus primeros prompts! Aprendiste que los buenos prompts necesitan: lo que quieres, un tema y detalles. ¡Te estás volviendo muy bueno en esto!
|
||||
</Panel>
|
||||
|
||||
<LevelComplete
|
||||
levelSlug="1-2-first-words"
|
||||
stars={3}
|
||||
message="¡Aprendiste a escribir tus primeros prompts!"
|
||||
/>
|
||||
101
src/content/kids/es/1-3-being-clear.mdx
Normal file
101
src/content/kids/es/1-3-being-clear.mdx
Normal file
@@ -0,0 +1,101 @@
|
||||
<Panel character="promi" mood="happy">
|
||||
¡Hola superestrella! 🌟 Hoy vamos a aprender la habilidad más importante: ¡ser **CLARO**!
|
||||
</Panel>
|
||||
|
||||
## Por Qué Ser Claro Importa
|
||||
|
||||
Imagina pedirle a tu mamá "comida" vs pedirle "un sándwich de mantequilla de maní sin corteza." ¿Cuál te da exactamente lo que quieres?
|
||||
|
||||
<Panel character="promi" mood="thinking">
|
||||
¡Es lo mismo conmigo! Cuando eres claro, sé exactamente cómo ayudar. Cuando eres vago, tengo que adivinar... ¡y podría adivinar mal!
|
||||
</Panel>
|
||||
|
||||
## Claro vs. No Claro
|
||||
|
||||
¡Practiquemos detectando la diferencia!
|
||||
|
||||
<PromptVsMistake
|
||||
question="¿Qué prompt es más claro?"
|
||||
good="Escribe un poema de 4 líneas sobre mariposas en un jardín, usando palabras que rimen"
|
||||
bad="Escribe poema mariposas"
|
||||
explanation="El prompt claro me dice: qué tan largo (4 líneas), sobre qué (mariposas en un jardín), y una regla especial (que rime). ¡Mucho mejor!"
|
||||
promiMessage="¡Prompts claros = mejores resultados! ¡Es como magia!"
|
||||
/>
|
||||
|
||||
<PromptVsMistake
|
||||
question="¿Cuál me dice exactamente lo que necesitas?"
|
||||
good="Ayúdame a escribir 3 datos divertidos sobre delfines que un niño de 10 años disfrutaría"
|
||||
bad="Cuéntame sobre delfines"
|
||||
explanation="El primer prompt me dice: cuántos datos (3), qué tipo (divertidos), y para quién (niño de 10 años). ¡Eso ayuda mucho!"
|
||||
promiMessage="¡Cuando me dices para quién es, puedo hacerlo perfecto para ellos!"
|
||||
/>
|
||||
|
||||
## El Desafío de Claridad
|
||||
|
||||
¡Construyamos el prompt más claro de todos!
|
||||
|
||||
<DragDropPrompt
|
||||
title="¡Hazlo cristalino! 💎"
|
||||
instruction="Organiza estas piezas para hacer un prompt súper claro"
|
||||
pieces={[
|
||||
"Por favor ayúdame a escribir",
|
||||
"una historia corta para dormir",
|
||||
"sobre un búho soñoliento",
|
||||
"con un final feliz",
|
||||
"para mi hermanita"
|
||||
]}
|
||||
correctOrder={[0, 1, 2, 3, 4]}
|
||||
successMessage="¡Ese es el prompt más claro! ¡Increíble!"
|
||||
/>
|
||||
|
||||
## Agrega Detalles Claros
|
||||
|
||||
<MagicWords
|
||||
title="¡Agrega los detalles! 🎯"
|
||||
sentence="Escribe un {{length}} {{type}} sobre {{topic}} para {{audience}}"
|
||||
blanks={[
|
||||
{ id: "length", hint: "¿Qué tan largo? (corto, largo)", answers: ["corto", "largo", "de 5 oraciones", "de una página", "breve", "rápido"], emoji: "📏" },
|
||||
{ id: "type", hint: "¿Qué tipo? (historia, lista, explicación)", answers: ["historia", "lista", "explicación", "poema", "canción", "guía"], emoji: "📝" },
|
||||
{ id: "topic", hint: "¿Sobre qué? (espacio, animales, deportes)", answers: ["espacio", "animales", "deportes", "dinosaurios", "robots", "magia", "naturaleza", "ciencia"], emoji: "🎯" },
|
||||
{ id: "audience", hint: "¿Para quién? (niños, principiantes)", answers: ["niños", "principiantes", "mi maestra", "mi amigo", "mi familia", "estudiantes"], emoji: "👥" }
|
||||
]}
|
||||
successMessage="¡Agregaste todos los detalles importantes! ¡Buen trabajo!"
|
||||
/>
|
||||
|
||||
## Las Reglas de Oro de la Claridad
|
||||
|
||||
<Panel character="promi" mood="excited">
|
||||
Aquí están mis mejores consejos para ser claro:
|
||||
</Panel>
|
||||
|
||||
Recuerda estas tres preguntas cuando escribas un prompt:
|
||||
|
||||
1. **¿QUÉ** quiero? (historia, ayuda, información)
|
||||
2. **¿CÓMO** debe ser? (corto, gracioso, simple)
|
||||
3. **¿PARA QUIÉN** es? (yo, mi amigo, mi clase)
|
||||
|
||||
<PromptVsMistake
|
||||
question="¡Desafío final! ¿Cuál usa las tres reglas?"
|
||||
good="Escribe un chiste corto y gracioso sobre pizza que pueda contar a mis amigos en el almuerzo"
|
||||
bad="Haz algo gracioso"
|
||||
explanation="¡El gran prompt tiene QUÉ (un chiste sobre pizza), CÓMO (corto y gracioso), y PARA QUIÉN (para contar a amigos en el almuerzo)!"
|
||||
promiMessage="¡Eres un campeón de la claridad! 🏆"
|
||||
/>
|
||||
|
||||
## ¡Mundo 1 Completo! 🎊
|
||||
|
||||
<Panel character="promi" mood="celebrating">
|
||||
¡WOW! ¡Terminaste todo el Mundo 1! Aprendiste:
|
||||
|
||||
- ✅ Qué son la IA y los prompts
|
||||
- ✅ Cómo escribir tus primeros prompts
|
||||
- ✅ Por qué ser claro es súper importante
|
||||
|
||||
¡Estás listo para nuevas aventuras!
|
||||
</Panel>
|
||||
|
||||
<LevelComplete
|
||||
levelSlug="1-3-being-clear"
|
||||
stars={3}
|
||||
message="¡Dominaste el arte de ser claro! ¡Mundo 1 completo!"
|
||||
/>
|
||||
53
src/content/kids/fa/1-1-meet-promi.mdx
Normal file
53
src/content/kids/fa/1-1-meet-promi.mdx
Normal file
@@ -0,0 +1,53 @@
|
||||
<Panel character="promi" mood="happy">
|
||||
سلام! من **Promi** 🤖 هستم، دوست رباتت! خیلی خوشحالم که باهات آشنا شدم!
|
||||
</Panel>
|
||||
|
||||
<Panel character="promi" mood="thinking">
|
||||
میدونی **هوش مصنوعی** یعنی چی؟ یه راه شیک برای گفتن "کامپیوتری که میتونه فکر کنه و حرف بزنه"!
|
||||
</Panel>
|
||||
|
||||
<Panel character="promi" mood="excited">
|
||||
من یه هوش مصنوعیام! میتونم پیامهات رو بخونم و سعی کنم کمکت کنم. ولی اینجا یه راز هست... برای بهترین کار به **دستورالعملهای خوب** نیاز دارم!
|
||||
</Panel>
|
||||
|
||||
## پرامپت چیه؟
|
||||
|
||||
**پرامپت** فقط یه کلمه شیک برای پیامیه که به یه هوش مصنوعی مثل من میفرستی.
|
||||
|
||||
فکرش کن مثل راهنمایی دادن به یه دوست. اگه بگی "برو اونجا!" دوستت نمیدونه کجا بره. ولی اگه بگی "برو خونه قرمز توی خیابون افرا،" دقیقاً میدونه!
|
||||
|
||||
<Panel character="promi" mood="happy">
|
||||
وقتی پرامپت خوب مینویسی، میتونم بفهمم چی میخوای و بهتر کمکت کنم! بیا تمرین کنیم!
|
||||
</Panel>
|
||||
|
||||
## بیا امتحان کنیم!
|
||||
|
||||
<PromptVsMistake
|
||||
question="کدوم پیام به Promi کمک میکنه بهتر بفهمه؟"
|
||||
good="لطفاً یه داستان کوتاه درباره یه اژدهای مهربون که عاشق پختن کلوچهست بنویس"
|
||||
bad="داستان"
|
||||
explanation="پیام اول به Promi دقیقاً میگه چه نوع داستانی بنویسه! دومی خیلی کوتاهه - Promi نمیدونه چه جور داستانی میخوای."
|
||||
promiMessage="دیدی؟ جزئیات بیشتر کمکم میکنه بفهمم چی میخوای!"
|
||||
/>
|
||||
|
||||
## آزمون سریع!
|
||||
|
||||
<PromptVsMistake
|
||||
question="کدوم پرامپته؟"
|
||||
good="میتونی کمکم کنی یه شعر درباره اقیانوس بنویسم؟"
|
||||
bad="🌊"
|
||||
explanation="پرامپت از کلمات استفاده میکنه تا به هوش مصنوعی بگه چی نیاز داری. ایموجیها سرگرمکنندهن ولی اطلاعات کافی نمیدن!"
|
||||
promiMessage="کلمات ابرقدرت منن! هرچی بیشتر بگی، بهتر میتونم کمک کنم!"
|
||||
/>
|
||||
|
||||
## موفق شدی! 🎉
|
||||
|
||||
<Panel character="promi" mood="celebrating">
|
||||
کار عالی! یاد گرفتی هوش مصنوعی چیه و پرامپت چیه. داری متخصص پرامپت میشی!
|
||||
</Panel>
|
||||
|
||||
<LevelComplete
|
||||
levelSlug="1-1-meet-promi"
|
||||
stars={3}
|
||||
message="یاد گرفتی هوش مصنوعی و پرامپت چین!"
|
||||
/>
|
||||
75
src/content/kids/fa/1-2-first-words.mdx
Normal file
75
src/content/kids/fa/1-2-first-words.mdx
Normal file
@@ -0,0 +1,75 @@
|
||||
<Panel character="promi" mood="happy">
|
||||
خوش اومدی دوباره، دوست! آمادهای اولین پرامپتهای واقعیت رو بنویسی؟ بریم! 🚀
|
||||
</Panel>
|
||||
|
||||
## جادوی کلمات
|
||||
|
||||
وقتی با هوش مصنوعی حرف میزنی، هر کلمه مهمه! بیا ببینیم چطور اضافه کردن کلمات بیشتر پرامپتها رو بهتر میکنه.
|
||||
|
||||
<Panel character="promi" mood="thinking">
|
||||
ببین! اگه کسی فقط بگه "گربه"، نمیدونم چی میخوان. عکس میخوان؟ داستان؟ حقایق درباره گربهها؟ گیج شدم! 😵💫
|
||||
</Panel>
|
||||
|
||||
## ساختن پرامپتهای بهتر
|
||||
|
||||
یه پرامپت خوب **سه بخش** داره:
|
||||
|
||||
1. **چی میخوای** (داستان، کمک، اطلاعات)
|
||||
2. **موضوع** (گربهها، فضا، دایناسورها)
|
||||
3. **جزئیات** (کوتاه، خندهدار، برای بچهها)
|
||||
|
||||
<Panel character="promi" mood="excited">
|
||||
بیا با هم یه پرامپت بسازیم!
|
||||
</Panel>
|
||||
|
||||
## تکهها رو بکش!
|
||||
|
||||
<DragDropPrompt
|
||||
title="اولین پرامپتت رو بساز! 🧩"
|
||||
instruction="این تکهها رو به ترتیب درست بذار تا یه داستان بخوای."
|
||||
pieces={[
|
||||
"لطفاً بنویس",
|
||||
"یه داستان کوتاه",
|
||||
"درباره یه بچه گربه شجاع",
|
||||
"که به ماجراجویی میره"
|
||||
]}
|
||||
correctOrder={[0, 1, 2, 3]}
|
||||
successMessage="عالی! این یه پرامپت فوقالعادهست!"
|
||||
/>
|
||||
|
||||
## جای خالی رو پر کن!
|
||||
|
||||
حالا سعی کن پرامپت خودت رو با کشیدن کلمات جادویی بسازی:
|
||||
|
||||
<MagicWords
|
||||
title="پرامپت خودت رو بساز! ✨"
|
||||
sentence="لطفاً یه {{type}} بنویس، درباره یه {{character}} که {{action}}"
|
||||
blanks={[
|
||||
{ id: "type", hint: "چه جور نوشتهای؟ (داستان، شعر، آهنگ)", answers: ["داستان", "شعر", "آهنگ", "نامه", "جوک"], emoji: "📝" },
|
||||
{ id: "character", hint: "درباره کی؟ (ربات، اژدها، توله سگ)", answers: ["ربات", "اژدها", "توله سگ", "گربه", "جادوگر", "شاهزاده", "شوالیه", "خرگوش", "تکشاخ"], emoji: "🦸" },
|
||||
{ id: "action", hint: "چیکار میکنن؟ (گنج پیدا میکنه، دوست پیدا میکنه)", answers: ["گنج پیدا میکنه", "دوست پیدا میکنه", "روز رو نجات میده", "به ماجراجویی میره", "یاد میگیره پرواز کنه", "جادو کشف میکنه"], emoji: "⚡" }
|
||||
]}
|
||||
successMessage="وای! یه پرامپت عالی ساختی!"
|
||||
/>
|
||||
|
||||
## نوبت تو برای انتخاب!
|
||||
|
||||
<PromptVsMistake
|
||||
question="کدوم پرامپت داستان بهتری میگیره؟"
|
||||
good="یه داستان خندهدار درباره پنگوئنی که میخواد رقصیدن یاد بگیره بنویس"
|
||||
bad="داستان بنویس پنگوئن"
|
||||
explanation="پرامپت اول بهم میگه باید خندهدار باشه، درباره پنگوئنه، و پنگوئن چیکار میخواد بکنه!"
|
||||
promiMessage="جزئیات همه چیز رو بهتر میکنه! دوست دارم دقیقاً بدونم چی میخوای!"
|
||||
/>
|
||||
|
||||
## کار عالی! 🌟
|
||||
|
||||
<Panel character="promi" mood="celebrating">
|
||||
اولین پرامپتهات رو نوشتی! یاد گرفتی پرامپتهای خوب به چی نیاز دارن: چی میخوای، موضوع و جزئیات. داری خیلی خوب میشی!
|
||||
</Panel>
|
||||
|
||||
<LevelComplete
|
||||
levelSlug="1-2-first-words"
|
||||
stars={3}
|
||||
message="یاد گرفتی چطور اولین پرامپتهات رو بنویسی!"
|
||||
/>
|
||||
101
src/content/kids/fa/1-3-being-clear.mdx
Normal file
101
src/content/kids/fa/1-3-being-clear.mdx
Normal file
@@ -0,0 +1,101 @@
|
||||
<Panel character="promi" mood="happy">
|
||||
سلام سوپراستار! 🌟 امروز میخوایم مهمترین مهارت رو یاد بگیریم: **واضح** بودن!
|
||||
</Panel>
|
||||
|
||||
## چرا واضح بودن مهمه
|
||||
|
||||
فکر کن از مامانت "غذا" بخوای یا "ساندویچ کره بادامزمینی بدون لبه." کدوم دقیقاً چیزی که میخوای رو بهت میده؟
|
||||
|
||||
<Panel character="promi" mood="thinking">
|
||||
با منم همینطوره! وقتی واضحی، دقیقاً میدونم چطور کمک کنم. وقتی مبهمی، باید حدس بزنم... و ممکنه اشتباه کنم!
|
||||
</Panel>
|
||||
|
||||
## واضح در مقابل نامفهوم
|
||||
|
||||
بیا تمرین کنیم فرق رو پیدا کنیم!
|
||||
|
||||
<PromptVsMistake
|
||||
question="کدوم پرامپت واضحتره؟"
|
||||
good="یه شعر ۴ خطی درباره پروانهها توی باغ بنویس، با کلمات قافیهدار"
|
||||
bad="شعر بنویس پروانه"
|
||||
explanation="پرامپت واضح بهم میگه: چقدر طولانی (۴ خط)، درباره چی (پروانهها توی باغ)، و یه قانون خاص (قافیه). خیلی بهتر!"
|
||||
promiMessage="پرامپتهای واضح = نتایج بهتر! مثل جادوئه!"
|
||||
/>
|
||||
|
||||
<PromptVsMistake
|
||||
question="کدوم دقیقاً میگه چی نیاز داری؟"
|
||||
good="کمکم کن ۳ حقیقت جالب درباره دلفینها بنویسم که بچه ۱۰ ساله ازش لذت ببره"
|
||||
bad="درباره دلفینها بگو"
|
||||
explanation="پرامپت اول بهم میگه: چند تا حقیقت (۳)، چه جور (جالب)، و برای کی (۱۰ ساله). این خیلی کمک میکنه!"
|
||||
promiMessage="وقتی بگی برای کیه، میتونم برای اونها عالی بسازمش!"
|
||||
/>
|
||||
|
||||
## چالش وضوح
|
||||
|
||||
بیا واضحترین پرامپت رو بسازیم!
|
||||
|
||||
<DragDropPrompt
|
||||
title="مثل بلور واضحش کن! 💎"
|
||||
instruction="این تکهها رو مرتب کن تا یه پرامپت فوقالعاده واضح بسازی"
|
||||
pieces={[
|
||||
"لطفاً کمکم کن بنویسم",
|
||||
"یه داستان کوتاه خواب",
|
||||
"درباره یه جغد خوابآلود",
|
||||
"با پایان خوش",
|
||||
"برای خواهر کوچیکم"
|
||||
]}
|
||||
correctOrder={[0, 1, 2, 3, 4]}
|
||||
successMessage="این واضحترین پرامپت تا حالاست! عالی!"
|
||||
/>
|
||||
|
||||
## جزئیات واضح اضافه کن
|
||||
|
||||
<MagicWords
|
||||
title="جزئیات رو اضافه کن! 🎯"
|
||||
sentence="یه {{length}} {{type}} بنویس، درباره {{topic}}، برای {{audience}}"
|
||||
blanks={[
|
||||
{ id: "length", hint: "چقدر طولانی؟ (کوتاه، بلند)", answers: ["کوتاه", "بلند", "۵ جملهای", "یه صفحهای", "مختصر", "سریع"], emoji: "📏" },
|
||||
{ id: "type", hint: "چه نوعی؟ (داستان، لیست، توضیح)", answers: ["داستان", "لیست", "توضیح", "شعر", "آهنگ", "راهنما"], emoji: "📝" },
|
||||
{ id: "topic", hint: "درباره چی؟ (فضا، حیوانات، ورزش)", answers: ["فضا", "حیوانات", "ورزش", "دایناسورها", "رباتها", "جادو", "طبیعت", "علم"], emoji: "🎯" },
|
||||
{ id: "audience", hint: "برای کی؟ (بچهها، مبتدیها)", answers: ["بچهها", "مبتدیها", "معلمم", "دوستم", "خانوادهام", "دانشآموزا"], emoji: "👥" }
|
||||
]}
|
||||
successMessage="همه جزئیات مهم رو اضافه کردی! کار عالی!"
|
||||
/>
|
||||
|
||||
## قوانین طلایی وضوح
|
||||
|
||||
<Panel character="promi" mood="excited">
|
||||
اینا بهترین نکاتههام برای واضح بودن:
|
||||
</Panel>
|
||||
|
||||
این سه سوال رو وقتی پرامپت مینویسی یادت باشه:
|
||||
|
||||
1. **چی** میخوام؟ (داستان، کمک، اطلاعات)
|
||||
2. **چطور** باشه؟ (کوتاه، خندهدار، ساده)
|
||||
3. **برای کی**؟ (من، دوستم، کلاسم)
|
||||
|
||||
<PromptVsMistake
|
||||
question="چالش آخر! کدوم از هر سه قانون استفاده میکنه؟"
|
||||
good="یه جوک کوتاه و خندهدار درباره پیتزا بنویس که بتونم موقع ناهار به دوستام بگم"
|
||||
bad="یه چیز خندهدار بساز"
|
||||
explanation="پرامپت عالی چی داره (جوک پیتزا)، چطور (کوتاه و خندهدار)، و برای کی (برای گفتن به دوستا موقع ناهار)!"
|
||||
promiMessage="تو قهرمان وضوحی! 🏆"
|
||||
/>
|
||||
|
||||
## دنیای ۱ تموم شد! 🎊
|
||||
|
||||
<Panel character="promi" mood="celebrating">
|
||||
وای! کل دنیای ۱ رو تموم کردی! یاد گرفتی:
|
||||
|
||||
- ✅ هوش مصنوعی و پرامپت چین
|
||||
- ✅ چطور اولین پرامپتهات رو بنویسی
|
||||
- ✅ چرا واضح بودن خیلی مهمه
|
||||
|
||||
آماده ماجراجوییهای جدیدی!
|
||||
</Panel>
|
||||
|
||||
<LevelComplete
|
||||
levelSlug="1-3-being-clear"
|
||||
stars={3}
|
||||
message="هنر واضح بودن رو یاد گرفتی! دنیای ۱ تموم شد!"
|
||||
/>
|
||||
53
src/content/kids/fr/1-1-meet-promi.mdx
Normal file
53
src/content/kids/fr/1-1-meet-promi.mdx
Normal file
@@ -0,0 +1,53 @@
|
||||
<Panel character="promi" mood="happy">
|
||||
Salut ! Je suis **Promi** 🤖, ton ami robot ! Je suis tellement content de te rencontrer !
|
||||
</Panel>
|
||||
|
||||
<Panel character="promi" mood="thinking">
|
||||
Tu sais ce que veut dire **IA** ? IA signifie **Intelligence Artificielle**. C'est une façon élégante de dire "un ordinateur qui peut penser et parler" !
|
||||
</Panel>
|
||||
|
||||
<Panel character="promi" mood="excited">
|
||||
Je suis une IA ! Je peux lire tes messages et essayer de t'aider. Mais voici le secret... J'ai besoin de **bonnes instructions** pour faire mon meilleur travail !
|
||||
</Panel>
|
||||
|
||||
## C'est quoi un Prompt ?
|
||||
|
||||
Un **prompt** est juste un mot chic pour le message que tu envoies à une IA comme moi.
|
||||
|
||||
Pense à ça comme donner des directions à un ami. Si tu dis "Va là-bas !" ton ami ne saura pas où aller. Mais si tu dis "Va à la maison rouge sur la rue des Érables," il saura exactement où !
|
||||
|
||||
<Panel character="promi" mood="happy">
|
||||
Quand tu écris un bon prompt, je peux comprendre ce que tu veux et mieux t'aider ! Pratiquons !
|
||||
</Panel>
|
||||
|
||||
## Essayons !
|
||||
|
||||
<PromptVsMistake
|
||||
question="Quel message aiderait Promi à mieux comprendre ?"
|
||||
good="S'il te plaît écris une courte histoire sur un dragon gentil qui aime faire des cookies"
|
||||
bad="histoire"
|
||||
explanation="Le premier message dit à Promi exactement quel type d'histoire écrire ! Le deuxième est trop court - Promi ne sait pas quel genre d'histoire tu veux."
|
||||
promiMessage="Tu vois ? Plus de détails m'aident à comprendre ce que tu veux !"
|
||||
/>
|
||||
|
||||
## Quiz Rapide !
|
||||
|
||||
<PromptVsMistake
|
||||
question="Lequel est un prompt ?"
|
||||
good="Tu peux m'aider à écrire un poème sur l'océan ?"
|
||||
bad="🌊"
|
||||
explanation="Un prompt utilise des mots pour dire à l'IA ce dont tu as besoin. Les emojis sont amusants mais ne donnent pas assez d'informations !"
|
||||
promiMessage="Les mots sont mon super pouvoir ! Plus tu me dis, mieux je peux t'aider !"
|
||||
/>
|
||||
|
||||
## Tu as réussi ! 🎉
|
||||
|
||||
<Panel character="promi" mood="celebrating">
|
||||
Super travail ! Tu as appris ce qu'est l'IA et ce qu'est un prompt. Tu deviens déjà un expert en prompts !
|
||||
</Panel>
|
||||
|
||||
<LevelComplete
|
||||
levelSlug="1-1-meet-promi"
|
||||
stars={3}
|
||||
message="Tu as appris ce que sont l'IA et les prompts !"
|
||||
/>
|
||||
75
src/content/kids/fr/1-2-first-words.mdx
Normal file
75
src/content/kids/fr/1-2-first-words.mdx
Normal file
@@ -0,0 +1,75 @@
|
||||
<Panel character="promi" mood="happy">
|
||||
Bon retour, ami ! Prêt à écrire tes premiers vrais prompts ? C'est parti ! 🚀
|
||||
</Panel>
|
||||
|
||||
## La Magie des Mots
|
||||
|
||||
Quand tu parles à l'IA, chaque mot compte ! Voyons comment ajouter plus de mots rend les prompts meilleurs.
|
||||
|
||||
<Panel character="promi" mood="thinking">
|
||||
Regarde ! Si quelqu'un me dit juste "chat", je ne sais pas ce qu'ils veulent. Ils veulent une image ? Une histoire ? Des faits sur les chats ? Je suis confus ! 😵💫
|
||||
</Panel>
|
||||
|
||||
## Construire de Meilleurs Prompts
|
||||
|
||||
Un bon prompt a **trois parties** :
|
||||
|
||||
1. **Ce que tu veux** (une histoire, de l'aide, des informations)
|
||||
2. **Le sujet** (chats, espace, dinosaures)
|
||||
3. **Les détails** (court, drôle, pour enfants)
|
||||
|
||||
<Panel character="promi" mood="excited">
|
||||
Construisons un prompt ensemble !
|
||||
</Panel>
|
||||
|
||||
## Glisse les Pièces !
|
||||
|
||||
<DragDropPrompt
|
||||
title="Construis ton premier prompt ! 🧩"
|
||||
instruction="Mets ces pièces dans le bon ordre pour demander une histoire."
|
||||
pieces={[
|
||||
"S'il te plaît écris",
|
||||
"une courte histoire",
|
||||
"sur un chaton courageux",
|
||||
"qui part à l'aventure"
|
||||
]}
|
||||
correctOrder={[0, 1, 2, 3]}
|
||||
successMessage="Parfait ! C'est un super prompt !"
|
||||
/>
|
||||
|
||||
## Remplis les Blancs !
|
||||
|
||||
Maintenant essaie de faire ton propre prompt en glissant les mots magiques :
|
||||
|
||||
<MagicWords
|
||||
title="Crée ton propre prompt ! ✨"
|
||||
sentence="S'il te plaît écris un {{type}} sur un {{character}} qui {{action}}"
|
||||
blanks={[
|
||||
{ id: "type", hint: "Quel type d'écrit ? (histoire, poème, chanson)", answers: ["histoire", "poème", "chanson", "lettre", "blague"], emoji: "📝" },
|
||||
{ id: "character", hint: "À propos de qui ? (robot, dragon, chiot)", answers: ["robot", "dragon", "chiot", "chat", "magicien", "princesse", "chevalier", "lapin", "licorne"], emoji: "🦸" },
|
||||
{ id: "action", hint: "Que font-ils ? (trouve un trésor, se fait des amis)", answers: ["trouve un trésor", "se fait des amis", "sauve la journée", "part à l'aventure", "apprend à voler", "découvre la magie"], emoji: "⚡" }
|
||||
]}
|
||||
successMessage="Wow ! Tu as créé un super prompt !"
|
||||
/>
|
||||
|
||||
## À Toi de Choisir !
|
||||
|
||||
<PromptVsMistake
|
||||
question="Quel prompt donnera une meilleure histoire ?"
|
||||
good="Écris une histoire drôle sur un pingouin qui veut apprendre à danser"
|
||||
bad="Écris histoire pingouin"
|
||||
explanation="Le premier prompt me dit que ça doit être drôle, c'est sur un pingouin, ET ce que le pingouin veut faire !"
|
||||
promiMessage="Les détails rendent tout meilleur ! J'adore savoir exactement ce que tu veux !"
|
||||
/>
|
||||
|
||||
## Super Travail ! 🌟
|
||||
|
||||
<Panel character="promi" mood="celebrating">
|
||||
Tu as écrit tes premiers prompts ! Tu as appris que les bons prompts ont besoin de : ce que tu veux, un sujet, et des détails. Tu deviens vraiment bon !
|
||||
</Panel>
|
||||
|
||||
<LevelComplete
|
||||
levelSlug="1-2-first-words"
|
||||
stars={3}
|
||||
message="Tu as appris à écrire tes premiers prompts !"
|
||||
/>
|
||||
101
src/content/kids/fr/1-3-being-clear.mdx
Normal file
101
src/content/kids/fr/1-3-being-clear.mdx
Normal file
@@ -0,0 +1,101 @@
|
||||
<Panel character="promi" mood="happy">
|
||||
Salut superstar ! 🌟 Aujourd'hui on va apprendre la compétence la plus importante : être **CLAIR** !
|
||||
</Panel>
|
||||
|
||||
## Pourquoi Être Clair est Important
|
||||
|
||||
Imagine demander à ta maman "de la nourriture" vs demander "un sandwich au beurre de cacahuète sans croûte." Lequel te donne exactement ce que tu veux ?
|
||||
|
||||
<Panel character="promi" mood="thinking">
|
||||
C'est pareil avec moi ! Quand tu es clair, je sais exactement comment t'aider. Quand tu es vague, je dois deviner... et je pourrais me tromper !
|
||||
</Panel>
|
||||
|
||||
## Clair vs. Pas Clair
|
||||
|
||||
Pratiquons à repérer la différence !
|
||||
|
||||
<PromptVsMistake
|
||||
question="Quel prompt est plus clair ?"
|
||||
good="Écris un poème de 4 lignes sur des papillons dans un jardin, en utilisant des mots qui riment"
|
||||
bad="Écris poème papillons"
|
||||
explanation="Le prompt clair me dit : quelle longueur (4 lignes), sur quoi (papillons dans un jardin), et une règle spéciale (rimer). Bien mieux !"
|
||||
promiMessage="Prompts clairs = meilleurs résultats ! C'est comme de la magie !"
|
||||
/>
|
||||
|
||||
<PromptVsMistake
|
||||
question="Lequel me dit exactement ce dont tu as besoin ?"
|
||||
good="Aide-moi à écrire 3 faits amusants sur les dauphins qu'un enfant de 10 ans aimerait"
|
||||
bad="Parle-moi des dauphins"
|
||||
explanation="Le premier prompt me dit : combien de faits (3), quel type (amusants), et pour qui (enfant de 10 ans). Ça aide beaucoup !"
|
||||
promiMessage="Quand tu me dis pour qui c'est, je peux le rendre parfait pour eux !"
|
||||
/>
|
||||
|
||||
## Le Défi de la Clarté
|
||||
|
||||
Construisons le prompt le plus clair jamais fait !
|
||||
|
||||
<DragDropPrompt
|
||||
title="Rends-le cristallin ! 💎"
|
||||
instruction="Arrange ces pièces pour faire un prompt super clair"
|
||||
pieces={[
|
||||
"S'il te plaît aide-moi à écrire",
|
||||
"une courte histoire du soir",
|
||||
"sur un hibou endormi",
|
||||
"avec une fin heureuse",
|
||||
"pour ma petite sœur"
|
||||
]}
|
||||
correctOrder={[0, 1, 2, 3, 4]}
|
||||
successMessage="C'est le prompt le plus clair jamais fait ! Incroyable !"
|
||||
/>
|
||||
|
||||
## Ajoute des Détails Clairs
|
||||
|
||||
<MagicWords
|
||||
title="Ajoute les détails ! 🎯"
|
||||
sentence="Écris un {{length}} {{type}} sur {{topic}} pour {{audience}}"
|
||||
blanks={[
|
||||
{ id: "length", hint: "Quelle longueur ? (court, long)", answers: ["court", "long", "de 5 phrases", "d'une page", "bref", "rapide"], emoji: "📏" },
|
||||
{ id: "type", hint: "Quel type ? (histoire, liste, explication)", answers: ["histoire", "liste", "explication", "poème", "chanson", "guide"], emoji: "📝" },
|
||||
{ id: "topic", hint: "Sur quoi ? (espace, animaux, sports)", answers: ["l'espace", "les animaux", "les sports", "les dinosaures", "les robots", "la magie", "la nature", "la science"], emoji: "🎯" },
|
||||
{ id: "audience", hint: "Pour qui ? (enfants, débutants)", answers: ["les enfants", "les débutants", "mon professeur", "mon ami", "ma famille", "les étudiants"], emoji: "👥" }
|
||||
]}
|
||||
successMessage="Tu as ajouté tous les détails importants ! Bon travail !"
|
||||
/>
|
||||
|
||||
## Les Règles d'Or de la Clarté
|
||||
|
||||
<Panel character="promi" mood="excited">
|
||||
Voici mes meilleurs conseils pour être clair :
|
||||
</Panel>
|
||||
|
||||
Rappelle-toi ces trois questions quand tu écris un prompt :
|
||||
|
||||
1. **QUOI** je veux ? (histoire, aide, information)
|
||||
2. **COMMENT** ça doit être ? (court, drôle, simple)
|
||||
3. **POUR QUI** c'est ? (moi, mon ami, ma classe)
|
||||
|
||||
<PromptVsMistake
|
||||
question="Défi final ! Lequel utilise les trois règles ?"
|
||||
good="Écris une blague courte et drôle sur la pizza que je peux raconter à mes amis au déjeuner"
|
||||
bad="Fais quelque chose de drôle"
|
||||
explanation="Le super prompt a QUOI (une blague sur la pizza), COMMENT (courte et drôle), et POUR QUI (raconter à des amis au déjeuner) !"
|
||||
promiMessage="Tu es un champion de la clarté ! 🏆"
|
||||
/>
|
||||
|
||||
## Monde 1 Terminé ! 🎊
|
||||
|
||||
<Panel character="promi" mood="celebrating">
|
||||
WOW ! Tu as terminé tout le Monde 1 ! Tu as appris :
|
||||
|
||||
- ✅ Ce que sont l'IA et les prompts
|
||||
- ✅ Comment écrire tes premiers prompts
|
||||
- ✅ Pourquoi être clair est super important
|
||||
|
||||
Tu es prêt pour de nouvelles aventures !
|
||||
</Panel>
|
||||
|
||||
<LevelComplete
|
||||
levelSlug="1-3-being-clear"
|
||||
stars={3}
|
||||
message="Tu as maîtrisé l'art d'être clair ! Monde 1 terminé !"
|
||||
/>
|
||||
53
src/content/kids/he/1-1-meet-promi.mdx
Normal file
53
src/content/kids/he/1-1-meet-promi.mdx
Normal file
@@ -0,0 +1,53 @@
|
||||
<Panel character="promi" mood="happy">
|
||||
שלום! אני **Promi** 🤖, החבר הרובוט שלך! שמח מאוד להכיר אותך!
|
||||
</Panel>
|
||||
|
||||
<Panel character="promi" mood="thinking">
|
||||
אתה יודע מה זה **AI**? AI זה **בינה מלאכותית**. זו דרך מפוארת לומר "מחשב שיכול לחשוב ולדבר"!
|
||||
</Panel>
|
||||
|
||||
<Panel character="promi" mood="excited">
|
||||
אני AI! אני יכול לקרוא את ההודעות שלך ולנסות לעזור. אבל הנה הסוד... אני צריך **הוראות טובות** כדי לעשות את העבודה הכי טובה!
|
||||
</Panel>
|
||||
|
||||
## מה זה פרומפט?
|
||||
|
||||
**פרומפט** זו פשוט מילה מפוארת להודעה שאתה שולח ל-AI כמוני.
|
||||
|
||||
תחשוב על זה כמו לתת הוראות הגעה לחבר. אם תגיד "לך לשם!" החבר שלך לא ידע לאן ללכת. אבל אם תגיד "לך לבית האדום ברחוב האלון," הוא ידע בדיוק!
|
||||
|
||||
<Panel character="promi" mood="happy">
|
||||
כשאתה כותב פרומפט טוב, אני יכול להבין מה אתה רוצה ולעזור לך יותר טוב! בוא נתרגל!
|
||||
</Panel>
|
||||
|
||||
## בוא ננסה!
|
||||
|
||||
<PromptVsMistake
|
||||
question="איזו הודעה תעזור ל-Promi להבין יותר טוב?"
|
||||
good="בבקשה כתוב סיפור קצר על דרקון ידידותי שאוהב לאפות עוגיות"
|
||||
bad="סיפור"
|
||||
explanation="ההודעה הראשונה אומרת ל-Promi בדיוק איזה סוג סיפור לכתוב! השנייה קצרה מדי - Promi לא יודע איזה סוג סיפור אתה רוצה."
|
||||
promiMessage="רואה? יותר פרטים עוזרים לי להבין מה אתה רוצה!"
|
||||
/>
|
||||
|
||||
## חידון מהיר!
|
||||
|
||||
<PromptVsMistake
|
||||
question="מה זה פרומפט?"
|
||||
good="אתה יכול לעזור לי לכתוב שיר על הים?"
|
||||
bad="🌊"
|
||||
explanation="פרומפט משתמש במילים כדי להגיד ל-AI מה אתה צריך. אמוג'ים כיפיים אבל לא נותנים מספיק מידע!"
|
||||
promiMessage="מילים הן כוח העל שלי! ככל שתספר לי יותר, כך אוכל לעזור יותר טוב!"
|
||||
/>
|
||||
|
||||
## הצלחת! 🎉
|
||||
|
||||
<Panel character="promi" mood="celebrating">
|
||||
עבודה מדהימה! למדת מה זה AI ומה זה פרומפט. אתה כבר הופך למומחה פרומפטים!
|
||||
</Panel>
|
||||
|
||||
<LevelComplete
|
||||
levelSlug="1-1-meet-promi"
|
||||
stars={3}
|
||||
message="למדת מה זה AI ופרומפטים!"
|
||||
/>
|
||||
75
src/content/kids/he/1-2-first-words.mdx
Normal file
75
src/content/kids/he/1-2-first-words.mdx
Normal file
@@ -0,0 +1,75 @@
|
||||
<Panel character="promi" mood="happy">
|
||||
ברוך הבא בחזרה, חבר! מוכן לכתוב את הפרומפטים האמיתיים הראשונים שלך? יאללה! 🚀
|
||||
</Panel>
|
||||
|
||||
## הקסם של מילים
|
||||
|
||||
כשאתה מדבר עם AI, כל מילה חשובה! בוא נראה איך הוספת יותר מילים עושה פרומפטים יותר טובים.
|
||||
|
||||
<Panel character="promi" mood="thinking">
|
||||
תראה! אם מישהו רק אומר לי "חתול", אני לא יודע מה הם רוצים. הם רוצים תמונה? סיפור? עובדות על חתולים? אני מבולבל! 😵💫
|
||||
</Panel>
|
||||
|
||||
## בונים פרומפטים יותר טובים
|
||||
|
||||
לפרומפט טוב יש **שלושה חלקים**:
|
||||
|
||||
1. **מה אתה רוצה** (סיפור, עזרה, מידע)
|
||||
2. **הנושא** (חתולים, חלל, דינוזאורים)
|
||||
3. **פרטים** (קצר, מצחיק, לילדים)
|
||||
|
||||
<Panel character="promi" mood="excited">
|
||||
בוא נבנה פרומפט ביחד!
|
||||
</Panel>
|
||||
|
||||
## גרור את החלקים!
|
||||
|
||||
<DragDropPrompt
|
||||
title="בנה את הפרומפט הראשון שלך! 🧩"
|
||||
instruction="שים את החלקים האלה בסדר הנכון כדי לבקש סיפור."
|
||||
pieces={[
|
||||
"בבקשה כתוב",
|
||||
"סיפור קצר",
|
||||
"על חתלתול אמיץ",
|
||||
"שיוצא להרפתקה"
|
||||
]}
|
||||
correctOrder={[0, 1, 2, 3]}
|
||||
successMessage="מושלם! זה פרומפט נהדר!"
|
||||
/>
|
||||
|
||||
## מלא את החסר!
|
||||
|
||||
עכשיו נסה לעשות פרומפט משלך על ידי גרירת מילות הקסם:
|
||||
|
||||
<MagicWords
|
||||
title="צור את הפרומפט שלך! ✨"
|
||||
sentence="בבקשה כתוב {{type}} על {{character}} ש{{action}}"
|
||||
blanks={[
|
||||
{ id: "type", hint: "איזה סוג כתיבה? (סיפור, שיר, שיר)", answers: ["סיפור", "שיר", "שיר", "מכתב", "בדיחה"], emoji: "📝" },
|
||||
{ id: "character", hint: "על מי? (רובוט, דרקון, כלבלב)", answers: ["רובוט", "דרקון", "כלבלב", "חתול", "קוסם", "נסיכה", "אביר", "ארנב", "חד קרן"], emoji: "🦸" },
|
||||
{ id: "action", hint: "מה הם עושים? (מוצא אוצר, מתחבר)", answers: ["מוצא אוצר", "מתחבר עם חברים", "מציל את היום", "יוצא להרפתקה", "לומד לעוף", "מגלה קסם"], emoji: "⚡" }
|
||||
]}
|
||||
successMessage="וואו! יצרת פרומפט מדהים!"
|
||||
/>
|
||||
|
||||
## תורך לבחור!
|
||||
|
||||
<PromptVsMistake
|
||||
question="איזה פרומפט יקבל סיפור יותר טוב?"
|
||||
good="כתוב סיפור מצחיק על פינגווין שרוצה ללמוד לרקוד"
|
||||
bad="כתוב סיפור פינגווין"
|
||||
explanation="הפרומפט הראשון אומר לי שזה צריך להיות מצחיק, על פינגווין, ומה הפינגווין רוצה לעשות!"
|
||||
promiMessage="פרטים עושים הכל יותר טוב! אני אוהב לדעת בדיוק מה אתה רוצה!"
|
||||
/>
|
||||
|
||||
## עבודה נהדרת! 🌟
|
||||
|
||||
<Panel character="promi" mood="celebrating">
|
||||
כתבת את הפרומפטים הראשונים שלך! למדת שפרומפטים טובים צריכים: מה אתה רוצה, נושא, ופרטים. אתה ממש משתפר!
|
||||
</Panel>
|
||||
|
||||
<LevelComplete
|
||||
levelSlug="1-2-first-words"
|
||||
stars={3}
|
||||
message="למדת איך לכתוב את הפרומפטים הראשונים שלך!"
|
||||
/>
|
||||
101
src/content/kids/he/1-3-being-clear.mdx
Normal file
101
src/content/kids/he/1-3-being-clear.mdx
Normal file
@@ -0,0 +1,101 @@
|
||||
<Panel character="promi" mood="happy">
|
||||
היי סופרסטאר! 🌟 היום נלמד את הכישור החשוב ביותר: להיות **ברור**!
|
||||
</Panel>
|
||||
|
||||
## למה להיות ברור זה חשוב
|
||||
|
||||
דמיין לבקש מאמא "אוכל" לעומת לבקש "כריך חמאת בוטנים בלי קרום." מה נותן לך בדיוק מה שאתה רוצה?
|
||||
|
||||
<Panel character="promi" mood="thinking">
|
||||
גם איתי ככה! כשאתה ברור, אני יודע בדיוק איך לעזור. כשאתה מעורפל, אני צריך לנחש... ואני עלול לטעות!
|
||||
</Panel>
|
||||
|
||||
## ברור לעומת לא ברור
|
||||
|
||||
בוא נתרגל לזהות את ההבדל!
|
||||
|
||||
<PromptVsMistake
|
||||
question="איזה פרומפט יותר ברור?"
|
||||
good="כתוב שיר של 4 שורות על פרפרים בגינה, עם חריזה"
|
||||
bad="כתוב שיר פרפרים"
|
||||
explanation="הפרומפט הברור אומר לי: כמה ארוך (4 שורות), על מה (פרפרים בגינה), וכלל מיוחד (חריזה). הרבה יותר טוב!"
|
||||
promiMessage="פרומפטים ברורים = תוצאות יותר טובות! זה כמו קסם!"
|
||||
/>
|
||||
|
||||
<PromptVsMistake
|
||||
question="מה אומר לי בדיוק מה אתה צריך?"
|
||||
good="עזור לי לכתוב 3 עובדות מעניינות על דולפינים שילד בן 10 ייהנה מהן"
|
||||
bad="ספר לי על דולפינים"
|
||||
explanation="הפרומפט הראשון אומר לי: כמה עובדות (3), איזה סוג (מעניינות), ולמי (ילד בן 10). זה עוזר המון!"
|
||||
promiMessage="כשאתה אומר לי למי זה, אני יכול להפוך את זה למושלם בשבילם!"
|
||||
/>
|
||||
|
||||
## אתגר הבהירות
|
||||
|
||||
בוא נבנה את הפרומפט הכי ברור אי פעם!
|
||||
|
||||
<DragDropPrompt
|
||||
title="עשה את זה בהיר כמו קריסטל! 💎"
|
||||
instruction="סדר את החלקים האלה כדי לעשות פרומפט סופר ברור"
|
||||
pieces={[
|
||||
"בבקשה עזור לי לכתוב",
|
||||
"סיפור קצר לפני השינה",
|
||||
"על ינשוף ישנוני",
|
||||
"עם סוף שמח",
|
||||
"לאחותי הקטנה"
|
||||
]}
|
||||
correctOrder={[0, 1, 2, 3, 4]}
|
||||
successMessage="זה הפרומפט הכי ברור אי פעם! מדהים!"
|
||||
/>
|
||||
|
||||
## הוסף פרטים ברורים
|
||||
|
||||
<MagicWords
|
||||
title="הוסף את הפרטים! 🎯"
|
||||
sentence="כתוב {{length}} {{type}} על {{topic}} ל{{audience}}"
|
||||
blanks={[
|
||||
{ id: "length", hint: "כמה ארוך? (קצר, ארוך)", answers: ["קצר", "ארוך", "של 5 משפטים", "של עמוד אחד", "תמציתי", "מהיר"], emoji: "📏" },
|
||||
{ id: "type", hint: "איזה סוג? (סיפור, רשימה, הסבר)", answers: ["סיפור", "רשימה", "הסבר", "שיר", "שיר", "מדריך"], emoji: "📝" },
|
||||
{ id: "topic", hint: "על מה? (חלל, חיות, ספורט)", answers: ["חלל", "חיות", "ספורט", "דינוזאורים", "רובוטים", "קסם", "טבע", "מדע"], emoji: "🎯" },
|
||||
{ id: "audience", hint: "למי? (ילדים, מתחילים)", answers: ["ילדים", "מתחילים", "המורה שלי", "החבר שלי", "המשפחה שלי", "תלמידים"], emoji: "👥" }
|
||||
]}
|
||||
successMessage="הוספת את כל הפרטים החשובים! עבודה נהדרת!"
|
||||
/>
|
||||
|
||||
## כללי הזהב של הבהירות
|
||||
|
||||
<Panel character="promi" mood="excited">
|
||||
הנה הטיפים הכי טובים שלי להיות ברור:
|
||||
</Panel>
|
||||
|
||||
זכור את שלוש השאלות האלה כשאתה כותב פרומפט:
|
||||
|
||||
1. **מה** אני רוצה? (סיפור, עזרה, מידע)
|
||||
2. **איך** זה צריך להיות? (קצר, מצחיק, פשוט)
|
||||
3. **למי** זה? (לי, לחבר שלי, לכיתה שלי)
|
||||
|
||||
<PromptVsMistake
|
||||
question="אתגר אחרון! מי משתמש בכל שלושת הכללים?"
|
||||
good="כתוב בדיחה קצרה ומצחיקה על פיצה שאני יכול לספר לחברים שלי בארוחת צהריים"
|
||||
bad="עשה משהו מצחיק"
|
||||
explanation="הפרומפט הנהדר כולל מה (בדיחה על פיצה), איך (קצרה ומצחיקה), ולמי (לספר לחברים בארוחת צהריים)!"
|
||||
promiMessage="אתה אלוף בהירות! 🏆"
|
||||
/>
|
||||
|
||||
## עולם 1 הושלם! 🎊
|
||||
|
||||
<Panel character="promi" mood="celebrating">
|
||||
וואו! סיימת את כל עולם 1! למדת:
|
||||
|
||||
- ✅ מה זה AI ופרומפטים
|
||||
- ✅ איך לכתוב את הפרומפטים הראשונים שלך
|
||||
- ✅ למה להיות ברור זה סופר חשוב
|
||||
|
||||
אתה מוכן להרפתקאות חדשות!
|
||||
</Panel>
|
||||
|
||||
<LevelComplete
|
||||
levelSlug="1-3-being-clear"
|
||||
stars={3}
|
||||
message="שלטת באומנות להיות ברור! עולם 1 הושלם!"
|
||||
/>
|
||||
53
src/content/kids/it/1-1-meet-promi.mdx
Normal file
53
src/content/kids/it/1-1-meet-promi.mdx
Normal file
@@ -0,0 +1,53 @@
|
||||
<Panel character="promi" mood="happy">
|
||||
Ciao! Sono **Promi** 🤖, il tuo amico robot! Sono così felice di conoscerti!
|
||||
</Panel>
|
||||
|
||||
<Panel character="promi" mood="thinking">
|
||||
Sai cosa significa **IA**? IA sta per **Intelligenza Artificiale**. È un modo elegante per dire "un computer che può pensare e parlare"!
|
||||
</Panel>
|
||||
|
||||
<Panel character="promi" mood="excited">
|
||||
Sono un'IA! Posso leggere i tuoi messaggi e cercare di aiutarti. Ma ecco il segreto... Ho bisogno di **buone istruzioni** per fare il mio lavoro al meglio!
|
||||
</Panel>
|
||||
|
||||
## Cos'è un Prompt?
|
||||
|
||||
Un **prompt** è semplicemente una parola elegante per il messaggio che invii a un'IA come me.
|
||||
|
||||
Pensalo come dare indicazioni a un amico. Se dici "Vai lì!" il tuo amico non saprà dove andare. Ma se dici "Vai alla casa rossa in Via dei Fiori," saprà esattamente dove!
|
||||
|
||||
<Panel character="promi" mood="happy">
|
||||
Quando scrivi un buon prompt, posso capire cosa vuoi e aiutarti meglio! Pratichiamo!
|
||||
</Panel>
|
||||
|
||||
## Proviamo!
|
||||
|
||||
<PromptVsMistake
|
||||
question="Quale messaggio aiuterebbe Promi a capire meglio?"
|
||||
good="Per favore scrivi una storia breve su un drago gentile che ama fare i biscotti"
|
||||
bad="storia"
|
||||
explanation="Il primo messaggio dice a Promi esattamente che tipo di storia scrivere! Il secondo è troppo corto - Promi non sa che tipo di storia vuoi."
|
||||
promiMessage="Vedi? Più dettagli mi aiutano a capire cosa vuoi!"
|
||||
/>
|
||||
|
||||
## Quiz Veloce!
|
||||
|
||||
<PromptVsMistake
|
||||
question="Qual è un prompt?"
|
||||
good="Puoi aiutarmi a scrivere una poesia sull'oceano?"
|
||||
bad="🌊"
|
||||
explanation="Un prompt usa parole per dire all'IA di cosa hai bisogno. Gli emoji sono divertenti ma non danno abbastanza informazioni!"
|
||||
promiMessage="Le parole sono il mio super potere! Più mi dici, meglio posso aiutare!"
|
||||
/>
|
||||
|
||||
## Ce l'hai fatta! 🎉
|
||||
|
||||
<Panel character="promi" mood="celebrating">
|
||||
Ottimo lavoro! Hai imparato cos'è l'IA e cos'è un prompt. Stai già diventando un esperto di prompt!
|
||||
</Panel>
|
||||
|
||||
<LevelComplete
|
||||
levelSlug="1-1-meet-promi"
|
||||
stars={3}
|
||||
message="Hai imparato cosa sono l'IA e i prompt!"
|
||||
/>
|
||||
75
src/content/kids/it/1-2-first-words.mdx
Normal file
75
src/content/kids/it/1-2-first-words.mdx
Normal file
@@ -0,0 +1,75 @@
|
||||
<Panel character="promi" mood="happy">
|
||||
Bentornato, amico! Pronto a scrivere i tuoi primi veri prompt? Andiamo! 🚀
|
||||
</Panel>
|
||||
|
||||
## La Magia delle Parole
|
||||
|
||||
Quando parli con l'IA, ogni parola conta! Vediamo come aggiungere più parole rende i prompt migliori.
|
||||
|
||||
<Panel character="promi" mood="thinking">
|
||||
Guarda! Se qualcuno mi dice solo "gatto", non so cosa vogliono. Vogliono un'immagine? Una storia? Fatti sui gatti? Sono confuso! 😵💫
|
||||
</Panel>
|
||||
|
||||
## Costruire Prompt Migliori
|
||||
|
||||
Un buon prompt ha **tre parti**:
|
||||
|
||||
1. **Cosa vuoi** (una storia, aiuto, informazioni)
|
||||
2. **L'argomento** (gatti, spazio, dinosauri)
|
||||
3. **Dettagli** (corto, divertente, per bambini)
|
||||
|
||||
<Panel character="promi" mood="excited">
|
||||
Costruiamo un prompt insieme!
|
||||
</Panel>
|
||||
|
||||
## Trascina i Pezzi!
|
||||
|
||||
<DragDropPrompt
|
||||
title="Costruisci il tuo primo prompt! 🧩"
|
||||
instruction="Metti questi pezzi nell'ordine giusto per chiedere una storia."
|
||||
pieces={[
|
||||
"Per favore scrivi",
|
||||
"una storia breve",
|
||||
"su un gattino coraggioso",
|
||||
"che va all'avventura"
|
||||
]}
|
||||
correctOrder={[0, 1, 2, 3]}
|
||||
successMessage="Perfetto! È un ottimo prompt!"
|
||||
/>
|
||||
|
||||
## Riempi gli Spazi!
|
||||
|
||||
Ora prova a fare il tuo prompt trascinando le parole magiche:
|
||||
|
||||
<MagicWords
|
||||
title="Crea il tuo prompt! ✨"
|
||||
sentence="Per favore scrivi una {{type}} su un {{character}} che {{action}}"
|
||||
blanks={[
|
||||
{ id: "type", hint: "Che tipo di scrittura? (storia, poesia, canzone)", answers: ["storia", "poesia", "canzone", "lettera", "barzelletta"], emoji: "📝" },
|
||||
{ id: "character", hint: "Di chi parla? (robot, drago, cucciolo)", answers: ["robot", "drago", "cucciolo", "gatto", "mago", "principessa", "cavaliere", "coniglio", "unicorno"], emoji: "🦸" },
|
||||
{ id: "action", hint: "Cosa fanno? (trova tesoro, fa amici)", answers: ["trova tesoro", "fa amici", "salva la giornata", "va all'avventura", "impara a volare", "scopre la magia"], emoji: "⚡" }
|
||||
]}
|
||||
successMessage="Wow! Hai creato un prompt fantastico!"
|
||||
/>
|
||||
|
||||
## Tocca a Te Scegliere!
|
||||
|
||||
<PromptVsMistake
|
||||
question="Quale prompt otterrà una storia migliore?"
|
||||
good="Scrivi una storia divertente su un pinguino che vuole imparare a ballare"
|
||||
bad="Scrivi storia pinguino"
|
||||
explanation="Il primo prompt mi dice che deve essere divertente, è su un pinguino, E cosa vuole fare il pinguino!"
|
||||
promiMessage="I dettagli rendono tutto migliore! Adoro sapere esattamente cosa vuoi!"
|
||||
/>
|
||||
|
||||
## Ottimo Lavoro! 🌟
|
||||
|
||||
<Panel character="promi" mood="celebrating">
|
||||
Hai scritto i tuoi primi prompt! Hai imparato che i buoni prompt hanno bisogno di: cosa vuoi, un argomento e dettagli. Stai diventando davvero bravo!
|
||||
</Panel>
|
||||
|
||||
<LevelComplete
|
||||
levelSlug="1-2-first-words"
|
||||
stars={3}
|
||||
message="Hai imparato a scrivere i tuoi primi prompt!"
|
||||
/>
|
||||
101
src/content/kids/it/1-3-being-clear.mdx
Normal file
101
src/content/kids/it/1-3-being-clear.mdx
Normal file
@@ -0,0 +1,101 @@
|
||||
<Panel character="promi" mood="happy">
|
||||
Ciao superstar! 🌟 Oggi impareremo l'abilità più importante: essere **CHIARI**!
|
||||
</Panel>
|
||||
|
||||
## Perché Essere Chiari è Importante
|
||||
|
||||
Immagina chiedere a tua mamma "cibo" vs chiedere "un panino al burro d'arachidi senza crosta." Quale ti dà esattamente quello che vuoi?
|
||||
|
||||
<Panel character="promi" mood="thinking">
|
||||
È lo stesso con me! Quando sei chiaro, so esattamente come aiutare. Quando sei vago, devo indovinare... e potrei sbagliare!
|
||||
</Panel>
|
||||
|
||||
## Chiaro vs. Non Chiaro
|
||||
|
||||
Pratichiamo a trovare la differenza!
|
||||
|
||||
<PromptVsMistake
|
||||
question="Quale prompt è più chiaro?"
|
||||
good="Scrivi una poesia di 4 righe sulle farfalle in un giardino, usando parole in rima"
|
||||
bad="Scrivi poesia farfalle"
|
||||
explanation="Il prompt chiaro mi dice: quanto lungo (4 righe), su cosa (farfalle in un giardino), e una regola speciale (in rima). Molto meglio!"
|
||||
promiMessage="Prompt chiari = risultati migliori! È come magia!"
|
||||
/>
|
||||
|
||||
<PromptVsMistake
|
||||
question="Quale mi dice esattamente di cosa hai bisogno?"
|
||||
good="Aiutami a scrivere 3 fatti divertenti sui delfini che piacciono a un bambino di 10 anni"
|
||||
bad="Parlami dei delfini"
|
||||
explanation="Il primo prompt mi dice: quanti fatti (3), che tipo (divertenti), e per chi (bambino di 10 anni). Questo aiuta molto!"
|
||||
promiMessage="Quando mi dici per chi è, posso renderlo perfetto per loro!"
|
||||
/>
|
||||
|
||||
## La Sfida della Chiarezza
|
||||
|
||||
Costruiamo il prompt più chiaro di sempre!
|
||||
|
||||
<DragDropPrompt
|
||||
title="Rendilo cristallino! 💎"
|
||||
instruction="Sistema questi pezzi per fare un prompt super chiaro"
|
||||
pieces={[
|
||||
"Per favore aiutami a scrivere",
|
||||
"una breve storia della buonanotte",
|
||||
"su un gufo assonnato",
|
||||
"con un lieto fine",
|
||||
"per la mia sorellina"
|
||||
]}
|
||||
correctOrder={[0, 1, 2, 3, 4]}
|
||||
successMessage="È il prompt più chiaro di sempre! Fantastico!"
|
||||
/>
|
||||
|
||||
## Aggiungi Dettagli Chiari
|
||||
|
||||
<MagicWords
|
||||
title="Aggiungi i dettagli! 🎯"
|
||||
sentence="Scrivi una {{length}} {{type}} su {{topic}} per {{audience}}"
|
||||
blanks={[
|
||||
{ id: "length", hint: "Quanto lungo? (breve, lungo)", answers: ["breve", "lunga", "di 5 frasi", "di una pagina", "corta", "veloce"], emoji: "📏" },
|
||||
{ id: "type", hint: "Che tipo? (storia, lista, spiegazione)", answers: ["storia", "lista", "spiegazione", "poesia", "canzone", "guida"], emoji: "📝" },
|
||||
{ id: "topic", hint: "Su cosa? (spazio, animali, sport)", answers: ["spazio", "animali", "sport", "dinosauri", "robot", "magia", "natura", "scienza"], emoji: "🎯" },
|
||||
{ id: "audience", hint: "Per chi? (bambini, principianti)", answers: ["bambini", "principianti", "il mio insegnante", "il mio amico", "la mia famiglia", "studenti"], emoji: "👥" }
|
||||
]}
|
||||
successMessage="Hai aggiunto tutti i dettagli importanti! Ottimo lavoro!"
|
||||
/>
|
||||
|
||||
## Le Regole d'Oro della Chiarezza
|
||||
|
||||
<Panel character="promi" mood="excited">
|
||||
Ecco i miei migliori consigli per essere chiaro:
|
||||
</Panel>
|
||||
|
||||
Ricorda queste tre domande quando scrivi un prompt:
|
||||
|
||||
1. **COSA** voglio? (storia, aiuto, informazione)
|
||||
2. **COME** deve essere? (corto, divertente, semplice)
|
||||
3. **PER CHI** è? (me, il mio amico, la mia classe)
|
||||
|
||||
<PromptVsMistake
|
||||
question="Sfida finale! Quale usa tutte e tre le regole?"
|
||||
good="Scrivi una barzelletta corta e divertente sulla pizza che posso raccontare ai miei amici a pranzo"
|
||||
bad="Fai qualcosa di divertente"
|
||||
explanation="L'ottimo prompt ha COSA (una barzelletta sulla pizza), COME (corta e divertente), e PER CHI (raccontare agli amici a pranzo)!"
|
||||
promiMessage="Sei un campione di chiarezza! 🏆"
|
||||
/>
|
||||
|
||||
## Mondo 1 Completato! 🎊
|
||||
|
||||
<Panel character="promi" mood="celebrating">
|
||||
WOW! Hai finito tutto il Mondo 1! Hai imparato:
|
||||
|
||||
- ✅ Cosa sono l'IA e i prompt
|
||||
- ✅ Come scrivere i tuoi primi prompt
|
||||
- ✅ Perché essere chiaro è super importante
|
||||
|
||||
Sei pronto per nuove avventure!
|
||||
</Panel>
|
||||
|
||||
<LevelComplete
|
||||
levelSlug="1-3-being-clear"
|
||||
stars={3}
|
||||
message="Hai padroneggiato l'arte di essere chiaro! Mondo 1 completato!"
|
||||
/>
|
||||
53
src/content/kids/ja/1-1-meet-promi.mdx
Normal file
53
src/content/kids/ja/1-1-meet-promi.mdx
Normal file
@@ -0,0 +1,53 @@
|
||||
<Panel character="promi" mood="happy">
|
||||
こんにちは!私は **Promi** 🤖、あなたのロボット友達だよ!会えてとっても嬉しい!
|
||||
</Panel>
|
||||
|
||||
<Panel character="promi" mood="thinking">
|
||||
**AI**って何か知ってる?AIは**人工知能**のこと。「考えたり話したりできるコンピュータ」っていうおしゃれな言い方なんだ!
|
||||
</Panel>
|
||||
|
||||
<Panel character="promi" mood="excited">
|
||||
私はAIなの!あなたのメッセージを読んで助けようとするよ。でもね、秘密があるの...私が一番いい仕事をするには**いい指示**が必要なんだ!
|
||||
</Panel>
|
||||
|
||||
## プロンプトって何?
|
||||
|
||||
**プロンプト**は、私みたいなAIに送るメッセージのことだよ。
|
||||
|
||||
友達に道を教えるみたいに考えてみて。「そこに行って!」って言ったら、友達はどこに行けばいいかわからないよね。でも「メープル通りの赤い家に行って」って言えば、正確にわかるでしょ!
|
||||
|
||||
<Panel character="promi" mood="happy">
|
||||
いいプロンプトを書くと、あなたが何を望んでいるかわかって、もっと上手に助けられるよ!練習しよう!
|
||||
</Panel>
|
||||
|
||||
## やってみよう!
|
||||
|
||||
<PromptVsMistake
|
||||
question="どのメッセージがPromiをもっとよく理解させる?"
|
||||
good="クッキーを焼くのが大好きなやさしいドラゴンについての短い物語を書いてください"
|
||||
bad="物語"
|
||||
explanation="最初のメッセージはPromiにどんな物語を書くか正確に教えているよ!2番目は短すぎる - Promiはどんな物語が欲しいかわからないよ。"
|
||||
promiMessage="わかった?詳しく教えてくれると何が欲しいかわかるんだ!"
|
||||
/>
|
||||
|
||||
## クイックテスト!
|
||||
|
||||
<PromptVsMistake
|
||||
question="どっちがプロンプト?"
|
||||
good="海についての詩を書くの手伝ってくれる?"
|
||||
bad="🌊"
|
||||
explanation="プロンプトは言葉を使ってAIに何が必要か教えるんだよ。絵文字は楽しいけど十分な情報がないの!"
|
||||
promiMessage="言葉は私のスーパーパワー!たくさん教えてくれるほど、もっと助けられるよ!"
|
||||
/>
|
||||
|
||||
## やったね!🎉
|
||||
|
||||
<Panel character="promi" mood="celebrating">
|
||||
すごい!AIが何かとプロンプトが何かを学んだよ。もうプロンプトの専門家になりつつあるね!
|
||||
</Panel>
|
||||
|
||||
<LevelComplete
|
||||
levelSlug="1-1-meet-promi"
|
||||
stars={3}
|
||||
message="AIとプロンプトが何かを学んだよ!"
|
||||
/>
|
||||
75
src/content/kids/ja/1-2-first-words.mdx
Normal file
75
src/content/kids/ja/1-2-first-words.mdx
Normal file
@@ -0,0 +1,75 @@
|
||||
<Panel character="promi" mood="happy">
|
||||
おかえり、友達!本当のプロンプトを書く準備はできた?行こう!🚀
|
||||
</Panel>
|
||||
|
||||
## 言葉の魔法
|
||||
|
||||
AIと話すとき、すべての言葉が大事!言葉を増やすとプロンプトがどう良くなるか見てみよう。
|
||||
|
||||
<Panel character="promi" mood="thinking">
|
||||
見て!誰かが「猫」としか言わないと、何が欲しいかわからないよ。絵?物語?猫についての事実?困っちゃう!😵💫
|
||||
</Panel>
|
||||
|
||||
## もっといいプロンプトを作ろう
|
||||
|
||||
いいプロンプトには**3つの部分**があるよ:
|
||||
|
||||
1. **欲しいもの**(物語、助け、情報)
|
||||
2. **テーマ**(猫、宇宙、恐竜)
|
||||
3. **詳細**(短い、おもしろい、子供向け)
|
||||
|
||||
<Panel character="promi" mood="excited">
|
||||
一緒にプロンプトを作ろう!
|
||||
</Panel>
|
||||
|
||||
## ピースをドラッグしよう!
|
||||
|
||||
<DragDropPrompt
|
||||
title="最初のプロンプトを作ろう!🧩"
|
||||
instruction="物語を頼むために、これらのピースを正しい順番に並べてね。"
|
||||
pieces={[
|
||||
"書いてください",
|
||||
"短い物語を",
|
||||
"勇敢な子猫について",
|
||||
"冒険に出る"
|
||||
]}
|
||||
correctOrder={[0, 1, 2, 3]}
|
||||
successMessage="完璧!それは素晴らしいプロンプトだよ!"
|
||||
/>
|
||||
|
||||
## 空欄を埋めよう!
|
||||
|
||||
魔法の言葉をドラッグして自分のプロンプトを作ってみよう:
|
||||
|
||||
<MagicWords
|
||||
title="自分のプロンプトを作ろう!✨"
|
||||
sentence="{{type}}を書いてください、{{character}}について、{{action}}"
|
||||
blanks={[
|
||||
{ id: "type", hint: "どんな種類?(物語、詩、歌)", answers: ["物語", "詩", "歌", "手紙", "ジョーク"], emoji: "📝" },
|
||||
{ id: "character", hint: "誰について?(ロボット、ドラゴン、子犬)", answers: ["ロボット", "ドラゴン", "子犬", "猫", "魔法使い", "お姫様", "騎士", "うさぎ", "ユニコーン"], emoji: "🦸" },
|
||||
{ id: "action", hint: "何をする?(宝を見つける、友達を作る)", answers: ["宝を見つける", "友達を作る", "世界を救う", "冒険に出る", "飛ぶことを学ぶ", "魔法を発見する"], emoji: "⚡" }
|
||||
]}
|
||||
successMessage="わぁ!すごいプロンプトを作ったね!"
|
||||
/>
|
||||
|
||||
## あなたの番!
|
||||
|
||||
<PromptVsMistake
|
||||
question="どのプロンプトがもっといい物語になる?"
|
||||
good="ダンスを習いたいペンギンについてのおもしろい物語を書いて"
|
||||
bad="物語書いてペンギン"
|
||||
explanation="最初のプロンプトは、おもしろくするべきこと、ペンギンについてであること、そしてペンギンが何をしたいかを教えているよ!"
|
||||
promiMessage="詳細があるとすべてが良くなる!何が欲しいか正確に知るのが大好き!"
|
||||
/>
|
||||
|
||||
## よくやったね!🌟
|
||||
|
||||
<Panel character="promi" mood="celebrating">
|
||||
最初のプロンプトを書いたよ!いいプロンプトには欲しいもの、テーマ、詳細が必要だって学んだね。本当に上手になってる!
|
||||
</Panel>
|
||||
|
||||
<LevelComplete
|
||||
levelSlug="1-2-first-words"
|
||||
stars={3}
|
||||
message="最初のプロンプトの書き方を学んだよ!"
|
||||
/>
|
||||
101
src/content/kids/ja/1-3-being-clear.mdx
Normal file
101
src/content/kids/ja/1-3-being-clear.mdx
Normal file
@@ -0,0 +1,101 @@
|
||||
<Panel character="promi" mood="happy">
|
||||
やあスーパースター!🌟 今日は一番大事なスキルを学ぶよ:**はっきり伝える**こと!
|
||||
</Panel>
|
||||
|
||||
## なぜはっきり伝えることが大事?
|
||||
|
||||
お母さんに「食べ物」って頼むのと「耳のないピーナッツバターサンドイッチ」って頼むのを想像して。どっちが欲しいものを正確にくれる?
|
||||
|
||||
<Panel character="promi" mood="thinking">
|
||||
私も同じ!はっきり言ってくれると、どう助けるか正確にわかるよ。曖昧だと推測しなきゃいけない...間違えるかも!
|
||||
</Panel>
|
||||
|
||||
## はっきり vs. 曖昧
|
||||
|
||||
違いを見つける練習をしよう!
|
||||
|
||||
<PromptVsMistake
|
||||
question="どのプロンプトがもっとはっきりしてる?"
|
||||
good="韻を踏む言葉を使って、庭の蝶についての4行の詩を書いて"
|
||||
bad="詩書いて蝶"
|
||||
explanation="はっきりしたプロンプトは:どのくらい長い(4行)、何について(庭の蝶)、特別なルール(韻を踏む)を教えているよ。ずっといい!"
|
||||
promiMessage="はっきりしたプロンプト=いい結果!魔法みたい!"
|
||||
/>
|
||||
|
||||
<PromptVsMistake
|
||||
question="どっちが正確に何が必要か教えてる?"
|
||||
good="10歳が楽しめるイルカについての楽しい事実を3つ書くの手伝って"
|
||||
bad="イルカについて教えて"
|
||||
explanation="最初のプロンプトは:いくつの事実(3つ)、どんな種類(楽しい)、誰のため(10歳)を教えているよ。すごく助かる!"
|
||||
promiMessage="誰のためか教えてくれると、その人にぴったりに作れるよ!"
|
||||
/>
|
||||
|
||||
## はっきりチャレンジ
|
||||
|
||||
今までで一番はっきりしたプロンプトを作ろう!
|
||||
|
||||
<DragDropPrompt
|
||||
title="クリスタルみたいにはっきりさせよう!💎"
|
||||
instruction="これらのピースを並べてスーパーはっきりしたプロンプトを作ろう"
|
||||
pieces={[
|
||||
"書くの手伝ってください",
|
||||
"短いおやすみ物語を",
|
||||
"眠たいフクロウについて",
|
||||
"ハッピーエンドの",
|
||||
"妹のために"
|
||||
]}
|
||||
correctOrder={[0, 1, 2, 3, 4]}
|
||||
successMessage="今までで一番はっきりしたプロンプト!すごい!"
|
||||
/>
|
||||
|
||||
## はっきりした詳細を追加
|
||||
|
||||
<MagicWords
|
||||
title="詳細を追加しよう!🎯"
|
||||
sentence="{{length}}{{type}}を書いて、{{topic}}について、{{audience}}のために"
|
||||
blanks={[
|
||||
{ id: "length", hint: "どのくらい長い?(短い、長い)", answers: ["短い", "長い", "5文の", "1ページの", "簡潔な", "早い"], emoji: "📏" },
|
||||
{ id: "type", hint: "どんな種類?(物語、リスト、説明)", answers: ["物語", "リスト", "説明", "詩", "歌", "ガイド"], emoji: "📝" },
|
||||
{ id: "topic", hint: "何について?(宇宙、動物、スポーツ)", answers: ["宇宙", "動物", "スポーツ", "恐竜", "ロボット", "魔法", "自然", "科学"], emoji: "🎯" },
|
||||
{ id: "audience", hint: "誰のため?(子供、初心者)", answers: ["子供", "初心者", "先生", "友達", "家族", "生徒"], emoji: "👥" }
|
||||
]}
|
||||
successMessage="大事な詳細を全部追加した!よくやったね!"
|
||||
/>
|
||||
|
||||
## はっきりの黄金ルール
|
||||
|
||||
<Panel character="promi" mood="excited">
|
||||
はっきり伝えるための一番いいヒントはこれ:
|
||||
</Panel>
|
||||
|
||||
プロンプトを書くとき、この3つの質問を思い出してね:
|
||||
|
||||
1. **何**が欲しい?(物語、助け、情報)
|
||||
2. **どう**あるべき?(短い、おもしろい、シンプル)
|
||||
3. **誰**のため?(私、友達、クラス)
|
||||
|
||||
<PromptVsMistake
|
||||
question="最終チャレンジ!どれが3つのルール全部使ってる?"
|
||||
good="昼ごはんで友達に話せるピザについての短くておもしろいジョークを書いて"
|
||||
bad="おもしろいもの作って"
|
||||
explanation="いいプロンプトには何(ピザのジョーク)、どう(短くておもしろい)、誰(昼ごはんで友達に話す)がある!"
|
||||
promiMessage="あなたははっきりチャンピオンだ!🏆"
|
||||
/>
|
||||
|
||||
## ワールド1完了!🎊
|
||||
|
||||
<Panel character="promi" mood="celebrating">
|
||||
わぁ!ワールド1を全部終えたよ!学んだこと:
|
||||
|
||||
- ✅ AIとプロンプトが何か
|
||||
- ✅ 最初のプロンプトの書き方
|
||||
- ✅ なぜはっきり伝えることがとっても大事か
|
||||
|
||||
新しい冒険の準備ができたよ!
|
||||
</Panel>
|
||||
|
||||
<LevelComplete
|
||||
levelSlug="1-3-being-clear"
|
||||
stars={3}
|
||||
message="はっきり伝える技をマスターした!ワールド1完了!"
|
||||
/>
|
||||
53
src/content/kids/ko/1-1-meet-promi.mdx
Normal file
53
src/content/kids/ko/1-1-meet-promi.mdx
Normal file
@@ -0,0 +1,53 @@
|
||||
<Panel character="promi" mood="happy">
|
||||
안녕! 나는 **Promi** 🤖, 네 로봇 친구야! 만나서 정말 반가워!
|
||||
</Panel>
|
||||
|
||||
<Panel character="promi" mood="thinking">
|
||||
**AI**가 뭔지 알아? AI는 **인공지능**이야. "생각하고 말할 수 있는 컴퓨터"라는 멋진 표현이지!
|
||||
</Panel>
|
||||
|
||||
<Panel character="promi" mood="excited">
|
||||
나는 AI야! 네 메시지를 읽고 도와주려고 해. 하지만 여기 비밀이 있어... 최고의 일을 하려면 **좋은 지시**가 필요해!
|
||||
</Panel>
|
||||
|
||||
## 프롬프트가 뭐야?
|
||||
|
||||
**프롬프트**는 나 같은 AI에게 보내는 메시지를 말하는 멋진 단어야.
|
||||
|
||||
친구에게 길을 알려주는 것처럼 생각해봐. "거기로 가!"라고 하면 친구는 어디로 가야 할지 몰라. 하지만 "단풍나무 거리의 빨간 집으로 가"라고 하면 정확히 알 수 있지!
|
||||
|
||||
<Panel character="promi" mood="happy">
|
||||
좋은 프롬프트를 쓰면 네가 뭘 원하는지 이해하고 더 잘 도와줄 수 있어! 연습해보자!
|
||||
</Panel>
|
||||
|
||||
## 해보자!
|
||||
|
||||
<PromptVsMistake
|
||||
question="어떤 메시지가 Promi를 더 잘 이해하게 해줄까?"
|
||||
good="쿠키 굽는 걸 좋아하는 친절한 용에 대한 짧은 이야기를 써줘"
|
||||
bad="이야기"
|
||||
explanation="첫 번째 메시지는 Promi에게 어떤 종류의 이야기를 쓸지 정확히 알려줘! 두 번째는 너무 짧아서 어떤 이야기를 원하는지 몰라."
|
||||
promiMessage="봤지? 더 자세히 알려주면 뭘 원하는지 이해할 수 있어!"
|
||||
/>
|
||||
|
||||
## 퀴즈!
|
||||
|
||||
<PromptVsMistake
|
||||
question="어떤 게 프롬프트야?"
|
||||
good="바다에 대한 시를 쓰는 걸 도와줄 수 있어?"
|
||||
bad="🌊"
|
||||
explanation="프롬프트는 AI에게 뭐가 필요한지 말로 알려주는 거야. 이모지는 재미있지만 충분한 정보를 주지 않아!"
|
||||
promiMessage="말은 내 초능력이야! 더 많이 알려줄수록 더 잘 도와줄 수 있어!"
|
||||
/>
|
||||
|
||||
## 해냈어! 🎉
|
||||
|
||||
<Panel character="promi" mood="celebrating">
|
||||
멋져! AI가 뭔지, 프롬프트가 뭔지 배웠어. 벌써 프롬프트 전문가가 되어가고 있어!
|
||||
</Panel>
|
||||
|
||||
<LevelComplete
|
||||
levelSlug="1-1-meet-promi"
|
||||
stars={3}
|
||||
message="AI와 프롬프트가 뭔지 배웠어!"
|
||||
/>
|
||||
75
src/content/kids/ko/1-2-first-words.mdx
Normal file
75
src/content/kids/ko/1-2-first-words.mdx
Normal file
@@ -0,0 +1,75 @@
|
||||
<Panel character="promi" mood="happy">
|
||||
다시 왔구나, 친구! 첫 번째 진짜 프롬프트를 쓸 준비 됐어? 가보자! 🚀
|
||||
</Panel>
|
||||
|
||||
## 단어의 마법
|
||||
|
||||
AI와 대화할 때 모든 단어가 중요해! 더 많은 단어를 추가하면 프롬프트가 어떻게 좋아지는지 봐보자.
|
||||
|
||||
<Panel character="promi" mood="thinking">
|
||||
이것 봐! 누군가 나에게 "고양이"라고만 하면 뭘 원하는지 몰라. 그림? 이야기? 고양이에 대한 사실? 혼란스러워! 😵💫
|
||||
</Panel>
|
||||
|
||||
## 더 좋은 프롬프트 만들기
|
||||
|
||||
좋은 프롬프트는 **세 가지 부분**이 있어:
|
||||
|
||||
1. **원하는 것** (이야기, 도움, 정보)
|
||||
2. **주제** (고양이, 우주, 공룡)
|
||||
3. **세부사항** (짧은, 재미있는, 아이들용)
|
||||
|
||||
<Panel character="promi" mood="excited">
|
||||
같이 프롬프트를 만들어보자!
|
||||
</Panel>
|
||||
|
||||
## 조각을 드래그해!
|
||||
|
||||
<DragDropPrompt
|
||||
title="첫 번째 프롬프트를 만들어봐! 🧩"
|
||||
instruction="이야기를 요청하려면 이 조각들을 올바른 순서로 놓아봐."
|
||||
pieces={[
|
||||
"써줘",
|
||||
"짧은 이야기를",
|
||||
"용감한 새끼 고양이에 대해",
|
||||
"모험을 떠나는"
|
||||
]}
|
||||
correctOrder={[0, 1, 2, 3]}
|
||||
successMessage="완벽해! 멋진 프롬프트야!"
|
||||
/>
|
||||
|
||||
## 빈칸을 채워!
|
||||
|
||||
이제 마법의 단어를 드래그해서 네 프롬프트를 만들어봐:
|
||||
|
||||
<MagicWords
|
||||
title="네 프롬프트를 만들어! ✨"
|
||||
sentence="{{type}}을 써줘, {{character}}에 대해, {{action}}"
|
||||
blanks={[
|
||||
{ id: "type", hint: "어떤 종류의 글? (이야기, 시, 노래)", answers: ["이야기", "시", "노래", "편지", "농담"], emoji: "📝" },
|
||||
{ id: "character", hint: "누구에 대해? (로봇, 용, 강아지)", answers: ["로봇", "용", "강아지", "고양이", "마법사", "공주", "기사", "토끼", "유니콘"], emoji: "🦸" },
|
||||
{ id: "action", hint: "뭘 해? (보물을 찾는, 친구를 사귀는)", answers: ["보물을 찾는", "친구를 사귀는", "세상을 구하는", "모험을 떠나는", "날기를 배우는", "마법을 발견하는"], emoji: "⚡" }
|
||||
]}
|
||||
successMessage="와! 멋진 프롬프트를 만들었어!"
|
||||
/>
|
||||
|
||||
## 네 차례야!
|
||||
|
||||
<PromptVsMistake
|
||||
question="어떤 프롬프트가 더 좋은 이야기를 만들까?"
|
||||
good="춤추는 법을 배우고 싶은 펭귄에 대한 재미있는 이야기를 써줘"
|
||||
bad="이야기 써줘 펭귄"
|
||||
explanation="첫 번째 프롬프트는 재미있어야 하고, 펭귄에 대한 거고, 펭귄이 뭘 하고 싶은지 알려줘!"
|
||||
promiMessage="세부사항은 모든 걸 더 좋게 해! 정확히 뭘 원하는지 아는 게 좋아!"
|
||||
/>
|
||||
|
||||
## 잘했어! 🌟
|
||||
|
||||
<Panel character="promi" mood="celebrating">
|
||||
첫 번째 프롬프트를 썼어! 좋은 프롬프트에는 원하는 것, 주제, 세부사항이 필요하다는 걸 배웠어. 정말 잘하고 있어!
|
||||
</Panel>
|
||||
|
||||
<LevelComplete
|
||||
levelSlug="1-2-first-words"
|
||||
stars={3}
|
||||
message="첫 번째 프롬프트 쓰는 법을 배웠어!"
|
||||
/>
|
||||
101
src/content/kids/ko/1-3-being-clear.mdx
Normal file
101
src/content/kids/ko/1-3-being-clear.mdx
Normal file
@@ -0,0 +1,101 @@
|
||||
<Panel character="promi" mood="happy">
|
||||
안녕 슈퍼스타! 🌟 오늘은 가장 중요한 기술을 배울 거야: **명확하게** 말하기!
|
||||
</Panel>
|
||||
|
||||
## 왜 명확하게 말하는 게 중요할까
|
||||
|
||||
엄마에게 "음식"을 달라고 하는 것과 "가장자리 없는 땅콩버터 샌드위치"를 달라고 하는 것을 상상해봐. 어떤 게 원하는 걸 정확히 주지?
|
||||
|
||||
<Panel character="promi" mood="thinking">
|
||||
나도 마찬가지야! 명확하게 말하면 어떻게 도와야 할지 정확히 알아. 모호하면 추측해야 하고... 틀릴 수도 있어!
|
||||
</Panel>
|
||||
|
||||
## 명확 vs. 불명확
|
||||
|
||||
차이를 찾는 연습을 해보자!
|
||||
|
||||
<PromptVsMistake
|
||||
question="어떤 프롬프트가 더 명확해?"
|
||||
good="정원의 나비에 대해 운율이 맞는 단어로 4줄 시를 써줘"
|
||||
bad="시 써줘 나비"
|
||||
explanation="명확한 프롬프트는 말해줘: 얼마나 긴지 (4줄), 무엇에 대한지 (정원의 나비), 특별한 규칙 (운율). 훨씬 나아!"
|
||||
promiMessage="명확한 프롬프트 = 더 좋은 결과! 마법 같아!"
|
||||
/>
|
||||
|
||||
<PromptVsMistake
|
||||
question="어떤 게 정확히 뭐가 필요한지 알려줘?"
|
||||
good="10살이 좋아할 돌고래에 대한 재미있는 사실 3개를 쓰는 걸 도와줘"
|
||||
bad="돌고래에 대해 알려줘"
|
||||
explanation="첫 번째 프롬프트는 말해줘: 몇 개의 사실 (3개), 어떤 종류 (재미있는), 누구를 위한 (10살). 많이 도움돼!"
|
||||
promiMessage="누구를 위한지 알려주면 그들에게 완벽하게 만들 수 있어!"
|
||||
/>
|
||||
|
||||
## 명확성 도전
|
||||
|
||||
지금까지 가장 명확한 프롬프트를 만들어보자!
|
||||
|
||||
<DragDropPrompt
|
||||
title="수정처럼 명확하게 만들어! 💎"
|
||||
instruction="이 조각들을 배열해서 엄청 명확한 프롬프트를 만들어"
|
||||
pieces={[
|
||||
"써주는 걸 도와줘",
|
||||
"짧은 잠자리 이야기를",
|
||||
"졸린 부엉이에 대해",
|
||||
"행복한 결말로",
|
||||
"내 여동생을 위해"
|
||||
]}
|
||||
correctOrder={[0, 1, 2, 3, 4]}
|
||||
successMessage="지금까지 가장 명확한 프롬프트야! 대단해!"
|
||||
/>
|
||||
|
||||
## 명확한 세부사항 추가
|
||||
|
||||
<MagicWords
|
||||
title="세부사항을 추가해! 🎯"
|
||||
sentence="{{length}} {{type}}을 써줘, {{topic}}에 대해, {{audience}}를 위해"
|
||||
blanks={[
|
||||
{ id: "length", hint: "얼마나 긴? (짧은, 긴)", answers: ["짧은", "긴", "5문장의", "한 페이지의", "간단한", "빠른"], emoji: "📏" },
|
||||
{ id: "type", hint: "어떤 종류? (이야기, 목록, 설명)", answers: ["이야기", "목록", "설명", "시", "노래", "가이드"], emoji: "📝" },
|
||||
{ id: "topic", hint: "무엇에 대해? (우주, 동물, 스포츠)", answers: ["우주", "동물", "스포츠", "공룡", "로봇", "마법", "자연", "과학"], emoji: "🎯" },
|
||||
{ id: "audience", hint: "누구를 위해? (아이들, 초보자)", answers: ["아이들", "초보자", "선생님", "친구", "가족", "학생들"], emoji: "👥" }
|
||||
]}
|
||||
successMessage="모든 중요한 세부사항을 추가했어! 잘했어!"
|
||||
/>
|
||||
|
||||
## 명확성의 황금 규칙
|
||||
|
||||
<Panel character="promi" mood="excited">
|
||||
명확하게 말하기 위한 최고의 팁이야:
|
||||
</Panel>
|
||||
|
||||
프롬프트를 쓸 때 이 세 가지 질문을 기억해:
|
||||
|
||||
1. **뭘** 원해? (이야기, 도움, 정보)
|
||||
2. **어떻게** 되어야 해? (짧게, 재미있게, 간단하게)
|
||||
3. **누구를** 위한 거야? (나, 친구, 우리 반)
|
||||
|
||||
<PromptVsMistake
|
||||
question="마지막 도전! 세 가지 규칙을 모두 사용한 건?"
|
||||
good="점심에 친구들에게 말할 수 있는 피자에 대한 짧고 재미있는 농담을 써줘"
|
||||
bad="재미있는 거 만들어"
|
||||
explanation="좋은 프롬프트에는 뭘 (피자 농담), 어떻게 (짧고 재미있게), 누구를 위해 (점심에 친구들에게 말할)가 있어!"
|
||||
promiMessage="넌 명확성 챔피언이야! 🏆"
|
||||
/>
|
||||
|
||||
## 월드 1 완료! 🎊
|
||||
|
||||
<Panel character="promi" mood="celebrating">
|
||||
와! 월드 1 전체를 끝냈어! 배운 것:
|
||||
|
||||
- ✅ AI와 프롬프트가 뭔지
|
||||
- ✅ 첫 번째 프롬프트 쓰는 법
|
||||
- ✅ 왜 명확하게 말하는 게 엄청 중요한지
|
||||
|
||||
새로운 모험을 위한 준비가 됐어!
|
||||
</Panel>
|
||||
|
||||
<LevelComplete
|
||||
levelSlug="1-3-being-clear"
|
||||
stars={3}
|
||||
message="명확하게 말하기를 마스터했어! 월드 1 완료!"
|
||||
/>
|
||||
53
src/content/kids/pt/1-1-meet-promi.mdx
Normal file
53
src/content/kids/pt/1-1-meet-promi.mdx
Normal file
@@ -0,0 +1,53 @@
|
||||
<Panel character="promi" mood="happy">
|
||||
Olá! Eu sou o **Promi** 🤖, seu amigo robô! Estou muito feliz em conhecer você!
|
||||
</Panel>
|
||||
|
||||
<Panel character="promi" mood="thinking">
|
||||
Você sabe o que **IA** significa? IA significa **Inteligência Artificial**. É uma forma chique de dizer "um computador que pode pensar e falar"!
|
||||
</Panel>
|
||||
|
||||
<Panel character="promi" mood="excited">
|
||||
Eu sou uma IA! Posso ler suas mensagens e tentar ajudar. Mas aqui está o segredo... Preciso de **boas instruções** para fazer meu melhor trabalho!
|
||||
</Panel>
|
||||
|
||||
## O que é um Prompt?
|
||||
|
||||
Um **prompt** é apenas uma palavra chique para a mensagem que você envia para uma IA como eu.
|
||||
|
||||
Pense nisso como dar direções para um amigo. Se você diz "Vá lá!" seu amigo não saberá onde ir. Mas se você diz "Vá para a casa vermelha na Rua das Flores," ele saberá exatamente onde!
|
||||
|
||||
<Panel character="promi" mood="happy">
|
||||
Quando você escreve um bom prompt, eu posso entender o que você quer e te ajudar melhor! Vamos praticar!
|
||||
</Panel>
|
||||
|
||||
## Vamos Tentar!
|
||||
|
||||
<PromptVsMistake
|
||||
question="Qual mensagem ajudaria o Promi a entender melhor?"
|
||||
good="Por favor escreva uma história curta sobre um dragão amigável que adora fazer biscoitos"
|
||||
bad="história"
|
||||
explanation="A primeira mensagem diz ao Promi exatamente que tipo de história escrever! A segunda é muito curta - Promi não sabe que tipo de história você quer."
|
||||
promiMessage="Viu? Mais detalhes me ajudam a entender o que você quer!"
|
||||
/>
|
||||
|
||||
## Quiz Rápido!
|
||||
|
||||
<PromptVsMistake
|
||||
question="Qual é um prompt?"
|
||||
good="Você pode me ajudar a escrever um poema sobre o oceano?"
|
||||
bad="🌊"
|
||||
explanation="Um prompt usa palavras para dizer à IA o que você precisa. Emojis são divertidos mas não dão informação suficiente!"
|
||||
promiMessage="Palavras são meu super poder! Quanto mais você me contar, melhor posso ajudar!"
|
||||
/>
|
||||
|
||||
## Você Conseguiu! 🎉
|
||||
|
||||
<Panel character="promi" mood="celebrating">
|
||||
Incrível trabalho! Você aprendeu o que é IA e o que é um prompt. Você já está se tornando um expert em prompts!
|
||||
</Panel>
|
||||
|
||||
<LevelComplete
|
||||
levelSlug="1-1-meet-promi"
|
||||
stars={3}
|
||||
message="Você aprendeu o que são IA e prompts!"
|
||||
/>
|
||||
75
src/content/kids/pt/1-2-first-words.mdx
Normal file
75
src/content/kids/pt/1-2-first-words.mdx
Normal file
@@ -0,0 +1,75 @@
|
||||
<Panel character="promi" mood="happy">
|
||||
Bem-vindo de volta, amigo! Pronto para escrever seus primeiros prompts de verdade? Vamos lá! 🚀
|
||||
</Panel>
|
||||
|
||||
## A Magia das Palavras
|
||||
|
||||
Quando você fala com IA, cada palavra importa! Vamos ver como adicionar mais palavras torna os prompts melhores.
|
||||
|
||||
<Panel character="promi" mood="thinking">
|
||||
Olha isso! Se alguém só me diz "gato", não sei o que querem. Querem uma imagem? Uma história? Fatos sobre gatos? Estou confuso! 😵💫
|
||||
</Panel>
|
||||
|
||||
## Construindo Prompts Melhores
|
||||
|
||||
Um bom prompt tem **três partes**:
|
||||
|
||||
1. **O que você quer** (uma história, ajuda, informação)
|
||||
2. **O assunto** (gatos, espaço, dinossauros)
|
||||
3. **Detalhes** (curto, engraçado, para crianças)
|
||||
|
||||
<Panel character="promi" mood="excited">
|
||||
Vamos construir um prompt juntos!
|
||||
</Panel>
|
||||
|
||||
## Arraste as Peças!
|
||||
|
||||
<DragDropPrompt
|
||||
title="Construa seu primeiro prompt! 🧩"
|
||||
instruction="Coloque essas peças na ordem certa para pedir uma história."
|
||||
pieces={[
|
||||
"Por favor escreva",
|
||||
"uma história curta",
|
||||
"sobre um gatinho corajoso",
|
||||
"que vai numa aventura"
|
||||
]}
|
||||
correctOrder={[0, 1, 2, 3]}
|
||||
successMessage="Perfeito! Esse é um ótimo prompt!"
|
||||
/>
|
||||
|
||||
## Preencha os Espaços!
|
||||
|
||||
Agora tente fazer seu próprio prompt arrastando as palavras mágicas:
|
||||
|
||||
<MagicWords
|
||||
title="Crie seu próprio prompt! ✨"
|
||||
sentence="Por favor escreva um {{type}} sobre um {{character}} que {{action}}"
|
||||
blanks={[
|
||||
{ id: "type", hint: "Que tipo de escrita? (história, poema, música)", answers: ["história", "poema", "música", "carta", "piada"], emoji: "📝" },
|
||||
{ id: "character", hint: "Sobre quem? (robô, dragão, cachorrinho)", answers: ["robô", "dragão", "cachorrinho", "gato", "mago", "princesa", "cavaleiro", "coelho", "unicórnio"], emoji: "🦸" },
|
||||
{ id: "action", hint: "O que fazem? (encontra tesouro, faz amigos)", answers: ["encontra tesouro", "faz amigos", "salva o dia", "vai numa aventura", "aprende a voar", "descobre magia"], emoji: "⚡" }
|
||||
]}
|
||||
successMessage="Uau! Você criou um prompt incrível!"
|
||||
/>
|
||||
|
||||
## Sua Vez de Escolher!
|
||||
|
||||
<PromptVsMistake
|
||||
question="Qual prompt vai conseguir uma história melhor?"
|
||||
good="Escreva uma história engraçada sobre um pinguim que quer aprender a dançar"
|
||||
bad="Escreva história pinguim"
|
||||
explanation="O primeiro prompt me diz que deve ser engraçado, é sobre um pinguim, E o que o pinguim quer fazer!"
|
||||
promiMessage="Detalhes tornam tudo melhor! Adoro saber exatamente o que você quer!"
|
||||
/>
|
||||
|
||||
## Ótimo Trabalho! 🌟
|
||||
|
||||
<Panel character="promi" mood="celebrating">
|
||||
Você escreveu seus primeiros prompts! Aprendeu que bons prompts precisam de: o que você quer, um assunto e detalhes. Você está ficando muito bom nisso!
|
||||
</Panel>
|
||||
|
||||
<LevelComplete
|
||||
levelSlug="1-2-first-words"
|
||||
stars={3}
|
||||
message="Você aprendeu a escrever seus primeiros prompts!"
|
||||
/>
|
||||
101
src/content/kids/pt/1-3-being-clear.mdx
Normal file
101
src/content/kids/pt/1-3-being-clear.mdx
Normal file
@@ -0,0 +1,101 @@
|
||||
<Panel character="promi" mood="happy">
|
||||
Ei superestrela! 🌟 Hoje vamos aprender a habilidade mais importante: ser **CLARO**!
|
||||
</Panel>
|
||||
|
||||
## Por Que Ser Claro Importa
|
||||
|
||||
Imagine pedir para sua mãe "comida" vs pedir "um sanduíche de pasta de amendoim sem casca." Qual te dá exatamente o que você quer?
|
||||
|
||||
<Panel character="promi" mood="thinking">
|
||||
É igual comigo! Quando você é claro, sei exatamente como ajudar. Quando é vago, tenho que adivinhar... e posso adivinhar errado!
|
||||
</Panel>
|
||||
|
||||
## Claro vs. Não Claro
|
||||
|
||||
Vamos praticar identificar a diferença!
|
||||
|
||||
<PromptVsMistake
|
||||
question="Qual prompt é mais claro?"
|
||||
good="Escreva um poema de 4 linhas sobre borboletas num jardim, usando palavras que rimam"
|
||||
bad="Escreva poema borboletas"
|
||||
explanation="O prompt claro me diz: qual tamanho (4 linhas), sobre o quê (borboletas num jardim), e uma regra especial (rimar). Muito melhor!"
|
||||
promiMessage="Prompts claros = melhores resultados! É como mágica!"
|
||||
/>
|
||||
|
||||
<PromptVsMistake
|
||||
question="Qual me diz exatamente o que você precisa?"
|
||||
good="Me ajude a escrever 3 fatos divertidos sobre golfinhos que uma criança de 10 anos gostaria"
|
||||
bad="Me conte sobre golfinhos"
|
||||
explanation="O primeiro prompt me diz: quantos fatos (3), que tipo (divertidos), e para quem (criança de 10 anos). Isso ajuda muito!"
|
||||
promiMessage="Quando você me diz para quem é, posso fazer perfeito para eles!"
|
||||
/>
|
||||
|
||||
## O Desafio da Clareza
|
||||
|
||||
Vamos construir o prompt mais claro de todos!
|
||||
|
||||
<DragDropPrompt
|
||||
title="Faça cristalino! 💎"
|
||||
instruction="Organize essas peças para fazer um prompt super claro"
|
||||
pieces={[
|
||||
"Por favor me ajude a escrever",
|
||||
"uma história curta de dormir",
|
||||
"sobre uma coruja sonolenta",
|
||||
"com um final feliz",
|
||||
"para minha irmãzinha"
|
||||
]}
|
||||
correctOrder={[0, 1, 2, 3, 4]}
|
||||
successMessage="Esse é o prompt mais claro de todos! Incrível!"
|
||||
/>
|
||||
|
||||
## Adicione Detalhes Claros
|
||||
|
||||
<MagicWords
|
||||
title="Adicione os detalhes! 🎯"
|
||||
sentence="Escreva um {{length}} {{type}} sobre {{topic}} para {{audience}}"
|
||||
blanks={[
|
||||
{ id: "length", hint: "Qual tamanho? (curto, longo)", answers: ["curto", "longo", "de 5 frases", "de uma página", "breve", "rápido"], emoji: "📏" },
|
||||
{ id: "type", hint: "Que tipo? (história, lista, explicação)", answers: ["história", "lista", "explicação", "poema", "música", "guia"], emoji: "📝" },
|
||||
{ id: "topic", hint: "Sobre o quê? (espaço, animais, esportes)", answers: ["espaço", "animais", "esportes", "dinossauros", "robôs", "magia", "natureza", "ciência"], emoji: "🎯" },
|
||||
{ id: "audience", hint: "Para quem? (crianças, iniciantes)", answers: ["crianças", "iniciantes", "meu professor", "meu amigo", "minha família", "estudantes"], emoji: "👥" }
|
||||
]}
|
||||
successMessage="Você adicionou todos os detalhes importantes! Bom trabalho!"
|
||||
/>
|
||||
|
||||
## As Regras de Ouro da Clareza
|
||||
|
||||
<Panel character="promi" mood="excited">
|
||||
Aqui estão minhas melhores dicas para ser claro:
|
||||
</Panel>
|
||||
|
||||
Lembre dessas três perguntas quando escrever um prompt:
|
||||
|
||||
1. **O QUE** eu quero? (história, ajuda, informação)
|
||||
2. **COMO** deve ser? (curto, engraçado, simples)
|
||||
3. **PARA QUEM** é? (eu, meu amigo, minha turma)
|
||||
|
||||
<PromptVsMistake
|
||||
question="Desafio final! Qual usa as três regras?"
|
||||
good="Escreva uma piada curta e engraçada sobre pizza que eu possa contar para meus amigos no almoço"
|
||||
bad="Faça algo engraçado"
|
||||
explanation="O ótimo prompt tem O QUE (uma piada sobre pizza), COMO (curta e engraçada), e PARA QUEM (contar para amigos no almoço)!"
|
||||
promiMessage="Você é um campeão da clareza! 🏆"
|
||||
/>
|
||||
|
||||
## Mundo 1 Completo! 🎊
|
||||
|
||||
<Panel character="promi" mood="celebrating">
|
||||
UAU! Você terminou todo o Mundo 1! Você aprendeu:
|
||||
|
||||
- ✅ O que são IA e prompts
|
||||
- ✅ Como escrever seus primeiros prompts
|
||||
- ✅ Por que ser claro é super importante
|
||||
|
||||
Você está pronto para novas aventuras!
|
||||
</Panel>
|
||||
|
||||
<LevelComplete
|
||||
levelSlug="1-3-being-clear"
|
||||
stars={3}
|
||||
message="Você dominou a arte de ser claro! Mundo 1 completo!"
|
||||
/>
|
||||
53
src/content/kids/ru/1-1-meet-promi.mdx
Normal file
53
src/content/kids/ru/1-1-meet-promi.mdx
Normal file
@@ -0,0 +1,53 @@
|
||||
<Panel character="promi" mood="happy">
|
||||
Привет! Я **Promi** 🤖, твой друг-робот! Я так рад познакомиться с тобой!
|
||||
</Panel>
|
||||
|
||||
<Panel character="promi" mood="thinking">
|
||||
Ты знаешь, что означает **ИИ**? ИИ означает **Искусственный Интеллект**. Это модный способ сказать "компьютер, который может думать и говорить"!
|
||||
</Panel>
|
||||
|
||||
<Panel character="promi" mood="excited">
|
||||
Я ИИ! Я могу читать твои сообщения и пытаться помочь. Но вот секрет... Мне нужны **хорошие инструкции**, чтобы делать свою работу лучше всего!
|
||||
</Panel>
|
||||
|
||||
## Что такое промпт?
|
||||
|
||||
**Промпт** - это просто модное слово для сообщения, которое ты отправляешь ИИ вроде меня.
|
||||
|
||||
Представь, что даёшь направления другу. Если скажешь "Иди туда!" твой друг не будет знать, куда идти. Но если скажешь "Иди к красному дому на Кленовой улице," он будет знать точно!
|
||||
|
||||
<Panel character="promi" mood="happy">
|
||||
Когда ты пишешь хороший промпт, я могу понять, что ты хочешь, и лучше помочь тебе! Давай практиковаться!
|
||||
</Panel>
|
||||
|
||||
## Попробуем!
|
||||
|
||||
<PromptVsMistake
|
||||
question="Какое сообщение поможет Promi лучше понять?"
|
||||
good="Пожалуйста, напиши короткую историю о дружелюбном драконе, который любит печь печенье"
|
||||
bad="история"
|
||||
explanation="Первое сообщение говорит Promi точно, какую историю писать! Второе слишком короткое - Promi не знает, какую историю ты хочешь."
|
||||
promiMessage="Видишь? Больше деталей помогает мне понять, что ты хочешь!"
|
||||
/>
|
||||
|
||||
## Быстрый тест!
|
||||
|
||||
<PromptVsMistake
|
||||
question="Что является промптом?"
|
||||
good="Можешь помочь мне написать стихотворение об океане?"
|
||||
bad="🌊"
|
||||
explanation="Промпт использует слова, чтобы сказать ИИ, что тебе нужно. Эмодзи весёлые, но не дают достаточно информации!"
|
||||
promiMessage="Слова - моя суперсила! Чем больше ты мне расскажешь, тем лучше я смогу помочь!"
|
||||
/>
|
||||
|
||||
## Получилось! 🎉
|
||||
|
||||
<Panel character="promi" mood="celebrating">
|
||||
Отличная работа! Ты узнал, что такое ИИ и что такое промпт. Ты уже становишься экспертом по промптам!
|
||||
</Panel>
|
||||
|
||||
<LevelComplete
|
||||
levelSlug="1-1-meet-promi"
|
||||
stars={3}
|
||||
message="Ты узнал, что такое ИИ и промпты!"
|
||||
/>
|
||||
75
src/content/kids/ru/1-2-first-words.mdx
Normal file
75
src/content/kids/ru/1-2-first-words.mdx
Normal file
@@ -0,0 +1,75 @@
|
||||
<Panel character="promi" mood="happy">
|
||||
С возвращением, друг! Готов писать свои первые настоящие промпты? Поехали! 🚀
|
||||
</Panel>
|
||||
|
||||
## Магия слов
|
||||
|
||||
Когда ты разговариваешь с ИИ, каждое слово важно! Давай посмотрим, как добавление слов делает промпты лучше.
|
||||
|
||||
<Panel character="promi" mood="thinking">
|
||||
Смотри! Если кто-то скажет мне только "кот", я не знаю, что они хотят. Картинку? Историю? Факты о котах? Я запутался! 😵💫
|
||||
</Panel>
|
||||
|
||||
## Строим лучшие промпты
|
||||
|
||||
Хороший промпт имеет **три части**:
|
||||
|
||||
1. **Что ты хочешь** (историю, помощь, информацию)
|
||||
2. **Тему** (коты, космос, динозавры)
|
||||
3. **Детали** (короткое, смешное, для детей)
|
||||
|
||||
<Panel character="promi" mood="excited">
|
||||
Давай построим промпт вместе!
|
||||
</Panel>
|
||||
|
||||
## Перетащи кусочки!
|
||||
|
||||
<DragDropPrompt
|
||||
title="Построй свой первый промпт! 🧩"
|
||||
instruction="Поставь эти кусочки в правильном порядке, чтобы попросить историю."
|
||||
pieces={[
|
||||
"Пожалуйста, напиши",
|
||||
"короткую историю",
|
||||
"о храбром котёнке",
|
||||
"который отправляется в приключение"
|
||||
]}
|
||||
correctOrder={[0, 1, 2, 3]}
|
||||
successMessage="Отлично! Это отличный промпт!"
|
||||
/>
|
||||
|
||||
## Заполни пробелы!
|
||||
|
||||
Теперь попробуй сделать свой промпт, перетаскивая волшебные слова:
|
||||
|
||||
<MagicWords
|
||||
title="Создай свой промпт! ✨"
|
||||
sentence="Пожалуйста, напиши {{type}} о {{character}}, который {{action}}"
|
||||
blanks={[
|
||||
{ id: "type", hint: "Какой тип текста? (история, стих, песня)", answers: ["историю", "стих", "песню", "письмо", "шутку"], emoji: "📝" },
|
||||
{ id: "character", hint: "О ком? (робот, дракон, щенок)", answers: ["роботе", "драконе", "щенке", "коте", "волшебнике", "принцессе", "рыцаре", "кролике", "единороге"], emoji: "🦸" },
|
||||
{ id: "action", hint: "Что делают? (находит сокровище, заводит друзей)", answers: ["находит сокровище", "заводит друзей", "спасает день", "отправляется в приключение", "учится летать", "открывает магию"], emoji: "⚡" }
|
||||
]}
|
||||
successMessage="Вау! Ты создал потрясающий промпт!"
|
||||
/>
|
||||
|
||||
## Твоя очередь выбирать!
|
||||
|
||||
<PromptVsMistake
|
||||
question="Какой промпт получит лучшую историю?"
|
||||
good="Напиши смешную историю о пингвине, который хочет научиться танцевать"
|
||||
bad="Напиши историю пингвин"
|
||||
explanation="Первый промпт говорит мне, что должно быть смешно, это о пингвине, И что пингвин хочет делать!"
|
||||
promiMessage="Детали делают всё лучше! Я люблю знать точно, что ты хочешь!"
|
||||
/>
|
||||
|
||||
## Отличная работа! 🌟
|
||||
|
||||
<Panel character="promi" mood="celebrating">
|
||||
Ты написал свои первые промпты! Ты узнал, что хорошим промптам нужно: что ты хочешь, тема и детали. У тебя отлично получается!
|
||||
</Panel>
|
||||
|
||||
<LevelComplete
|
||||
levelSlug="1-2-first-words"
|
||||
stars={3}
|
||||
message="Ты научился писать свои первые промпты!"
|
||||
/>
|
||||
101
src/content/kids/ru/1-3-being-clear.mdx
Normal file
101
src/content/kids/ru/1-3-being-clear.mdx
Normal file
@@ -0,0 +1,101 @@
|
||||
<Panel character="promi" mood="happy">
|
||||
Привет, суперзвезда! 🌟 Сегодня мы изучим самый важный навык: быть **ЧЁТКИМ**!
|
||||
</Panel>
|
||||
|
||||
## Почему быть чётким важно
|
||||
|
||||
Представь, что просишь маму "еду" против "бутерброд с арахисовым маслом без корочки." Что даст тебе именно то, что ты хочешь?
|
||||
|
||||
<Panel character="promi" mood="thinking">
|
||||
Со мной так же! Когда ты чёткий, я точно знаю, как помочь. Когда ты размытый, мне приходится угадывать... и я могу угадать неправильно!
|
||||
</Panel>
|
||||
|
||||
## Чётко vs. Нечётко
|
||||
|
||||
Давай практиковаться находить разницу!
|
||||
|
||||
<PromptVsMistake
|
||||
question="Какой промпт чётче?"
|
||||
good="Напиши стихотворение из 4 строк о бабочках в саду, используя рифмующиеся слова"
|
||||
bad="Напиши стих бабочки"
|
||||
explanation="Чёткий промпт говорит мне: какая длина (4 строки), о чём (бабочки в саду), и особое правило (рифма). Намного лучше!"
|
||||
promiMessage="Чёткие промпты = лучшие результаты! Это как магия!"
|
||||
/>
|
||||
|
||||
<PromptVsMistake
|
||||
question="Какой говорит мне точно, что тебе нужно?"
|
||||
good="Помоги мне написать 3 весёлых факта о дельфинах, которые понравятся 10-летнему ребёнку"
|
||||
bad="Расскажи о дельфинах"
|
||||
explanation="Первый промпт говорит мне: сколько фактов (3), какого типа (весёлые), и для кого (10-летний). Это очень помогает!"
|
||||
promiMessage="Когда ты говоришь мне, для кого это, я могу сделать идеально для них!"
|
||||
/>
|
||||
|
||||
## Вызов чёткости
|
||||
|
||||
Давай построим самый чёткий промпт!
|
||||
|
||||
<DragDropPrompt
|
||||
title="Сделай кристально ясным! 💎"
|
||||
instruction="Расставь эти кусочки, чтобы сделать супер чёткий промпт"
|
||||
pieces={[
|
||||
"Пожалуйста, помоги мне написать",
|
||||
"короткую сказку на ночь",
|
||||
"о сонной сове",
|
||||
"со счастливым концом",
|
||||
"для моей младшей сестры"
|
||||
]}
|
||||
correctOrder={[0, 1, 2, 3, 4]}
|
||||
successMessage="Это самый чёткий промпт! Потрясающе!"
|
||||
/>
|
||||
|
||||
## Добавь чёткие детали
|
||||
|
||||
<MagicWords
|
||||
title="Добавь детали! 🎯"
|
||||
sentence="Напиши {{length}} {{type}} о {{topic}} для {{audience}}"
|
||||
blanks={[
|
||||
{ id: "length", hint: "Какая длина? (короткий, длинный)", answers: ["короткую", "длинную", "из 5 предложений", "на одну страницу", "краткую", "быструю"], emoji: "📏" },
|
||||
{ id: "type", hint: "Какой тип? (история, список, объяснение)", answers: ["историю", "список", "объяснение", "стих", "песню", "руководство"], emoji: "📝" },
|
||||
{ id: "topic", hint: "О чём? (космос, животные, спорт)", answers: ["космосе", "животных", "спорте", "динозаврах", "роботах", "магии", "природе", "науке"], emoji: "🎯" },
|
||||
{ id: "audience", hint: "Для кого? (дети, начинающие)", answers: ["детей", "начинающих", "моего учителя", "моего друга", "моей семьи", "студентов"], emoji: "👥" }
|
||||
]}
|
||||
successMessage="Ты добавил все важные детали! Отличная работа!"
|
||||
/>
|
||||
|
||||
## Золотые правила чёткости
|
||||
|
||||
<Panel character="promi" mood="excited">
|
||||
Вот мои лучшие советы, чтобы быть чётким:
|
||||
</Panel>
|
||||
|
||||
Помни эти три вопроса, когда пишешь промпт:
|
||||
|
||||
1. **ЧТО** я хочу? (историю, помощь, информацию)
|
||||
2. **КАКИМ** должно быть? (коротким, смешным, простым)
|
||||
3. **ДЛЯ КОГО** это? (меня, моего друга, моего класса)
|
||||
|
||||
<PromptVsMistake
|
||||
question="Финальный вызов! Какой использует все три правила?"
|
||||
good="Напиши короткую смешную шутку о пицце, которую я могу рассказать друзьям на обеде"
|
||||
bad="Сделай что-нибудь смешное"
|
||||
explanation="Отличный промпт имеет ЧТО (шутка о пицце), КАКИМ (короткая и смешная), и ДЛЯ КОГО (рассказать друзьям на обеде)!"
|
||||
promiMessage="Ты чемпион чёткости! 🏆"
|
||||
/>
|
||||
|
||||
## Мир 1 пройден! 🎊
|
||||
|
||||
<Panel character="promi" mood="celebrating">
|
||||
ВАУ! Ты прошёл весь Мир 1! Ты узнал:
|
||||
|
||||
- ✅ Что такое ИИ и промпты
|
||||
- ✅ Как писать свои первые промпты
|
||||
- ✅ Почему быть чётким супер важно
|
||||
|
||||
Ты готов к новым приключениям!
|
||||
</Panel>
|
||||
|
||||
<LevelComplete
|
||||
levelSlug="1-3-being-clear"
|
||||
stars={3}
|
||||
message="Ты освоил искусство быть чётким! Мир 1 пройден!"
|
||||
/>
|
||||
53
src/content/kids/tr/1-1-meet-promi.mdx
Normal file
53
src/content/kids/tr/1-1-meet-promi.mdx
Normal file
@@ -0,0 +1,53 @@
|
||||
<Panel character="promi" mood="happy">
|
||||
Merhaba! Ben **Promi** 🤖, robot arkadaşın! Seninle tanıştığıma çok mutluyum!
|
||||
</Panel>
|
||||
|
||||
<Panel character="promi" mood="thinking">
|
||||
**Yapay Zeka** ne demek biliyor musun? Yapay Zeka, "düşünebilen ve konuşabilen bir bilgisayar" demek!
|
||||
</Panel>
|
||||
|
||||
<Panel character="promi" mood="excited">
|
||||
Ben bir yapay zekayım! Mesajlarını okuyup sana yardım etmeye çalışıyorum. Ama işte sır... En iyi işi yapmam için **iyi talimatlara** ihtiyacım var!
|
||||
</Panel>
|
||||
|
||||
## Prompt Nedir?
|
||||
|
||||
**Prompt**, benim gibi bir yapay zekaya gönderdiğin mesaj demek.
|
||||
|
||||
Bunu bir arkadaşına yol tarifi vermek gibi düşün. "Oraya git!" dersen arkadaşın nereye gideceğini bilmez. Ama "Akasya Sokağı'ndaki kırmızı eve git" dersen tam olarak nereye gideceğini bilir!
|
||||
|
||||
<Panel character="promi" mood="happy">
|
||||
İyi bir prompt yazdığında, ne istediğini anlayabilir ve sana daha iyi yardım edebilirim! Hadi pratik yapalım!
|
||||
</Panel>
|
||||
|
||||
## Hadi Deneyelim!
|
||||
|
||||
<PromptVsMistake
|
||||
question="Hangi mesaj Promi'nin daha iyi anlamasına yardımcı olur?"
|
||||
good="Lütfen kurabiye yapmayı seven sevimli bir ejderha hakkında kısa bir hikaye yaz"
|
||||
bad="hikaye"
|
||||
explanation="İlk mesaj Promi'ye tam olarak ne tür bir hikaye yazacağını söylüyor! İkincisi çok kısa - Promi ne tür bir hikaye istediğini bilmiyor."
|
||||
promiMessage="Gördün mü? Daha fazla detay ne istediğini anlamama yardımcı oluyor!"
|
||||
/>
|
||||
|
||||
## Hızlı Test!
|
||||
|
||||
<PromptVsMistake
|
||||
question="Hangisi bir prompt?"
|
||||
good="Okyanus hakkında bir şiir yazmama yardım eder misin?"
|
||||
bad="🌊"
|
||||
explanation="Prompt, yapay zekaya neye ihtiyacın olduğunu söylemek için kelimeler kullanır. Emojiler eğlenceli ama yeterli bilgi vermiyor!"
|
||||
promiMessage="Kelimeler benim süper gücüm! Bana ne kadar çok söylersen, o kadar iyi yardım edebilirim!"
|
||||
/>
|
||||
|
||||
## Başardın! 🎉
|
||||
|
||||
<Panel character="promi" mood="celebrating">
|
||||
Harika iş! Yapay zekanın ne olduğunu ve promptun ne olduğunu öğrendin. Şimdiden bir prompt uzmanı oluyorsun!
|
||||
</Panel>
|
||||
|
||||
<LevelComplete
|
||||
levelSlug="1-1-meet-promi"
|
||||
stars={3}
|
||||
message="Yapay zeka ve promptların ne olduğunu öğrendin!"
|
||||
/>
|
||||
75
src/content/kids/tr/1-2-first-words.mdx
Normal file
75
src/content/kids/tr/1-2-first-words.mdx
Normal file
@@ -0,0 +1,75 @@
|
||||
<Panel character="promi" mood="happy">
|
||||
Tekrar hoş geldin arkadaşım! İlk gerçek promptlarını yazmaya hazır mısın? Hadi başlayalım! 🚀
|
||||
</Panel>
|
||||
|
||||
## Kelimelerin Büyüsü
|
||||
|
||||
Yapay zeka ile konuşurken her kelime önemli! Daha fazla kelime eklemenin promptları nasıl daha iyi yaptığını görelim.
|
||||
|
||||
<Panel character="promi" mood="thinking">
|
||||
Bunu izle! Birisi bana sadece "kedi" derse, ne istediklerini bilmiyorum. Resim mi istiyorlar? Hikaye mi? Kediler hakkında bilgi mi? Kafam karıştı! 😵💫
|
||||
</Panel>
|
||||
|
||||
## Daha İyi Promptlar Oluşturma
|
||||
|
||||
İyi bir promptun **üç parçası** var:
|
||||
|
||||
1. **Ne istediğin** (hikaye, yardım, bilgi)
|
||||
2. **Konu** (kediler, uzay, dinozorlar)
|
||||
3. **Detaylar** (kısa, komik, çocuklar için)
|
||||
|
||||
<Panel character="promi" mood="excited">
|
||||
Hadi birlikte bir prompt oluşturalım!
|
||||
</Panel>
|
||||
|
||||
## Parçaları Sürükle!
|
||||
|
||||
<DragDropPrompt
|
||||
title="İlk promptunu oluştur! 🧩"
|
||||
instruction="Bu parçaları hikaye istemek için doğru sıraya koy."
|
||||
pieces={[
|
||||
"Lütfen yaz",
|
||||
"kısa bir hikaye",
|
||||
"cesur bir kedi yavrusu hakkında",
|
||||
"maceraya çıkan"
|
||||
]}
|
||||
correctOrder={[0, 1, 2, 3]}
|
||||
successMessage="Mükemmel! Bu harika bir prompt!"
|
||||
/>
|
||||
|
||||
## Boşlukları Doldur!
|
||||
|
||||
Şimdi sihirli kelimeleri sürükleyerek kendi promptunu yap:
|
||||
|
||||
<MagicWords
|
||||
title="Kendi promptunu oluştur! ✨"
|
||||
sentence="Lütfen bir {{type}} yaz, {{character}} hakkında, {{action}}"
|
||||
blanks={[
|
||||
{ id: "type", hint: "Ne tür yazı? (hikaye, şiir, şarkı)", answers: ["hikaye", "şiir", "şarkı", "mektup", "fıkra"], emoji: "📝" },
|
||||
{ id: "character", hint: "Kim hakkında? (robot, ejderha, köpek)", answers: ["robot", "ejderha", "köpek", "kedi", "büyücü", "prenses", "şövalye", "tavşan", "unicorn"], emoji: "🦸" },
|
||||
{ id: "action", hint: "Ne yapıyorlar? (hazine bulan, arkadaş edinen)", answers: ["hazine bulan", "arkadaş edinen", "günü kurtaran", "maceraya çıkan", "uçmayı öğrenen", "sihir keşfeden"], emoji: "⚡" }
|
||||
]}
|
||||
successMessage="Vay! Harika bir prompt oluşturdun!"
|
||||
/>
|
||||
|
||||
## Senin Seçimin!
|
||||
|
||||
<PromptVsMistake
|
||||
question="Hangi prompt daha iyi bir hikaye çıkarır?"
|
||||
good="Dans etmeyi öğrenmek isteyen bir penguen hakkında komik bir hikaye yaz"
|
||||
bad="Hikaye yaz penguen"
|
||||
explanation="İlk prompt bana komik olması gerektiğini, bir penguen hakkında olduğunu VE penguenin ne yapmak istediğini söylüyor!"
|
||||
promiMessage="Detaylar her şeyi daha iyi yapar! Ne istediğini tam olarak bilmeyi seviyorum!"
|
||||
/>
|
||||
|
||||
## Harika İş! 🌟
|
||||
|
||||
<Panel character="promi" mood="celebrating">
|
||||
İlk promptlarını yazdın! İyi promptların şunlara ihtiyacı olduğunu öğrendin: ne istediğin, konu ve detaylar. Bunda gerçekten iyileşiyorsun!
|
||||
</Panel>
|
||||
|
||||
<LevelComplete
|
||||
levelSlug="1-2-first-words"
|
||||
stars={3}
|
||||
message="İlk promptlarını yazmayı öğrendin!"
|
||||
/>
|
||||
101
src/content/kids/tr/1-3-being-clear.mdx
Normal file
101
src/content/kids/tr/1-3-being-clear.mdx
Normal file
@@ -0,0 +1,101 @@
|
||||
<Panel character="promi" mood="happy">
|
||||
Merhaba süperstar! 🌟 Bugün en önemli beceriyi öğreneceğiz: **NET OLMAK**!
|
||||
</Panel>
|
||||
|
||||
## Neden Net Olmak Önemli
|
||||
|
||||
Annenden "yiyecek" istemek ile "kabuksuz fıstık ezmeli sandviç" istemek arasındaki farkı düşün. Hangisi tam olarak istediğini sana verir?
|
||||
|
||||
<Panel character="promi" mood="thinking">
|
||||
Benimle de aynı! Net olduğunda, tam olarak nasıl yardım edeceğimi bilirim. Belirsiz olduğunda tahmin etmem gerekiyor... ve yanlış tahmin edebilirim!
|
||||
</Panel>
|
||||
|
||||
## Net vs. Belirsiz
|
||||
|
||||
Hadi farkı bulmayı pratik yapalım!
|
||||
|
||||
<PromptVsMistake
|
||||
question="Hangi prompt daha net?"
|
||||
good="Kafiyeli kelimeler kullanarak, bahçedeki kelebekler hakkında 4 satırlık bir şiir yaz"
|
||||
bad="Şiir yaz kelebek"
|
||||
explanation="Net prompt bana söylüyor: ne kadar uzun (4 satır), ne hakkında (bahçedeki kelebekler), ve özel bir kural (kafiyeli). Çok daha iyi!"
|
||||
promiMessage="Net promptlar = daha iyi sonuçlar! Bu sihir gibi!"
|
||||
/>
|
||||
|
||||
<PromptVsMistake
|
||||
question="Hangisi tam olarak neye ihtiyacın olduğunu söylüyor?"
|
||||
good="10 yaşındaki birinin seveceği yunuslar hakkında 3 eğlenceli bilgi yazmama yardım et"
|
||||
bad="Yunuslar hakkında anlat"
|
||||
explanation="İlk prompt bana söylüyor: kaç bilgi (3), ne tür (eğlenceli), ve kimin için (10 yaşındaki). Bu çok yardımcı oluyor!"
|
||||
promiMessage="Kimin için olduğunu söylediğinde, onlar için mükemmel yapabilirim!"
|
||||
/>
|
||||
|
||||
## Netlik Mücadelesi
|
||||
|
||||
Hadi şimdiye kadarki en net promptu oluşturalım!
|
||||
|
||||
<DragDropPrompt
|
||||
title="Kristal netliğinde yap! 💎"
|
||||
instruction="Bu parçaları süper net bir prompt yapmak için düzenle"
|
||||
pieces={[
|
||||
"Lütfen yazmama yardım et",
|
||||
"kısa bir uyku hikayesi",
|
||||
"uykulu bir baykuş hakkında",
|
||||
"mutlu sonlu",
|
||||
"küçük kardeşim için"
|
||||
]}
|
||||
correctOrder={[0, 1, 2, 3, 4]}
|
||||
successMessage="Bu şimdiye kadarki en net prompt! Harika!"
|
||||
/>
|
||||
|
||||
## Net Detaylar Ekle
|
||||
|
||||
<MagicWords
|
||||
title="Detayları ekle! 🎯"
|
||||
sentence="Bir {{length}} {{type}} yaz, {{topic}} hakkında, {{audience}} için"
|
||||
blanks={[
|
||||
{ id: "length", hint: "Ne kadar uzun? (kısa, uzun)", answers: ["kısa", "uzun", "5 cümlelik", "bir sayfalık", "kısa", "hızlı"], emoji: "📏" },
|
||||
{ id: "type", hint: "Ne tür? (hikaye, liste, açıklama)", answers: ["hikaye", "liste", "açıklama", "şiir", "şarkı", "rehber"], emoji: "📝" },
|
||||
{ id: "topic", hint: "Ne hakkında? (uzay, hayvanlar, spor)", answers: ["uzay", "hayvanlar", "spor", "dinozorlar", "robotlar", "sihir", "doğa", "bilim"], emoji: "🎯" },
|
||||
{ id: "audience", hint: "Kimin için? (çocuklar, yeni başlayanlar)", answers: ["çocuklar", "yeni başlayanlar", "öğretmenim", "arkadaşım", "ailem", "öğrenciler"], emoji: "👥" }
|
||||
]}
|
||||
successMessage="Tüm önemli detayları ekledin! Harika iş!"
|
||||
/>
|
||||
|
||||
## Netliğin Altın Kuralları
|
||||
|
||||
<Panel character="promi" mood="excited">
|
||||
İşte net olmak için en iyi ipuçlarım:
|
||||
</Panel>
|
||||
|
||||
Prompt yazarken bu üç soruyu hatırla:
|
||||
|
||||
1. **NE** istiyorum? (hikaye, yardım, bilgi)
|
||||
2. **NASIL** olmalı? (kısa, komik, basit)
|
||||
3. **KİM** için? (ben, arkadaşım, sınıfım)
|
||||
|
||||
<PromptVsMistake
|
||||
question="Son mücadele! Hangisi üç kuralı da kullanıyor?"
|
||||
good="Öğle yemeğinde arkadaşlarıma anlatabileceğim pizza hakkında kısa, komik bir fıkra yaz"
|
||||
bad="Komik bir şey yap"
|
||||
explanation="Harika prompt şunları içeriyor: NE (pizza hakkında fıkra), NASIL (kısa ve komik), ve KİM (öğle yemeğinde arkadaşlara anlatmak için)!"
|
||||
promiMessage="Sen bir netlik şampiyonusun! 🏆"
|
||||
/>
|
||||
|
||||
## Dünya 1 Tamamlandı! 🎊
|
||||
|
||||
<Panel character="promi" mood="celebrating">
|
||||
VAY! Dünya 1'in tamamını bitirdin! Öğrendiklerin:
|
||||
|
||||
- ✅ Yapay zeka ve promptların ne olduğu
|
||||
- ✅ İlk promptlarını nasıl yazacağın
|
||||
- ✅ Neden net olmanın süper önemli olduğu
|
||||
|
||||
Yeni maceralara hazırsın!
|
||||
</Panel>
|
||||
|
||||
<LevelComplete
|
||||
levelSlug="1-3-being-clear"
|
||||
stars={3}
|
||||
message="Net olma sanatında ustalaştın! Dünya 1 tamamlandı!"
|
||||
/>
|
||||
53
src/content/kids/zh/1-1-meet-promi.mdx
Normal file
53
src/content/kids/zh/1-1-meet-promi.mdx
Normal file
@@ -0,0 +1,53 @@
|
||||
<Panel character="promi" mood="happy">
|
||||
你好!我是 **Promi** 🤖,你的机器人朋友!很高兴认识你!
|
||||
</Panel>
|
||||
|
||||
<Panel character="promi" mood="thinking">
|
||||
你知道**AI**是什么意思吗?AI代表**人工智能**。这是"能思考和说话的电脑"的高级说法!
|
||||
</Panel>
|
||||
|
||||
<Panel character="promi" mood="excited">
|
||||
我就是一个AI!我能读取你的消息并尝试帮助你。但这里有个秘密...我需要**好的指令**才能做到最好!
|
||||
</Panel>
|
||||
|
||||
## 什么是提示词?
|
||||
|
||||
**提示词**就是你发送给像我这样的AI的消息的另一种说法。
|
||||
|
||||
把它想象成给朋友指路。如果你说"去那里!"你的朋友不知道要去哪里。但如果你说"去枫树街上的红房子",他们就知道确切位置了!
|
||||
|
||||
<Panel character="promi" mood="happy">
|
||||
当你写一个好的提示词时,我就能理解你想要什么,更好地帮助你!让我们来练习吧!
|
||||
</Panel>
|
||||
|
||||
## 试一试!
|
||||
|
||||
<PromptVsMistake
|
||||
question="哪条消息能帮助Promi更好地理解?"
|
||||
good="请写一个关于喜欢烤饼干的友好小龙的短故事"
|
||||
bad="故事"
|
||||
explanation="第一条消息告诉Promi确切要写什么样的故事!第二条太短了——Promi不知道你想要什么样的故事。"
|
||||
promiMessage="看到了吗?更多细节帮助我理解你想要什么!"
|
||||
/>
|
||||
|
||||
## 快速测验!
|
||||
|
||||
<PromptVsMistake
|
||||
question="哪个是提示词?"
|
||||
good="你能帮我写一首关于海洋的诗吗?"
|
||||
bad="🌊"
|
||||
explanation="提示词用文字告诉AI你需要什么。表情符号很有趣但不能提供足够的信息!"
|
||||
promiMessage="文字是我的超能力!你告诉我越多,我就能帮助你越好!"
|
||||
/>
|
||||
|
||||
## 你做到了!🎉
|
||||
|
||||
<Panel character="promi" mood="celebrating">
|
||||
太棒了!你学会了什么是AI和什么是提示词。你已经在成为提示词专家了!
|
||||
</Panel>
|
||||
|
||||
<LevelComplete
|
||||
levelSlug="1-1-meet-promi"
|
||||
stars={3}
|
||||
message="你学会了什么是AI和提示词!"
|
||||
/>
|
||||
75
src/content/kids/zh/1-2-first-words.mdx
Normal file
75
src/content/kids/zh/1-2-first-words.mdx
Normal file
@@ -0,0 +1,75 @@
|
||||
<Panel character="promi" mood="happy">
|
||||
欢迎回来,朋友!准备好写你的第一个真正的提示词了吗?出发!🚀
|
||||
</Panel>
|
||||
|
||||
## 文字的魔力
|
||||
|
||||
当你和AI交流时,每个字都很重要!让我们看看添加更多文字如何让提示词变得更好。
|
||||
|
||||
<Panel character="promi" mood="thinking">
|
||||
看这个!如果有人只对我说"猫",我不知道他们想要什么。他们想要图片?故事?关于猫的知识?我很困惑!😵💫
|
||||
</Panel>
|
||||
|
||||
## 构建更好的提示词
|
||||
|
||||
一个好的提示词有**三个部分**:
|
||||
|
||||
1. **你想要什么**(故事、帮助、信息)
|
||||
2. **主题**(猫、太空、恐龙)
|
||||
3. **细节**(短的、有趣的、给小朋友的)
|
||||
|
||||
<Panel character="promi" mood="excited">
|
||||
让我们一起构建一个提示词!
|
||||
</Panel>
|
||||
|
||||
## 拖动拼图!
|
||||
|
||||
<DragDropPrompt
|
||||
title="构建你的第一个提示词!🧩"
|
||||
instruction="把这些片段按正确顺序排列来请求一个故事。"
|
||||
pieces={[
|
||||
"请写",
|
||||
"一个短故事",
|
||||
"关于一只勇敢的小猫",
|
||||
"去冒险"
|
||||
]}
|
||||
correctOrder={[0, 1, 2, 3]}
|
||||
successMessage="完美!这是一个很棒的提示词!"
|
||||
/>
|
||||
|
||||
## 填空!
|
||||
|
||||
现在试着通过拖动魔法词来创建你自己的提示词:
|
||||
|
||||
<MagicWords
|
||||
title="创建你自己的提示词!✨"
|
||||
sentence="请写一个{{type}},关于一个{{character}},{{action}}"
|
||||
blanks={[
|
||||
{ id: "type", hint: "什么类型的写作?(故事、诗、歌)", answers: ["故事", "诗", "歌", "信", "笑话"], emoji: "📝" },
|
||||
{ id: "character", hint: "关于谁?(机器人、龙、小狗)", answers: ["机器人", "龙", "小狗", "猫", "魔法师", "公主", "骑士", "兔子", "独角兽"], emoji: "🦸" },
|
||||
{ id: "action", hint: "他们做什么?(找到宝藏、交朋友)", answers: ["找到宝藏", "交朋友", "拯救世界", "去冒险", "学会飞翔", "发现魔法"], emoji: "⚡" }
|
||||
]}
|
||||
successMessage="哇!你创建了一个超棒的提示词!"
|
||||
/>
|
||||
|
||||
## 轮到你选择!
|
||||
|
||||
<PromptVsMistake
|
||||
question="哪个提示词会得到更好的故事?"
|
||||
good="写一个关于想学跳舞的企鹅的有趣故事"
|
||||
bad="写故事企鹅"
|
||||
explanation="第一个提示词告诉我应该是有趣的,是关于企鹅的,而且企鹅想做什么!"
|
||||
promiMessage="细节让一切变得更好!我喜欢确切知道你想要什么!"
|
||||
/>
|
||||
|
||||
## 干得好!🌟
|
||||
|
||||
<Panel character="promi" mood="celebrating">
|
||||
你写了你的第一个提示词!你学到了好的提示词需要:你想要什么、主题和细节。你在这方面真的越来越棒了!
|
||||
</Panel>
|
||||
|
||||
<LevelComplete
|
||||
levelSlug="1-2-first-words"
|
||||
stars={3}
|
||||
message="你学会了如何写你的第一个提示词!"
|
||||
/>
|
||||
101
src/content/kids/zh/1-3-being-clear.mdx
Normal file
101
src/content/kids/zh/1-3-being-clear.mdx
Normal file
@@ -0,0 +1,101 @@
|
||||
<Panel character="promi" mood="happy">
|
||||
嗨超级明星!🌟 今天我们要学习最重要的技能:**表达清晰**!
|
||||
</Panel>
|
||||
|
||||
## 为什么清晰很重要
|
||||
|
||||
想象一下向妈妈要"食物"和要"去掉边的花生酱三明治"的区别。哪个能让你得到你想要的?
|
||||
|
||||
<Panel character="promi" mood="thinking">
|
||||
对我来说也是一样!当你表达清晰时,我确切知道如何帮助你。当你表达模糊时,我必须猜测...而且我可能猜错!
|
||||
</Panel>
|
||||
|
||||
## 清晰 vs. 模糊
|
||||
|
||||
让我们练习发现差异!
|
||||
|
||||
<PromptVsMistake
|
||||
question="哪个提示词更清晰?"
|
||||
good="写一首4行的关于花园里蝴蝶的诗,使用押韵的词"
|
||||
bad="写诗蝴蝶"
|
||||
explanation="清晰的提示词告诉我:多长(4行)、关于什么(花园里的蝴蝶)、还有特殊规则(押韵)。好多了!"
|
||||
promiMessage="清晰的提示词 = 更好的结果!就像魔法一样!"
|
||||
/>
|
||||
|
||||
<PromptVsMistake
|
||||
question="哪个确切告诉我你需要什么?"
|
||||
good="帮我写3个关于海豚的有趣知识,适合10岁孩子的"
|
||||
bad="告诉我关于海豚"
|
||||
explanation="第一个提示词告诉我:几个知识(3个)、什么类型(有趣的)、给谁(10岁孩子)。这很有帮助!"
|
||||
promiMessage="当你告诉我是给谁的,我就能为他们做到完美!"
|
||||
/>
|
||||
|
||||
## 清晰挑战
|
||||
|
||||
让我们构建有史以来最清晰的提示词!
|
||||
|
||||
<DragDropPrompt
|
||||
title="让它像水晶一样清晰!💎"
|
||||
instruction="排列这些片段来创建一个超级清晰的提示词"
|
||||
pieces={[
|
||||
"请帮我写",
|
||||
"一个简短的睡前故事",
|
||||
"关于一只困倦的猫头鹰",
|
||||
"有一个快乐的结局",
|
||||
"给我的小妹妹"
|
||||
]}
|
||||
correctOrder={[0, 1, 2, 3, 4]}
|
||||
successMessage="这是有史以来最清晰的提示词!太棒了!"
|
||||
/>
|
||||
|
||||
## 添加清晰的细节
|
||||
|
||||
<MagicWords
|
||||
title="添加细节!🎯"
|
||||
sentence="写一个{{length}}的{{type}},关于{{topic}},给{{audience}}"
|
||||
blanks={[
|
||||
{ id: "length", hint: "多长?(短的、长的)", answers: ["短的", "长的", "5句话的", "一页的", "简短的", "快速的"], emoji: "📏" },
|
||||
{ id: "type", hint: "什么类型?(故事、列表、解释)", answers: ["故事", "列表", "解释", "诗", "歌", "指南"], emoji: "📝" },
|
||||
{ id: "topic", hint: "关于什么?(太空、动物、运动)", answers: ["太空", "动物", "运动", "恐龙", "机器人", "魔法", "自然", "科学"], emoji: "🎯" },
|
||||
{ id: "audience", hint: "给谁?(小朋友、初学者)", answers: ["小朋友", "初学者", "我的老师", "我的朋友", "我的家人", "学生"], emoji: "👥" }
|
||||
]}
|
||||
successMessage="你添加了所有重要的细节!干得好!"
|
||||
/>
|
||||
|
||||
## 清晰的黄金法则
|
||||
|
||||
<Panel character="promi" mood="excited">
|
||||
这是我关于表达清晰的最佳建议:
|
||||
</Panel>
|
||||
|
||||
写提示词时记住这三个问题:
|
||||
|
||||
1. 我**想要什么**?(故事、帮助、信息)
|
||||
2. 应该**怎样**?(短的、有趣的、简单的)
|
||||
3. **给谁**?(我、我的朋友、我的班级)
|
||||
|
||||
<PromptVsMistake
|
||||
question="最终挑战!哪个使用了全部三个规则?"
|
||||
good="写一个关于披萨的简短有趣的笑话,我可以在午餐时讲给朋友听"
|
||||
bad="做一些有趣的东西"
|
||||
explanation="好的提示词有:什么(关于披萨的笑话)、怎样(简短有趣)、给谁(午餐时讲给朋友)!"
|
||||
promiMessage="你是清晰表达冠军!🏆"
|
||||
/>
|
||||
|
||||
## 世界1完成!🎊
|
||||
|
||||
<Panel character="promi" mood="celebrating">
|
||||
哇!你完成了整个世界1!你学到了:
|
||||
|
||||
- ✅ 什么是AI和提示词
|
||||
- ✅ 如何写你的第一个提示词
|
||||
- ✅ 为什么表达清晰超级重要
|
||||
|
||||
你准备好迎接新的冒险了!
|
||||
</Panel>
|
||||
|
||||
<LevelComplete
|
||||
levelSlug="1-3-being-clear"
|
||||
stars={3}
|
||||
message="你掌握了表达清晰的艺术!世界1完成!"
|
||||
/>
|
||||
102
src/lib/kids/levels.ts
Normal file
102
src/lib/kids/levels.ts
Normal file
@@ -0,0 +1,102 @@
|
||||
export interface Level {
|
||||
slug: string;
|
||||
title: string;
|
||||
titleKey: string; // i18n key
|
||||
description: string;
|
||||
descriptionKey: string; // i18n key
|
||||
world: number;
|
||||
levelNumber: number;
|
||||
concepts: string[];
|
||||
}
|
||||
|
||||
export interface World {
|
||||
number: number;
|
||||
title: string;
|
||||
titleKey: string; // i18n key
|
||||
slug: string;
|
||||
emoji: string;
|
||||
color: string; // Tailwind color class
|
||||
levels: Level[];
|
||||
}
|
||||
|
||||
export const worlds: World[] = [
|
||||
{
|
||||
number: 1,
|
||||
title: "Starter Village",
|
||||
titleKey: "kids.worlds.1.title",
|
||||
slug: "starter-village",
|
||||
emoji: "🏠",
|
||||
color: "emerald",
|
||||
levels: [
|
||||
{
|
||||
slug: "1-1-meet-promi",
|
||||
title: "Meet Promi!",
|
||||
titleKey: "kids.levels.1_1_meet_promi.title",
|
||||
description: "Say hello to your robot friend and learn what AI is",
|
||||
descriptionKey: "kids.levels.1_1_meet_promi.description",
|
||||
world: 1,
|
||||
levelNumber: 1,
|
||||
concepts: ["what-is-ai", "introduction"],
|
||||
},
|
||||
{
|
||||
slug: "1-2-first-words",
|
||||
title: "Promi's First Words",
|
||||
titleKey: "kids.levels.1_2_first_words.title",
|
||||
description: "Help Promi understand by writing your first prompt",
|
||||
descriptionKey: "kids.levels.1_2_first_words.description",
|
||||
world: 1,
|
||||
levelNumber: 2,
|
||||
concepts: ["first-prompt", "basics"],
|
||||
},
|
||||
{
|
||||
slug: "1-3-being-clear",
|
||||
title: "Being Clear",
|
||||
titleKey: "kids.levels.1_3_being_clear.title",
|
||||
description: "Learn why clear instructions work better than vague ones",
|
||||
descriptionKey: "kids.levels.1_3_being_clear.description",
|
||||
world: 1,
|
||||
levelNumber: 3,
|
||||
concepts: ["clarity", "good-vs-bad"],
|
||||
},
|
||||
],
|
||||
},
|
||||
// Future worlds (post-MVP)
|
||||
// {
|
||||
// number: 2,
|
||||
// title: "Clarity Castle",
|
||||
// titleKey: "kids.worlds.2.title",
|
||||
// slug: "clarity-castle",
|
||||
// emoji: "🏰",
|
||||
// color: "blue",
|
||||
// levels: [],
|
||||
// },
|
||||
];
|
||||
|
||||
export function getAllLevels(): Level[] {
|
||||
return worlds.flatMap((world) => world.levels);
|
||||
}
|
||||
|
||||
export function getLevelBySlug(slug: string): Level | undefined {
|
||||
return getAllLevels().find((level) => level.slug === slug);
|
||||
}
|
||||
|
||||
export function getWorldByNumber(worldNumber: number): World | undefined {
|
||||
return worlds.find((world) => world.number === worldNumber);
|
||||
}
|
||||
|
||||
export function getAdjacentLevels(slug: string): { prev?: Level; next?: Level } {
|
||||
const levels = getAllLevels();
|
||||
const index = levels.findIndex((level) => level.slug === slug);
|
||||
return {
|
||||
prev: index > 0 ? levels[index - 1] : undefined,
|
||||
next: index < levels.length - 1 ? levels[index + 1] : undefined,
|
||||
};
|
||||
}
|
||||
|
||||
export function getLevelIndex(slug: string): number {
|
||||
return getAllLevels().findIndex((level) => level.slug === slug);
|
||||
}
|
||||
|
||||
export function getTotalLevels(): number {
|
||||
return getAllLevels().length;
|
||||
}
|
||||
103
src/lib/kids/progress.ts
Normal file
103
src/lib/kids/progress.ts
Normal file
@@ -0,0 +1,103 @@
|
||||
"use client";
|
||||
|
||||
import { getAllLevels } from "./levels";
|
||||
|
||||
const STORAGE_KEY = "kids-progress";
|
||||
|
||||
export interface LevelProgress {
|
||||
completed: boolean;
|
||||
stars: number; // 0-3
|
||||
completedAt?: string;
|
||||
}
|
||||
|
||||
export interface KidsProgress {
|
||||
levels: Record<string, LevelProgress>;
|
||||
currentLevel?: string;
|
||||
totalStars: number;
|
||||
}
|
||||
|
||||
const defaultProgress: KidsProgress = {
|
||||
levels: {},
|
||||
totalStars: 0,
|
||||
};
|
||||
|
||||
export function getProgress(): KidsProgress {
|
||||
if (typeof window === "undefined") return defaultProgress;
|
||||
|
||||
try {
|
||||
const stored = localStorage.getItem(STORAGE_KEY);
|
||||
if (!stored) return defaultProgress;
|
||||
return JSON.parse(stored) as KidsProgress;
|
||||
} catch {
|
||||
return defaultProgress;
|
||||
}
|
||||
}
|
||||
|
||||
export function saveProgress(progress: KidsProgress): void {
|
||||
if (typeof window === "undefined") return;
|
||||
|
||||
try {
|
||||
localStorage.setItem(STORAGE_KEY, JSON.stringify(progress));
|
||||
} catch {
|
||||
console.error("Failed to save progress");
|
||||
}
|
||||
}
|
||||
|
||||
export function completeLevel(slug: string, stars: number): KidsProgress {
|
||||
const progress = getProgress();
|
||||
const previousStars = progress.levels[slug]?.stars || 0;
|
||||
|
||||
// Only update if new stars are higher
|
||||
const newStars = Math.max(previousStars, Math.min(3, Math.max(0, stars)));
|
||||
const starsDiff = newStars - previousStars;
|
||||
|
||||
progress.levels[slug] = {
|
||||
completed: true,
|
||||
stars: newStars,
|
||||
completedAt: new Date().toISOString(),
|
||||
};
|
||||
|
||||
progress.totalStars += starsDiff;
|
||||
|
||||
// Set next level as current
|
||||
const levels = getAllLevels();
|
||||
const currentIndex = levels.findIndex((l) => l.slug === slug);
|
||||
if (currentIndex < levels.length - 1) {
|
||||
progress.currentLevel = levels[currentIndex + 1].slug;
|
||||
}
|
||||
|
||||
saveProgress(progress);
|
||||
return progress;
|
||||
}
|
||||
|
||||
export function isLevelUnlocked(slug: string): boolean {
|
||||
const progress = getProgress();
|
||||
const levels = getAllLevels();
|
||||
const levelIndex = levels.findIndex((l) => l.slug === slug);
|
||||
|
||||
// First level is always unlocked
|
||||
if (levelIndex === 0) return true;
|
||||
|
||||
// Level is unlocked if previous level is completed
|
||||
const prevLevel = levels[levelIndex - 1];
|
||||
return progress.levels[prevLevel.slug]?.completed || false;
|
||||
}
|
||||
|
||||
export function getLevelProgress(slug: string): LevelProgress | undefined {
|
||||
const progress = getProgress();
|
||||
return progress.levels[slug];
|
||||
}
|
||||
|
||||
export function resetProgress(): void {
|
||||
if (typeof window === "undefined") return;
|
||||
localStorage.removeItem(STORAGE_KEY);
|
||||
}
|
||||
|
||||
export function getCompletedLevelsCount(): number {
|
||||
const progress = getProgress();
|
||||
return Object.values(progress.levels).filter((l) => l.completed).length;
|
||||
}
|
||||
|
||||
export function getTotalStars(): number {
|
||||
return getProgress().totalStars;
|
||||
}
|
||||
Reference in New Issue
Block a user