DEV Community: Ganga Ponnu

Building a Zero-Scroll, Interactive Classroom Quiz Widget with Targeted Mistake Retakes

Ganga Ponnu — Mon, 24 Aug 2026 17:40:45 +0000

When designing educational web widgets for classrooms, responsive design goes far beyond making things look presentable on a standard smartphone. A modern classroom app might run on an older Android device, an iPad in split view, a school Chromebook, or a massive 4K interactive smartboard.

Here is a breakdown of how we refactored the RandomTyms AI Quiz Generator into a zero-scroll, high-engagement classroom engine complete with instant mistake tracking and targeted practice loops.

The Pedagogical Goals

Active Learning Feedback Loop: Moving beyond a flat percentage score to show students exactly where their understanding slipped, providing an immediate pathway to drill only those specific gaps..

*Zero-Scroll, Fit-to-Screen UI: *
Ensuring the question stem, four options, progress indicators, and feedback modal fit within the active viewport across mobile phones, tablets, laptops, and smartboards without vertical scrolling or browser zooming.

Lightweight Architecture:
Delivering a pure, framework-free browser experience with built-in clipboard helpers for AI prompts and structured schema metadata for discoverability.

Key Upgrades & Architectural Enhancements

1. The Targeted Mistake Review & Retry Engine
Dynamic Mistake Logging: While a student plays, incorrect selections are captured with their full context—recording the original question stem, the chosen distractor, and the verified correct answer.

*Contextual Review Panel: *
Upon completing a quiz with mistakes, students receive a scrollable review section displaying each missed item with color-coded tags distinguishing their incorrect choice from the correct answer.

*Targeted Practice Mode: *
Alongside the standard full-quiz restart, a dedicated retake button launches a focused practice round featuring only the missed questions.

2. Eliminating Vertical Overflow for Smartboards & Screens
Fluid Viewport Sizing: Replaced rigid pixel values with responsive clamp calculations tied to viewport height and width, keeping fonts, touch targets, and gaps proportional to available space.

**Dynamic Viewport Height Limits: **Bounded modal overlays and quiz containers to dynamic viewport heights (dvh) so bottom navigation bars on mobile browsers and classroom displays never push buttons off-screen.

**Adaptive 2×2 Smartboard Grid: **Switched the 4-option vertical stack to an automatic 2×2 grid layout on wider aspect ratios, cutting vertical screen usage in half on interactive whiteboards and desktop screens.

3. Dual AI Prompt Integration
Integrated dedicated prompt cards to streamline content creation with large language models like Gemini—supporting direct CSV file creation for small batches as well as raw structured extraction for large textbook scans.

Designed for seamless deployment across standard web pages, blogs, and classroom learning portals without third-party dependencies.

How I Fixed My PWA's YouTube Feed for Free (Without Building a Server)

Ganga Ponnu — Wed, 12 Aug 2026 15:07:17 +0000

When building my Progressive Web App (PWA), I wanted a clean section showing my channel's latest YouTube uploads.

It sounded simple at first, but I quickly hit a classic web development wall: the dreaded CORS error.

Every time the app tried to read YouTube's feed directly inside the browser, security rules blocked it, resulting in a frustrating error message: "Couldn't load latest videos."

Instead of setting up a paid backend server or messing with complex API keys, I found a zero-cost trick using GitHub Actions as a background helper.

Here is how I solved it using logic instead of extra infrastructure.

💡 The Lightbulb Moment
Why force the user's phone to do the heavy lifting every single time they open the app?

Instead of asking the app to fetch data from YouTube directly:

A background script runs automatically every 3 hours inside GitHub.
It fetches the YouTube feed behind the scenes and saves a simple videos.json file inside my project.
My app simply reads that ready-made videos.json file locally—instantly, smoothly, and with zero security errors.

🛠️ How It Works in 3 Simple Steps

The Scheduled Helper: I set up a simple GitHub Action workflow. Think of it like setting an alarm clock on your phone—every 3 hours, GitHub wakes up, grabs the latest 5 videos from YouTube, and formats them into a neat text list (videos.json).
The Auto-Publisher: Once the file is updated, GitHub Pages automatically deploys the updated app files to the web.
The App Fetch: Inside my app, reading the list takes just a single line of standard JavaScript. No security blocks, no API limits, and no delay for the user!

⚠️ 3 Lessons I Learned Along the Way

If you try a similar setup for your own app, here are three quick gotchas to watch out for:

Watch out for "invisible" build blocks: GitHub Pages uses a tool called Jekyll by default, which can sometimes ignore .json files. Creating a blank file named .nojekyll in your root folder fixes this instantly.
Beware of aggressive caching: PWAs love saving old files so they work offline. Adding a tiny timestamp rule when reading your JSON ensures users always see the freshest videos instead of an old saved copy.
Check the green checkmark: If your app still shows an error, check the Actions tab in GitHub. A single red ❌ on the deploy step means GitHub hasn't published your new file to the live site yet—a simple "Re-run" usually fixes it!

