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 (jump to section)
Code for a button-triggered quiz pop-up (jump to section)
Adding the button-triggered quiz pop-up to your website (jump to section)
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
From the Shopify admin dashboard, go to Sales channels → Online Store → Themes.
On the Themes page, click on Customize to open the theme editor.
In the theme editor's top menu, click on the Home page dropdown menu.
Click on Pages → "Create template".
Name your new page template.
In the left under Templates, click on "Add section".
Find the </> Custom Liquid section and add it to the page.
Open the custom liquid block you just added.
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
Inside of the theme editor, click on the Theme settings icon on the left.
From the theme settings menu, scroll down to the bottom.
Expand the Custom CSS section.
Paste the CSS code from the previous section into the Custom CSS box.
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.