Skip to content

mtecnic/koding

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

1 Commit
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

๐ŸŽฎ CodeQuest - Learn Python by Building Games!

An interactive, gamified learning platform designed for kids (ages 9+) to learn Python programming by creating fun games!

โœจ Features

  • ๐ŸŽจ Visual & Interactive: Beautiful, colorful interface designed for kids
  • ๐Ÿ“ฑ Mobile-Friendly: Optimized for iPad and tablets with on-screen keyboard support
  • ๐Ÿงฉ Block-Based & Text Editor: Switch between drag-and-drop blocks and text coding
  • ๐Ÿ Real Python Execution: Uses Pyodide to run actual Python code in the browser
  • ๐ŸŽฎ Build Real Games: Create interactive games with graphics and animations
  • ๐Ÿ† Gamification: Level up, earn XP, unlock achievements
  • ๐Ÿ“š 3 Complete Courses:
    • Starter Quest (Easy): 10 quests - few days
    • Hero's Journey (Medium): 20 quests - few weeks
    • Master Creator (Hard): 30 quests - few months
  • ๐Ÿ’พ Progress Tracking: Automatic save using localStorage
  • ๐ŸŽจ Canvas Graphics: Draw shapes, create animations, build games
  • ๐Ÿข Turtle Graphics: Logo-style turtle programming for kids

๐Ÿš€ Deployment to Bluehost

Step 1: Upload Files

  1. Log in to your Bluehost cPanel
  2. Navigate to File Manager
  3. Go to public_html (or your desired directory)
  4. Upload all files from this project:
    • index.html
    • css/ folder
    • js/ folder
    • assets/ folder (if you add images/sounds)

Step 2: Test on iPad

  1. Open Safari or Chrome on your iPad
  2. Navigate to your domain: https://yourdomain.com
  3. Test touch interactions, keyboard support, and code execution

Step 3: Optimize (Optional)

For better performance on Bluehost:

  1. Enable Gzip Compression in cPanel
  2. Enable Browser Caching via .htaccess:
# Add to .htaccess
<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType text/css "access plus 1 month"
    ExpiresByType text/javascript "access plus 1 month"
    ExpiresByType application/javascript "access plus 1 month"
</IfModule>
  1. Use HTTPS: Ensure SSL certificate is active (free with Bluehost)

๐Ÿ“ฑ iPad/Mobile Support

Features for Touch Devices:

  • โœ… Large touch-friendly buttons
  • โœ… Responsive layout adapts to screen size
  • โœ… Space reserved for on-screen keyboard
  • โœ… Touch-optimized code editor (CodeMirror)
  • โœ… Drag-and-drop code blocks with touch support
  • โœ… Prevents accidental zoom and double-tap
  • โœ… Auto-scroll when keyboard appears

Recommended Settings:

  • Use in landscape mode for best experience
  • Chrome or Safari browsers
  • Minimum screen size: iPad or similar (768px+)

๐ŸŽฏ How It Works

For Kids:

  1. Choose an Avatar - Pick a fun character
  2. Select a Course - Start with Starter Quest
  3. Complete Quests - Follow step-by-step instructions
  4. Write Code - Use text editor or block builder
  5. Run & See Results - Execute code and see games come to life
  6. Level Up - Earn XP, unlock achievements

For Parents/Teachers:

  • Self-Paced Learning: Kids progress at their own speed
  • Visual Feedback: Immediate results from code
  • Safe Environment: Sandboxed Python execution
  • No Installation: Runs entirely in browser
  • Progress Tracking: See what they've completed
  • Structured Curriculum: Well-designed learning path

๐Ÿ› ๏ธ Technology Stack

  • Frontend: HTML5, CSS3, Vanilla JavaScript
  • Python Engine: Pyodide (CPython compiled to WebAssembly)
  • Code Editor: CodeMirror with Python syntax highlighting
  • Canvas API: For graphics and game rendering
  • LocalStorage: For saving progress
  • No Backend Required: Everything runs client-side!

๐Ÿ“š Course Structure

๐ŸŒฑ Starter Quest (Easy - 10 Quests)

  1. Your First Code - Draw a circle
  2. Hello, World - Print messages
  3. Rainbow Rectangles - Multiple shapes
  4. Magic Numbers - Variables
  5. Math Magic - Calculations
  6. Repeat the Magic - Loops
  7. Turtle Power - Turtle graphics
  8. Color Designer - Lists and colors
  9. Make Decisions - If statements
  10. Your First Game - Random art generator

๐ŸŽฏ Hero's Journey (Medium - 20 Quests)

  • Advanced loops and patterns
  • Lists and data structures
  • More complex games
  • User interaction
  • Animations
  • And more!

๐Ÿ† Master Creator (Hard - 30 Quests)

  • Functions and modularity
  • Object-oriented programming
  • Advanced game mechanics
  • Physics simulations
  • AI and algorithms
  • Complete game projects

๐ŸŽจ Customization

Want to add your own quests? Edit js/courses.js:

{
    id: 'custom_1',
    title: '๐ŸŽจ My Custom Quest',
    description: 'Learn something awesome!',
    xp: 100,
    instructions: `<h4>Instructions here</h4>`,
    starterCode: `# Your starter code`,
    hints: ['Helpful hints'],
    validation: (code, output) => {
        // Return true if quest complete
        return code.includes('something');
    },
    successMessage: 'Great job!'
}

๐Ÿ› Troubleshooting

Python Not Loading

  • Check internet connection (Pyodide loads from CDN)
  • Clear browser cache and reload

Code Not Running

  • Check browser console for errors (F12)
  • Ensure code has no syntax errors
  • Try the block builder if text editor has issues

Progress Not Saving

  • Check if localStorage is enabled in browser
  • Try using a different browser
  • Clear storage and start fresh if corrupted

iPad Issues

  • Update to latest iOS version
  • Use Safari or Chrome (not Firefox)
  • Ensure JavaScript is enabled

๐Ÿ”’ Privacy & Safety

  • No Data Collection: All data stays on device
  • No External API Calls: Everything runs locally
  • No User Accounts: Anonymous usage
  • Safe Code Execution: Sandboxed Python environment
  • Kid-Safe Content: Age-appropriate language and themes

๐Ÿ“„ License

This project is created for educational purposes. Feel free to use and modify for your needs!

๐Ÿ™ Credits

  • Pyodide Team: Browser-based Python
  • CodeMirror: Code editor component
  • Your Daughters: The inspiration! ๐ŸŒŸ

๐Ÿ’ก Tips for Success

  • Start with Easy: Don't skip to harder quests
  • Experiment: Try changing numbers and colors
  • Read Instructions: Each quest teaches something new
  • Use Hints: No shame in getting help
  • Have Fun: Coding should be enjoyable!

๐Ÿš€ Future Enhancements

Potential additions:

  • More courses and quests
  • Multiplayer challenges
  • Share creations with friends
  • Export games as standalone files
  • More game templates
  • Sound effects and music
  • Leaderboards
  • Parent/teacher dashboard

Made with โค๏ธ for aspiring young coders!

Happy Coding! ๐ŸŽฎโœจ

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors