[FEATURE] Implement Dynamic, Interactive MCQs & Interview Simulator Widget for English Communication

[rajesh-puripanda]

Feature Summary

With the addition of the new English Communication syllabus (PR #173), the platform now includes basic text-based quizzes. To significantly improve user engagement and learning retention for 1st-year students, this feature introduces an interactive, client-side Quiz Engine & Communication Simulator Widget right inside the documentation layout.

Problem It Solves

• Passive Learning: Reading static text-based questions in Markdown files lacks immediate, actionable feedback. Students can't track their score, see instant rationale for incorrect answers, or simulate time-pressured environments like real interviews or Group Discussions (GD).
• Interview Anxiety: 1st-year CSE students often struggle with structural communication patterns (e.g., handling email corporate etiquette or fixing grammatical active/passive voice errors in real-time).

Proposed Solution

I propose building an interactive, state-driven Interactive Study & Evaluation Widget embedded directly inside the English Communication module.

Key Technical Capabilities:

1. Interactive MCQ Sandbox: A beautifully styled component handling real-time state processing for multi-stage communication quizzes. Features include:
   • Instant feedback loops (Highlighting correct green / incorrect red states).
   • Detailed inline breakdown of why an answer is correct (e.g., explaining why a specific phrase breaks professional email etiquette barriers).
   • A persistent "Score Tracker" and "Time Attack" countdown mode.
2. Corporate Communication Simulator: A micro-module where students can select a communication barrier scenario (e.g., "Handling an angry client email") and select optimal dialogue branches, mapping out communication outcomes dynamically.
3. Hardware-Accelerated UI Polish: Leverages native Tailwind transitions to ensure a smooth, high-fidelity experience across both desktop viewports and mobile layouts.

Visual Mockup Idea

• Header: Active progress metric bar (Question X of Y) alongside a ticking session timer.
• Body: Clean interactive radio button matrices for selection.
• Footer: Dynamic sliding review drawer container displaying academic rationale post-submission.

I have my local dev sandbox fully configured and can build this optimized client-side widget immediately without adding any heavy third-party dependencies. I would love to tackle this under GSSoC '26!

Please assign this new tracking issue to me.

[rajesh-puripanda]

@pushkarscripts /assign gssoc