Skip to main content
100%

designer

✓ Published0🌍 Public
Aali-bugdayci
Last edited Dec 9, 2014
Created on Dec 9, 2014

This example presents a quiz demo interface built with Polymer, using a grid of colored category tiles. Each tile contains a large icon from the `category-icons` import and a labeled bottom section, with categories like Food, General Knowledge, History, and Geography. The layout is defined through Polymer’s `<polymer-element>` template, CSS styling, and flexbox-based attributes (`layout`, `horizontal`, `center-justified`) to position tiles within a 420×582 pixel section. The toolbar displays the title “Quiz Demo,” and the code uses core-icon elements to render the icons, with no external data source or interaction logic included.

AI-generated description

Similar vizzes

Loading thumbnail…

designer

This example demonstrates a mobile-style scrollable interface using Polymer’s custom element and material design components. It shows a tall content section with a gradient background, while a toolbar condenses as the user scrolls. The code relies on `core-scroll-header-panel`, `core-toolbar`, and `core-icon-button` from Polymer’s core set, with a static `section` of 5000 pixels height. The toolbar includes back, search, and overflow icons, plus a title, but no data binding or interactive behavior beyond the scrolling header effect.

Aac1714
70% match
Loading thumbnail…

designer

This example shows a web page overlaying a Google Map with a floating card containing a toolbar and a slider control, designed as a Polymer custom element. The map is rendered via a Google Maps iframe, while the interactive card uses Polymer’s `core-card`, `core-toolbar`, `core-icon-button`, and `paper-slider` components. The code imports these components as HTML imports and defines the layout with absolute positioning and CSS styling inside a `<template>` tag. No data source or dynamic behavior is present; the visualization simply demonstrates a static dashboard layout using Polymer’s material design components.

TTBD
69% match
Loading thumbnail…

Fork of Fork of Fork of Svelte Starter: Quiz Template

An interactive quiz presents a satirical self-assessment about the user's Tinder dating profile and behavior, culminating in a humorous "Tinder Type" categorization. Built with Svelte, it presents ten multiple-choice questions; each answer selection adds a numeric score via a personalized `TinderTest.svelte` component. The interface progresses through an `IntroCard`, `QuestionCard`, and a `ResultCard`, which displays the final score in a circular badge. The quiz data, including the questions, answers, and result categories with their descriptive text, is hardcoded in a separate `testData.js` module.

Jjohnyedge@gmail.com
59% match
Loading thumbnail…

logos trivial pursuit

This visualization recreates the classic Trivial Pursuit board game, showing six category wedges—arts, divertissement, geography, history, science, and sport—arranged in a circular layout. Each category is represented by a distinct SVG icon and a larger background variant, all rendered with the same blue circular token and pie-piece shapes. The SVG files are created with Inkscape, using precise path data and transform matrices to position each element. The display combines individual category icons with their corresponding background panels, offering a complete visual reference for the game’s components.

RRCura
58% match
Loading thumbnail…

hello world

This example presents an interactive pie chart built with D3.js and Polymer Web Components, showing expense categories from a CSV file. The chart displays four data types—Restaurant, Entertainment, Rent, and Groceries—with each slice labeled and colored via an ordinal scale. Sliders next to each category allow the user to adjust the amounts, and the chart redraws in real time as values change. The visualization uses D3’s `d3.svg.arc` and `d3.layout.pie` to generate the arcs, while Polymer’s `polymer-element` encapsulates the chart logic and data loading via `d3.csv`. Rendering is done in SVG, with the chart’s dimensions fixed at 500 by 500 pixels.

CCurran Kelleher
58% match
Loading thumbnail…

My quiz

This example shows a Minecraft-themed quiz in which the viewer draws a guessed answer on a chart for each of ten questions, such as the number of biomes or the sea level. It uses the You Draw It pattern with d3.v5 and the custom youdrawit library, which animates the chart and reveals the correct answer after the guess. The interface employs the Indie Flower font and includes custom result HTML for some questions, while all data comes from hardcoded values in the script. The chart is rendered with d3.js, and the interaction relies on the library’s built-in drawing and tweening logic.

EEE2dev
57% match
Loading thumbnail…

My quiz

This example turns the classic "You Draw It" concept into an interactive multiple-choice quiz. It presents two questions—one about a conference location and one about a speaker—and asks the user to guess the correct answer. The visualization relies on the D3.js v5 library and the `youdrawit` JavaScript library, which manages the chart layout and interaction. The code defines question objects with data arrays containing options and a boolean flag for the correct answer. It also exposes a `globals` object for customizing text, allowing easy localization and styling of the quiz interface. The chart is rendered into a `div` with the class `chart`.

EEE2dev
57% match
Loading thumbnail…

Fork of Svelte Starter: Quiz Template

This interactive quiz presents four multiple-choice questions about humpback whales, showing immediate visual feedback on answer correctness through color-coded buttons (green for correct, red for incorrect). The interface progresses through questions sequentially and displays a final results screen with the score and percentage. Built with Svelte, it uses Svelte's reactive state management ($state, $derived) and event dispatching for communication between the Quiz and Question components. The quiz data is stored in a static JavaScript file, while the styling relies on standard CSS with a purple gradient background and card-based layout.

Llaura.pollmann@axelspringer.com
57% match