# Adding custom code to quizzes

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.

{% hint style="warning" %}
**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.
{% endhint %}

## In this section:

* [Applying custom CSS to your quiz](#applying-custom-css-to-your-quiz)
* [Applying custom JavaScrip](#applying-custom-javascript)[t to your quiz](#applying-custom-javascript)

***

## 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.

{% hint style="warning" %}
**Note:** Don't apply CSS code to div classes as they're dynamic and can change.
{% endhint %}

**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.&#x20;
5. Click **Save**.

{% hint style="info" %}
**Note:** You can find the quiz elements that you might need like IDs, tags, and attributes by inspecting the page in your browser.
{% endhint %}

<figure><img src="/files/aRlmfWnCH9t3LHyP9uPw" alt=""><figcaption></figcaption></figure>

### Option 3: Applying custom CSS to your quiz's page&#x20;

**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.](/advanced-settings/common-code-customizations.md#adding-custom-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](#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.&#x20;
5. Click **Save**.

You can also explore examples of [common custom JavaScript events](/advanced-settings/common-code-customizations.md#common-custom-javascript-events).


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://support.quizkitapp.com/building-a-quiz/styling-and-designing-your-quiz/adding-custom-code-to-quizzes.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.