Skip to main content
All CollectionsDeveloper DocsGuides
Triggering a Quiz Pop-up on Button Click
Triggering a Quiz Pop-up on Button Click

#developer #pop-up #quiz

Mark Baek avatar
Written by Mark Baek
Updated over a week ago

This guide will provide code that can be copy/pasted to embed a quiz into your website that is triggered on clicking a button.

πŸ’‘ What you'll learn about


Before getting started

The content in this guide is an example of how a button-triggered pop-up can be created with custom HTML, CSS & Javascript code.

Octane AI will only be able to provide support on the content within this guide. A certain level of technical proficiency is recommended in order to make changes beyond the examples shown in this article.

Code for a button-triggered quiz pop-up

The code below can be copy/pasted into your website to create a working version of a button pop-up. We recommend doing this through the theme editor, which allows you to insert custom code without directly editing theme files.

In the HTML code below, replace <INSERT YOUR QUIZ PUBLISH CODE HERE> with your quiz's embed code before copying the code.

πŸ“• HTML code:

<button type="button" class="quiz-modal-btn" data-quiz-modal="toggle">Take the quiz</button>

<div class="quiz-modal-backdrop quiz-modal-hide" data-quiz-modal="backdrop">
<div class="quiz-modal-container" role="dialog">
<div class="quiz-modal-content">
<button class="quiz-modal-close" data-quiz-modal="close" aria-label="Close modal">x</button>
<INSERT YOUR QUIZ PUBLISH CODE HERE>
</div>
</div>
</div>

<script>
document.addEventListener("click", function(e) {
const quizModal = document.querySelector(".quiz-modal-backdrop");
const quizModalDataset = e.target.dataset.quizModal;

if (quizModalDataset === "toggle") {
quizModal.classList.remove("quiz-modal-hide")
} else if (quizModalDataset === "backdrop" || quizModalDataset === "close") {
quizModal.classList.add("quiz-modal-hide")
};

})
</script>

πŸ“• CSS code:

.quiz-modal-btn {
display: block;
font-family: inherit;
font-size: 1.5rem;
color: #ffffff;
margin-left: auto;
margin-right: auto;
background-color: #2c70ab;
border: none;
border-radius: 1em;
box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.1);
padding: 1.25em 3em;
cursor: pointer;
transition: 0.1s;
}

.quiz-modal-btn:hover {
background-color: #266093;
}

.quiz-modal-backdrop {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
overflow-y: initial !important;
background-color: rgba(200, 200, 200, 0.2);
z-index: 1000;
}

.quiz-modal-container {
position: relative;
width: 60vw;
max-height: 80vh;
overflow-y: auto;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 0 10px 2px rgb(0, 0, 0, 0.2);
box-sizing: border-box;
}

.quiz-modal-close {
font-family: inherit;
font-size: 2rem;
position: absolute;
top: 2%;
right: 2.5%;
border: none;
color: #c8c8c8;
cursor: pointer;
background-color: rgba(0, 0, 0, 0);
z-index: 1001;
}

.quiz-modal-close:hover {
color: #969696;
}

.quiz-modal-hide {
display: none !important;
}

The HTML code will provide the structure & functionality for the button-triggered quiz pop-up, while the CSS code adds styling and visual effects.

The simplest way to add this to your website will be inside of a custom liquid block, which lets you add HTML & CSS code to a page template through the theme editor.

Adding the button-triggered quiz pop-up to your website

First, we'll add the HTML code into a custom liquid block.

πŸ“• Adding HTML into a custom liquid block

  1. From the Shopify admin dashboard, go to Sales channels β†’ Online Store β†’ Themes.

  2. On the Themes page, click on Customize to open the theme editor.

  3. In the theme editor's top menu, click on the Home page dropdown menu.

  4. Click on Pages β†’ "Create template".

  5. Name your new page template.

  6. In the left under Templates, click on "Add section".

  7. Find the </> Custom Liquid section and add it to the page.

  8. Open the custom liquid block you just added.

  9. In the left, under the "Custom Liquid" block, paste your HTML code.

Once your HTML code is pasted, the content will appear on the page but without any styling. Next, we'll need to add the CSS code to the theme's CSS.

While custom liquid blocks do have a section for custom CSS, there is a 500 character limit which will be too small for the amount of code needed for our button pop-up.

πŸ“• Adding CSS in theme settings

  1. Inside of the theme editor, click on the Theme settings icon on the left.

  2. From the theme settings menu, scroll down to the bottom.

  3. Expand the Custom CSS section.

  4. Paste the CSS code from the previous section into the Custom CSS box.

  5. Save your changes.

Although the section that we're adding CSS to is for the theme in general, our code targets the elements in our quiz pop-up button only, and won't be able to apply styling to any other part of the website.

Did this answer your question?