Introduction
As a lifelong learner and language enthusiast, I decided to create an English learning website that would help users practice listening and vocabulary through interactive quizzes. But I wanted to take it a step further—not just by publishing content, but by automating the entire content creation process using modern AI tools and cloud services.
In this article, I’ll walk you through how I built this site using:
- ChatGPT to generate quiz content
- Google Sheets to organize YouTube video links and quiz metadata
- Google Drive for file storage and versioning
- Python to transform AI output into HTML
- WordPress to publish everything beautifully
Why I Wanted to Automate
Manually creating listening quizzes was time-consuming and repetitive. I wanted to:
- Reduce my workload
- Publish quizzes daily
- Focus on improving quality and design
- Eventually build a scalable learning platform
Tools I Used
| Tool | Purpose |
|---|---|
| ChatGPT API | Generate listening quiz questions and vocabulary |
| Python (Colab) | Automate formatting and file output |
| Google Sheets | Manage input data (video titles, links, status) |
| Google Drive | Store raw and converted files |
| WordPress REST API | Post directly to my blog with HTML |
How the Workflow Works
Here’s the big picture:
- Input: I paste YouTube video links into Google Sheets.
- Python script: Reads each row, fetches subtitles, and sends a prompt to ChatGPT.
- ChatGPT: Returns JSON containing:
- Quiz introduction
- Listening questions
- Vocabulary definitions and examples
- Python: Formats it into a beautiful HTML file using a custom template.
- Drive/WordPress: Saves the HTML to Drive, or posts directly via the WordPress API.
I added CSS and JavaScript to support features such as:
- Click-to-flip vocabulary cards
- Speaker buttons for pronunciation
- Instant feedback (correct/incorrect answers)
- Final score display
Design Features 🎨
- Responsive card layout using Flexbox
- Interactive elements for user engagement
- Mobile-friendly layout
- Color-coded feedback for answers
Challenges I Faced ⚠️
- WordPress auto-inserted unwanted <br> tags — solved by using cleaner structure
- ChatGPT occasionally returned malformed JSON — added fallback logic
- Colab required Drive authentication every time — may switch to Google Apps Script
What’s Next 🔄
- Daily scheduled automation with Google Apps Script
- User tracking and data storage using Firebase
- Adding pronunciation and grammar quizzes
- Possibly releasing the system as a template for others
Final Thoughts
Building this project has been one of the most satisfying learning experiences I’ve had. Not only did I enhance my technical skills, but I also created a tool that benefits learners.
If you’re a developer, teacher, or language learner—you can build this too.
Let me know if you’d like to see a full tutorial or clone the code.
Thanks for reading!