Interactive HTML Snippets for Your Knowledge Base

Quizzes, tabs, checklists and more that react when readers click.

How to Use the Snippets

Copy the Code. Click Copy Code under any example below.
Replace the Highlighted Text. Open Show HTML Code to see what each placeholder is for, then swap it for your own text, link or image.
Paste It Into Your Article. Add an HTML Snippet block and paste. The new editor shows the result right away; in the legacy editor, open the preview.

Why There Are No Script Tags

Your knowledge base switches articles without reloading the page. A <script> tag inside an article only runs on a full page load, so it often doesn't run when readers click through from another article.

That's why these snippets write their behavior directly on the element. It loads together with the HTML, so it always works.

Stops Working: the button calls a function that only exists if the script ran.

<button onclick="toggle(this)">…</button>
<script>
  function toggle(el) { … }
</script>

Always Works: the behavior is written on the button, so it arrives with the HTML.

<button onclick="
  var next = this.nextElementSibling;
  next.hidden = !next.hidden;
">…</button>

Building Your Own

Behavior Goes on the Element. Use onclick or onchange, never a separate <script> block.
Stay Inside the Element. Use this and closest() instead of getElementById(), so two copies on one page don't clash.
Keep Text Out of JavaScript. One apostrophe in a JavaScript string can break the whole element.

Or Let AI Build It

Copy this prompt into your AI assistant, describe the element in the first line and add your brand colors. The rules above are already in it.

Prompt for Your AI Assistant

Create a complete, self-contained HTML component for a knowledge base article: [DESCRIBE THE ELEMENT].

- Do not use a <script> tag. The knowledge base loads articles without reloading the page, so scripts may not run. Put all behavior in inline handlers like onclick directly on the elements.
- Keep the behavior inside the component: use this and event.target.closest(), not global functions or document.getElementById, so it works when used twice on one page.
- Keep all text in the HTML, not inside JavaScript strings.
- Put the CSS in one <style> tag and start every class name with a unique prefix.
- Use this color palette: [LIST YOUR BRAND COLORS]. Use 6px rounded corners.
- Use font-family: inherit, and title case for headings, labels and buttons.
- Use placeholders like {{QUESTION_1}} for text I need to replace, and list them after the code.

Let Readers Choose

Tabs

Shows one version of the content at a time, for example per browser or per role.

Add an HTML Snippet block and paste your code. The element shows up right in the editor.

Show HTML CodeHide HTML Code

Replace the Highlighted Text

{{TAB_1_NAME}}, {{TAB_2_NAME}} The tab labels.
{{TAB_1_CONTENT}}, {{TAB_2_CONTENT}} What each tab shows.
More tabs: add another <button> and another panel <div … hidden>. They pair up by order.

