<!DOCTYPE html>
<html lang="en-US" prefix="og: https://ogp.me/ns#" class="no-js no-svg">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta content='width=device-width,minimum-scale=1,initial-scale=1' name='viewport'/>
<!--[if IE]><meta content='IE=edge; IE=9; IE=8; IE=7; chrome=1' http-equiv='X-UA-Compatible'/><![endif]-->
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<script src="https://cdn.jsdelivr.net/npm/lucide@1.7.0/dist/umd/lucide.min.js"></script>
    <style>
        body { 
            font-family: -apple-system,'Trebuchet MS','ui-sans-serif',system-ui,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue",Helvetica,Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
            background-color: #000000; 
            background-image: 
                linear-gradient(to right, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
                linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
            background-size: 40px 40px;
            display: flex;
            justify-content: center;
            min-height: 100vh;
            margin: 0;
        }
        .scrollbar-hide::-webkit-scrollbar { display: none; }
        .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
        .pks-align{text-align:center;margin:15px auto;clear:both}.pks-align .pads-txt{font-size:12px;display:block;color:#999;margin-bottom:5px;text-transform:uppercase;letter-spacing:1px}.pkads ins.adsbygoogle,.pks-align ins.adsbygoogle{min-height:280px}@media screen and (max-width:500px){.pkads ins.adsbygoogle,.pks-align ins.adsbygoogle{min-height:300px}}.pkads ins.adsbygoogle,.pks-align .adsbygoogle{text-align:center;margin:0 auto;display:block}
    </style>
    <style>
    ul.custom-bullets > li::marker {
        color: #fca942;
    }
.pagination-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

.pagination-wrapper .nav-links {
    display: flex;
    gap: 28px;
    background: #0f172a;
    padding: 8px;
    border-radius: 12px;
    border: 1px solid #334155;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

.pagination-wrapper a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    font-size: 14px;
    color: #cbd5f5;
    background: #1e293b;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.25s ease;
}

.pagination-wrapper a:hover {
    background: #facc15;
    color: #000;
}

.pagination-wrapper .nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.pagination-wrapper i {
    width: 16px;
    height: 16px;
}
.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
}

.search-form-box {
    max-width: 600px;
    margin: 20px auto;
    padding: 0 15px;
}

.search-form-box form div {
    display: flex;
    align-items: center;
    background: #0f172a;
    border: 1px solid #334155;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

/* Input Field */
.search-form-box input[type="text"] {
    flex: 1;
    padding: 12px 14px;
    border: none;
    outline: none;
    background: transparent;
    color: #e2e8f0;
    font-size: 14px;
}

/* Placeholder */
.search-form-box input[type="text"]::placeholder {
    color: #94a3b8;
}

/* Button */
.search-form-box input[type="submit"] {
    padding: 12px 18px;
    border: none;
    background: #1e293b;
    color: #e2e8f0;
    cursor: pointer;
    font-size: 14px;
    border-left: 1px solid #334155;
    transition: 0.25s;
}

/* Hover Effect */
.search-form-box input[type="submit"]:hover {
    background: #facc15;
    color: #000;
}

/* Focus Effect */
.search-form-box form:focus-within {
    border-color: #facc15;
}
.no-results {
    margin: 50px auto;
    padding: 30px 20px;
    text-align: center;
    border: 1px solid #334155;
    border-radius: 16px;
}

/* Heading */
.no-results h2 {
    font-size: 22px;
    color: #facc15;
    margin-bottom: 10px;
}

/* Description */
.no-results p {
    font-size: 14px;
    color: #94a3b8;
    margin-bottom: 20px;
}

/* Optional: Add button */
.no-results a {
    display: inline-block;
    padding: 10px 16px;
    background: #1e293b;
    color: #e2e8f0;
    text-decoration: none;
    border-radius: 10px;
    border: 1px solid #334155;
    transition: 0.25s;
}

.no-results a:hover {
    background: #facc15;
    color: #000;
}
</style>
<style>
    .tag-active { 
        background-color: #eab308; 
        color: #0f172a; 
        border-color: #eab308;
    }
    .tag-inactive { 
        background-color: transparent; 
        color: #9ca3af; 
        border-color: #334155; 
    }
    .tag-inactive:hover { 
        border-color: #eab308; 
        color: #eab308; 
    }

</style>
<style>
    /* 2. MOBILE APP CONTAINER */
        .reward-page.app-container { 
            background-color: #0f172a; 
            width: 100%;
            max-width: 28rem; 
            height: 100vh;    
            max-height: 100vh;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
            border-left: 1px solid #1e293b;
            border-right: 1px solid #1e293b;
        }
        
        /* Modal Gradient */
        .reward-page .modal-gradient { 
            background: linear-gradient(145deg, #1e293b, #0f172a); 
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
        }

        /* Coin Flip Animation */
        .reward-page .coin-container { perspective: 1000px; }
        .reward-page .coin {
            width: 128px; height: 128px;
            position: relative;
            transform-style: preserve-3d;
            animation: flipCoin 2s ease-out forwards;
        }
        
        @keyframes flipCoin {
            0% { transform: rotateY(0) translateY(0); }
            50% { transform: rotateY(900deg) translateY(-20px); }
            100% { transform: rotateY(1800deg) translateY(0); }
        }

        /* Coin Shine Effect */
        .reward-page .coin::after {
            content: ''; position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            border-radius: 50%;
            background: linear-gradient(135deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 50%);
            z-index: 10;
        }
    </style>
<style>
        /* 2. APP CONTAINER COLORS */
        .quick-start.app-container { background-color: #0f172a; } 
        .quick-start .bg-card { background-color: #1e293b; }
        .quick-start .bg-navy-dark { background-color: #0f172a; }
        .quick-start .border-subtle { border: 1px solid rgba(255, 255, 255, 0.1); }
        
        .quick-start .fade-in { animation: fadeIn 0.4s ease-in-out; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

        .quick-start .correct { background-color: #16a34a !important; border-color: #16a34a !important; color: white; }
        .quick-start .wrong { background-color: #dc2626 !important; border-color: #dc2626 !important; color: white; }
        .quick-start .disabled { pointer-events: none; opacity: 0.8; }
    </style>
<style>
        /* 2. MOBILE APP CONTAINER */
        .claim-reward-page.app-container { 
            background-color: #0f172a; 
            width: 100%;
            max-width: 28rem; /* max-w-md */
            min-height: 100vh;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 1rem;
            border-left: 1px solid #1e293b;
            border-right: 1px solid #1e293b;
        }
        
        /* Coin Pop Animation */
        @keyframes popIn {
            0% { transform: scale(0.5); opacity: 0; }
            60% { transform: scale(1.2); opacity: 1; }
            100% { transform: scale(1); }
        }
        .claim-reward-page .coin-pop {
            animation: popIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
        }
    </style>
	    <script>
        function toggleSidebar() {
            const sidebar = document.getElementById('sidebar');
            const overlay = document.getElementById('sidebar-overlay');
            if (sidebar && overlay) {
                if (sidebar.classList.contains('-translate-x-full')) {
                    sidebar.classList.remove('-translate-x-full');
                    overlay.classList.remove('hidden');
                } else {
                    sidebar.classList.add('-translate-x-full');
                    overlay.classList.add('hidden');
                }
            }
        }
    </script>
  <script>function runAfterPageLoad(n){"complete"===document.readyState?n():window.addEventListener?window.addEventListener("load",n,!1):window.attachEvent?window.attachEvent("onload",n):window.onload=n}</script>

<!-- Search Engine Optimization by Rank Math - https://rankmath.com/ -->
<title>Quick Start! - Fast Rojgar</title>
<meta name="robots" content="index, follow, max-snippet:-1, max-video-preview:-1, max-image-preview:large"/>
<link rel="canonical" href="https://fastrojgar.in/" />
<meta property="og:locale" content="en_US" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Quick Start! - Fast Rojgar" />
<meta property="og:url" content="https://fastrojgar.in/" />
<meta property="og:site_name" content="Fast Rojgar" />
<meta property="og:updated_time" content="2026-04-05T10:08:03+05:30" />
<meta property="og:image" content="https://fastrojgar.in/wp-content/uploads/2026/03/Fast-Rojgar.jpg" />
<meta property="og:image:secure_url" content="https://fastrojgar.in/wp-content/uploads/2026/03/Fast-Rojgar.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Fast Rojgar" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="article:published_time" content="2026-03-24T17:59:11+05:30" />
<meta property="article:modified_time" content="2026-04-05T10:08:03+05:30" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Quick Start! - Fast Rojgar" />
<meta name="twitter:image" content="https://fastrojgar.in/wp-content/uploads/2026/03/Fast-Rojgar.jpg" />
<meta name="twitter:label1" content="Written by" />
<meta name="twitter:data1" content="admin" />
<meta name="twitter:label2" content="Time to read" />
<meta name="twitter:data2" content="Less than a minute" />
<script type="application/ld+json" class="rank-math-schema">{"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://fastrojgar.in/#organization","name":"Fast Rojgar","url":"https://fastrojgar.in","logo":{"@type":"ImageObject","@id":"https://fastrojgar.in/#logo","url":"https://fastrojgar.in/wp-content/uploads/2026/03/FastRojgar.png","contentUrl":"https://fastrojgar.in/wp-content/uploads/2026/03/FastRojgar.png","caption":"Fast Rojgar","inLanguage":"en-US","width":"512","height":"512"}},{"@type":"WebSite","@id":"https://fastrojgar.in/#website","url":"https://fastrojgar.in","name":"Fast Rojgar","alternateName":"Fast Rojgar Quiz","publisher":{"@id":"https://fastrojgar.in/#organization"},"inLanguage":"en-US","potentialAction":{"@type":"SearchAction","target":"https://fastrojgar.in/?s={search_term_string}","query-input":"required name=search_term_string"}},{"@type":"ImageObject","@id":"https://fastrojgar.in/wp-content/uploads/2026/03/Fast-Rojgar.jpg","url":"https://fastrojgar.in/wp-content/uploads/2026/03/Fast-Rojgar.jpg","width":"1200","height":"630","caption":"Fast Rojgar","inLanguage":"en-US"},{"@type":"WebPage","@id":"https://fastrojgar.in/#webpage","url":"https://fastrojgar.in/","name":"Quick Start! - Fast Rojgar","datePublished":"2026-03-24T17:59:11+05:30","dateModified":"2026-04-05T10:08:03+05:30","about":{"@id":"https://fastrojgar.in/#organization"},"isPartOf":{"@id":"https://fastrojgar.in/#website"},"primaryImageOfPage":{"@id":"https://fastrojgar.in/wp-content/uploads/2026/03/Fast-Rojgar.jpg"},"inLanguage":"en-US"},{"@type":"Person","@id":"https://fastrojgar.in/author/admin/","name":"admin","url":"https://fastrojgar.in/author/admin/","image":{"@type":"ImageObject","@id":"https://secure.gravatar.com/avatar/5dea6a1bd3810a9a9df7467532d08458e5e0a70d639cfc539f168136d0affe35?s=96&amp;d=mm&amp;r=g","url":"https://secure.gravatar.com/avatar/5dea6a1bd3810a9a9df7467532d08458e5e0a70d639cfc539f168136d0affe35?s=96&amp;d=mm&amp;r=g","caption":"admin","inLanguage":"en-US"},"sameAs":["https://fastrojgar.in"],"worksFor":{"@id":"https://fastrojgar.in/#organization"}},{"@type":"Article","headline":"Quick Start! - Fast Rojgar","datePublished":"2026-03-24T17:59:11+05:30","dateModified":"2026-04-05T10:08:03+05:30","author":{"@id":"https://fastrojgar.in/author/admin/","name":"admin"},"publisher":{"@id":"https://fastrojgar.in/#organization"},"name":"Quick Start! - Fast Rojgar","@id":"https://fastrojgar.in/#richSnippet","isPartOf":{"@id":"https://fastrojgar.in/#webpage"},"image":{"@id":"https://fastrojgar.in/wp-content/uploads/2026/03/Fast-Rojgar.jpg"},"inLanguage":"en-US","mainEntityOfPage":{"@id":"https://fastrojgar.in/#webpage"}}]}</script>
<!-- /Rank Math WordPress SEO plugin -->

<link rel="alternate" type="application/rss+xml" title="Fast Rojgar &raquo; Feed" href="https://fastrojgar.in/feed/" />
<link rel="alternate" type="application/rss+xml" title="Fast Rojgar &raquo; Comments Feed" href="https://fastrojgar.in/comments/feed/" />
<link rel="alternate" title="oEmbed (JSON)" type="application/json+oembed" href="https://fastrojgar.in/wp-json/oembed/1.0/embed?url=https%3A%2F%2Ffastrojgar.in%2F" />
<link rel="alternate" title="oEmbed (XML)" type="text/xml+oembed" href="https://fastrojgar.in/wp-json/oembed/1.0/embed?url=https%3A%2F%2Ffastrojgar.in%2F&#038;format=xml" />
<style id='wp-img-auto-sizes-contain-inline-css' type='text/css'>
img:is([sizes=auto i],[sizes^="auto," i]){contain-intrinsic-size:3000px 1500px}
/*# sourceURL=wp-img-auto-sizes-contain-inline-css */
</style>
<style id='wp-emoji-styles-inline-css' type='text/css'>

	img.wp-smiley, img.emoji {
		display: inline !important;
		border: none !important;
		box-shadow: none !important;
		height: 1em !important;
		width: 1em !important;
		margin: 0 0.07em !important;
		vertical-align: -0.1em !important;
		background: none !important;
		padding: 0 !important;
	}
/*# sourceURL=wp-emoji-styles-inline-css */
</style>
<link rel="https://api.w.org/" href="https://fastrojgar.in/wp-json/" /><link rel="alternate" title="JSON" type="application/json" href="https://fastrojgar.in/wp-json/wp/v2/pages/59" /><link rel="EditURI" type="application/rsd+xml" title="RSD" href="https://fastrojgar.in/xmlrpc.php?rsd" />
<meta name="generator" content="WordPress 6.9.4" />
<link rel='shortlink' href='https://fastrojgar.in/' />
<link rel="icon" href="https://fastrojgar.in/wp-content/uploads/2026/03/cropped-FastRojgar-32x32.png" sizes="32x32" />
<link rel="icon" href="https://fastrojgar.in/wp-content/uploads/2026/03/cropped-FastRojgar-192x192.png" sizes="192x192" />
<link rel="apple-touch-icon" href="https://fastrojgar.in/wp-content/uploads/2026/03/cropped-FastRojgar-180x180.png" />
<meta name="msapplication-TileImage" content="https://fastrojgar.in/wp-content/uploads/2026/03/cropped-FastRojgar-270x270.png" />
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7506620391446138" crossorigin="anonymous"></script>
<script>
function initializeAds() {
    return new Promise((resolve) => {

        if (window.afg && window.afg.ready) {
            resolve(true);
            return;
        }

        window.adsbygoogle = window.adsbygoogle || [];
        const afg = window.afg || {
            ready: false
        };
        window.afg = afg;

        if (!afg.adBreak) {
            afg.adBreak = window.adConfig = function (o) {
                adsbygoogle.push(o);
            };
        }

        const onAdsReady = () => {
            window.afg.ready = true;
            console.log("H5 Ads Ready");
            resolve(true);
        };

        try {
            if (!window.adConfigCalled) {
                window.adConfigCalled = true;
                window.adConfig({
                    preloadAdBreaks: 'on',
                    sound: 'on', // Best practice for H5 games ads
                    onReady: onAdsReady,
                });
            } else {
                resolve(true);
            }
        } catch (e) {
            console.error("Ad Config Error:", e);
            resolve(false);
        }
    });
}

initializeAds();

async function playGameWithAd(callback) {
    initializeAds().then((isReady) => {
        if (isReady) {
            window.afg.adBreak({
                type: 'preroll',
                name: 'game_started',

                beforeAd: () => {
                    console.log("Ad is showing - pausing redirect");
                },

                adBreakDone: () => {
                    if (callback) callback();
                }
            });
        } else {
            if (callback) callback();
        }
    });
}

async function playrewardAd() {
    initializeAds().then((isReady) => {
        if (isReady) {
            window.afg.adBreak({
                type: "reward",
                name: "earn_free_coin",

                beforeAd: function () {
                    console.log("beforeAd");
                },
                afterAd: function () {
                    console.log("afterAd")
                },
                beforeReward: (showAdFn) => {
                    console.log("beforereward", showAdFn);
                    showToast("Ad is playing...");
                    showAdFn()
                },
                adDismissed: function () {
                    console.log("adDismissed");
                    giveReward(100);
                    showToast("Ad not available, try again later", "error");
                },
                adViewed: function () {
                    console.log("ad viewed");
                    giveReward(100);
                    localStorage.setItem("lastEarn", Date.now());
                },
                adBreakDone: n => {
                    console.log("adbreak add");
                    // giveReward(100);
                }
            })
        } else {
            giveReward(100);
        }
    });
}
</script></head>

<body class="home wp-singular page-template-default page page-id-59 wp-theme-quizpro">

 
<div class="app-container w-full max-w-md min-h-screen shadow-2xl flex flex-col p-4 text-white overflow-hidden relative border-x border-gray-800 quick-start">

      
<div class="w-full">
<div class="pks-align">
<p class="pads-txt">Advertisement</p>
<div class="pkads">
<!-- Head Ad -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-7506620391446138"
     data-ad-slot="7123356055"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div></div>
</div>
        <div class="w-full space-y-6">

            <div class="text-center py-4">
                <h1 class="text-3xl font-extrabold italic bg-clip-text text-transparent bg-gradient-to-r from-yellow-400 to-orange-500">
                    Quick Start!
                </h1>
                <p class="text-gray-400 text-sm mt-1">Answer 2 questions and win up to 200 coins.</p>
            </div>

            <div class="bg-card rounded-3xl p-6 border-subtle shadow-2xl relative overflow-hidden">
                <div class="absolute top-0 right-0 w-32 h-32 bg-blue-500/10 rounded-full blur-3xl -mr-16 -mt-16 pointer-events-none"></div>

                <div class="flex justify-center mb-6 relative z-10">
                    <span class="bg-navy-dark px-4 py-1.5 rounded-full text-xs font-bold border border-blue-500/30 shadow-inner flex items-center gap-2">
                        <span id="q-counter" class="text-yellow-400">1/2</span>
                        <span class="text-gray-500">|</span>
                        <span class="text-gray-300">Question</span>
                    </span>
                </div>

                <h2 id="q-text" class="text-lg font-bold text-center mb-8 fade-in min-h-[60px] flex items-center justify-center leading-relaxed">
                    <span class="animate-pulse text-gray-500">Loading Question...</span>
                </h2>

                <div class="grid grid-cols-2 gap-3 fade-in" id="options-grid">
                    <button class="option-btn bg-navy-dark hover:bg-slate-800 border border-slate-700 rounded-xl py-4 px-3 text-sm font-semibold transition-all active:scale-95 shadow-sm" data-index="1"></button>
                    <button class="option-btn bg-navy-dark hover:bg-slate-800 border border-slate-700 rounded-xl py-4 px-3 text-sm font-semibold transition-all active:scale-95 shadow-sm" data-index="2"></button>
                    <button class="option-btn bg-navy-dark hover:bg-slate-800 border border-slate-700 rounded-xl py-4 px-3 text-sm font-semibold transition-all active:scale-95 shadow-sm" data-index="3"></button>
                    <button class="option-btn bg-navy-dark hover:bg-slate-800 border border-slate-700 rounded-xl py-4 px-3 text-sm font-semibold transition-all active:scale-95 shadow-sm" data-index="4"></button>
                </div>
            </div>
            


            <div class="bg-card rounded-2xl p-5 border-subtle">
                <h3 class="text-center text-xs font-bold uppercase tracking-widest text-gray-400 mb-4">Why Choose Us?</h3>
                <div class="grid grid-cols-3 gap-3">
                    <div class="bg-navy-dark p-3 rounded-xl flex flex-col items-center text-center border border-gray-700/50 hover:border-yellow-500/30 transition-colors">
                        <div class="w-8 h-8 rounded-full bg-yellow-500/10 flex items-center justify-center mb-2">
                            <i data-lucide="trophy" class="w-4 h-4 text-yellow-500"></i>
                        </div>
                        <span class="font-bold text-[10px] text-gray-200">Daily Rewards</span>
                    </div>
                    <div class="bg-navy-dark p-3 rounded-xl flex flex-col items-center text-center border border-gray-700/50 hover:border-blue-500/30 transition-colors">
                        <div class="w-8 h-8 rounded-full bg-blue-500/10 flex items-center justify-center mb-2">
                            <i data-lucide="smartphone" class="w-4 h-4 text-blue-400"></i>
                        </div>
                        <span class="font-bold text-[10px] text-gray-200">Mobile First</span>
                    </div>
                    <div class="bg-navy-dark p-3 rounded-xl flex flex-col items-center text-center border border-gray-700/50 hover:border-purple-500/30 transition-colors">
                        <div class="w-8 h-8 rounded-full bg-purple-500/10 flex items-center justify-center mb-2">
                            <i data-lucide="zap" class="w-4 h-4 text-purple-400"></i>
                        </div>
                        <span class="font-bold text-[10px] text-gray-200">Live Quiz</span>
                    </div>
                </div>
            </div>

            <div class="bg-card rounded-2xl p-6 border-subtle">
                <h3 class="text-lg font-bold mb-4 flex items-center gap-2">
                    <i data-lucide="book-open" class="w-5 h-5 text-gray-400"></i>
                    How to Play?
                </h3>
                <ol class="space-y-3 text-sm text-gray-300">
                    <li class="flex gap-3"><span class="bg-slate-700 w-5 h-5 rounded-full flex items-center justify-center text-[10px] font-bold">1</span> Select your favorite quiz category</li>
                    <li class="flex gap-3"><span class="bg-slate-700 w-5 h-5 rounded-full flex items-center justify-center text-[10px] font-bold">2</span> Answer questions correctly to earn coins</li>
                    <li class="flex gap-3"><span class="bg-slate-700 w-5 h-5 rounded-full flex items-center justify-center text-[10px] font-bold">3</span> Redeem coins for exciting rewards</li>
                </ol>
            </div>

            <div class="pb-10 pt-4 px-2 opacity-75">
                <h4 class="text-center font-bold border-b border-gray-700 pb-2 mb-4 text-sm text-gray-400">Play Quiz and Win Coins!</h4>
                <ul class="space-y-2 text-xs text-gray-500">
                    <li class="flex items-start gap-2"><span class="text-blue-500">•</span> <span>Play Quizzes in Many categories!</span></li>
                    <li class="flex items-start gap-2"><span class="text-blue-500">•</span> <span>Improve Your Speed & Accuracy!</span></li>
                    <li class="flex items-start gap-2"><span class="text-blue-500">•</span> <span>Trusted by millions of users!</span></li>
                </ul>
            </div>

        </div>
    </div>
    <script>
// Shuffle function
function shuffleArray(array) {
    return array.sort(() => Math.random() - 0.5);
}

// Original quiz data
let quizData = [{
    question: "भारत की राजधानी क्या है?",
    options: ["मुंबई", "कोलकाता", "नई दिल्ली", "चेन्नई"],
    correct_pos: 2 // NOTE: 0-based index (नई दिल्ली)
},
{
    question: "ताज महल कहाँ स्थित है?",
    options: ["दिल्ली", "जयपुर", "आगरा", "लखनऊ"],
    correct_pos: 2 // आगरा
}];

// Shuffle questions
quizData = shuffleArray(quizData);

const COINS_PER_RIGHT_ANSWER = 100;
let currentQIndex = 0;
let score = 0;

const totalQuestions = quizData.length;
const qTextEl = document.getElementById('q-text');
const qCounterEl = document.getElementById('q-counter');
const buttons = document.querySelectorAll('.option-btn');
let firstAnswerClicked = false; // NEW FLAG
function loadQuestion(index) {
    if (index >= totalQuestions) {
        finishQuiz();
        return;
    }

    const data = quizData[index];

    // Create options with index mapping
    let options = data.options.map((opt, i) => ({
        text: opt,
        isCorrect: i === data.correct_pos
    }));

    // Shuffle options
    options = shuffleArray(options);

    qCounterEl.innerText = `${index + 1}/${totalQuestions}`;
    qTextEl.innerText = data.question;
            qTextEl.classList.remove('fade-in'); 
        void qTextEl.offsetWidth; 
        qTextEl.classList.add('fade-in');

    buttons.forEach((btn, i) => {
        btn.innerText = options[i].text;
        btn.classList.remove('correct', 'wrong', 'disabled');
        btn.dataset.correct = options[i].isCorrect;
        btn.dataset.index = i;
    });
}

buttons.forEach(btn => {
    btn.addEventListener('click', function () {
        if (this.classList.contains('disabled')) return;

        buttons.forEach(b => b.classList.add('disabled'));

        const isCorrect = this.dataset.correct === "true";

        if (isCorrect) {
            this.classList.add('correct');
            score++;
        } else {
            this.classList.add('wrong');
            buttons.forEach(b => {
                if (b.dataset.correct === "true") {
                    b.classList.add('correct');
                }
            });
        }

        if (!firstAnswerClicked) {
            firstAnswerClicked = true;
            if (typeof playGameWithAd === "function") {
                playGameWithAd(() => {
                    console.log("Ad finished, game running...");
                });
            }
        }

        setTimeout(() => {
            currentQIndex++;
            loadQuestion(currentQIndex);
        }, 900);
    });
});

function finishQuiz() {
    const totalCoins = score * COINS_PER_RIGHT_ANSWER;

    sessionStorage.setItem('earned_coins', totalCoins);

    window.location.href = '/reward/';
}
// Start quiz
if (quizData.length > 0) loadQuestion(0);
else qTextEl.innerText = "No questions found in database.";
</script>

<!-- Toast Container -->
<div id="toast-container" class="fixed top-5 right-5 z-50 space-y-2"></div>

<script>
// 🔹 Convert number to short format
function formatCoins(num) {
    num = Number(num);

    if (num >= 10000000) return (num / 10000000).toFixed(1) + "Cr"; // Crore
    if (num >= 100000) return (num / 100000).toFixed(1) + "L";     // Lakh
    if (num >= 1000) return (num / 1000).toFixed(1) + "K";         // Thousand

    return num;
}

// 🔹 Load Coins
function loadCoins() {
    let saved = localStorage.getItem("coins");

    if (saved !== null) {
        document.getElementById("balancecoin").innerText = formatCoins(saved);
    } else {
        localStorage.setItem("coins", 400);
        document.getElementById("balancecoin").innerText = formatCoins(400);
    }
}

// 🔹 Update Coins
function updateCoins(newAmount) {
    document.getElementById("balancecoin").innerText = formatCoins(newAmount);
    localStorage.setItem("coins", newAmount);
}

// 🔹 Toast Function
function showToast(message, type = "success") {
	console.log(message);
    const container = document.getElementById("toast-container");

    const toast = document.createElement("div");

    let bg = type === "success"
        ? "bg-green-500/90 border-green-400"
        : "bg-red-500/90 border-red-400";

    toast.className = `flex items-center gap-2 px-4 py-2 text-white rounded-lg shadow-lg border ${bg} backdrop-blur-md transform translate-x-full opacity-0 transition-all duration-300`;

    toast.innerHTML = `
        <i data-lucide="${type === 'success' ? 'check-circle' : 'alert-circle'}" class="w-4 h-4"></i>
        <span class="text-sm font-semibold">${message}</span>
    `;

    container.appendChild(toast);
    lucide.createIcons();
    setTimeout(() => {
        toast.classList.remove("translate-x-full", "opacity-0");
    }, 10);

    setTimeout(() => {
        toast.classList.add("translate-x-full", "opacity-0");

        setTimeout(() => toast.remove(), 300);
    }, 3000);
}

// 🔹 Give Reward
function giveReward(coins) {
    let current = parseInt(localStorage.getItem("coins")) || 0;
    let newBalance = current + coins;

    updateCoins(newBalance);

    showToast("You earned " + coins + " coins!");
}

// 🔹 Earn Logic
function watchAdAndEarn() {

    let lastEarn = localStorage.getItem("lastEarn");

    if (lastEarn && (Date.now() - lastEarn < 60000)) {
        showToast("Wait 1 minute!", "error");
        return;
    }
    playrewardAd(() => {
        console.log("playrewardAd...");
    });
}

if (document.getElementById("sidebar")) {
    loadCoins();
}
// START QUIZ
function startQuiz(url) {
    if (typeof playGameWithAd === "function") {
        playGameWithAd(() => {
            window.location.href = url;
        });
    }
}
</script>

<script>
window.lucide&&lucide.createIcons();
</script>

<audio id="clickSound" src="https://fastrojgar.in/wp-content/themes/quizpro/inc/click.wav" preload="auto" hidden style="display:none;"></audio>

<script>
function playClickSound() {
    const sound = document.getElementById("clickSound");
    if (!sound) return;

    sound.currentTime = 0;
    sound.play().catch(() => {});
}

document.querySelectorAll("a, button").forEach(el => {
    el.addEventListener("click", playClickSound);
});
</script>
</body>
</html>