🧪 Gamification Test Page

Welcome! This page lets you quickly test all gamification features. Follow the checklist below!

✅ Test Checklist

Basic Features

1. Level Display (Top-Right) ⭐

  • Can you see your level display in the top-right corner?
  • Does it show your current level?
  • Can you see the XP progress bar?

What to do: Just look up! It should be there already.

2. Reading Progress Bar (Very Top) 📊

  • Is there a green progress bar at the very top of the page?
  • Does it fill as you scroll?

What to do: Scroll down this page and watch the top bar.

3. Stats Dashboard 📈

  • Click the 📊 button in the level display
  • Does a stats panel appear?
  • Can you see your level, XP, articles read, etc.?

What to do: Click 📊 in top-right, or press S on keyboard.

XP System

4. Scroll Milestones 🎯

Start at the top and scroll down slowly. You should see XP notifications at:

  • 25% - “+5 XP - 25% Read” notification appears
  • 50% - “+10 XP - 50% Read” notification appears
  • 75% - “+15 XP - 75% Read” notification appears
  • 100% - “+50 XP - Article Complete!” + celebration

What to do: Scroll all the way down and back up to reset, then scroll down again.

5. Focus Mode 📖

  • Can you see a 📖 button at bottom-left?
  • Click it - does the page fade/change?
  • Did you get “+5 XP - Focus Mode!” notification?
  • Click again to exit focus mode

What to do: Look for 📖 button bottom-left, click it.

6. Scroll to Top ⬆️

  • Scroll down 500+ pixels
  • Does an ⬆️ button appear at bottom-left?
  • Click it - does page scroll to top smoothly?
  • Did you get “+2 XP - Quick Scroll!” notification?

What to do: Scroll way down, look for ⬆️ button, click it.

Keyboard Shortcuts

Test each keyboard shortcut (make sure you’re not in a text field):

  • Press S - Stats dashboard toggles
  • Press H - Page scrolls to top
  • Press B - Page scrolls to bottom
  • Press ? - Shortcuts guide appears
  • Press R - Jumps to reactions section (see below ⬇️)

What to do: Press each key and observe the result.

Reactions System

Scroll down to find the reaction buttons below, then:

  • Click 🔥 - See particle burst animation
  • Click ❤️ - See particle burst animation
  • Click 😂 - See particle burst animation
  • Click 🤯 - See particle burst animation
  • Each click should show “+2 XP - Reaction!” notification
  • Reaction counts should increase

What to do: Scroll to reactions section and click each emoji.

Easter Eggs

7. Konami Code 🎮

Type this sequence on your keyboard: ↑ ↑ ↓ ↓ ← → ← → B A

Use arrow keys for arrows, then letters B and A.

  • Screen enters rainbow mode (colors shift)
  • Message appears: “🎮 KONAMI CODE ACTIVATED! 🎮”
  • “+500 XP - KONAMI CODE!” notification appears
  • Achievement unlocked notification appears

What to do: Type the code slowly and carefully. Use actual arrow keys!

8. Header Double-Click 🎯

  • Scroll to the very top of the page
  • Double-click on the site header (the green title area)
  • Matrix-style “falling green text” effect appears
  • Achievement might unlock (if first secret)

What to do: Scroll to top, double-click the header.

Achievements

9. Check Achievement Progress 🏆

  • Press S to open stats dashboard
  • Scroll down to “Achievements Unlocked” section
  • See which achievements you have

You should already have:

  • ✅ First Visit
  • ✅ Scroll Master (if you scrolled past 1000px)
  • ✅ Secret Hunter (if you did Konami Code or header secret)

What to do: Open stats and check achievements list.

Time-Based Features

10. Time of Day Greeting 🌅

  • Open this page in a new tab (or refresh)
  • First time per session, you should see a greeting:
    • Late night (12 AM - 6 AM): “🌙 Burning the midnight oil?”
    • Morning (6 AM - 12 PM): “☀️ Good morning, reader!”
    • Afternoon (12 PM - 6 PM): “🌤️ Good afternoon!”
    • Evening (6 PM - 12 AM): “🌆 Good evening!”

What to do: Refresh the page (or open in new tab).

Visual Effects

11. Level Up (If You Can) ⬆️

Level up happens at 100 XP per level. If you’ve earned enough:

  • Full-screen modal appears
  • Shows “LEVEL UP!” with your new level
  • Fireworks animation in background
  • “AWESOME!” button to dismiss

What to do: Keep earning XP until you level up!

12. Achievement Unlock Notification 🎖️

When you unlock an achievement:

  • Gold-bordered notification slides from right
  • Shows 🏆 icon bouncing
  • Says “Achievement Unlocked!” with the name
  • Automatically dismisses after 4 seconds

What to do: Complete an achievement (try Konami Code if you haven’t).

Bonus Features

13. Code Copy Button 📋

Look for a code block below this section:

