Google Blogger / Blogspot Competitive Exam Learning Platform Theme

यह final baseline specification है। इसे आगे बनने वाले XML theme, architecture और master AI prompt के लिए source of truth माना जाएगा। कोई नई implementation requirement इससे टकराने पर पहले इसी baseline के विरुद्ध जांची जाएगी।

1. Product Identity

यह सामान्य Blogger blog नहीं होगा।

यह एक:

Competitive Exam Study Material + Question Bank + Test Series + PDF Notes + Books + Previous Year Questions + Exam Preparation Platform

होगा।

Design philosophy:

Hugging Face-inspired clean + rounded + modern + minimal + discovery-oriented

लेकिन:

Hugging Face की branding copy नहीं होगी।
Logo/assets/code copy नहीं होंगे।
Education-focused अपनी visual identity होगी।

2. Core Architecture


Blogger Database
│
├── Posts
├── Pages
├── Labels
└── Layout / Gadgets
        │
        ↓
Dynamic Data Layer
        │
        ↓
Discovery / Rendering Engine
        │
        ├── Home
        ├── Exam Pages
        ├── Subject Pages
        ├── Resource Cards
        └── Quiz Engine

मूल सिद्धांत

Theme XML = UI + Engine + Logic

Blogger = Content + Data

Blogger Layout = Configuration / Manageable UI

3. Blogger Layout — Highest Priority

छोटे UI बदलावों के लिए XML code editing primary dependency नहीं होनी चाहिए।

जहाँ Blogger Layout technically support करता है, वहाँ:

Add
Edit
Delete
Reorder
Enable/Disable

की सुविधा उपलब्ध होनी चाहिए।

विशेष रूप से:

Header
Hamburger menu
Navigation
Submenu
Sub-submenu
Homepage sections
Sidebar
Footer
Ad slots
Supporting widgets
configurable content blocks

Menu depth

Maximum 3 levels

उदाहरण:


Competitive Exams
 └── SSC
      └── SSC CGL

4. Blogger Data — Fully Dynamic

Theme में individual content hard-code नहीं किया जाएगा।

Dynamic data:

Exam names
Subject names
Topic names
Post titles
Page titles
PDF resources
Books
Questions
Study materials
Resource cards
related posts

सब Blogger data से आएँगे।

One post, multiple labels

एक post कई labels से संबंधित हो सकता है और उन्हीं labels के आधार पर अलग-अलग discovery sections में स्वतः दिखाई दे सकता है।

5. Label Taxonomy

Core taxonomy:


Exam
State
Board
Competitive
Teacher Exam
Subject
Topic
Mock Test
Test Series
Question Bank
PDF
Book

यह taxonomy future expansion के लिए खुली रहेगी।

6. Single Blog1 Rule — Critical

Theme में:

Exactly ONE Blog1

हो।

अनिवार्य रूप से:

no duplicate Blog1
no nested Blog1
no cloned Blog1
no multiple main Blog widgets

Post/Page content उसी मुख्य Blogger content architecture से render होगा।

7. Homepage — Discovery Dashboard

Homepage conventional:

Latest Posts + Sidebar

जैसा नहीं होगा।

मुख्य dashboard:


Popular Exams
→ horizontal scroll chips/cards

State Exams
→ horizontal scroll cards/grid

Board Exams
→ horizontal scroll cards/grid

Competitive Exams
→ horizontal scroll cards/grid

Subjects
→ horizontal scroll chip-cards/grid

Mock Tests
→ horizontal scroll chip-cards/grid

PDF Notes
→ horizontal scroll chip-cards/grid

Books
→ horizontal scroll chip-cards/grid

Latest Study Material
→ cards/grid

Most Practiced Questions
→ cards/grid

सभी content dynamically Blogger से आएगा।

8. Card System

पूरी website का primary visual unit:

Card

समर्थित रूप:

grid card
list card
compact card
horizontal card
chip-card
feature card
resource card
question card

Desktop और mobile पर adaptive presentation होगी।

9. Horizontal Discovery Rails

जहाँ horizontal sections हैं, वहाँ:

touch swipe
mouse/trackpad horizontal scroll
smooth movement
mobile-friendly interaction
responsive spacing

हो।

Mobile पर natural swipe experience होना चाहिए।

10. Search

Global search dynamic होगा।

Search कम से कम इन पर चले:

Post Title
Labels
Exam
State
Board
Competitive category
Teacher Exam
Subject
Topic
Question text

11. Exam Landing Page

किसी exam को चुनने पर dynamic exam-centric page बने:


Exam Overview
↓
Subjects
↓
Question Bank
↓
Previous Year Questions
↓
Study Material
↓
PDF Notes
↓
Books
↓
Test Series
↓
Related Content

हर exam के लिए नया custom XML template बनाने की जरूरत नहीं होगी।

12. Quiz Engine — Global

पूरी theme में एक Global Quiz Engine होगा।

हर test के लिए अलग JavaScript नहीं।

एक ही engine:


Question Bank
Mock Tests
Test Series
Previous Year Tests
Subject Tests
Topic Tests
Exam Tests

सब चला सके।

13. Quiz Data Location

Quiz data Blogger Post के अंदर specially formatted block में रहेगा।

JavaScript source में questions hard-code नहीं होंगे।

Minimum fields:


Question
Occurrence
Option A
Option B
Option C
Option D
Answer
Description / Explanation

Unicode requirement

Content मुख्यतः:

Hindi Unicode + English mixed

होगा।

इसलिए actual quiz text Blogger DOM/content से पढ़ा जाएगा।

Hindi को JavaScript source में hard-code करके entity corruption नहीं किया जाएगा।

14. One Post = One Quiz Set

एक Quiz Post में एक quiz set होगा।

Question count fixed नहीं है।

उदाहरण:

10
20
25
45
आदि

जो questions उस post में मौजूद हैं, वही पूरा current set हैं।

25-question requirement rigid नहीं है।

15. Large Quiz / Load More

यदि quiz बहुत बड़ा है:

पहला batch render हो सकता है।

फिर:

Load More Questions

पर click करने से बाकी questions:

उसी page में
बिना reload
उसी quiz state के साथ
नीचे append

हों।

16. Quiz Page Flow

Quiz normal Blogger post/article flow का हिस्सा होगा।


Quiz Heading
↓
Quiz Information
↓
Start Quiz
↓
Q1
↓
Q2
↓
Q3
↓
...
↓
Final Question
↓
Result / Review / Next Set

Important

Questions:

horizontal carousel नहीं होंगे।

vertical article flow में रहेंगे।

Quiz अलग fixed application box नहीं बनेगा।

17. Quiz Intro

Start से पहले:

Quiz Heading
Exam
Subject/Topic
Quiz information
Question count, जहाँ उपलब्ध हो
Start Quiz Button

होगा।

18. Start Quiz

START QUIZ पर click होने के बाद:

auto-scroll quiz mode सक्रिय होगा।

उसके पहले page normal browsing mode में रहेगा।

19. Auto-Scroll UX

User को ऐसा अनुभव होना चाहिए जैसे वह स्वयं page scroll कर रहा है।

Sequence:


Current Question
↓
Answer / progression
↓
40 ms
↓
Smooth page scroll
↓
Next Question position

Next question एकदम jump नहीं करेगा।

पूरी page scroll होगी; internal quiz scrollbar नहीं होगा।

20. Question Card

Question card में:

Question
Exam occurrence
Timer
Options

हों।

उदाहरण:


Question text

BPSC-2024 / SSC-2021

⏱ 21s

○ A. Option
○ B. Option
○ C. Option
○ D. Option

21. Exam Occurrence

Question-level metadata:

Exam
Year
Shift/Paper, जहाँ उपलब्ध हो

जैसे:

BPSC-2024

SSC CGL-2021

यह question provenance/occurrence के रूप में दिखेगा।

22. Timer

Reducing timer रहेगा।

Timer समाप्त होने पर:

Question automatically submit नहीं होगा।

विशेष रूप से:


Timer = 0
+
No attempt
=
Unattempted

कोई automatic answer evaluation नहीं।

23. Correct Answer — Mandatory

User सही उत्तर चुनता है:

MUST:

Green correct state

Telegram-inspired confetti effect

Confetti lightweight और performant होना चाहिए।

फिर:

40 ms

↓

smooth next-question auto-scroll.

24. Wrong Answer — Mandatory

User गलत answer चुनता है:

selected/wrong → Red
correct answer → Green
no confetti

फिर:

40 ms

↓

smooth next-question progression.

25. Unattempted

यदि user timer समाप्त होने तक attempt नहीं करता:

no red
no green evaluation
no confetti
no auto-submit

स्थिति:

Unattempted

26. Hold / Long Press

Timer 0 के बाद transition के दौरान:

यदि user question card पर:

finger
mouse/pointer

से hold कर रहा है,

तो:

next question transition wait करेगी।

Release के बाद:

40 ms → next question

यह touch और pointer दोनों के लिए robust होना चाहिए।

27. Previous Question

User previous question पर वापस जा सकता है।

Natural finger/swipe interaction supported रहेगा।

लेकिन:

quiz horizontal slider नहीं बनेगा।

Main document vertical scrolling ही primary interaction रहेगा।

28. Question State Persistence

Current browser/session में हर question का state सुरक्षित रहे:

selected option
correct/wrong
unattempted
current timer state जहाँ relevant
question progress

Back/forward navigation से state नष्ट नहीं होना चाहिए।

29. Result Screen

Final question के बाद:

Total Questions
Attempted
Correct
Wrong
Unattempted
Score
Percentage
Time, जहाँ applicable

दिखे।

Controls:

View Result / Review

Next Question Set

30. Attempted Question Review

User review में हर question के लिए देख सके:


Question
↓
User Selected Option
↓
Correct Answer
↓
Description / Explanation
↓
Correct/Wrong/Unattempted

31. Next Question Set

Theme next quiz/test post की ओर जाने वाला mechanism support करे।

Conceptually:


Set 1
↓
Set 2
↓
Set 3

लेकिन प्रत्येक post का actual question count flexible रहेगा।

32. Quiz Ads — Top Slot

Quiz question area के ठीक ऊपर:

100px height × full-width AdSense-ready slot

होगा।

यह persistent visual position रखेगा।

यदि user manually scroll करके इसे viewport से बाहर कर देता है, तो अगले question progression के दौरान quiz experience इसे:

Main Header के ठीक नीचे designated position

पर smoothly वापस ला सके।

Important

यह:

AdSense-ready slot/container

होगा।

Fake advertisement नहीं बनाया जाएगा।

33. Quiz Mid-Roll Ad

एक दूसरा advertisement slot:

Q19 के बाद और Q20 से पहले

insert होगा।


Q19
↓
AdSense-ready slot
↓
Q20

यह question count में शामिल नहीं होगा।

यह लगभग quiz-card के समान visual weight/size रख सकता है।

34. Important Ad Behavior

Top ad slot तथा mid-roll ad slot quiz engine के question-state logic से अलग रहेंगे।

Ad को question नहीं माना जाएगा।

35. SVG Icons Only

Interface icons के लिए:

SVG only

No:

PNG icon
JPG icon
external icon image
icon font dependency

SVG icons:

Search
Menu
Close
Timer
Start
Next
Previous
Check
Wrong
Book
PDF
Test
Theme toggle
arrows
status indicators

आदि।

36. Light / Dark Mode

दोनों modes:

Light

Dark

User toggle करेगा।

Preference browser में persist की जा सकती है।

37. Thumbnail System

Cards में:

Blogger post thumbnail

available हो तो automatically उपयोग हो।

Thumbnail न होने पर:

SVG/CSS fallback

हो।

Unnecessary duplicate images न हों।

38. Header

Modern responsive header:

