Adding custom code to 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.

You can also explore examples of common custom CSS and HTML code.

---

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.

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.

You can also explore examples of common custom JavaScript events.