HTML blocks in your quiz app open up a world of creative possibilities. Whether you're enhancing the learning experience, adding interactive elements, or creating visually engaging results pages, HTML gives you the flexibility to do it all.

The HTML block is a powerful feature in your quiz app that lets you embed fully customizable content, like interactive widgets, animations, forms, or styled layouts, directly into your quiz question, explainer, and results pages.

It runs inside an isolated iframe, meaning you can use any HTML, CSS, or JavaScript without restrictions, and the main page’s styling will not interfere with your block design. The block has access to cookies and local storage, allowing for dynamic or personalized experiences, and it includes a full-screen editor with a live preview to make editing and testing your content easier and more intuitive.

Please keep in mind that our ability to offer support with the HTML block is very limited. While we can help by checking for possible issues caused by the block in some cases, we are not able to help with providing or troubleshooting code for the HTML block.

Once the HTML block is added, you can choose whether to use our AI agent to generate the HTML code for you, or write/edit it manually:

Once you select this option, you will be taken to a chat window with a preview of the code:

On the left, you have the chat with the AI agent. Here, you can tell it how it should build your HTML block. You can also attach images for it to use as a reference for your code. By hovering the add image button, you will see the image requirements:

Pro-tip: if you click the button, you will be able to upload the image from your computer, but you can also directly paste an image that you copied or screenshotted here.

Once you have given your instructions to the AI, you can click the white and blue arrow or press Enter to start generating the code. You may need to wait a few moments for it to build the HTML, especially if you attach an image. You will see a preview of how the HTML block will look on the right side of the screen.

Here is an example of the HTML generated by our AI agent using a written prompt and a reference image:

You can continue chatting with the AI agent and give it instructions to change the current code:

You can also press the "Undo all" button to undo all the changes and clear the chat to start all over again:

Once you are satisfied with your code, press "Accept" in the top right corner. You can also hide the chat, hide the preview, and cancel the changes to the code.

By selecting this option, you can write and edit the code by yourself. Instead of the AI chat on the right, you will have access to the code editor with support for syntax highlighting.

Here, you have the editor on the left and the preview on the right. On the top right, similar to the AI code editor, you can hide the code editor, hide the preview, cancel the changes, and apply the changes:

You can use both the AI agent and the manual editor for the same code. You can get a code that was written by the AI agent, and edit it manually to make any changes you need.

Below are some examples of practical applications and ideas for the HTML block.

Disclaimer: all the examples below were quickly built with the help of AI using simple prompts (e.g., "Give me HTML code for a progress bar in a quiz"). It's possible to do a lot without a dedicated developer!