Current Affairs

You are a senior full-stack exam-platform software engineer and UI/UX expert. TASK: Create a COMPLETE, PRODUCTION-READY, TEXTBOOK-STYLE MOCK TEST SOFTWARE that works INSIDE A BLOGGER POST using ONLY: • HTML • CSS • JavaScript (No backend, no login, no signup, no frameworks) The output must be COPY-PASTE READY for a Blogger post (Theme → Post HTML). -------------------------------------------------- 🔹 PLATFORM STYLE & UI -------------------------------------------------- Design must look like premium exam platforms such as: • Textbook • Oliveboard • Adda247 • Testbook UI requirements: • Clean white background • Card-based question layout • Rounded buttons • Professional exam interface • Fully responsive (Mobile + Desktop) • No external libraries -------------------------------------------------- 🔹 QUIZ FLOW (IMPORTANT) -------------------------------------------------- 1. First Screen (Landing): • Quiz Title • Exam Name • Total Questions • Total Marks • Time Duration • "Start Test" Button 2. On Clicking "Start Test": • Timer starts immediately • Question panel loads • Question number indicator (Q1, Q2, Q3...) • Question palette/grid (click to jump any question) 3. Question Screen: • One question at a time • 4 multiple-choice options (radio buttons) • Clear option selection highlight • Buttons: ⏮ Previous ⏭ Next 📝 Mark for Review 🚀 Submit Test 4. Timer: • Countdown timer (MM:SS) • Auto-submit when time = 0 -------------------------------------------------- 🔹 MARKING SCHEME -------------------------------------------------- • Correct Answer: +1 mark • Wrong Answer: −0.33 negative marking • Unattempted: 0 marks • Total score calculation required -------------------------------------------------- 🔹 RESULT PAGE -------------------------------------------------- After submission show: • Total Marks • Correct / Wrong / Unattempted count • Final Score • Percentage • Time taken • Qualifying status (Pass / Fail) Buttons: • 🔁 Restart Test • 📘 View Detailed Solutions -------------------------------------------------- 🔹 DETAILED SOLUTION VIEW -------------------------------------------------- For each question show: • Question • Correct Answer • User Selected Answer • Explanation (text supported) • Clear visual difference (green/red) -------------------------------------------------- 🔹 QUESTION DATA FORMAT -------------------------------------------------- Store questions in JavaScript array like: const questions = [ { question: "Question text here", options: ["A", "B", "C", "D"], correctAnswer: 1, explanation: "Explanation text here" } ]; -------------------------------------------------- 🔹 ADDITIONAL REQUIREMENTS -------------------------------------------------- • No page reload • Smooth transitions • Scroll-free experience on mobile • Clean code with comments • Easy to edit questions later • SEO-friendly HTML structure • Compatible with AdSense ads -------------------------------------------------- 🔹 OUTPUT FORMAT -------------------------------------------------- Return ONLY: • Full HTML • Embedded CSS • Embedded JavaScript Do NOT include explanations, comments outside code, or markdown. Do NOT include backticks. Just raw working code. -------------------------------------------------- FINAL GOAL: A TEXTBOOK-LIKE MOCK TEST SOFTWARE THAT RUNS PERFECTLY INSIDE A BLOGGER POST WITHOUT LOGIN, WITHOUT BACKEND, AND LOOKS 100% PROFESSIONAL.