Purpose: Interactive math trick that predicts a user's chosen integer between 1 and the selected maximum by asking which precomputed "cards" contain the number.
Algorithm / Principle: Each card corresponds to a binary place value (1,2,4,8,...). When a user confirms their number appears on a card, that place value is added to a running sum. After all cards are asked, the sum is the predicted number.
Inputs: A positive integer maximum (default 31). The user mentally selects a number in the range [1, max]. Then answers Yes/No for each card.
Outputs: The predicted integer (sum of selected bit values). If the sum is outside [1, max], the system treats the result as invalid and shows a failure animation.
Edge cases: If the user answers inconsistently or changes their number mid-flow the prediction can be invalid. Entering a non-integer or a value < 2 will prompt an alert.
Files & Structure: Single-file self-contained HTML with embedded CSS and JS. No backend required. To run, open guess_number.html in a browser.
Animations: Pop animation for card transitions, confetti-like pieces on success, and shake animation on failure. Confetti elements are removed after animation to avoid DOM growth.
Accessibility: The modal uses ARIA role dialog. Buttons are focusable. Keyboard navigation improvements can be added on request.
Customization: To support larger ranges (e.g., up to 1023), increase the max value โ the page will compute the required number of bit-questions automatically (number of bits = ceil(log2(max+1))).
If you'd like I can extract the JavaScript into a separate file, add unit tests for the card generation, or replace the DOM confetti with a canvas-based confetti library.