site identity/logo
search
primary navigation
hamburger
theme toggle
configurable gadgets

होगा।

39. Hamburger Menu

Maximum:

3 levels

Blogger Layout से जहाँ possible हो menu items:

Add
Edit
Delete
Reorder

किए जा सकें।

40. Blog Post Integration

Quiz engine post page को replace नहीं करेगा।

वह:

Blogger Post content को enhance करेगा।

Article reading और quiz experience एक ही page flow में integrated रहेंगे।

41. Normal Page / Article Behavior

Quiz के बाहर सामान्य Blogger posts/pages:

normal reading layout
normal headings
normal paragraphs
images
tables
links
labels
related cards

के साथ properly render हों।

42. JavaScript Architecture

All substantial JavaScript:

XML-safe CDATA

के अंदर रहेगा।

Conceptually:


<script type='text/javascript'><![CDATA[
  ...
]]></script>

JavaScript में:

state management
quiz parser
quiz engine
navigation
auto-scroll
timers
confetti
search behavior
theme toggle
UI interactions

संगठित architecture में हों।

43. XML Safety

Final XML को:

strictly parseable Blogger XML

होना चाहिए।

विशेष ध्यान:

&
&&
<
>
quotes
entities
CDATA
SVG
CSS
JS
Blogger expressions

पर।

Mandatory

Raw unsafe ampersand XML source में नहीं।

उदाहरण:

जहाँ literal XML ampersand चाहिए वहाँ सही escaping हो:


&amp;

लेकिन unnecessary double escaping नहीं।

44. Unicode Safety

Hindi + English mixed data के लिए:

Blogger post → DOM → Quiz parser

approach रहे।

Quiz data को JavaScript literals में embed नहीं करना।

इससे broken sequences जैसे:

p&#2381

जैसी समस्या से बचा जा सके।

45. Performance

Theme:

lightweight
mobile-first
lazy-loading aware
minimal dependencies
minimal network requests
efficient DOM operations
event delegation जहाँ उचित हो
no repeated quiz engine loading

रहे।

46. External Dependencies

Core quiz के लिए:

React
Vue
Angular
jQuery
external database
external quiz service

आवश्यक नहीं होने चाहिए।

Core interaction preferably native browser JS से।

47. Accessibility

Support:

keyboard navigation
focus states
semantic buttons
screen-reader labels
accessible controls
good contrast
touch-friendly targets
reduced-motion consideration

Color alone किसी status की एकमात्र पहचान न बने।

48. SEO

Theme में:

semantic HTML
clean heading hierarchy
canonical Blogger URLs
crawlable content
internal linking
meaningful metadata
structured navigation
no unnecessary duplication

रहे।

Quiz enhancement search-engine-readable underlying content को नष्ट न करे।

49. Content Duplication Rule

Dynamic cards/related sections बनाते समय ऐसा architecture न बनाया जाए जिससे actual Blogger post content अनावश्यक रूप से duplicate हो।

एक post:

एक canonical content source

रहे।

50. Homepage Scalability

Exam और resource count बढ़ने पर:

homepage टूटे नहीं
horizontal rails overflow न करें
card system adapt करे
discovery manageable रहे
code modification की आवश्यकता न पड़े

51. Error Handling

Malformed quiz data पूरे theme को crash न करे।

यदि:

answer missing
option missing
description missing
occurrence missing
question malformed

हो तो graceful fallback हो।

Normal post rendering बची रहनी चाहिए।

52. Browser Session Attempt

User attempts:

current browser/session scope

में रहें।

External permanent user database नहीं।

53. Design Principle

पूरी website का UX hierarchy:


DISCOVER
↓
SELECT
↓
EXPLORE
↓
LEARN
↓
PRACTICE
↓
TEST
↓
REVIEW

54. Priority Order

Implementation के दौरान priorities:

P0 — Absolutely Critical

Valid Blogger XML
Single Blog1
Dynamic Blogger data
Blogger Layout configurability
JavaScript inside CDATA
Hindi Unicode safety
Global quiz engine
Correct-answer green + confetti
Timer behavior
normal vertical post flow

