Teaching Tools
on Demand
Creating custom applications with AI — no programming required
About Us
Quick Round of Introductions
- Who are you and what do you teach?
- Why are you here today?
- What do you hope to be able to do after this workshop?
How This Workshop Works
- Questions are encouraged — interrupt me anytime
- This is a conversation, not a lecture — let's learn from each other
- We'll build real tools together, hands-on
- There are no stupid questions — if you're thinking it, someone else is too
What is Vibe Coding?
Describe what you want in plain language — get working tools in return.
- No programming knowledge needed
- You bring the ideas, AI handles the technical side
- Quiz generators, visualizations, calculators — anything you need
Before: technical skills
were the bottleneck.
Now: creativity is the
only limiting factor.
The AI Landscape
AI Models
Tools & Interfaces
No single "best" combo — they're all capable and improving rapidly.
Our Approach Today
We'll use AI directly in the browser — free, no installation needed.
Open Claude.ai, ChatGPT, or Gemini — all free
Describe what you want in plain language
Copy the code AI gives you
Save as an .html file
Open in your browser — done!
Before We Start
A few things that will make your life easier
The Right Mindset
- You're not learning to code — you're learning to communicate with AI
- Think of it like briefing a very fast, very literal assistant
- It won't be perfect the first time — that's expected, not failure
- The AI doesn't judge you — ask "dumb" questions, rephrase, try again
- Repeat yourself: saying the same thing in different ways makes your intent clearer — works with AI and humans alike
- You don't need to read code yet — focus on whether the result works. Over time, understanding the general flow of your application is valuable
How Code Files Work
- AI generates code as text files —
.html,.js,.css, etc. - Simple tools can be a single
.htmlfile — just double-click to open - More complex tools may have multiple files — keep them in the same folder
- Save code with a plain text editor (TextEdit, Notepad) — never Word or Google Docs
We'll ask the AI to keep things in a single HTML file when possible — but don't worry if it gives you multiple files, just save them all in the same folder.
What Can You Build?
Easy
- Quizzes with scoring & feedback
- Drag-and-drop exercises
- Visual timelines
- Grading calculators
- Vocabulary trainers
Advanced
- Multi-page course websites
- Student submission forms with data export
- Interactive simulations (physics, chemistry)
- Auto-generated worksheets from your content
Today we focus on the left column.
Common Pitfalls
- File saved as .txt? Make sure it ends in
.html - Don't use Word — hidden formatting breaks code
- Changes not showing? Hard refresh:
Cmd+Shift+R - Code looks scary? Ignore it — just save and open
- Chat going off track? Start a new conversation
Live Demo
Let me show you
what's possible…
What We'll Build Today
- Project 1 — Interactive Quiz Generator
- Project 2 — Course Timeline Visualizer
- Your project — Whatever your courses need!
Getting Started
Planning & prompting
Give the AI a Role
Tell the AI who it is — this tunes its responses to your needs.
in building simple, elegant teaching tools for educators.
I'm a biology teacher with no programming experience.
Help me build tools I can use in my classroom.
Now everything the AI produces is framed for your context.
Plan Before You Build
Describe your idea, then ask the AI to ask YOU questions before it starts building.
Before you start building, ask me questions to make sure
you understand exactly what I need.
AI: Great idea! Let me ask a few questions:
- Should this run locally or be hosted online?
- How many questions per quiz?
- Should students see correct answers after?
Effective Prompting
- Be specific: "A quiz with 10 multiple-choice questions" beats "make a quiz"
- Describe the user: "My students are 16-year-olds learning physics"
- Iterate: "Now make the buttons bigger" or "Add a timer"
- Ask for a single HTML file — easiest to save and open
The better you describe what you want, the less back-and-forth you need.*
* To a point — a solid initial description matters, but for bigger projects, iterating in small steps beats trying to specify everything upfront.
Build #1
Quiz Generator
Planning the Quiz Tool
What do we want it to do?
- Paste in course content or questions
- Generate interactive multiple-choice questions
- Show score at the end
- Look clean and professional
- Work as a single HTML file
Let's Build It
Create a single HTML file for an interactive quiz tool. It should:
- Have a clean, modern design
- Include 5 sample multiple-choice questions about [topic]
- Show immediate feedback after each answer
- Display a final score with a summary
- Be mobile-friendly
- Use only HTML, CSS, and JavaScript
Key Skill: Iterating
- Start simple, then refine
- "Make the buttons bigger and add hover effects"
- "Change the color scheme to blue and white"
- "Add a progress bar at the top"
- "Show the correct answer when they get it wrong"
You don't need to get it perfect on the first try — just keep asking for changes.
Build #2
Timeline Visualizer
A More Complex Project
- Input key dates and events from your course
- Generates a visual, interactive timeline
- Historical events, course schedule, project milestones
Focus: what to do when AI doesn't get it right the first time
When AI Gets It Wrong
- Be specific: "The dates are in the wrong order" not "fix it"
- Show what you expected: "I wanted horizontal, not vertical"
- Take a screenshot: AI can read images — screenshot the issue and paste it in the chat
- Raise the stakes: "This is for a graded exam" or "My dean is reviewing this" — this signals the AI to prioritize thoroughness over speed
- Start fresh if needed: Sometimes a new conversation is easier
Build Your Own!
Need Inspiration?
Simple Projects
- Flashcard generator
- Grading rubric calculator
- Class schedule display
More Ambitious
- Student feedback form
- Vocabulary trainer
- Interactive diagram
Or build whatever YOUR courses need — that's the whole point!
Now It's Your Turn
Think about what you need for your course
Start a conversation — plan with the AI first
Build a basic version
Iterate and refine
Test it out!
Upload to upload.teejo.media — login: vibe / vibe-coding-course — save in your name's folder
Your Results
Let's see what you've built!
Participant Projects
Wrap-Up &
Best Practices
Security Considerations
- Never put passwords in your code — if shared or public, they're exposed
- Be careful with student data: Think about where names, grades, or feedback live
- GDPR / privacy: Don't store personal info on a public server without consideration
- Ask AI to review: "Are there security issues with this code?"
- Free AI tools may use your input for training — don't paste sensitive data
Good Practices
- Start local, go online later: Get it working on your computer first
- Keep it simple: A single HTML file beats a complex multi-file app
- Test on multiple devices: Especially if students use phones
- Share with colleagues: Your tools can help others too
- Stay curious: AI keeps improving — check back regularly
Questions?
Let's talk.
Fun Fact
This entire slide deck was
created using AI programming.
Thank you!
Now go build something amazing!