Embed Quizzes

Quick start

Paste the following snippet into your HTML where you want the quiz to appear. Replace the slug with any quiz from the quiz directory.

<div data-quizsort="avatar-the-last-airbender-character"></div>
<script src="https://quizsort.com/embed.js" defer></script>

How it works

1. The data-quizsort attribute tells the script which quiz to load.
2. The script creates an iframe pointing to the quiz's embed page and inserts it into the container element.
3. As the user progresses through the quiz, the iframe sends resize messages to the parent page. The script adjusts the iframe height automatically so there's no scrollbar inside the embed.

Options

Customize the embed with optional data attributes on the container element.

Custom sizing

Set a larger minimum height for quizzes with many answer options, or constrain the width for sidebar placement.

<div
  data-quizsort="avatar-the-last-airbender-character"
  data-width="100%"
  data-min-height="600"
></div>
<script src="https://quizsort.com/embed.js" defer></script>

Multiple quizzes

Add as many quiz containers as you like. The script only needs to be included once.

<div data-quizsort="avatar-the-last-airbender-character"></div>
<div data-quizsort="gravity-falls-character"></div>
<script src="https://quizsort.com/embed.js" defer></script>

Finding quiz slugs

The slug is the last segment of any quiz URL. For example, the quiz at quizsort.com/quiz/gravity-falls-character has the slug gravity-falls-character. Browse all available slugs in the quiz directory.

Styling and theming

Embeds use QuizSort's dark theme by default. The iframe has border: none and color-scheme: dark applied automatically. The container element can be styled with your own CSS to control spacing and placement.

Privacy

Embedded quizzes follow the same privacy policy as the main site. No cookies are set, no personal data is collected, and no third-party trackers are loaded inside the embed. Embed pages are excluded from search indexing.