Applying custom CSS and JavaScript to your quizzes

Learn to apply custom code like CSS and JavaScript to your quizzes to customize them.

You can apply your own custom CSS and JavaScript code to your Quiz Kit quizzes. There are several methods to apply custom code: through the custom fields in the quiz builder, in your theme editor, and in each published quiz’s page.

Caution

You should only edit your theme's code if you're familiar with coding. Adding CSS and JavaScript through the Quiz Kit app builder is the easiest and least risky way to make changes.

In this section:

Applying custom CSS to your quiz Applying custom JavaScript to your quiz

Applying custom CSS to your quiz

Option 1: Applying custom CSS in the quiz builder

You can add custom CSS to your quiz from the Styles menu. When you use this method, it applies the CSS code to the entire quiz.

Steps:

  1. From the Quiz Kit dashboard, click Customize on the quiz that you want to apply custom CSS to.

  2. On the left-hand menu, click the paintbrush to access the Styles menu, then click </> Custom CSS.

  3. On the right-hand menu, enter your custom CSS in the given field, then click Save.

Option 2: Applying custom CSS to your theme file

When you add custom CSS to your quiz kit theme file, you can choose to apply it to all quizzes, or just specific quizzes.

Note: Don't apply CSS code to div classes as they're dynamic and can change.

Steps:

  1. From your Shopify admin, go to Online Store > Themes.

  2. Find the theme that you want to edit, click the … button to open the actions menu, and then click Edit code.

  3. Search within the theme for the quiz kit file.

  4. Enter the CSS code into the file. You can add custom CSS to your quiz element IDs, tags, or other attributes. Don't apply it to classes as they're dynamic and can change.

  5. Click Save.

Note: You can find the quiz elements that you might need like IDs, tags, and attributes by inspecting the page in your browser.

Option 3: Applying custom CSS to your quiz's page

Steps:

  1. From the Shopify dashboard, click Online Store > Pages.

  2. Click the quiz page that you want to edit CSS for.

  3. Click </> on the Rich Text Editor to show the page code.

  4. Add your custom CSS and click Save.

Applying custom JavaScript to your quiz

Option 1: Applying custom JavaScript in the quiz builder

You can add your own JavaScript to your quizzes Intro, Question, or Result pages. Custom JavaScript only applies to the specific page it's used on.

Note: Don't apply CSS code to div classes as they're dynamic and can change.

Steps:

  1. From the Quiz Kit dashboard, click Customize on the quiz that you want to customize.

  2. Click the page that you want to add custom JavaScript to.

  3. On the right-hand menu, find the Custom JS field.

  4. Add any quiz elements like IDs, tags or other attributes. Don't apply it to classes as they're dynamic and can change.

  5. Click Save.

Option 2: Applying custom Javascript in your theme file

You can add JavaScript in your theme file, but it will only apply to the pages of your quiz that you specify. You can use custom JavaScript events listed below.

Steps:

  1. From your Shopify admin, go to Online Store > Themes.

  2. Find the theme that you want to edit, click the … button to open the actions menu, and then click Edit code.

  3. Search within the theme for the quiz kit file.

  4. Enter the JavaScript code into the file.

  5. Click Save.

Custom JavaScript events

The following are JavaScript events that you can use for different purposes.

  1. "quizKitQuestionLoaded" event. This event fires when your customer lands on the question page. You can use this event to add custom labels, text, and content to particular questions. This event will contain question data in the the following format:

{ 
  question: { all question data will be here }
}

Add the code below to catch this event:

document.addEventListener('quizKitQuestionLoaded', function (e) {
  // console.log(e.detail);  
  // e.detail will contain question data
}, false);

  1. "quizKitCapturePageLoaded" event. This event fires when your customer lands on the email capture page. You can add additional checkboxes or other elements to this page. Add the code below to catch this event:

document.addEventListener('quizKitCapturePageLoaded', function (e) {
  // add your code here 
}, false);

  1. "quizKitResultsPageLoaded" event. This event fires when your customer lands on the result page. You can use this event to send your quiz data anywhere. This event will contain quiz data in the following format:

{ 
  answers: [questions names and chosen answers],
  email: 'customer email',   
  result: { all the data about current result page },
  recommendedProducts: [recommended products], 
}

Add the code below to catch this event:

document.addEventListener('quizKitResultsPageLoaded', function (e) {  
  // console.log(e.detail); 
  // loop through the data (e.detail) and send it anywhere or use it for your needs
}, false);

  1. "quizKitAddToCart" event. This event fires each time your customers click the "Add to bag" button on your quiz result page. This event fires before items are actually added to cart.

Add the code below to catch this event:

document.addEventListener('quizKitAddToCart', function (e) { 
  // e.detail - contains an array of product items that will be added to cart.
}, false);

  1. "quizKitAddToCartSuccess" event. This event fires right after items are added to cart. You can use this event to create a direct connection with your Theme's Ajax (Slide out) cart.

Add the code below to catch this event:

document.addEventListener('quizKitAddToCartSuccess', function (e) {
  // code for refreshing your Ajax cart and opening it here
}, false)

Last updated

Was this helpful?