🚀 The Result

100% Free & Automatic: Updates every 3 hours without me lifting a finger.

Lightning Fast: The app loads instant static text instead of waiting for external websites.

No Server Maintenance: No monthly hosting bills, no databases, and no servers to manage.

Have you ever used clever static tricks or background tools to bypass backend headaches? I'd love to hear how you solved it in the comments!

Building a Sticker & GIF Engine for Mobile Keyboards (Tenor Partner, Gboard & Web Integration)

Ganga Ponnu — Wed, 12 Aug 2026 09:11:30 +0000

canonical_url: https://lokeshvarsha.blogspot.com/p/lokesh-varsha-stickers-gifs.html

As developers and digital creators, we often spend endless hours building rich front-end experiences or backend APIs—only to face the real challenge: distribution. How do you take original animated assets and put them directly where users communicate every second of the day (WhatsApp, Gboard, Telegram, and Twitter/X)?

In this post, I want to share the architecture and integration process behind the RandomTyms sticker engine featuring Lokesh & Varsha (original AI-animated characters), from setting up an official Tenor Partner endpoint to embedding responsive media into web applications.

🛠️ The Architecture: From Animation to Global Keyboards

To make animated media searchable across millions of mobile devices, relying on standalone image hosts isn't enough. The assets need to flow through the major keyboard APIs.

1. Tenor API Integration & Tagging Strategy

Tenor (owned by Google) powers the primary GIF search engine across Gboard, Discord, LinkedIn, and Twitter/X.

