Pricing
Login
Sign up
Help center
Tutorials
How to embed a quiz on your website?

How to embed a quiz on your website?

Embedding a quiz on your website allows test takers to access it directly without navigating to another page. This can lead to better user interaction with your brand and increase engagement.

Example uses of embedding:

  • Employee tests in an internal system: embedding quizzes in the company intranet allows for easy training and competency assessment among employees.

  • Placement tests on language school websites: by embedding placement tests, potential students can check their language proficiency directly on the school’s website, which streamlines the recruitment process and improves user satisfaction.

  • Other tests for users with an account in your IT system: tests and quizzes will be available in a restricted manner without requiring additional personal data.

How to create an online quiz?

To learn how to create an online quiz step by step, see our tutorial.

How to add a quiz to your website?

Testportal offers the following options for adding a quiz to your website:

  1. Embedding via iframe

    • Provides a responsive layout.

    • The quiz automatically adjusts to the user's screen size.

    Insert the following HTML code on your site and adjust the height and width of the <iframe> element as needed.

    <iframe style="width: 550px; height: 810px; border: none;" src="https://www.testportal.net/test.html?t=XXXXXXXXXXXX"></iframe>

    Note

    Replace 'XXXXXXXXXXXX' in the code with the unique identifier for your test, which will be visible in the link after creating a specific test.

  2. Opening the quiz in a new browser window

    • An alternative to iframe embedding.

    • The quiz can be launched in a separate window.

    • Eliminates potential issues associated with iframe embedding.


    1. Place the following reference in the <HEAD> section of your website:

    <script src="https://static.testportal.net/js/embed.js" type="text/javascript"></script>

    2. Then add a link in the site’s code that leads to the quiz:

    <a href="https://www.testportal.net" onclick="openTest('XXXXXXXXXXXX','www.testportal.net'); return false;">Link Name</a>

  3. Subdomain page in iframe
    This solution gives access to all your tests on one page, so users can solve them in one place.


    Add the following HTML code on your site and adjust the height and width of the <iframe> element as needed.

    <iframe style="width: 550px; height: 810px; border: none;" src="https://xxxxx.testportal.net"></iframe>

Depending on the type of access you choose for the test, the quiz on your website will launch in different ways:

  • Test shared via a link: the quiz’s start page will appear immediately.

  • Individual access code for the test: participants enter the access code for the quiz and then proceed to its start page.

  • Group password: after entering the password for the quiz, the start page will appear.

You can skip the start page by using the API and passing a unique identifier to the test. This way, the test can only be taken once by each user, providing a security measure similar to using access codes.

When a user visits your website with an embedded quiz, the entire quiz-solving process takes place within your site. Here’s how it works:

  1. Website loading.
    The participant opens your website where the quiz has been embedded.

  2. Quiz start page display.
    Depending on the type of access you’ve chosen for the test, the participant will see the quiz start page automatically or after entering an access code or group password.

  3. Quiz taking.
    Once the quiz begins, the participant goes through the questions. All questions are loaded within the embedded iframe, without needing to reload the entire website.

  4. Quiz end page.
    After answering the last question, the quiz end page will be displayed. This page may include a results summary if you’ve configured it that way. The participant remains on your website throughout the process.

More information about access types for the test can be found in the article on our Help Center page. You can also read about the settings for the quiz’s start and end pages.

Regardless of the method you choose, the following features are available:

  • Quiz start page configuration: Customize the test start form to match your requirements.

  • Automatic time tracking: Time is measured on the Testportal’s server side, so you don't need to worry about tracking accuracy.

Browser settings

Please note that some browser settings may block session cookies in an embedded iframe:

  • Firefox and Chrome (normal mode): Third-party cookies in iframes are supported.

  • Safari or Chrome (incognito mode): Third-party cookies may be blocked.

Recommendations:

  • Use Chrome, Firefox, or Edge in non-incognito mode.

  • If issues persist, redirect users to a full browser tab with the quiz.

API extension for advanced use cases

For more complex scenarios, we offer an API extension in the MAX Customized plan that allows:

  • Seamless integration of the quiz with your website.

  • Skipping the start page.

  • Customizing the quiz to your needs without changing browsers.

Key API Features

  • Passing unique identifiers: You can pass unique user identifiers from your system to Testportal. This allows access to quiz results and easy integration of data with your databases or user management systems.

  • Skipping the start page: Using identifiers from your system enables users to start the quiz directly without having to go through the standard start page. This makes the process quicker and more intuitive for participants.

  • Automatic result retrieval: Quiz results can be automatically sent to a designated webhook. Alternatively, you can download the results at any time by sending requests to the API. This simplifies immediate data processing and integration with other systems.

If you need detailed information about API implementation, please contact our technical support team – we’ll be happy to help!

Was this article helpful?