Number guessing

100%

Number guessing

✓ Published0🌍 Public

Last edited Sep 27, 2016

Created on Sep 17, 2016

This visualization presents a classic number-guessing card trick. It displays a series of shuffled cards, each containing a subset of numbers from 1 to 60, generated by a mathematical algorithm. The user answers "Ja" (yes) or "Nein" (no) to whether their chosen number appears on a highlighted card. After all cards are shown, the program calculates and reveals the hidden number. Built with D3 v4, it uses SVG elements and `d3.transition` for smooth card movements and the final dramatic fade-in of the solution.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

number guessing (english)

The example demonstrates the classic "magic number" card trick, where a user mentally selects a number between 1 and 60 and then answers yes or no as six shuffled cards are presented one by one. Each card contains a distinct subset of numbers, and the user’s cumulative yes/no responses are used to compute the hidden number. The visualization uses D3 v4 to render SVG cards and animated transitions, scaling each card to the foreground for interaction and shrinking it after each answer. The final solution is revealed with a slow text fade-in after the last card, using D3’s transition and style methods.

EEE2dev

91% match

Loading thumbnail…

birthday guesser (unshuffled version)

This visualization presents a birthday-guessing puzzle where nine yes/no questions aim to identify a specific day of the year. It displays multiple color-highlighted calendars, one per question, with marked dates representing the possible birthday. The user answers each question by clicking a yes/no button. The visualization uses D3.js to animate the transitions between cards, revealing the solution by progressively narrowing down the calendar. A static calendar grid and interactive answer buttons make the process clear, and the final answer is shown after all questions are answered.

663anp3ca

76% match

Loading thumbnail…

birthday guesser

This interactive visualization presents a birthday-guessing game in which a calendar highlights a subset of dates and the user answers yes/no questions. The tool displays a year grid, and each of nine cards recolors days according to a shuffled set of magic numbers; the user’s answers progressively narrow the possible dates. The code uses D3 v4 with SVG and animations, drawing calendars via `d3.timeDays`, `d3.timeFormat`, and a quantized color scale, and handles the interaction with click events that advance through the cards.

EEE2dev

75% match

Loading thumbnail…

birthday guesser (unshuffled version)

The visualization presents a set of nine monthly calendars, each highlighting a subset of days, which together encode a birthday through independent yes/no questions. A user answers whether their birthday appears on each calendar, and the code uses those answers to narrow the possibilities. The visualization uses D3.js v4 to render the calendars as SVG and animates the sequence of questions. The unshuffled version displays the days in their natural calendar order, allowing the user to track the guessing process step by step.

EEE2dev

73% match

Loading thumbnail…

Random Digit Dice

This example visualizes random digit generation as a dice-rolling game. A grid of 20 circles represents possible outcomes, and clicking the Play button randomly selects a digit (0-9), coloring the corresponding circles orange. The code uses D3.js v5 selection methods like `d3.select` and `attr` to update circle fills. A Reset button restores all circles to black. The visualization renders as an SVG with IDs for each circle, and the random number logic is implemented in plain JavaScript using `Math.random()`.

SSreenivasulu

65% match

Loading thumbnail…

Number Guesser

A browser-based guessing game where the player attempts to identify a random number between 1 and 10 within three tries. The interface displays the number range, an input field for guesses, and live feedback on remaining attempts. The logic uses plain JavaScript with DOM manipulation through `querySelector` and `getElementById`, while the layout relies on the Skeleton CSS framework. The game tracks wins and losses, disables input after game over, and offers a replay option via a reload button, all without any external data or visualization libraries.

Bbukbukbukka

65% match

Loading thumbnail…

Number Guesser

This interactive game challenges a player to guess a number between one and ten within three attempts. It shows the range and remaining guesses, then reveals the winning number if the player loses, and offers a play-again button. The interface is built with Skeleton CSS, while the game logic uses JavaScript and the DOM API for event handling. Random winning numbers are generated using the `Math.random` and `Math.floor` functions.

Bbukbukbukka

65% match

Loading thumbnail…

Math test

A math quiz uses D3.js v3 with an SVG force-directed graph to display answers as draggable, colored circles. The visualization presents arithmetic questions and lets users select the correct result from a node layout, with feedback and score tracking. The code applies `d3.layout.force`, SVG circles, and CSS styling for interactive elements. Language and operation settings adjust quiz content, while checkboxes enable timed quizzes and sound, though the actual sound behavior is not implemented in the shown code. The interface also displays correct/incorrect counts and a timer.

EEE2dev

64% match