🎮 Interactive Code Playground Demo

Welcome to the interactive code playground! This page demonstrates all three components you can use in your courses.

---

1. 📝 CodePlayground - Live Code Execution

Try writing and running JavaScript code directly in your browser:

Try JavaScript

JavaScript

✓ Auto-saved

// Welcome! Try this example function greet(name) { return `Hello, ${name}! 👋`; } console.log(greet("Developer")); // Now try your own code: const numbers = [1, 2, 3, 4, 5]; const doubled = numbers.map(n => n * 2); console.log("Doubled:", doubled);

Run CodeResetShareDownload

💡 Tip: Press Ctrl+Enter to run codeLines: 12 | Characters: 252

Features You Can Try:

• ✏️ Edit the code and click “Run Code”
• 💾 Your changes are auto-saved
• 📋 Copy code to clipboard
• ⬇️ Download as a file
• 🔗 Share your code via URL

---

2. 🎯 CodeChallenge - Interactive Coding Challenges

Test your skills with this FizzBuzz challenge:

FizzBuzz Challenge

EASY

Write a function that returns 'Fizz' for multiples of 3, 'Buzz' for multiples of 5, and 'FizzBuzz' for multiples of both.

function fizzBuzz(n) { // Your code here }

Run TestsHint (1/3)Show SolutionReset

💡 Write a function that passes all test cases5 test cases

Challenge Features:

• ✅ Automatic test case validation
• 💡 Progressive hints (unlock one at a time)
• 👀 View solution when stuck
• 📊 Score tracking
• 💾 Auto-save your progress

---

3. 🔧 Advanced Challenge - Array Manipulation

Ready for something harder? Try this array challenge:

Find Duplicates in Array

MEDIUM

Write a function that finds all duplicate values in an array and returns them in a new array (no duplicates in result).

function findDuplicates(arr) { // Your code here }

Run TestsHint (1/4)Show SolutionReset

💡 Write a function that passes all test cases4 test cases

---

4. 🏖️ CodeSandbox - Full Project Environments

React Todo App Sandbox

Explore a complete React project running in the browser:

React Todo App

CodeSandbox

Open in CodeSandbox

💡 Edit the code directly in the sandbox

Full Screen

Note: Replace sandboxId with your actual CodeSandbox ID

Features:

• 🎨 Full IDE experience in browser
• 📦 Install npm packages
• 🔄 Live preview
• 🌓 Dark/light theme
• 📱 Responsive preview

---

5. ⚡ StackBlitz Integration

Try this Vite + React starter:

Vite + React Starter

StackBlitz

Open in StackBlitz

💡 Edit the code directly in the sandbox

Full Screen

Note: Replace stackblitzId with your actual StackBlitz project ID

---

6. 💻 TypeScript Playground

TypeScript Example

TypeScript

✓ Auto-saved

// TypeScript with type checking interface User { name: string; age: number; email?: string; } function createUser(name: string, age: number): User { return { name, age }; } const user = createUser("John", 30); console.log(user); // Try adding email: const userWithEmail = { ...user, email: "john@example.com" }; console.log(userWithEmail);

Run CodeResetShareDownload

💡 Tip: Press Ctrl+Enter to run codeLines: 18 | Characters: 344

---

7. 🐍 Python Code Display

Python Example (Display Only)

Python

✓ Auto-saved

# Python code (visual display only) def fibonacci(n): """Generate fibonacci sequence up to n terms""" fib = [0, 1] for i in range(2, n): fib.append(fib[i-1] + fib[i-2]) return fib # Print first 10 fibonacci numbers print(fibonacci(10)) # List comprehension example squares = [x**2 for x in range(1, 11)] print(f"Squares: {squares}")

Run CodeResetShareDownload

💡 Tip: Press Ctrl+Enter to run codeLines: 15 | Characters: 349

Note: Python execution requires backend support. This shows syntax highlighting and editing.

---

8. ☕ Java Code Display

Java Example (Display Only)

Java

✓ Auto-saved

// Java code example public class HelloWorld { public static void main(String[] args) { // Array example int[] numbers = {1, 2, 3, 4, 5}; // Enhanced for loop System.out.println("Numbers:"); for (int num : numbers) { System.out.println(num); } // Stream API example int sum = Arrays.stream(numbers) .sum(); System.out.println("Sum: " + sum); } }

Run CodeResetShareDownload

💡 Tip: Press Ctrl+Enter to run codeLines: 19 | Characters: 449

---

🎓 How to Use in Your Courses

For Simple Code Examples:

<CodePlayground
  language="javascript"
  title="Your Title"
  initialCode={`console.log("Hello!");`}
  client:load
/>

For Coding Challenges:

<CodeChallenge
  title="Challenge Title"
  difficulty="easy"
  initialCode={`function solve() { }`}
  testCases={[
    { input: 5, expected: 25 }
  ]}
  solution={`function solve(n) { return n * n; }`}
  hints={["Think about multiplication"]}
  client:load
/>

For Full Projects:

<CodeSandbox
  sandboxId="your-sandbox-id"
  title="Project Title"
  client:load
/>

---

🚀 Next Steps

1. Practice: Try solving the challenges above
2. Experiment: Modify the code examples
3. Create: Use these components in your own courses
4. Share: Share your solutions with friends

Happy coding! 🎉

---

📚 Learn More

• Code Playground Guide
• Quick Start Guide
• Video Integration Demo