Type anything and click Speak to hear the computer read it out loud!
Ready! Type something and click Speak. π€
π Section 2: Try Different Languages
Here is the same sentence in 4 languages. Click Load & Speak to hear each one!
π‘ Try this: Change the text in any box to your own sentence, then click Load & Speak to hear it!
βοΈ Section 3: How to Write a Good Prompt
A prompt is the instruction you give to AI. A better prompt = a better answer! The secret recipe is:
WHAT to make + WHO it is for + HOW it should sound + HOW LONG
What you want
Weak prompt β
Strong prompt β
π Story
"Write about dogs."
"Write a funny 5-sentence story about a dog who goes to school, for 5th graders."
β Quiz
"Make a quiz."
"Write 3 multiple-choice questions about planets for 5th graders. Include correct answers."
π¨ Picture
"Draw a robot."
"Create a colorful picture of a friendly robot reading a book in a school library."
π΅ Lyrics
"Write a song."
"Write 4 short fun lines for a song about learning with AI. Make it easy to sing and positive."
π― Practice: Can you improve this weak prompt?
π οΈ Section 4: Build Your Own Prompt
Fill in the boxes and click Build My Prompt to create a strong AI prompt!
Your prompt will appear here...
π‘ Next step: Copy your prompt and paste it into ChatGPT, Gemini, or another AI tool to see what it creates!
π΅ Section 5: Music Lab β Play with Sound!
No music app needed! We use the browser's built-in sound engine. Below are the notes from Happy Birthday to You π. Press them, change the speed and style, and create your own version!
1.0x
0.6
Press a note or click Play to start! π΅
π‘ Try this: Change the Style to "Electric" and play the melody again. Does it sound like a different instrument? Try changing the speed slider to make it faster or slower!
π¨ Section 6: Drawing Lab β Design Your Lion!
Use the sliders and buttons below to change how the lion looks. This is how AI image tools work β you give instructions and the picture changes!
100
Happy
35
π‘ Think about it: When you use an AI image tool like DALL-E or Midjourney, you type words to describe what you want. Here you use sliders β but the idea is the same! You are giving the AI instructions to change the picture.
π Section 7: Your Challenges
Try these challenges in order. Each one is a little harder! Find the code hint to know exactly where to make the change.
EasyChange your name in the header.
Find line 1 at the top of the code and change "Alex" to your name.
var myName = "Alex"; // π change this!
EasyChange the header color.
Find line 2 and try a new color code. Some ideas: #9b59b6 (purple), #27ae60 (green), #2980b9 (blue).
var favoriteColor = "#e67e00"; // π try #9b59b6
EasyChange the page background color.
Find line 3 and change the background to your favorite color.
var bgColor = "#fff8f0"; // π try #e8f5e9 for green!
EasyChange the greeting message.
Find line 5 and write your own greeting.
var greeting = "Let's explore AI together!"; // π change this!
MediumAdd a 5th language to the translations section.
Find the translation grid in Section 2 and add a new language card. Try French: Bonjour! Bienvenue au club IA! with language code fr-FR.
// In the loadLang() function, add:
} else if (lang === 'french') {
id: "frenchText", code: "fr-FR"
}
MediumChange the Happy Birthday melody notes.
Find the believerNotes array in the music section and change some frequency numbers. Higher numbers = higher pitch!
var believerNotes = [261, 261, 294, 261, 349, 330, ...];
// Try changing 261 to 300 β what happens?
MediumMake the lion always start as a Robot Lion.
Find the lion style select element and change the default selected option.
HardAdd a new note button to the music section.
Find the noteColors array and add a new note with a frequency and color. Try adding note { name: "A5", freq: 880, color: "#e74c3c" }.
HardAdd a "Surprised" mood to the lion.
Find the drawLion() function and add a new condition for when mood is exactly 0 to draw a surprised face (open circle mouth).
// In drawLion(), find the mouth drawing code:
if (mood > 3) { /* happy */ }
else if (mood < -3) { /* sad */ }
else { /* surprised β draw a circle! */ }
HardBOSS CHALLENGE: Add a new drawing style called "Rainbow Lion".
Add a new option to the style dropdown and handle it in the drawLion() function to draw the mane in rainbow colors.
// Then in drawLion(), add:
if (style === "rainbow") { /* draw rainbow mane */ }
π¦ Lion AI says: The best coders break things and fix them. You can always refresh the page to start over β nothing is permanent!