console.log("Test code block!");
// Hover over this code block
// You should see a 📋 button appear
  • Hover over the code block
  • 📋 button appears in top-right of code
  • Click it - code is copied to clipboard
  • Button changes to ✅ briefly
  • “+5 XP - Code Copied!” notification appears

What to do: Hover over code above, click 📋 button.

14. Text Highlighting ✍️

  • Select a large chunk of text on this page (50+ characters)
  • Release mouse button
  • “+3 XP - Text Highlighted!” notification appears
  • (Limited to 5 times per article)

What to do: Click and drag to highlight text.

15. Share Button (If Supported) 🔗

If your browser supports Web Share API (mobile browsers, some desktop):

  • Look in the post metadata area (near the date)
  • See a “🔗 Share” button
  • Click it - native share dialog opens
  • Share (or cancel)
  • If shared: “+10 XP - Shared Article!” notification

What to do: Look for share button near the top, click it.

Long-Term Features

16. Daily Streak 🔥

This requires multiple days:

  • Visit the blog today - streak starts at 1
  • Come back tomorrow - “+10 XP - Daily Streak!” notification
  • Current streak increases to 2
  • Keep visiting daily
  • At 7 days: “Week Warrior” achievement
  • At 30 days: “Month Master” achievement

What to do: Visit the blog every day for a week!

17. Active Reading Bonus ⏱️

If you stay on a page and actively read (scroll, move mouse):

  • Every 5 minutes: “+25 XP - Active Reading Bonus!” notification
  • Reading time tracked in stats

What to do: Read for 5+ minutes while occasionally scrolling.

🎯 React to This Post!

Now test the reactions system:

⬇️ SCROLL DOWN TO REACTIONS ⬇️

📊 Current Stats Check

Press S right now and check:

  • What’s your current level?
  • How much XP do you have?
  • How many articles have you read?
  • What’s your streak?
  • Which achievements have you unlocked?

🎮 Advanced Tests

Full Feature Sequence

Try this complete sequence:

  1. ✅ Refresh the page (see greeting)
  2. ✅ Check your level (top-right)
  3. ✅ Press S to see stats
  4. ✅ Close stats panel
  5. ✅ Scroll to 25% (watch progress bar and XP notification)
  6. ✅ Press H to go back to top
  7. ✅ Type Konami Code: ↑ ↑ ↓ ↓ ← → ← → B A
  8. ✅ Watch rainbow mode activate
  9. ✅ Click 📖 to enter focus mode
  10. ✅ Click 📖 again to exit
  11. ✅ Scroll all the way down
  12. ✅ Click each reaction: 🔥 ❤️ 😂 🤯
  13. ✅ Click ⬆️ to scroll to top
  14. ✅ Double-click the header
  15. ✅ Watch Matrix rain effect
  16. ✅ Press S to see updated stats
  17. ✅ Check your new level and achievements!

✨ Feature Stress Test

Want to level up fast? Do this:

  1. Scroll to bottom (50 XP for completion)
  2. React 4 times (8 XP)
  3. Use Konami Code (500 XP - if not done yet)
  4. Copy the code block above (5 XP)
  5. Highlight text (3 XP)
  6. Use focus mode (5 XP)
  7. Use scroll to top (2 XP)
  8. Share article if possible (10 XP)

Total possible: 583 XP in one session! That’s almost 6 levels!

🐛 Troubleshooting

Issue: Not seeing XP notifications

  • Fix: Refresh the page
  • Check: JavaScript is enabled
  • Look: Bottom-right for notifications

Issue: Stats not saving

  • Fix: Check browser allows localStorage
  • Note: Private/incognito mode may not persist data

Issue: Progress bar not appearing

  • Fix: Must be on a post page
  • Check: Scroll down to activate

Issue: Konami Code not working

  • Fix: Type slowly and carefully
  • Use: Actual arrow keys, then B, then A
  • Try: Focus on page first (click anywhere)

Issue: Buttons not appearing

  • Fix: Refresh the page
  • Check: No JavaScript errors in console

🎉 Completion

If you’ve tested all features above, you:

  • ✅ Understand the gamification system
  • ✅ Know how to earn XP
  • ✅ Can use keyboard shortcuts
  • ✅ Found the easter eggs
  • ✅ Experienced all visual effects
  • ✅ Earned a bunch of XP!

Check your stats one more time (press S) and see how much you’ve leveled up!

📚 More Information

🚀 Now Go Read Real Articles!

This test page helped you understand the features. Now go enjoy the actual blog content and earn XP naturally while reading interesting articles!

Remember: The goal is to make reading more fun and engaging. The gamification is just the cherry on top! 🍒

Keep scrolling to get your completion XP! ⬇️

🎯 ALMOST THERE!

Keep scrolling for 50 XP completion bonus!

🏆 CONGRATULATIONS! 🏆

You made it! Check your XP notification for the completion bonus!

Press S to see your final stats! 📊