Blooket Answer Highlighter

Highlights the correct answer in Blooket games. Toggle with Alt+X (or Cmd+X on Mac).
Ask a question, post a review, or report the script.
Wrap lines
// ==UserScript==
// @name         Blooket Answer Highlighter
// @namespace    https://greasyfork.org/
// @version      1.1
// @description  Highlights the correct answer in Blooket games. Toggle with Alt+X (or Cmd+X on Mac).
// @author       
// @match        https://www.blooket.com/*
// @match        https://play.blooket.com/*
// @grant        none
// @run-at       document-idle
// @license MIT
// ==/UserScript==

(function () {
    let enabled = false;
    let highlightEl = null;

    const ANSWER_SELECTORS = [
        '[class*="answerText"]',
        '[class*="AnswerText"]',
        '[class*="answer"]',
        '[class*="Answer"]',
        '[class*="choice"]',
        '[class*="Choice"]',
        '[class*="option"]',
        '[class*="Option"]',
    ];

    const CORRECT_HINTS = [
        'correct',
        'Correct',
        'right',
        'Right',
        'isCorrect',
        'isRight',
        'true',
    ];

    function getReactFiber(el) {
        if (!el) return null;
        const key = Object.keys(el).find(k =>
            k.startsWith('__reactFiber') ||
            k.startsWith('__reactInternalInstance')
        );
        return key ? el[key] : null;
    }

    function getFiberProps(fiber) {
        if (!fiber) return null;
        let node = fiber;
        while (node) {
            if (node.memoizedProps) return node.memoizedProps;
            node = node.return;
        }
        return null;
    }

    function searchPropsForCorrect(props, depth) {
        if (!props || depth > 6) return false;
        for (const key of Object.keys(props)) {
            const val = props[key];
            if (typeof val === 'boolean' && val && CORRECT_HINTS.some(h => key.toLowerCase().includes(h.toLowerCase()))) return true;
            if (typeof val === 'string' && CORRECT_HINTS.some(h => val === h)) return true;
            if (val && typeof val === 'object' && !Array.isArray(val)) {
                if (searchPropsForCorrect(val, depth + 1)) return true;
            }
        }
        return false;
    }

    function walkFiberForCorrect(fiber) {
        if (!fiber) return false;
        let node = fiber;
        let steps = 0;
        while (node && steps < 20) {
            const props = node.memoizedProps || node.pendingProps;
            if (props && searchPropsForCorrect(props, 0)) return true;
            const stateNode = node.memoizedState;
            if (stateNode && typeof stateNode === 'object') {
                const queue = stateNode.queue;
                if (queue && queue.lastRenderedState !== undefined) {
                    if (searchPropsForCorrect({ state: queue.lastRenderedState }, 0)) return true;
                }
            }
            node = node.return;
            steps++;
        }
        return false;
    }

    function findCorrectElement() {
        const candidates = [];
        for (const sel of ANSWER_SELECTORS) {
            document.querySelectorAll(sel).forEach(el => candidates.push(el));
        }

        const seen = new Set();
        const unique = candidates.filter(el => {
            if (seen.has(el)) return false;
            seen.add(el);
            return true;
        });

        for (const el of unique) {
            const fiber = getReactFiber(el);
            if (walkFiberForCorrect(fiber)) return el;
        }

        for (const el of unique) {
            const classStr = el.className || '';
            if (CORRECT_HINTS.some(h => classStr.toLowerCase().includes(h.toLowerCase()))) return el;
        }

        return null;
    }

    function removeHighlight() {
        if (highlightEl && highlightEl.parentNode) {
            highlightEl.parentNode.removeChild(highlightEl);
        }
        highlightEl = null;
    }

    function placeHighlight(el) {
        removeHighlight();
        const rect = el.getBoundingClientRect();
        const marker = document.createElement('div');
        marker.id = '__blooket_highlight__';
        marker.style.cssText = `
            position: fixed;
            left: ${rect.left + rect.width / 2 - 14}px;
            top: ${rect.top - 22}px;
            width: 28px;
            height: 18px;
            background: #FFD700;
            border-radius: 4px;
            z-index: 999999;
            pointer-events: none;
            box-shadow: 0 2px 8px rgba(0,0,0,0.35);
            transition: opacity 0.2s;
        `;
        document.body.appendChild(marker);
        highlightEl = marker;
    }

    function run() {
        if (!enabled) { removeHighlight(); return; }
        const correct = findCorrectElement();
        if (correct) {
            placeHighlight(correct);
        } else {
            removeHighlight();
        }
    }

    let observer = null;

    function startObserver() {
        if (observer) return;
        observer = new MutationObserver(() => { if (enabled) run(); });
        observer.observe(document.body, { childList: true, subtree: true, attributes: true });
    }

    function stopObserver() {
        if (observer) { observer.disconnect(); observer = null; }
    }

    document.addEventListener('keydown', function (e) {
        const isMac = navigator.platform.toUpperCase().includes('MAC');
        const trigger = isMac ? (e.metaKey && e.key === 'x') : (e.altKey && e.key === 'x');
        if (!trigger) return;
        e.preventDefault();
        enabled = !enabled;
        if (enabled) { startObserver(); run(); }
        else { stopObserver(); removeHighlight(); }
    });
})();