P1

Auto-scroll
40 ms transition
Hold-to-delay
Previous navigation
Result/review
Ad slots
Load More
Search
Dynamic exam/resource discovery

P2

Light/dark mode
advanced visual polish
animations
performance optimizations
accessibility refinements

55. Final UX Definition

सबसे महत्वपूर्ण intended experience:

“यह Blogger पर बना हुआ blog नहीं दिखता; यह एक आधुनिक Competitive Exam Learning Platform दिखता है।”

Quiz के लिए:

“यह अलग quiz application नहीं है; यह उसी study/article page का intelligent interactive version है।”

Homepage के लिए:

“User search या cards के माध्यम से exam/resource खोजते हुए naturally आगे बढ़ता है।”

56. Final Non-Negotiable Rules


✓ Dynamic Blogger data
✓ Dynamic Blogger Labels
✓ Blogger Layout editable
✓ 3-level menu
✓ Single Blog1
✓ No nested Blog1
✓ No hard-coded exam catalogue
✓ No hard-coded quiz questions
✓ Quiz data in Blogger Post special block
✓ Hindi Unicode + English
✓ JavaScript in CDATA
✓ XML-safe ampersand handling
✓ SVG-only interface icons
✓ Light + Dark mode
✓ Card-first UI
✓ Horizontal discovery rails
✓ Exam landing pages
✓ Global Quiz Engine
✓ Flexible question count
✓ Vertical question flow
✓ Load More
✓ Start Quiz activation
✓ 40 ms transition
✓ Smooth auto-scroll
✓ Previous-question navigation
✓ Timer does not auto-submit unanswered question
✓ Hold delays transition
✓ Correct = Green + Telegram-inspired confetti
✓ Wrong = Red + correct Green
✓ Unattempted = no evaluation
✓ Attempt review
✓ Result
✓ Next question set
✓ Top 100px AdSense-ready slot
✓ Q19/Q20 AdSense-ready slot
✓ Session/browser-only attempts
✓ Responsive mobile-first design
✓ SEO
✓ Accessibility
✓ Performance

Search Results

Google Blogger / Blogspot Competitive Exam Learning Platform Theme

1. Product Identity

2. Core Architecture

मूल सिद्धांत

3. Blogger Layout — Highest Priority

Menu depth

4. Blogger Data — Fully Dynamic

One post, multiple labels

5. Label Taxonomy

6. Single Blog1 Rule — Critical

7. Homepage — Discovery Dashboard

8. Card System

9. Horizontal Discovery Rails

10. Search

11. Exam Landing Page

12. Quiz Engine — Global

13. Quiz Data Location

Unicode requirement

14. One Post = One Quiz Set

15. Large Quiz / Load More

16. Quiz Page Flow

Important

17. Quiz Intro

18. Start Quiz

19. Auto-Scroll UX

20. Question Card

21. Exam Occurrence

22. Timer

23. Correct Answer — Mandatory

MUST:

24. Wrong Answer — Mandatory

25. Unattempted

26. Hold / Long Press

27. Previous Question

28. Question State Persistence

29. Result Screen

30. Attempted Question Review

31. Next Question Set

32. Quiz Ads — Top Slot

Important

33. Quiz Mid-Roll Ad

34. Important Ad Behavior

35. SVG Icons Only

36. Light / Dark Mode

37. Thumbnail System

38. Header

39. Hamburger Menu

40. Blog Post Integration

41. Normal Page / Article Behavior

42. JavaScript Architecture

43. XML Safety

Mandatory

44. Unicode Safety

45. Performance

46. External Dependencies

47. Accessibility

48. SEO

49. Content Duplication Rule

50. Homepage Scalability

51. Error Handling

52. Browser Session Attempt

53. Design Principle

54. Priority Order

P0 — Absolutely Critical

P1

P2

55. Final UX Definition

56. Final Non-Negotiable Rules

Final Baseline Status