Getting verified as an Official Tenor Partner unlocked direct indexing for our brand tags (#randomtyms, #lokesh, #varsha). However, ranking on keyboard searches requires optimizing metadata for conversational intent rather than just asset titles:

Reaction-Based Tagging: #mass, #ennadhu, #thinking, #happy_news, #vanakkam
Contextual Queries: #smart_english, #cbse, #learning_fun

👉 You can view the live partner integration here: Tenor Official - RandomTyms Profile

🌐 Web Integration: Building a Media Hub

While API distribution covers messaging platforms, a dedicated web destination is essential for SEO indexing, deep linking, and embedding interactive widgets.

We built a central hub page hosting the sticker library and search guidelines:
📍 Live Page: Lokesh & Varsha Stickers & GIFs Hub

Key Technical Considerations for Animated Media Hubs:

Format Optimization: Standard GIFs can quickly exceed 5MB–10MB per loop. Converting non-transparent loops to Animated WebP reduces payload by ~60% while maintaining crisp 60fps renders.
Lazy Loading Media: Using loading="lazy" on sticker galleries prevents layout shift (CLS) and conserves mobile data when rendering 20+ animated assets simultaneously.
Cross-Platform Embedding: Providing clean HTML embed snippets allowing educators and bloggers to drop assets directly into slides and articles.

🎮 Gamifying the Media (Interactive Web App)

Beyond keyboard distribution, we linked these animated assets into an interactive web application—the Emoji Idioms Treasure Hunt.

It combines JavaScript-driven wheel physics, audio cues, and state management where players decode emoji combinations into idioms, triggering specific animated reactions:

Spin the Wheel & Guess the Emoji Idioms! 🎡 Treasure Hunt Game with Lokesh & Varsha

Can you decode 20 fun emoji clues to reveal hidden English idioms? Join Lokesh & Varsha in this interactive spin-the-wheel treasure hunt game.

lokeshvarsha.blogspot.com

💡 Key Takeaways for Developers & Creators

Leverage Existing Distribution Channels: Don't try to build a custom messaging app just to share stickers. Integrate with Tenor/GIPHY to instantly tap into Gboard and WhatsApp ecosystems.
Structure Metadata for Search: Algorithmic search on keyboard engines relies heavily on emotional and conversational tags rather than literal descriptions.
Keep Your Web Hub Lean: Ensure your media hosting page uses proper canonical tags, structured JSON-LD, and lazy-loaded assets to maintain strong performance scores.

Have you built custom integrations with Tenor, GIPHY, or keyboard APIs? Let's discuss in the comments below! 👇

Building an AI Quiz Pipeline without using an AI API

Ganga Ponnu — Mon, 27 Jul 2026 06:57:39 +0000

Sometimes the most valuable software isn't another AI model—it's the workflow around it.

The internet is full of AI quiz generators. Upload some content - click a button - a quiz appears.

So why did I build something that doesn't generate quizzes directly?

The Problem

Gemini (and other LLMs) are already very good at reading textbook pages.

But asking an LLM:
"Generate a quiz from this chapter."
rarely gives you production-ready output.

Some common issues:

inconsistent formatting
incomplete coverage of the chapter
questions in random order
difficult to import into another application

For a teacher, this means spending more time cleaning the output than actually teaching.

My Approach

Instead of building another AI wrapper, I built a workflow.
Textbook Images
│
▼
Optimized Prompt
│
▼
Gemini
│
▼
Structured Quiz Data
│
▼
CSV File
│
▼
RandomTyms Quiz Player

The AI does what it's good at:

understanding content
extracting knowledge
generating questions

My application does what it is good at:

enforcing structure
creating a reusable quiz format
powering an interactive quiz interface

Why CSV?

This is probably the first question developers ask.

Why not just return JSON?
Why involve CSV at all?

Because my users aren't developers. They're teachers.

CSV has some surprisingly practical advantages.

Opens in Excel.
Can be edited without technical knowledge.
Easy to archive.
Easy to share.
Works offline.
Can be imported into the quiz player. A quiz becomes a file that belongs to the teacher—not another conversation trapped inside an AI chat.

Prompt Engineering Is Part of the Product

One thing I learned while building this is that prompt engineering isn't just an implementation detail.

It's product design.

Instead of expecting teachers to write prompts like:

Generate 40 multiple-choice questions covering every important concept...

they simply copy a pre-built prompt.

That prompt tells the AI to:

analyse every uploaded textbook page
cover all major concepts
include definitions and key facts
produce output in a predictable structure

The complexity stays hidden. The workflow stays simple.

Why I Didn't Use an AI API

At first glance, that seems like extra work. But there were reasons behind it.

1. Zero backend AI costs

No API billing.
No token management.
No rate limiting.

2. Users benefit from better models automatically

When Gemini improves, the workflow improves and I don't need to deploy a new backend.

3. Human review
Teachers naturally review the generated questions before importing them.

In education, that small review step is often a feature—not a bug.

Trade-offs

This approach isn't perfect.
There is a manual copy-paste step.
That's friction.

But it's also where teachers can fix mistakes, remove unsuitable questions, or add their own.

For educational content, I think that's a worthwhile trade-off.

Not every workflow needs to be fully automated.

How I Built an AI Quiz Generator, a PWA Hub, and an Animated Kids' Brand — All on One Phone

Ganga Ponnu — Thu, 23 Jul 2026 12:13:45 +0000

I don't have a studio. I don't have a team. What I have is a smartphone — and that single constraint ended up shaping every decision behind RandomTyms, an AI-animated Tamil-English educational brand built around two characters, Lokesh and Varsha, and now a small suite of free learning apps.

This post is about the "how" — not the brand story, but the actual technical build: a PWA hub, an AI-powered quiz generator, and the scrappy fixes that come with building mobile-only.

What I ended up shipping

The core of it is a Progressive Web App hosted on GitHub Pages: randomtyms.github.io. It bundles together:

AI Textbook Quiz Generator

— generates quizzes from textbook content using Google Gemini, with OMR-style answer bubbles and score-tiered feedback

Spinner Wheel

— a simple randomizer for classroom use
Multiplication Practice — quick-fire drills for kids

Symmetry Detective

— an interactive shape-recognition tool
All free. No sign-up, no ads, no tracking.

Building the PWA hub

The hub itself is a manifest + service worker setup, which sounds simple until you're debugging it entirely from a phone browser's dev tools.

A few specific things that took longer than expected:

Live content feeds: the Blog tab pulls from a live Blogger JSONP feed, and the Shorts tab runs through an RSS-to-JSON proxy — no dashboard, just feeds updating automatically.

YouTube thumbnails silently failing: this one took a while to track down. Shorts-style RSS links didn't match the video ID regex I was using, so thumbnails just wouldn't render for some videos. Fixed it by adding /shorts/ pattern matching plus a fallback to the guid field.

Building the quiz generator

This is the piece with the most moving parts. It's not just "call an API and show the output" — the widget needed:

Prompt engineering tuned so Gemini reliably hits a minimum question count (it would sometimes shortchange this)
CSV export handling — cleaning up BOM characters and CRLF line endings that were quietly corrupting downloads
OMR-style answer bubbles and score-tiered feedback, built as a reusable embeddable component (rt-quiz-embed.html) and a full standalone version (rt-quiz-full.html)

Basic security hardening on the widget itself

One unexpected debugging detour:

Google Safe Browsing flagged the blog at one point. After digging in, the likely trigger wasn't the quiz code — it was the instructional pattern

"copy this prompt → open Gemini → paste → send"

reading as suspicious to automated scanners. Worth knowing if you're building anything that walks users through copy-pasting into another AI tool.

Making the repo actually discoverable
Shipping the apps was only half the job — a live PWA with no polish around it just doesn't get found.

Recent cleanup included:
A`` proper README.md with screenshots of each app, not just a text description

MIT license added (code only — the characters and brand art stay separately owned)
GitHub topics (education, pwa, kids-learning, quiz-app) so it surfaces in topic search
A pinned profile repo and a real profile picture instead of the default identicon

Small things, but they add up to a repo that looks maintained rather than abandoned.

What's next

More apps are in active development on the hub. If you're curious about building AI-powered tools without a team or a dev environment beyond a phone, happy to answer questions in the comments — this whole thing has been one long lesson in working within constraints rather than around them.

🔗 Try the apps: randomtyms.github.io
📖 Follow the blog: lokeshvarsha.blogspot.com