sborniktestov-embed

Embed interactive quizzes and tests from sborniktestov.ru into any website. 15,000+ quizzes: personality tests, knowledge checks, professional assessments, and more.

Lightweight loader — automatically creates responsive iframes with auto-resize via postMessage.

Install

npm install sborniktestov-embed

Or load directly via CDN:

<script async src="https://sborniktestov.ru/embed/loader.js"></script>

Quick Start

<div class="st-embed" data-quiz-id="12345">
  <a href="https://sborniktestov.ru">Sbornik Testov</a>
</div>
<script async src="https://sborniktestov.ru/embed/loader.js"></script>

Replace 12345 with your quiz ID. Find it in the quiz URL: sborniktestov.ru/quiz/12345

Customization

All parameters are passed as data- attributes on the container div:

<div class="st-embed"
     data-quiz-id="12345"
     data-comments="1"
     data-header="0"
     data-color-accent="4CAF50"
     data-color-bg="f5f5f5"
     data-font-question="18"
     data-radius="12">
  <a href="https://sborniktestov.ru">Sbornik Testov</a>
</div>

Display Options

| Attribute | Values | Default | Description | |---|---|---|---| | data-quiz-id | number | — | Quiz ID (required) | | data-comments | 1 / 0 | 0 | Show comments section | | data-related | 1 / 0 | 0 | Show related quizzes | | data-header | 1 / 0 | 1 | Show quiz title | | data-desc | 1 / 0 | 1 | Show quiz description | | data-stats | 1 / 0 | 1 | Show quiz statistics | | data-width | CSS value | 100% | iframe width | | data-min-height | px | 400 | Minimum iframe height |

Colors (hex without #)

| Attribute | Default | Description | |---|---|---| | data-color-accent | ffcc00 | Accent / button background | | data-color-bg | ffffff | Quiz background | | data-color-title | — | Title color | | data-color-text | 333333 | Text color | | data-color-btn-text | — | Button text color | | data-color-selected-bg | — | Selected answer background | | data-color-progress-bg | — | Progress bar background | | data-color-progress-fill | — | Progress bar fill | | data-color-border | — | Answer border | | data-color-border-selected | — | Selected answer border | | data-color-btn-prev | — | "Back" button color | | data-color-hover | — | Answer hover background |

Typography & Layout

| Attribute | Description | |---|---| | data-font-title | Title font size (px) | | data-font-desc | Description font size (px) | | data-font-stats | Stats font size (px) | | data-font-question | Question font size (px) | | data-font-answer | Answer font size (px) | | data-radius | Border radius (px) | | data-padding | Inner padding (px) | | data-max-width | Max content width (px) |

CMS Plugins

Ready-made plugins for popular CMS platforms:

• WordPress — shortcode [sborniktestov id="12345"]
• Joomla — shortcode {sborniktestov id=12345}
• Moodle — auto-embed filter
• Drupal — module

Embed Configurator

Use the visual embed configurator to customize colors, fonts, and layout with a live preview, then copy the generated code.

How It Works

The loader scans the page for div.st-embed[data-quiz-id] elements, builds an iframe URL with all parameters, and listens for postMessage events to auto-resize the iframe height as the user progresses through the quiz.

License

MIT — sborniktestov.ru