Game 1

100%

✓ Published0🌍 Public

Last edited Feb 11, 2026

Created on Jan 20, 2026

This interactive quiz asks how the number of xenophobic crimes has developed over the past two decades, offering four answer choices. After a selection is made, the app immediately reveals whether the guess is correct, with the correct answer being that the figures have risen sharply in recent years. Built with React and using the `useState` hook, the interface disables all buttons after a response and displays a color-coded result message. The design uses a plain card layout and styled button components, with no data visualization or external charting library involved.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of CV: Bar Chart

This interactive bar chart displays the decline of xenophobic crimes in Germany from 2001 to 2024, prompting users to guess whether numbers increased or decreased before revealing the correct answer and visualization. Built with React and D3 v7, the chart uses `scaleBand` and `scaleLinear` for axes, `axisBottom` and `axisLeft` for ticks, and renders SVG bars from CSV data. An overlay system manages the question and result states, with CSS transitions revealing the chart only after the user submits a guess.

Wwuc280@haw-hamburg.de

69% match

Loading thumbnail…

Umfrage

An interactive guessing game visualizes survey data on discrimination experiences across demographic groups, comparing user predictions with actual percentages. Participants adjust sliders to estimate rates, then view animated bubble charts using D3.js v7 and React that display the results with hover tooltips and comparative accuracy scoring. The visualization uses D3 scales and SVG rendering to represent data from a CSV file, showing that people with migration backgrounds report higher discrimination rates than those without.

Nng.tuoanh.cbn@gmail.com

63% match

Loading thumbnail…

My quiz

This example presents an interactive quiz where viewers estimate values for each question before revealing the correct answer. The visualization uses a "You Draw It" pattern: after a user draws their guess on a chart, the actual data is shown for comparison. The code relies on the D3.js v5 library and the custom `youdrawit` chart API, which handles the drawing and scoring logic. Questions are defined as data arrays or single values, with optional units, precision, and axis limits. The interface is configured for German, with buttons and score feedback, though the score display remains commented out.

EEE2dev

62% match

Loading thumbnail…

My quiz

This interactive quiz uses D3.js v5 to guide a user through a sequence of questions, where the first question displays a small line chart of annual values (2017–2020) and the second presents a single numeric answer. The visualization is built with the custom `youdrawit` library, which loads chart templates and styling from external CSS and JavaScript files. The code constructs question objects with headings and data, pushes them into an array, and then applies a chart instance to a div in the body. It shows how a lightweight, data-driven quiz can be assembled programmatically, relying on D3’s data binding and the library’s rendering methods.

EEE2dev

61% match

Loading thumbnail…

My quiz

This interactive quiz presents a series of five questions where users draw their guesses on a chart before comparing them to the revealed answer. The visualization shows both the user’s drawn line and the correct response, with data ranging from chicken flight duration to Winter Olympics volunteer counts. The code uses the `youdrawit` chart API, built on `d3.v5`, and loads question data from a gist. Each question’s answer is shown as a point or line, and the final question includes a multi-year series, rendered with axis limits and precision settings.

EEE2dev

61% match

Loading thumbnail…

React 301 (state)

This example demonstrates React state management within a class component, rendering a simple question-and-answer display. The App component holds state via `this.state` and updates the rendered text. It also maps over an array of joke objects, using conditional logic and inline styles to toggle visibility and color based on whether a question exists. The code imports React and uses `ReactDom.render` to mount the app to the DOM. While the repository references a population dataset, the actual visualization is not implemented in the provided files, which focus solely on React component interactions.

Ddata-inside

61% match

Loading thumbnail…

Activity_Question 1->2

This example shows a bar chart of population data for the top 20 countries, comparing values from the year 2010. The chart uses a light green color for the bars and features red tick marks on the axes, with a custom Poppins font applied throughout. Built with React and D3 v5, the visualization pulls data from a CSV file hosted on GitHub, parsing and multiplying population values by 1000 for display. The axes are constructed using reusable components that generate tick lines and labels, while the `useData` hook handles asynchronous data loading via D3's `csv` function.

PPreethamreddyannavaram@my.unt.edu

60% match

Loading thumbnail…

React 201

This example demonstrates how React components render a list of jokes, conditionally displaying questions and answers from a static dataset. It uses React’s `map` method to transform joke objects into `Joke` components, with inline styles dynamically hiding questions and graying answer text when a question is absent. The code imports React and ReactDOM to mount the `App` component, while jokes are sourced from a local `jokesData.js` file. The visualization also references population data from World Population Prospects 2017, though that dataset is not used in the visible rendering.

Ddata-inside

60% match