HTML code use cases

ENGAGE HELP CENTER

HTML code use cases

This guide provides practical examples of HTML code for use in activities or Conditional reports.

Buttons

Simple button
Non-clickable button.

<button style="background-color:blue; padding: 16px; border: 1px solid red; border-radius: 8px;">Click Me!</button>

Button with a link
This button opens the link in the same tab.

<a href="{insert link}" style="text-decoration: none;">
  <button style="background-color:blue; padding: 16px; border: 1px solid red; border-radius: 8px;">Click Me!</button>
</a>

This button opens the link in a new tab.

<a href="{insert link}" target="_blank" rel="noopener noreferrer" style="text-decoration: none;">
  <button style="background-color:blue; padding: 16px; border: 1px solid red; border-radius: 8px;">Click Me!</button>
</a>

Toggle elements (Expand/Collapse)

Simple Toggle
Creates an expandable/collapsible text block.

<details>
 <summary>Details</summary>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</details>

Stylised Toggle
Adds style settings like:

- background-color - background color;
- padding - space around text;
- border - color and thickness of the border;
- border-radius - rounded borders.

<details>
 <summary style="background-color: lightpink; padding: 10px; border: 1px solid red; border-radius: 8px;">Details</summary>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</details>

Text blocks with backgrounds

Simple background block
Adds a background color to a text block.

<div style="background-color: pink">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

Stylized background block
Set the desired background color to a text block and add various style settings.
- Add padding around text.

<div style="background-color: lightpink; padding: 10px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

- Add border around text.

<div style="background-color: lightpink; padding: 10px; border: 1px solid red; border-radius: 8px;">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

Table of contents with anchor links

When dealing with large amounts of information, particularly in Conditional Participant Reports, incorporating a table of contents can significantly enhance navigation. To further improve usability, include anchor links in the table of contents, allowing participants to jump directly to the specific content block that interests them.

Table of contents
Add anchor links (e.g., #item1) with optional style settings.

<p><strong><span style="font-size: 14pt;">Table of content</span></strong></p>
<ul>
<li><a href="#item1">Item 1</a></li>
<li><a href="#item2">Item 2</a></li>
<li><a href="#item3">Item 3</a></li>
</ul>

<p><strong><span style="font-size: 14pt;">Table of content</span></strong></p>
<ul>
<li><a style="text-decoration: none; color: #374151;" href="#item1">Item 1</a></li>
<li><a style="text-decoration: none; color: #374151;" href="#item2">Item 2</a></li>
<li><a style="text-decoration: none; color: #374151;" href="#item3">Item 3</a></li>
</ul>

Content blocks
Add anchor IDs to blocks (e.g., id="item1").

<div id="item1"><strong>More about item 1</strong></div>
<p>[Insert information]</p>
<div id="item2"><strong>More about item 2</strong></div>
<p>[Insert information]</p>
<div id="item3"><strong>More about item 3</strong></div>
<p>[Insert information]</p>