Skip to main content
100%

Fork of Fork of Svelte Starter: Quiz Template

✓ Published2🌍 Public
Llaura.pollmann@axelspringer.com
Last edited Apr 16, 2026
Created on Apr 16, 2026

This interactive quiz template presents a series of questions about humpback whales, with multiple-choice answers and immediate visual feedback. After answering all questions, it displays a final score and percentage. The application uses Svelte’s reactivity system with `$state`, `$derived`, and `$props`, along with event dispatching via `createEventDispatcher` to handle user interactions. Questions and answers are loaded from a static JavaScript data file, and the interface includes animated CSS transitions for answer selection, correctness highlighting, and a gradient background.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Svelte Starter: Quiz Template

An interactive quiz about humpback whales presents a series of four multiple-choice questions. After each answer, the interface indicates correctness with color-coded buttons, then displays a final score and percentage upon completion. The quiz structure uses Svelte components, managing state with `$state` and `$derived` for the current question, score, and answer selections. The application is built with Svelte, styled with custom CSS, and fetches its question data from a JavaScript module (`quizData.js`).

Ddaria.zakharova@axelspringer.com
95% match
Loading thumbnail…

Fork of Fork of Fork of Svelte Starter: Quiz Template

This interactive quiz asks multiple-choice questions about humpback whales, tracking the user’s score and displaying a final results screen with a percentage and restart option. Built with Svelte, it uses component state and derived values to manage the current question, answer selection, and progress, with DOM events for user interaction. The data comes from an embedded quizData.js object, and the UI relies purely on Svelte’s reactive declarations and CSS styling—no external visualization libraries are involved.

Jjohnyedge@gmail.com
95% match
Loading thumbnail…

Fork of Svelte Starter: Quiz Template

This interactive quiz presents factual questions about humpback whales, with multiple-choice answers for each question. The Svelte application manages quiz logic, tracking the user’s score and progress through state and derived values, and it displays final results with a percentage and a restart option. The user interface renders each question with styled answer buttons, using Svelte’s class directives to indicate selected, correct, and incorrect responses. The quiz uses event dispatching to handle user interactions, such as selecting an answer and advancing to the next question, while the data structure holds four whale-related questions. Feedback is given through color-coded buttons, and a results screen appears after the final question.

LLeanderBadura@gmx.de
94% 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
94% 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
94% match
Loading thumbnail…

Svelte Starter: Quiz Template

This interactive quiz presents a series of multiple-choice questions about humpback whales, tracking the user's score and displaying a final results screen with the percentage of correct answers. Built with Svelte, the application uses modular components (`Quiz.svelte` and `Question.svelte`) to manage quiz state and user interactions, with quiz data imported from a separate `quizData.js` file. The interface provides immediate visual feedback on answer selection, highlighting correct and incorrect choices before advancing to the next question.

Hhelen.bielawa@web.de
90% match
Loading thumbnail…

Fork of Svelte Starter: Quiz Template

This interactive quiz guides users through a series of questions to determine their ideal sport, presenting a progress bar and answer options. Based on responses, the Svelte app tracks scores across five sport categories and displays a final result with a recommended sport, description, and a breakdown of scores. It uses Svelte’s `$state` and `$derived` for reactive logic, with quiz data sourced from a local JavaScript file.

Llisa.reck@axelspringer.com
87% 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
81% match