<style>
  .kbs-tabs { color: #5C5656; font-family: inherit; }
  .kbs-tabs__bar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
  .kbs-tabs__tab {
    padding: 8px 16px;
    border: 1px solid rgba(92, 86, 86, 0.35);
    border-radius: 8px;
    background: transparent;
    color: #5C5656;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  }
  .kbs-tabs__tab:hover { border-color: #B24A4A; color: #B24A4A; }
  .kbs-tabs__tab[aria-selected="true"] { border-color: #B24A4A; background: #B24A4A; color: #FFFFFF; }
  .kbs-tabs__panel { padding: 14px 16px; border-radius: 6px; background: #F3EFEB; font-size: 14px; line-height: 1.6; }
  .kbs-tabs__panel[hidden] { display: none; }
  .kbs-tabs__panel p { margin: 0; }
</style>

<div class="kbs-tabs" onclick="
  var tab = event.target.closest('.kbs-tabs__tab');
  if (!tab || !this.contains(tab)) return;
  var tabs = this.querySelectorAll('.kbs-tabs__tab');
  var panels = this.querySelectorAll('.kbs-tabs__panel');
  for (var i = 0; i < tabs.length; i++) {
    tabs[i].setAttribute('aria-selected', tabs[i] === tab);
    panels[i].hidden = tabs[i] !== tab;
  }
">
  <div class="kbs-tabs__bar" role="tablist">
    <button type="button" class="kbs-tabs__tab" role="tab" aria-selected="true">{{TAB_1_NAME}}</button>
    <button type="button" class="kbs-tabs__tab" role="tab" aria-selected="false">{{TAB_2_NAME}}</button>
  </div>
  <div class="kbs-tabs__panel" role="tabpanel"><p>{{TAB_1_CONTENT}}</p></div>
  <div class="kbs-tabs__panel" role="tabpanel" hidden><p>{{TAB_2_CONTENT}}</p></div>
</div>

Filterable Cards

Cards with filter buttons on top. Readers open a card to see more. It works without any JavaScript.

All Critical Sneaky

Critical Triggering Everything at Once Welcome modal, checklist, tour and tooltip, all on first login.

Why It Fails

Overwhelmed users dismiss everything and start clicking around on their own.

Better Approach

Use behavior-based triggers. Show a hint when the user is actually in that area.

Critical Confusing Educated With Activated They finished every step, saw every tooltip, and still churned.

Why It Fails

Completing onboarding and reaching value are not the same thing.

Better Approach

Track whether users complete meaningful product actions, not just onboarding steps.

Sneaky Using Onboarding to Fix Bad UX If every button needs a tooltip, the button might be the problem.

Why It Fails

Hints that light up the whole UI point to a product that needs rethinking.

Better Approach

Before adding a hint, ask whether it should just be clearer in the product itself.

Sneaky Internal Language Throughout Your team calls it “Workspace Hub”. Your users call it “the main page”.

Why It Fails

Terms users don't recognize yet confuse them before they've even started.

Better Approach

Re-read your support tickets and mirror the words users actually use.

Show HTML CodeHide HTML Code

Replace the Highlighted Text

{{CATEGORY_A}}, {{CATEGORY_B}} The filter names. They also appear as tags on the cards.
{{CARD_1_TITLE}} and so on: the card title.
{{CARD_1_SUMMARY}} and so on: the line under the title.
{{CARD_1_PROBLEM}}, {{CARD_1_SOLUTION}} and so on: the two blocks that open on click. You can rename “Why It Fails” and “Better Approach” too.
More cards: copy a whole <details> block and keep kbs-card--a or kbs-card--b on it to choose its filter.

<style>
  .kbs-cards { max-width: 980px; margin: 36px 0; color: #5C5656; font-family: inherit; }
  .kbs-cards * { box-sizing: border-box; }
  .kbs-cards__input { position: absolute; opacity: 0; pointer-events: none; }
  .kbs-cards__bar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
  .kbs-cards__bar label {
    padding: 10px 18px;
    border: 1px solid rgba(92, 86, 86, 0.35);
    border-radius: 8px;
    color: #5C5656;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  }
  .kbs-cards__bar label:hover { border-color: #B24A4A; color: #B24A4A; }
  #kbs-filter-all:checked ~ .kbs-cards__bar label[for="kbs-filter-all"],
  #kbs-filter-a:checked ~ .kbs-cards__bar label[for="kbs-filter-a"],
  #kbs-filter-b:checked ~ .kbs-cards__bar label[for="kbs-filter-b"] {
    border-color: #B24A4A;
    background: #B24A4A;
    color: #FFFFFF;
  }
  .kbs-cards__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
  #kbs-filter-a:checked ~ .kbs-cards__grid .kbs-card:not(.kbs-card--a),
  #kbs-filter-b:checked ~ .kbs-cards__grid .kbs-card:not(.kbs-card--b) { display: none; }
  .kbs-card { border: 1px solid rgba(92, 86, 86, 0.18); border-radius: 10px; background: #F3EFEB; overflow: hidden; }
  .kbs-card summary { position: relative; display: block; padding: 22px; cursor: pointer; list-style: none; }
  .kbs-card summary::-webkit-details-marker { display: none; }
  .kbs-card summary::after {
    content: "+";
    position: absolute;
    top: 22px;
    right: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 1px solid rgba(178, 74, 74, 0.45);
    border-radius: 50%;
    color: #B24A4A;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
  }
  .kbs-card[open] summary::after { content: "–"; }
  .kbs-card__tag {
    display: inline-block;
    margin-bottom: 12px;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(178, 74, 74, 0.12);
    color: #5C5656;
    font-size: 12px;
    font-weight: 700;
  }
  .kbs-card--b .kbs-card__tag { background: rgba(92, 86, 86, 0.12); }
  .kbs-card__title { display: block; margin: 0 34px 8px 0; font-size: 18px; font-weight: 800; line-height: 1.25; color: #5C5656; }
  .kbs-card__text, .kbs-card p { display: block; margin: 0; font-size: 15px; line-height: 1.5; color: #5C5656; }
  .kbs-card__content { padding: 18px 22px 22px; border-top: 1px solid rgba(92, 86, 86, 0.18); }
  .kbs-card__block { margin-bottom: 16px; }
  .kbs-card__block:last-child { margin-bottom: 0; }
  .kbs-card__block-title { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 800; color: #B24A4A; }
  .kbs-card__block--better { padding: 16px; border-radius: 8px; background: rgba(255, 255, 255, 0.55); }
  @media (max-width: 720px) {
    .kbs-cards__grid { grid-template-columns: 1fr; }
  }
</style>

<section class="kbs-cards">
  <input class="kbs-cards__input" type="radio" name="kbs-filter" id="kbs-filter-all" checked>
  <input class="kbs-cards__input" type="radio" name="kbs-filter" id="kbs-filter-a">
  <input class="kbs-cards__input" type="radio" name="kbs-filter" id="kbs-filter-b">

  <div class="kbs-cards__bar">
    <label for="kbs-filter-all">All</label>
    <label for="kbs-filter-a">{{CATEGORY_A}}</label>
    <label for="kbs-filter-b">{{CATEGORY_B}}</label>
  </div>

  <div class="kbs-cards__grid">
    <details class="kbs-card kbs-card--a">
      <summary>
        <span class="kbs-card__tag">{{CATEGORY_A}}</span>
        <span class="kbs-card__title">{{CARD_1_TITLE}}</span>
        <span class="kbs-card__text">{{CARD_1_SUMMARY}}</span>
      </summary>
      <div class="kbs-card__content">
        <div class="kbs-card__block">
          <span class="kbs-card__block-title">Why It Fails</span>
          <p>{{CARD_1_PROBLEM}}</p>
        </div>
        <div class="kbs-card__block kbs-card__block--better">
          <span class="kbs-card__block-title">Better Approach</span>
          <p>{{CARD_1_SOLUTION}}</p>
        </div>
      </div>
    </details>

    <details class="kbs-card kbs-card--a">
      <summary>
        <span class="kbs-card__tag">{{CATEGORY_A}}</span>
        <span class="kbs-card__title">{{CARD_2_TITLE}}</span>
        <span class="kbs-card__text">{{CARD_2_SUMMARY}}</span>
      </summary>
      <div class="kbs-card__content">
        <div class="kbs-card__block">
          <span class="kbs-card__block-title">Why It Fails</span>
          <p>{{CARD_2_PROBLEM}}</p>
        </div>
        <div class="kbs-card__block kbs-card__block--better">
          <span class="kbs-card__block-title">Better Approach</span>
          <p>{{CARD_2_SOLUTION}}</p>
        </div>
      </div>
    </details>

    <details class="kbs-card kbs-card--b">
      <summary>
        <span class="kbs-card__tag">{{CATEGORY_B}}</span>
        <span class="kbs-card__title">{{CARD_3_TITLE}}</span>
        <span class="kbs-card__text">{{CARD_3_SUMMARY}}</span>
      </summary>
      <div class="kbs-card__content">
        <div class="kbs-card__block">
          <span class="kbs-card__block-title">Why It Fails</span>
          <p>{{CARD_3_PROBLEM}}</p>
        </div>
        <div class="kbs-card__block kbs-card__block--better">
          <span class="kbs-card__block-title">Better Approach</span>
          <p>{{CARD_3_SOLUTION}}</p>
        </div>
      </div>
    </details>

    <details class="kbs-card kbs-card--b">
      <summary>
        <span class="kbs-card__tag">{{CATEGORY_B}}</span>
        <span class="kbs-card__title">{{CARD_4_TITLE}}</span>
        <span class="kbs-card__text">{{CARD_4_SUMMARY}}</span>
      </summary>
      <div class="kbs-card__content">
        <div class="kbs-card__block">
          <span class="kbs-card__block-title">Why It Fails</span>
          <p>{{CARD_4_PROBLEM}}</p>
        </div>
        <div class="kbs-card__block kbs-card__block--better">
          <span class="kbs-card__block-title">Better Approach</span>
          <p>{{CARD_4_SOLUTION}}</p>
        </div>
      </div>
    </details>
  </div>
</section>

Let Readers Practice

Checklist

A list readers tick off as they go. Ticks reset when the page reloads.

Before You Publish 0 of 3

Replace all the placeholder text Check the element in the article preview Open the article on your phone

All Done. Your article is ready to publish.

Show HTML CodeHide HTML Code

Replace the Highlighted Text

{{CHECKLIST_TITLE}} The heading.
{{ITEM_1}} and so on: one task per line.
{{DONE_MESSAGE}} Shown when everything is ticked.
More items: copy a whole <label> line and change “0 of 3” to your total.

<style>
  .kbs-check { padding: 16px; border-radius: 6px; background: #F3EFEB; color: #5C5656; font-family: inherit; font-size: 14px; }
  .kbs-check__head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
  .kbs-check__title { font-size: 15px; font-weight: 600; color: #5C5656; }
  .kbs-check__count { font-weight: 600; white-space: nowrap; }
  .kbs-check__bar { height: 6px; margin-bottom: 6px; border-radius: 3px; background: #FFFFFF; overflow: hidden; }
  .kbs-check__fill { width: 0; height: 100%; background: #B24A4A; transition: width 0.3s ease; }
  .kbs-check label { display: flex; align-items: center; gap: 10px; padding: 6px 0; cursor: pointer; }
  .kbs-check input { width: 16px; height: 16px; margin: 0; accent-color: #B24A4A; cursor: pointer; }
  .kbs-check input:checked + span { text-decoration: line-through; }
  .kbs-check__done { display: none; margin: 6px 0 0; font-weight: 600; color: #5C5656; }
  .kbs-check.is-complete .kbs-check__done { display: block; }
</style>

<div class="kbs-check" onchange="
  var all = this.querySelectorAll('input[type=checkbox]').length;
  var done = this.querySelectorAll('input[type=checkbox]:checked').length;
  this.querySelector('.kbs-check__fill').style.width = (done / all * 100) + '%';
  this.querySelector('.kbs-check__count').textContent = done + ' of ' + all;
  this.classList.toggle('is-complete', done === all);
">
  <div class="kbs-check__head">
    <span class="kbs-check__title">{{CHECKLIST_TITLE}}</span>
    <span class="kbs-check__count">0 of 3</span>
  </div>
  <div class="kbs-check__bar"><div class="kbs-check__fill"></div></div>
  <label><input type="checkbox"><span>{{ITEM_1}}</span></label>
  <label><input type="checkbox"><span>{{ITEM_2}}</span></label>
  <label><input type="checkbox"><span>{{ITEM_3}}</span></label>
  <p class="kbs-check__done">{{DONE_MESSAGE}}</p>
</div>

Quiz

Readers answer a few questions, then see their score and the right answers.

Quick Quiz

Question 1 of 3

A new user logs in, skips the welcome tour, and starts clicking around. What is the best next onboarding move?

Guidance is more useful when it appears at the moment the user is trying to do something.

Your onboarding checklist has a 90% completion rate, but new-user retention is flat. What should you investigate first?

Completion is not the same as activation. Check whether users reach the moment the product becomes valuable.

Freelancers and enterprise admins both see the same first-run onboarding flow. What is the most likely problem?

Different users need different first wins. Segmenting by role, use case, or company size keeps onboarding relevant.

Please choose an answer before continuing.

Your Quiz Result

Great instinct. You're treating onboarding as a path to value, not a set of screens.

Good start. The big idea: guide users toward real value, not just toward finishing onboarding.

Show HTML CodeHide HTML Code

Replace the Highlighted Text

{{QUIZ_TITLE}} The heading above the quiz.
{{QUESTION_1}} and so on: the questions.
{{Q1_CORRECT}} and so on: the right answer. It's the button with data-correct, and it can be in any position.
{{Q1_WRONG_1}}, {{Q1_WRONG_2}} and so on: the wrong answers.
{{Q1_EXPLANATION}} and so on: shown in the results under each question.
{{PERFECT_MESSAGE}} Shown when every answer is right. {{OTHER_MESSAGE}} Shown otherwise.
More questions: copy a whole kbs-quiz__q block without is-active, and change “Question 1 of 3” to your total.

<style>
  .kbs-quiz {
    max-width: 860px;
    margin: 36px 0;
    padding: 28px;
    border-radius: 12px;
    background: #F3EFEB;
    color: #5C5656;
    font-family: inherit;
    box-sizing: border-box;
  }
  .kbs-quiz * { box-sizing: border-box; }
  .kbs-quiz__title { margin: 0 0 8px; font-size: 24px; font-weight: 700; line-height: 1.2; color: #5C5656; }
  .kbs-quiz__progress { margin: 0 0 18px; font-size: 13px; font-weight: 700; color: #B24A4A; }
  .kbs-quiz__q, .kbs-quiz__explain, .kbs-quiz__warning, .kbs-quiz__results { display: none; }
  .kbs-quiz__q.is-active { display: block; }
  .kbs-quiz__question { margin: 0 0 18px; font-size: 19px; font-weight: 800; line-height: 1.4; color: #5C5656; }
  .kbs-quiz__options { display: grid; gap: 10px; margin-bottom: 18px; }
  .kbs-quiz__option {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid rgba(92, 86, 86, 0.22);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.62);
    color: #5C5656;
    font: inherit;
    font-size: 15px;
    line-height: 1.45;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
  }
  .kbs-quiz__option:hover { border-color: #B24A4A; background: rgba(255, 255, 255, 0.9); }
  .kbs-quiz__option.is-selected { border-color: #B24A4A; background: rgba(178, 74, 74, 0.1); color: #5C5656; font-weight: 700; }
  .kbs-quiz.show-warning .kbs-quiz__warning { display: block; margin: 0 0 16px; color: #B24A4A; font-size: 14px; font-weight: 700; }
  .kbs-quiz__actions { display: flex; flex-wrap: wrap; gap: 10px; }
  .kbs-quiz__btn {
    padding: 11px 18px;
    border: 1px solid #B24A4A;
    border-radius: 8px;
    background: #B24A4A;
    color: #FFFFFF;
    font: inherit;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
  }
  .kbs-quiz__btn--secondary { background: transparent; color: #B24A4A; }
  .kbs-quiz__btn:disabled { opacity: 0.45; cursor: not-allowed; }
  .kbs-quiz.is-finished .kbs-quiz__screen { display: none; }
  .kbs-quiz.is-finished .kbs-quiz__results { display: block; }
  .kbs-quiz__score-box, .kbs-quiz__review {
    margin-bottom: 12px;
    padding: 18px 20px;
    border: 1px solid rgba(92, 86, 86, 0.18);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.62);
  }
  .kbs-quiz__score { display: block; margin-bottom: 8px; font-size: 24px; font-weight: 700; color: #B24A4A; }
  .kbs-quiz__score-box p { margin: 0; }
  .kbs-quiz__msg--perfect, .kbs-quiz.is-perfect .kbs-quiz__msg--other { display: none; }
  .kbs-quiz.is-perfect .kbs-quiz__msg--perfect { display: block; }
  .kbs-quiz__review p { margin: 6px 0; font-size: 14px; line-height: 1.5; }
  .kbs-quiz__review .kbs-quiz__review-q { margin: 0 0 10px; font-size: 16px; font-weight: 700; color: #5C5656; }
  .kbs-quiz__review .kbs-quiz__correct { color: #B24A4A; font-weight: 800; }
</style>

<section class="kbs-quiz" onclick="
  var btn = event.target.closest('button');
  if (!btn || !this.contains(btn)) return;
  var quiz = this;
  var qs = quiz.querySelectorAll('.kbs-quiz__q');
  var cur = quiz.querySelector('.kbs-quiz__q.is-active');
  var i = Array.prototype.indexOf.call(qs, cur);
  quiz.classList.remove('show-warning');

  if (btn.classList.contains('kbs-quiz__option')) {
    var opts = cur.querySelectorAll('.kbs-quiz__option');
    for (var o = 0; o < opts.length; o++) opts[o].classList.toggle('is-selected', opts[o] === btn);
  }

  if (btn.hasAttribute('data-back') && i > 0) {
    cur.classList.remove('is-active'); i--; qs[i].classList.add('is-active');
  }

  if (btn.hasAttribute('data-next')) {
    if (!cur.querySelector('.is-selected')) { quiz.classList.add('show-warning'); return; }
    if (i < qs.length - 1) {
      cur.classList.remove('is-active'); i++; qs[i].classList.add('is-active');
    } else {
      var score = 0, review = quiz.querySelector('[data-review]');
      review.innerHTML = '';
      for (var k = 0; k < qs.length; k++) {
        var picked = qs[k].querySelector('.is-selected');
        var right = qs[k].querySelector('[data-correct]');
        if (picked === right) score++;
        var item = document.createElement('div');
        item.className = 'kbs-quiz__review';
        var q = document.createElement('p');
        q.className = 'kbs-quiz__review-q';
        q.textContent = (k + 1) + '. ' + qs[k].querySelector('.kbs-quiz__question').textContent.trim();
        var yours = document.createElement('p');
        yours.innerHTML = '<strong>Your Answer:</strong> ';
        yours.appendChild(document.createTextNode(picked.textContent.trim()));
        var correct = document.createElement('p');
        correct.className = 'kbs-quiz__correct';
        correct.innerHTML = '<strong>Correct Answer:</strong> ';
        correct.appendChild(document.createTextNode(right.textContent.trim()));
        var why = document.createElement('p');
        why.textContent = qs[k].querySelector('.kbs-quiz__explain').textContent.trim();
        item.appendChild(q); item.appendChild(yours); item.appendChild(correct); item.appendChild(why);
        review.appendChild(item);
      }
      quiz.querySelector('[data-score]').textContent = score + ' / ' + qs.length + ' Correct';
      quiz.classList.toggle('is-perfect', score === qs.length);
      quiz.classList.add('is-finished');
    }
  }

  if (btn.hasAttribute('data-restart')) {
    quiz.classList.remove('is-finished', 'is-perfect');
    var sel = quiz.querySelectorAll('.is-selected');
    for (var s = 0; s < sel.length; s++) sel[s].classList.remove('is-selected');
    cur.classList.remove('is-active'); i = 0; qs[0].classList.add('is-active');
  }

  quiz.querySelector('[data-progress]').textContent = 'Question ' + (i + 1) + ' of ' + qs.length;
  quiz.querySelector('[data-back]').disabled = i === 0;
  quiz.querySelector('[data-next]').textContent = i === qs.length - 1 ? 'See My Score' : 'Next';
">
  <div class="kbs-quiz__screen">
    <p class="kbs-quiz__title">{{QUIZ_TITLE}}</p>
    <p class="kbs-quiz__progress" data-progress>Question 1 of 3</p>

    <div class="kbs-quiz__q is-active">
      <p class="kbs-quiz__question">{{QUESTION_1}}</p>
      <div class="kbs-quiz__options">
        <button type="button" class="kbs-quiz__option">{{Q1_WRONG_1}}</button>
        <button type="button" class="kbs-quiz__option" data-correct>{{Q1_CORRECT}}</button>
        <button type="button" class="kbs-quiz__option">{{Q1_WRONG_2}}</button>
      </div>
      <p class="kbs-quiz__explain">{{Q1_EXPLANATION}}</p>
    </div>

    <div class="kbs-quiz__q">
      <p class="kbs-quiz__question">{{QUESTION_2}}</p>
      <div class="kbs-quiz__options">
        <button type="button" class="kbs-quiz__option">{{Q2_WRONG_1}}</button>
        <button type="button" class="kbs-quiz__option" data-correct>{{Q2_CORRECT}}</button>
        <button type="button" class="kbs-quiz__option">{{Q2_WRONG_2}}</button>
      </div>
      <p class="kbs-quiz__explain">{{Q2_EXPLANATION}}</p>
    </div>

    <div class="kbs-quiz__q">
      <p class="kbs-quiz__question">{{QUESTION_3}}</p>
      <div class="kbs-quiz__options">
        <button type="button" class="kbs-quiz__option">{{Q3_WRONG_1}}</button>
        <button type="button" class="kbs-quiz__option" data-correct>{{Q3_CORRECT}}</button>
        <button type="button" class="kbs-quiz__option">{{Q3_WRONG_2}}</button>
      </div>
      <p class="kbs-quiz__explain">{{Q3_EXPLANATION}}</p>
    </div>

    <p class="kbs-quiz__warning">Please choose an answer before continuing.</p>
    <div class="kbs-quiz__actions">
      <button type="button" class="kbs-quiz__btn kbs-quiz__btn--secondary" data-back disabled>Back</button>
      <button type="button" class="kbs-quiz__btn" data-next>Next</button>
    </div>
  </div>

  <div class="kbs-quiz__results">
    <p class="kbs-quiz__title">Your Quiz Result</p>
    <div class="kbs-quiz__score-box">
      <strong class="kbs-quiz__score" data-score></strong>
      <p class="kbs-quiz__msg--perfect">{{PERFECT_MESSAGE}}</p>
      <p class="kbs-quiz__msg--other">{{OTHER_MESSAGE}}</p>
    </div>
    <div data-review></div>
    <button type="button" class="kbs-quiz__btn" data-restart>Retake Quiz</button>
  </div>
</section>

Make Things Easier

Copy Box

For anything readers paste somewhere else, like a URL or a code snippet. One click copies it.

https://your-kb-url.com/en/article/your-article-slug?embed=1&nonav=1

Show HTML CodeHide HTML Code

Replace the Highlighted Text

{{TEXT_TO_COPY}} The text readers copy. Write < for <, > for > and & for &. Readers still copy the normal characters.

<style>
  .kbs-copy {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 6px 6px 16px;
    border-left: 4px solid #B24A4A;
    border-radius: 6px;
    background: #F3EFEB;
    font-family: inherit;
  }
  .kbs-copy__text {
    flex: 1;
    min-width: 0;
    padding: 6px 0;
    overflow-x: auto;
    background: none;
    color: #5C5656;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    white-space: pre;
  }
  .kbs-copy__btn {
    flex-shrink: 0;
    padding: 8px 14px;
    border: 0;
    border-radius: 6px;
    background: #B24A4A;
    color: #FFFFFF;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
  }
</style>

<div class="kbs-copy">
  <code class="kbs-copy__text">{{TEXT_TO_COPY}}</code>
  <button type="button" class="kbs-copy__btn" onclick="
    var btn = this;
    var text = btn.parentNode.querySelector('.kbs-copy__text').textContent;
    navigator.clipboard.writeText(text).then(function () {
      btn.textContent = 'Copied';
      setTimeout(function () { btn.textContent = 'Copy'; }, 1500);
    });
  ">Copy</button>
</div>

Good to Know: Clicks, ticks and quiz answers reset when the page reloads. Using the same element twice in one article? The <style> part only needs to be there once.

Interactive HTML Snippets for Your Knowledge Base

How to Use the Snippets

Why There Are No Script Tags

Building Your Own

Or Let AI Build It

Let Readers Choose

Tabs

Filterable Cards

Let Readers Practice

Checklist

Quiz

Make Things Easier

Copy Box

Was this article helpful?