Learn French naturally through real-life situations and vocabulary practice. This plugin transforms language learning into an engaging quiz game where you master practical conversations and essential vocabulary—complete with text-to-speech, detailed explanations, thumbnail management, and fully customizable content. A live demo is available at https://quiz.siteweb87.com. You can experience all three game modes, listen to the text-to-speech, and see how situations and vocabulary sets are structured.
SW87 Language Quiz Updated: Now with Save & Resume, Thumbnails, and More!
Save & Resume, Thumbnails, Click-to-Start, and More
🆕 What’s New in This Update:
• 💾 Save & Resume Game Progress – Save anytime, resume later. Auto-saves after each question.
• 🖼️ Thumbnail Management System – Add visual thumbnails to cards with tag-style overlays.
• 👆 Click-to-Start Cards – One-click start with play overlay and “Click to start” hints.
• 📋 Notice Settings – Customizable disclaimer message with enable/disable toggle.
• 🖼️ Full-Width Header Banners – Thumbnails appear as banners on menu, registration, and more.
• 🎯 Improved User Experience – Better navigation, responsive design, and accessibility.
For a long time, I’ve felt that the best way to learn a language is not by memorizing rules, but by experiencing it in context. I wanted a tool that let me learn French by navigating the same situations I might encounter in real life—whether ordering a croissant, asking for directions, or visiting a pharmacy. That’s why I built SW87 Language Quiz: a plugin designed to teach practical French through complete, immersive scenarios and focused vocabulary practice.
The Core Idea
Each “situation” in the plugin is a self-contained story, made up of 10 progressively difficult questions. Each “vocabulary set” focuses on specific themes like colors, food, or transportation. You don’t just learn words; you learn how to have full conversations and build essential vocabulary in context. The plugin includes ready-made situations like “At the Bakery,” “Booking a Hotel Room,” or “Police Alcohol Check,” plus **over 18 vocabulary sets** for translation practice—each crafted to reflect real cultural and linguistic nuances.
Three Ways to Learn
Depending on your mood or goal, you can switch between:
- Game Mode: A timed challenge where you answer questions under pressure, earn points based on difficulty (1–10 per question), and can qualify for the Hall of Fame if you perform well.
- Practice Mode: A relaxed, untimed environment where you select specific situations to master. Every wrong answer comes with a detailed explanation of the error, and your accuracy is tracked per situation so you can see your progress over time.
- Vocabulary Mode: A focused translation practice where you learn vocabulary through phrase translation. You translate English phrases to French with multiple-choice options, track progress per vocabulary set, and get explanations for incorrect translations.
Key Features in Detail
- Situation-Based Structure: Each situation file contains exactly 10 questions, with difficulties ranging from 1 to 10. Questions flow naturally, building a complete narrative.
- Vocabulary Practice: Vocabulary sets contain phrases for translation practice, helping you build essential vocabulary and master grammar rules like gender agreement and word order.
- Text-to-Speech with Gender Toggle: Hear the correct French pronunciation read aloud. You can switch between male and female voices, and the plugin remembers your preference.
- Explanation-Driven Feedback: If you choose a wrong answer, the plugin explains exactly what went wrong—grammar, vocabulary, register, or cultural appropriateness—so you learn from mistakes.
- Category Filtering (Practice & Vocabulary Modes): Situations and vocabulary sets can be tagged with categories like Travel, Food, Health, etc. You can filter by category to focus on what you want to learn.
- Full Customization for Admins: You can create your own situation and vocabulary files using simple text-based formats. The admin interface includes validation to ensure correct answers are perfect French and wrong answers contain real, explainable errors.
- Visual Customization: Through the Color Settings panel, you can change the look of almost every element—buttons, backgrounds, progress bars, timer colors—to match your site’s branding.
- Player Progress & Hall of Fame: Players register with an email and 4-digit PIN. Their practice and vocabulary scores are saved, and Game Mode high scores can be saved to a public Hall of Fame with intelligent tie-breaking (fewer questions answered ranks higher).
What’s New – Save & Resume Game Progress
The latest version introduces a powerful Save & Resume system that lets players save their progress at any time and continue later:
- Save Button: During gameplay, click the “💾 Save” button next to the PASS button to save your current progress.
- Tooltip: Hover over the button to see “Save and resume later” for guidance.
- Auto-Save: The game automatically saves after each question as a backup, so your progress is never lost.
- Resume Button: After logging in, a “Resume Game” button appears on the mode selection screen showing your mode, progress, score, and when it was saved.
- Works in All Modes: Save and resume in Game Mode, Practice Mode, or Vocabulary Mode.
- One Saved Game: Each player can have one saved game at a time (new saves overwrite old ones).
- Automatic Cleanup: Saved games are automatically deleted after resuming or completing the game.
What’s New – Thumbnail Management System
The plugin now includes a complete thumbnail management system to add visual appeal:
- Visual Thumbnails: Add images to situation cards, vocabulary set cards, and mode selection cards.
- Tag-Style Overlay Content: Thumbnails on question screens show color-coded tags for Score (blue), Question/Phrase count (green), Title (purple), and Difficulty (yellow).
- Default Fallback: If no specific thumbnail exists, the system uses a default image.
- Global Toggle: Enable or disable thumbnails globally via the admin.
- Supported Formats: JPG, JPEG, PNG, GIF, WebP, SVG.
- Admin Gallery: Upload and manage thumbnails through a dedicated admin interface.
What’s New – Notice Settings (Disclaimer)
A new admin submenu allows you to customize the experimental notice displayed to visitors:
- Customizable Message: Change the disclaimer text that appears to visitors.
- Enable/Disable: Toggle the notice on or off.
- Dismiss Duration: Configure how long the notice stays hidden after dismissal (1-720 hours).
- Live Preview: See how the notice will appear before saving.
- French Flag Icon: The notice displays a French flag icon for a welcoming appearance.
What’s New – Click-to-Start Cards
The selection screens now feature clickable cards with visual feedback:
- One-Click Start: Click any card to immediately start the game or practice.
- Play Overlay: Hover over a card to see a play icon with “Click to start” text.
- Permanent Hint: Each card shows a “👆 Click to start” hint at the bottom.
- Keyboard Accessibility: Use Enter or Space keys to start.
- No Scrolling: Start directly from the selection screen without scrolling to a button.
What’s New – Full-Width Header Banners
Thumbnails now appear as full-width header banners on key screens:
- Main Menu: Full-width banner with title overlay.
- Registration Form: Full-width banner with title overlay.
- PIN Verification Form: Full-width banner with title overlay.
- Hall of Fame: Full-width banner with title overlay.
- How to Play: Full-width banner with title overlay.
How It Works – A Closer Look
- Registration & PIN: Players enter an email and choose a 4-digit PIN. Returning players just enter both to resume progress.
- Choose Mode: Game Mode (timed, random situations), Practice Mode (untimed, choose specific situations), or Vocabulary Mode (translation practice, choose vocabulary sets).
- Play Through Content: Answer 10 multiple-choice questions or translate phrases. In Game Mode, a timer counts down; in Practice and Vocabulary Modes, you can take your time.
- Instant Feedback: After each question, see if you were correct, hear the right answer spoken, and read explanations for any errors.
- Track Mastery: In Practice and Vocabulary Modes, each situation or vocabulary set shows your accuracy percentage and a visual progress bar (Not Attempted → Keep Trying → Needs Practice → Good → Excellent → Mastered).
- Save & Resume: Click the “💾 Save” button during gameplay to save your progress. Resume later from the mode selection screen.
For Content Creators & Site Admins
The admin panel is built to make content creation straightforward and error-free:
- Situation File Format: A clean, YAML-like text format defines the situation name, categories, and 10 questions. Each question includes the prompt, answer options (2–6), correct answer letter, difficulty (1–10), and explanations for wrong answers.
- Vocabulary File Format: Similar format for vocabulary sets, with English phrases to translate, French answer options, correct translations, and explanations for incorrect choices.
- Validation & Quality Control: The plugin validates every situation and vocabulary file, ensuring correct structure, proper French, and meaningful explanations for errors.
- Upload & Management: You can create situations and vocabulary sets directly in the admin form or upload .txt files. All content is listed in tables with validation status, categories, and quick-edit options.
- Hall of Fame Management: View entries, delete if needed, and export to CSV with filters for date range and game mode.
- Color Customization Panel: A dedicated settings page with color pickers lets you customize the plugin’s appearance without touching CSS.
- Thumbnail Management: Upload and manage thumbnails through a dedicated admin tab with gallery view.
- Notice Settings: Customize the experimental notice message with enable/disable toggle and dismiss duration.
Example Content Included
The plugin comes with ready-to-use situation files and vocabulary sets that cover everyday and practical scenarios:
Situations:
- Asking for Directions – How to politely ask where places are.
- At the Bakery – Ordering pastries, asking about prices, and requesting receipts.
- At the Hospital Emergency Room – Explaining symptoms and understanding medical questions.
- At the Pharmacy – Asking for medication and making appointments.
- Booking a Hotel Room – Inquiring about availability, amenities, and check-in times.
- Calling for a Dental Appointment – Scheduling and describing dental issues.
- Going to the Post Office – Mailing packages, buying stamps, and asking about delivery.
- Greetings and Introductions – Formal and informal greetings in professional settings.
- Police Alcohol Check – Understanding and responding during a roadside check.
Vocabulary Sets (18+ available, including):
- Basic Colors – Learn color names with proper gender agreement.
- Food Items – Common food and drink vocabulary.
- Transportation – Travel and transportation vocabulary.
Technical Highlights
- Modular CSS: Styles are split into separate files for different components for maintainability and performance.
- Responsive & Accessible: Works on all screen sizes, supports keyboard navigation, reduced motion, and high contrast modes.
- Session-Based State: Game progress is preserved across page refreshes using PHP sessions.
- Text-to-Speech Fallbacks: If the browser doesn’t have a French voice, it gracefully falls back to an English voice optimized for French pronunciation.
- Timer with Visual States: The timer shows a color-coded progress bar (green → yellow → red) as time runs out, and pauses when the browser tab is inactive.
- Database-Backed Save System: Saved games are stored in the database, not in browser cookies, so your progress is safe even if you clear your browser data.
Who It’s For
- Language Learners: Anyone who wants to learn French in a practical, engaging way, whether through conversations or vocabulary building.
- Teachers & Tutors: Educators looking to provide interactive, scenario-based exercises and vocabulary practice.
- WordPress Site Owners: Anyone wanting to add an educational, interactive quiz to their site.
- Content Creators: Those interested in building their own language-learning scenarios and vocabulary sets without coding.
- Busy Learners: People with limited time who want to practice in short sessions and resume later.
Try the Demo
A live demo is available at https://quiz.siteweb87.com. You can experience all three game modes, listen to the text-to-speech, save and resume your progress, see the thumbnail system in action, and explore how situations and vocabulary sets are structured.
DEMO NOTICE: This is a just a demonstration version. Be sure to have french TTS language support installed on your device. You can read more about it on the demo website.
Why I Built It
I created this plugin primarily to see if learning through situations and vocabulary practice worked for me. The answer was yes—it made French feel more tangible and usable. Along the way, I realized it could be useful for others too, whether as learners or as creators of their own language content. The plugin is the result of that exploration: a tool that’s both personal and shareable.
If you’ve ever wanted to learn French not just as a subject, but as a living tool for real situations and practical vocabulary, this plugin is designed for you. And if you want to build your own scenarios and vocabulary sets—for French or potentially other languages—the system is ready and waiting.
