How to Add JavaScript to the Quiz¶

Unlock the full potential of your RevenueHunt Product Recommendation Quiz by integrating custom JavaScript. We made it very easy for developers to tap into the quiz response and get all the information they need: individual answers to questions, triggered tags and recommended products.

With custom JavaScript, you can:

add custom behavior, images, texts or logic
change quiz layout
display custom product recommendations
forward to any particular page on your store
add tracking codes to specific questions (Google Analytics, Meta Pixel)
and more

This guide will walk you through adding JavaScript to quiz questions and the results page.

For developers and Shopify Partners

This guide is meant for developers and Shopify Partners. If you're not familiar with the basics of JavaScript and the Vue.js framework, it is advised to ask for help from a professional to implement this. You can find/hire a developer here.

Understanding JavaScript, HTML, and Liquid¶

Before diving into the implementation, it's important to understand the different technologies you can use to customize your quiz. The available technologies vary by platform.

Technology	Description	What you can use it for
JavaScript	A programming language that adds interactivity and dynamic behavior to web pages.	Adding custom logic and calculations (like BMI calculators)
HTML	A markup language that defines the structure and content of web pages.	Adding custom content blocks and layouts
Liquid	A templating language specific to Shopify that allows dynamic content insertion.	Displaying quiz answers and user responses dynamically

Platform support

ShopifyShopify (Legacy)WooCommerceMagentoBigCommerceStandalone

Available: JavaScript + HTML + Liquid
Use Liquid when you need Shopify data or server-rendered dynamic content. Use JavaScript for interactivity and logic.

Available: JavaScript + HTML
Liquid is not available in Shopify (Legacy).

Available: JavaScript + HTML
Liquid is not available in WooCommerce.

Available: JavaScript + HTML
Liquid is not available in Magento.

Available: JavaScript + HTML
Liquid is not available in BigCommerce.

Available: JavaScript + HTML
Liquid is not available in Standalone.

Access the Custom JavaScript Console¶

You can add custom JavaScirpt to the quiz results page and the quiz questions.

Results Page¶

ShopifyShopify (Legacy)WooCommerceMagentoBigCommerceStandalone

Use JavaScript on Results Page when you want to:

Access all quiz data - See all answers, scores, and variables after quiz completion
Work with recommendations - Access and manipulate recommended products/collections
Cart operations - Add products to cart, apply discount codes
Display calculations - Show results based on all collected answers (BMI, skin type, etc.)
Conversion tracking - Fire analytics events with complete quiz data
Customize recommendations - Modify or filter displayed products

Navigate to the Results Page Settings in the Quiz Builder.
Scroll down to find the Custom JavaScript section and open it.
This is your canvas for crafting and deploying custom scripts that can modify the quiz's behavior based on user interactions and results.

Run the custom code

▷ / ❚❚ - Press this button to run the custom code or enable/disable the custom code execution.

Get help with custom JavaScript

Click on ✨Get help with custom JavaScript to open a chat window with the Quiz Copilot AI. It can directly write JavaScript code for you.
Remember to click the Save button to update the preview/live quiz.

Navigate to the Results Page Settings in the Quiz Builder.
Select Advanced Settings.
Scroll down to find the Custom JavaScript section and click add.
This is your canvas for crafting and deploying custom scripts that can modify the quiz's behavior based on user interactions and results.
Remember to click the Publish button to update the preview/live quiz.

Navigate to the Results Page Settings in the Quiz Builder.
Select Advanced Settings.
Scroll down to find the Custom JavaScript section and click add.
This is your canvas for crafting and deploying custom scripts that can modify the quiz's behavior based on user interactions and results.
Remember to click the Publish button to update the preview/live quiz.

Navigate to the Results Page Settings in the Quiz Builder.
Select Advanced Settings.
Scroll down to find the Custom JavaScript section and click add.
This is your canvas for crafting and deploying custom scripts that can modify the quiz's behavior based on user interactions and results.
Remember to click the Publish button to update the preview/live quiz.

Navigate to the Results Page Settings in the Quiz Builder.
Select Advanced Settings.
Scroll down to find the Custom JavaScript section and click add.
This is your canvas for crafting and deploying custom scripts that can modify the quiz's behavior based on user interactions and results.
Remember to click the Publish button to update the preview/live quiz.

Navigate to the Results Page Settings in the Quiz Builder.
Select Advanced Settings.
Scroll down to find the Custom JavaScript section and click add.
This is your canvas for crafting and deploying custom scripts that can modify the quiz's behavior based on user interactions and results.
Remember to click the Publish button to update the preview/live quiz.

Quiz Questions¶

ShopifyShopify (Legacy)WooCommerceMagentoBigCommerceStandalone

Use JavaScript on Questions when you want to:

Control quiz flow - Auto-advance, skip questions, or go back based on answers
Validate inputs - Check if answers meet certain criteria before allowing progression
Dynamic question content - Change question text, show/hide elements based on previous answers
Real-time interactions - Update the page as users select answers
Set calculated values - Compute values to use in later questions
Track individual questions - Fire analytics events for specific questions

Navigate to the Quiz Builder.
Open question settings.
Scroll down to find the Custom JavaScript section and open it.
This is your canvas for crafting and deploying custom scripts that can modify the quiz's behavior based on user interactions and results.

Run the custom code

▷ / ❚❚ - Press this button to run the custom code or enable/disable the custom code execution.

Get help with custom JavaScript

Click on ✨Get help with custom JavaScript to open a chat window with the Quiz Copilot AI. It can directly write JavaScript code for you.
Remember to click the Save button to update the preview/live quiz.

Navigate to the Quiz Builder.
Open question settings.
Scroll down to find the Custom JavaScript section and click add.
This is your canvas for crafting and deploying custom scripts that can modify the quiz's behavior based on user interactions and results.
Remember to click the Publish button to update the preview/live quiz.

Navigate to the Quiz Builder.
Open question settings.
Scroll down to find the Custom JavaScript section and click add.
This is your canvas for crafting and deploying custom scripts that can modify the quiz's behavior based on user interactions and results.
Remember to click the Publish button to update the preview/live quiz.

Navigate to the Quiz Builder.
Open question settings.
Scroll down to find the Custom JavaScript section and click add.
This is your canvas for crafting and deploying custom scripts that can modify the quiz's behavior based on user interactions and results.
Remember to click the Publish button to update the preview/live quiz.

Navigate to the Quiz Builder.
Open question settings.
Scroll down to find the Custom JavaScript section and click add.
This is your canvas for crafting and deploying custom scripts that can modify the quiz's behavior based on user interactions and results.
Remember to click the Publish button to update the preview/live quiz.

Navigate to the Quiz Builder.
Open question settings.
Scroll down to find the Custom JavaScript section and click add.
This is your canvas for crafting and deploying custom scripts that can modify the quiz's behavior based on user interactions and results.
Remember to click the Publish button to update the preview/live quiz.

Via Custom HTML Block¶

Use Custom HTML Blocks when

You want JavaScript to run in a specific location in your layout
You need to combine HTML, Liquid, and JavaScript together
You want different scripts for different content blocks
You're adding small, context-specific scripts (like tracking a specific element)
You need JavaScript to run multiple times (e.g., once per product in recommendations)

ShopifyShopify (Legacy)WooCommerceMagentoBigCommerceStandalone

You can also add custom JavaScript directly in HTML blocks throughout your quiz. These blocks support both JavaScript and Liquid templating for dynamic content.

Results Page¶

Navigate to the Results Page in the Quiz Builder.
Add or edit a Custom HTML block in your results page layout.

Add your JavaScript using <script> tags:

<script>
// Your JavaScript code here
console.log('Quiz completed with result:', quiz.currentResult.ref);
</script>

Use Liquid templating alongside JavaScript for dynamic content:

<script>
// Access quiz data with Liquid
const userName = '{{ quiz.answers.byBlock['name-field']?.value || 'Guest' }}';
console.log('Welcome', userName);
</script>

Click Save to update the preview/live quiz.

Run the custom code

▷ / ❚❚ - Press this button to run the custom code or enable/disable the custom code execution.

Questions¶

Navigate to the Quiz Builder and open a question.
Add or edit a Custom HTML block within the question.

Add your JavaScript using <script> tags:

<script>
// JavaScript that runs when this question is displayed
console.log('Current question:', quiz.currentQuestion.ref);
</script>

Combine JavaScript with Liquid templating:

<script>
// Dynamic content based on previous answers
const previousAnswer = '{{ quiz.answers.byBlock['previous-question']?.value }}';
if (previousAnswer === 'yes') {
  // Custom logic based on previous answer
  console.log('User answered yes previously');
}
</script>

Click Save to update the preview/live quiz.

Run the custom code

▷ / ❚❚ - Press this button to run the custom code or enable/disable the custom code execution.

Slot Item Composition¶

Navigate to the Results Page Settings in the Quiz Builder.
Open the Product Block and in the Slot settings you can find the Slot item composition settings for your product recommendations.
Add or edit a Custom HTML block within a product slot.

Add JavaScript that interacts with individual product data:

<script>
// Access the current product in the slot
const productTitle = '{{ item.title }}';
const productPrice = '{{ item.priceRange.minVariantPrice.amount }}';

console.log('Product:', productTitle, 'Price:', productPrice);

// Add custom behavior for this specific product
if (productTitle.includes('Premium')) {
  // Special handling for premium products
  console.log('This is a premium product!');
}
</script>

Use Liquid variables like {{ item }} to access the current product/variant/collection object.
Click Save to update the preview/live quiz.

Run the custom code

▷ / ❚❚ - Press this button to run the custom code or enable/disable the custom code execution.

Not available.

Find Block and Question IDs¶

ShopifyShopify (Legacy)WooCommerceMagentoBigCommerceStandalone

Before you start writing custom JavaScript, you'll need to know how to find the IDs (references) for your questions and blocks. These IDs are used to access specific answers and elements in your quiz.

How to Find Block and Question IDs

Method 1: Copy from Quiz Builder (Recommended)

Open your quiz in the Quiz Builder
Click on any question or block element
Look for the block ID in the settings panel - it's usually displayed at the top
Click the copy icon next to the ID to copy it to your clipboard
Use this ID in your JavaScript (e.g., quiz.answers.byBlock['your-block-id'])

Method 2: Inspect Element in Browser

Open your quiz in preview or on your live site
Right-click on the question or element you want to reference
Select "Inspect" or "Inspect Element" from the context menu
Look for id or data-block-ref attributes in the HTML
The value of these attributes is your block reference

Example IDs you might see:

qbc-skintype (question block choice)
qbi-email (question block input)
q-concerns (question)
r-results (result page)

Use the Exact ID

Block references are case-sensitive! Make sure to copy them exactly as they appear. qbc-skintype is different from qbc-SkinType.

Quick Test

To see all your current answers and their block references, add this to your Custom JavaScript section:

console.log('All answers by block:', quiz.answers.byBlock);

Then open your browser's Console (F12 → Console tab) and take the quiz. You'll see all the block IDs and their corresponding values.

In Shopify Legacy, you'll need to find the Slide ID for each question to access its value with prq.getSlideValue(slideId).

How to Find Slide IDs

Inspect in Browser Console

Open your quiz in preview or live
Press F12 to open Developer Tools → Console tab
Type prq.quizSlides() and press Enter
Expand the results to see all slides with their IDs
Look for the id property of each slide

Method 3: Inspect Element

Right-click on the question element
Select "Inspect Element"
Look for data-slide-id or similar attributes in the HTML

Example Slide IDs: rgiq0oE, 0Mi2qLN, abc123

In WooCommerce, you'll need to find the Slide ID for each question to access its value with prq.getSlideValue(slideId).

How to Find Slide IDs

Inspect in Browser Console

Open your quiz in preview or live
Press F12 to open Developer Tools → Console tab
Type prq.quizSlides() and press Enter
Expand the results to see all slides with their IDs
Look for the id property of each slide

Method 3: Inspect Element

Right-click on the question element
Select "Inspect Element"
Look for data-slide-id or similar attributes in the HTML

Example Slide IDs: rgiq0oE, 0Mi2qLN, abc123

In Magento, you'll need to find the Slide ID for each question to access its value with prq.getSlideValue(slideId).

How to Find Slide IDs

Inspect in Browser Console

Open your quiz in preview or live
Press F12 to open Developer Tools → Console tab
Type prq.quizSlides() and press Enter
Expand the results to see all slides with their IDs
Look for the id property of each slide

Method 3: Inspect Element

Right-click on the question element
Select "Inspect Element"
Look for data-slide-id or similar attributes in the HTML

Example Slide IDs: rgiq0oE, 0Mi2qLN, abc123

In BigCommerce, you'll need to find the Slide ID for each question to access its value with prq.getSlideValue(slideId).

How to Find Slide IDs

Inspect in Browser Console

Open your quiz in preview or live
Press F12 to open Developer Tools → Console tab
Type prq.quizSlides() and press Enter
Expand the results to see all slides with their IDs
Look for the id property of each slide

Method 3: Inspect Element

Right-click on the question element
Select "Inspect Element"
Look for data-slide-id or similar attributes in the HTML

Example Slide IDs: rgiq0oE, 0Mi2qLN, abc123

In Standalone, you'll need to find the Slide ID for each question to access its value with prq.getSlideValue(slideId).

How to Find Slide IDs

Inspect in Browser Console

Open your quiz in preview or live
Press F12 to open Developer Tools → Console tab
Type prq.quizSlides() and press Enter
Expand the results to see all slides with their IDs
Look for the id property of each slide

Method 3: Inspect Element

Right-click on the question element
Select "Inspect Element"
Look for data-slide-id or similar attributes in the HTML

Example Slide IDs: rgiq0oE, 0Mi2qLN, abc123

Console.log(x) Function¶

ShopifyShopify (Legacy)WooCommerceMagentoBigCommerceStandalone

In the 💎Built for Shopify version of the RevenueHunt app, custom JavaScript receives two parameters: quiz (read-only context) and actions (methods).

The `quiz` Object¶

Your JavaScript code has access to the quiz object containing all the current state data:

Quiz Context Properties

Property	Description
`quiz.metadata.responseId`	Unique response identifier
`quiz.metadata.language`	Quiz language code
`quiz.metadata.inBuilder`	`true` if in builder preview

Question Mode Properties

Property	Type	Description
`quiz.id`	string	Quiz identifier
`quiz.mode`	string	Always `'question'` on question pages
`quiz.currentQuestion`	object	Current question data
`quiz.questions`	array	All quiz questions
`quiz.results`	array	All result pages

Accessing Answers (Question Mode)

Property	Description
`quiz.answers.list`	Array of all answers in chronological order
`quiz.answers.byBlock['ref']`	Answer object keyed by block reference
`quiz.answers.byQuestion['ref']`	Answers grouped by question reference
`quiz.answers.latest`	Most recent answer

Each answer object contains:

Property	Description
`.value`	The answer value (string)
`.blockRef`	Block reference ID
`.questionRef`	Question reference ID
`.choicesRefs`	Array of selected choice IDs
`.isValid`	Whether answer passed validation

Variables & Scoring

Property	Description
`quiz.variables.scores`	Object with variable scores `{ varName: number }`
`quiz.variables.highest`	Reference of highest-scoring variable

Progress (Question Mode)

Property	Description
`quiz.progress.index`	0-based question index
`quiz.progress.displayStep`	1-based step number (for display)
`quiz.progress.totalQuestions`	Total number of questions
`quiz.progress.percentComplete`	Completion percentage (0-100)
`quiz.progress.hasPrevious`	Can navigate back
`quiz.progress.hasNext`	Can navigate forward

Results Page Properties

Property	Description
`quiz.mode`	Always `'result'` on results pages
`quiz.currentResult`	Current result page data
`quiz.resultContext.slotItems`	Object of recommended products/collections keyed by Shopify GID
`quiz.resultContext.cartItems`	Array of items currently in cart
`quiz.resultContext.discounts`	Object with `applied` array and `eligible` boolean

Actions (Methods)¶

Navigation Actions

Method	Description
`actions.next()`	Navigate to next question
`actions.previous()`	Navigate to previous question
`actions.overrideNext(ref)`	Redirect to specific question/result (e.g., `'q-skintype'`, `'r-results'`)

Answer Management

Method	Description
`actions.setAnswer(blockRef, value)`	Set answer value
`actions.setAnswers(obj)`	Batch update multiple answers
`actions.clearAnswer(blockRef)`	Clear an answer
`actions.removeAnswer(blockRef)`	Remove answer completely

Cart Actions (Results Page Only)

Method	Description
`actions.addAllToCart()`	Add all recommended items to cart (async)
`actions.addToCart(variantId, qty, sellingPlanId?)`	Add specific item to cart (async)
`actions.applyDiscountCode(code)`	Apply discount code (async)

DOM Helpers¶

Since the quiz may render in a shadow DOM, use these helpers instead of document.querySelector:

Method	Description
`window.quiz.querySelector(selector)`	Find element in quiz
`window.quiz.querySelectorAll(selector)`	Find all matching elements
`window.quiz.getElementById(id)`	Find element by ID

Global Event Handler¶

window.quiz.onChange = (event) => {
  // event.blockRef - Block that changed
  // event.value - New value
  // event.selectedLabel - Label of selected choice
};

JavaScript Examples¶

Conditional navigation based on score:

if ((quiz.variables.scores.sensitive ?? 0) > 80) {
  actions.overrideNext('q-sensitive-routine');
}

Update element based on answer:

const name = quiz.answers.byBlock['qbi-name']?.value || 'Guest';
const el = window.quiz.getElementById('greeting');
if (el) el.textContent = `Welcome, ${name}!`;

Auto-advance based on selection:

window.quiz.onChange = (event) => {
  if (event.blockRef === 'qbc-skintype' && event.selectedLabel === 'Oily') {
    actions.overrideNext('q-oily-concerns');
  }
};

Batch update answers:

const age = parseInt(quiz.answers.byBlock['qbi-age']?.value || '0');
actions.setAnswers({
  'qbc-age-group': age < 25 ? 'young' : 'mature',
  'qbc-eligible': age >= 18 ? 'yes' : 'no'
});

Auto-add to cart for premium customers (Results Page):

if ((quiz.variables.scores.premium ?? 0) > 80) {
  await actions.addAllToCart();
}

Apply discount based on cart value (Results Page):

const itemCount = Object.keys(quiz.resultContext.slotItems || {}).length;
if (itemCount >= 3) {
  await actions.applyDiscountCode('BUNDLE20');
}

Track quiz completion with analytics (Results Page):

// Send quiz completion data to your analytics
const data = {
  responseId: quiz.metadata.responseId,
  skinType: quiz.variables.highest,
  scores: quiz.variables.scores,
  recommendedProducts: Object.keys(quiz.resultContext.slotItems || {}).length
};

// Example: Send to your analytics endpoint
fetch('/api/quiz-completed', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify(data)
});

Debugging¶

To explore available data, you can add a debugger statement to your JavaScript code:

debugger;
// Your code goes here

When you view the quiz in your browser with Developer Tools open (F12), the code execution will pause at the debugger statement. In the Sources tab, you'll see the quiz and actions parameters:

debugger statement in browser

You can then:

Hover over these variables to inspect their values
Use the console panel while paused to evaluate expressions
Type quiz or actions in the console to examine their structure

Alternatively, you can use console.log to output these objects to the console:

console.log('Quiz context:', quiz);
console.log('Available actions:', actions);
console.log('Current answers:', quiz.answers);
console.log('All answers by block:', quiz.answers.byBlock);
console.log('Variable scores:', quiz.variables.scores);

To access the console in your browser:

Right-click anywhere on the page and select "Inspect" or press F12
Click on the "Console" tab
Look for your logged output

This will help you understand the structure of these objects so you can access the specific properties you need in your custom JavaScript.

Finding Block References

Not sure what block reference to use? See Finding Your Block and Question References above for detailed instructions.

To begin, let's log the quiz response object to the console:

console.log(prq);
console.log(prq.quizSlides()); // See all slides and their IDs

This line of code will display the available Vue.js functions and properties within the prq scope in your browser's console, allowing you to inspect the quiz data in real-time.

how to add javascript consolelog

Custom JavaScript Capabilities

The prq object is your gateway to customizing the quiz experience. Here's how you can use it:

Quiz Data Manipulation

Accessing Quiz Slides and Responses: Use prq.quizSlides() to retrieve all quiz slides/questions, including user responses.
Fetching Specific Slide Values: Obtain the value of a particular slide by using prq.getSlideValue(slideId).

Participant Information Retrieval

Lead Details: Easily fetch the quiz participant's email, phone number, and name using prq.leadEmail(), prq.leadPhone(), and prq.leadName(), respectively.

Results Page Customization

Manipulating Results Page Content: Access and modify the contents of the results page, including blocks and products, using prq.resultsPage().
Product Recommendations: Leverage prq.recommendedProducts() and prq.mostVotedProduct() to customize product suggestions.
Automatic Actions: Automatically add products to the cart or proceed to checkout using prq.addAllToCart() and prq.checkout().
Discount Codes: Apply specific discount codes with prq.setDiscountCode('10-OFF').

Navigation and Engagement

Quiz Navigation: Offer options to retake the quiz, close it, or open it in a popup through prq.retakeQuiz(), prq.closeQuiz(), and window.openQuizPopup('quizID').

/* List of all the quiz slides/questions (including the responded values) */
prq.quizSlides();

/* get the slide/question value by passing the slide ID  */
prq.getSlideValue(slideId);

/* get the lead's email  */
prq.leadEmail();

/* get the lead's phone  */
prq.leadPhone();

/* get the lead's name  */
prq.leadName();

/* List contents of the results page, blocks, products, etc. */
prq.resultsPage();

/* List recommended products, sorted by number of votes */
prq.recommendedProducts();

/* Show most voted product */
prq.mostVotedProduct();

/* adds all the products to cart automatically */
prq.addAllToCart();

/* proceeds to cart/checkout automatically */
prq.checkout();

/* set specific discount code \*/
prq.setDiscountCode('10-OFF');

/* get the response permalink url */
prq.getResponsePermalink();

/* retake quiz */
prq.retakeQuiz();

/* close quiz */
prq.closeQuiz();

/* open quiz popup */
window.openQuizPopup('dbqHqN');
dbqHqN is the quiz ID

For other functions and properties refer to the console.log(prq).

To begin, let's log the quiz response object to the console:

console.log(prq);
console.log(prq.quizSlides()); // See all slides and their IDs

This line of code will display the available Vue.js functions and properties within the prq scope in your browser's console, allowing you to inspect the quiz data in real-time.

how to add javascript consolelog

Custom JavaScript Capabilities

The prq object is your gateway to customizing the quiz experience. Here's how you can use it:

Quiz Data Manipulation

Accessing Quiz Slides and Responses: Use prq.quizSlides() to retrieve all quiz slides/questions, including user responses.
Fetching Specific Slide Values: Obtain the value of a particular slide by using prq.getSlideValue(slideId).

Participant Information Retrieval

Lead Details: Easily fetch the quiz participant's email, phone number, and name using prq.leadEmail(), prq.leadPhone(), and prq.leadName(), respectively.

Results Page Customization

Manipulating Results Page Content: Access and modify the contents of the results page, including blocks and products, using prq.resultsPage().
Product Recommendations: Leverage prq.recommendedProducts() and prq.mostVotedProduct() to customize product suggestions.
Automatic Actions: Automatically add products to the cart or proceed to checkout using prq.addAllToCart() and prq.checkout().
Discount Codes: Apply specific discount codes with prq.setDiscountCode('10-OFF').

Navigation and Engagement

Quiz Navigation: Offer options to retake the quiz, close it, or open it in a popup through prq.retakeQuiz(), prq.closeQuiz(), and window.openQuizPopup('quizID').

/* List of all the quiz slides/questions (including the responded values) */
prq.quizSlides();

/* get the slide/question value by passing the slide ID  */
prq.getSlideValue(slideId);

/* get the lead's email  */
prq.leadEmail();

/* get the lead's phone  */
prq.leadPhone();

/* get the lead's name  */
prq.leadName();

/* List contents of the results page, blocks, products, etc. */
prq.resultsPage();

/* List recommended products, sorted by number of votes */
prq.recommendedProducts();

/* Show most voted product */
prq.mostVotedProduct();

/* adds all the products to cart automatically */
prq.addAllToCart();

/* proceeds to cart/checkout automatically */
prq.checkout();

/* set specific discount code \*/
prq.setDiscountCode('10-OFF');

/* get the response permalink url */
prq.getResponsePermalink();

/* retake quiz */
prq.retakeQuiz();

/* close quiz */
prq.closeQuiz();

/* open quiz popup */
window.openQuizPopup('dbqHqN');
dbqHqN is the quiz ID

For other functions and properties refer to the console.log(prq).

To begin, let's log the quiz response object to the console:

console.log(prq);
console.log(prq.quizSlides()); // See all slides and their IDs

This line of code will display the available Vue.js functions and properties within the prq scope in your browser's console, allowing you to inspect the quiz data in real-time.

how to add javascript consolelog

Custom JavaScript Capabilities

The prq object is your gateway to customizing the quiz experience. Here's how you can use it:

Quiz Data Manipulation

Accessing Quiz Slides and Responses: Use prq.quizSlides() to retrieve all quiz slides/questions, including user responses.
Fetching Specific Slide Values: Obtain the value of a particular slide by using prq.getSlideValue(slideId).

Participant Information Retrieval

Lead Details: Easily fetch the quiz participant's email, phone number, and name using prq.leadEmail(), prq.leadPhone(), and prq.leadName(), respectively.

Results Page Customization

Manipulating Results Page Content: Access and modify the contents of the results page, including blocks and products, using prq.resultsPage().
Product Recommendations: Leverage prq.recommendedProducts() and prq.mostVotedProduct() to customize product suggestions.
Automatic Actions: Automatically add products to the cart or proceed to checkout using prq.addAllToCart() and prq.checkout().
Discount Codes: Apply specific discount codes with prq.setDiscountCode('10-OFF').

Navigation and Engagement

Quiz Navigation: Offer options to retake the quiz, close it, or open it in a popup through prq.retakeQuiz(), prq.closeQuiz(), and window.openQuizPopup('quizID').

/* List of all the quiz slides/questions (including the responded values) */
prq.quizSlides();

/* get the slide/question value by passing the slide ID  */
prq.getSlideValue(slideId);

/* get the lead's email  */
prq.leadEmail();

/* get the lead's phone  */
prq.leadPhone();

/* get the lead's name  */
prq.leadName();

/* List contents of the results page, blocks, products, etc. */
prq.resultsPage();

/* List recommended products, sorted by number of votes */
prq.recommendedProducts();

/* Show most voted product */
prq.mostVotedProduct();

/* adds all the products to cart automatically */
prq.addAllToCart();

/* proceeds to cart/checkout automatically */
prq.checkout();

/* set specific discount code \*/
prq.setDiscountCode('10-OFF');

/* get the response permalink url */
prq.getResponsePermalink();

/* retake quiz */
prq.retakeQuiz();

/* close quiz */
prq.closeQuiz();

/* open quiz popup */
window.openQuizPopup('dbqHqN');
dbqHqN is the quiz ID

For other functions and properties refer to the console.log(prq).

To begin, let's log the quiz response object to the console:

console.log(prq);
console.log(prq.quizSlides()); // See all slides and their IDs

This line of code will display the available Vue.js functions and properties within the prq scope in your browser's console, allowing you to inspect the quiz data in real-time.

how to add javascript consolelog

Custom JavaScript Capabilities

The prq object is your gateway to customizing the quiz experience. Here's how you can use it:

Quiz Data Manipulation

Accessing Quiz Slides and Responses: Use prq.quizSlides() to retrieve all quiz slides/questions, including user responses.
Fetching Specific Slide Values: Obtain the value of a particular slide by using prq.getSlideValue(slideId).

Participant Information Retrieval

Lead Details: Easily fetch the quiz participant's email, phone number, and name using prq.leadEmail(), prq.leadPhone(), and prq.leadName(), respectively.

Results Page Customization

Manipulating Results Page Content: Access and modify the contents of the results page, including blocks and products, using prq.resultsPage().
Product Recommendations: Leverage prq.recommendedProducts() and prq.mostVotedProduct() to customize product suggestions.
Automatic Actions: Automatically add products to the cart or proceed to checkout using prq.addAllToCart() and prq.checkout().
Discount Codes: Apply specific discount codes with prq.setDiscountCode('10-OFF').

Navigation and Engagement

Quiz Navigation: Offer options to retake the quiz, close it, or open it in a popup through prq.retakeQuiz(), prq.closeQuiz(), and window.openQuizPopup('quizID').

/* List of all the quiz slides/questions (including the responded values) */
prq.quizSlides();

/* get the slide/question value by passing the slide ID  */
prq.getSlideValue(slideId);

/* get the lead's email  */
prq.leadEmail();

/* get the lead's phone  */
prq.leadPhone();

/* get the lead's name  */
prq.leadName();

/* List contents of the results page, blocks, products, etc. */
prq.resultsPage();

/* List recommended products, sorted by number of votes */
prq.recommendedProducts();

/* Show most voted product */
prq.mostVotedProduct();

/* adds all the products to cart automatically */
prq.addAllToCart();

/* proceeds to cart/checkout automatically */
prq.checkout();

/* set specific discount code \*/
prq.setDiscountCode('10-OFF');

/* get the response permalink url */
prq.getResponsePermalink();

/* retake quiz */
prq.retakeQuiz();

/* close quiz */
prq.closeQuiz();

/* open quiz popup */
window.openQuizPopup('dbqHqN');
dbqHqN is the quiz ID

For other functions and properties refer to the console.log(prq).

To begin, let's log the quiz response object to the console:

console.log(prq);
console.log(prq.quizSlides()); // See all slides and their IDs

This line of code will display the available Vue.js functions and properties within the prq scope in your browser's console, allowing you to inspect the quiz data in real-time.

how to add javascript consolelog

Custom JavaScript Capabilities

The prq object is your gateway to customizing the quiz experience. Here's how you can use it:

Quiz Data Manipulation

Accessing Quiz Slides and Responses: Use prq.quizSlides() to retrieve all quiz slides/questions, including user responses.
Fetching Specific Slide Values: Obtain the value of a particular slide by using prq.getSlideValue(slideId).

Participant Information Retrieval

Lead Details: Easily fetch the quiz participant's email, phone number, and name using prq.leadEmail(), prq.leadPhone(), and prq.leadName(), respectively.

Results Page Customization

Manipulating Results Page Content: Access and modify the contents of the results page, including blocks and products, using prq.resultsPage().
Product Recommendations: Leverage prq.recommendedProducts() and prq.mostVotedProduct() to customize product suggestions.
Automatic Actions: Automatically add products to the cart or proceed to checkout using prq.addAllToCart() and prq.checkout().
Discount Codes: Apply specific discount codes with prq.setDiscountCode('10-OFF').

Navigation and Engagement

Quiz Navigation: Offer options to retake the quiz, close it, or open it in a popup through prq.retakeQuiz(), prq.closeQuiz(), and window.openQuizPopup('quizID').

/* List of all the quiz slides/questions (including the responded values) */
prq.quizSlides();

/* get the slide/question value by passing the slide ID  */
prq.getSlideValue(slideId);

/* get the lead's email  */
prq.leadEmail();

/* get the lead's phone  */
prq.leadPhone();

/* get the lead's name  */
prq.leadName();

/* List contents of the results page, blocks, products, etc. */
prq.resultsPage();

/* List recommended products, sorted by number of votes */
prq.recommendedProducts();

/* Show most voted product */
prq.mostVotedProduct();

/* adds all the products to cart automatically */
prq.addAllToCart();

/* proceeds to cart/checkout automatically */
prq.checkout();

/* set specific discount code \*/
prq.setDiscountCode('10-OFF');

/* get the response permalink url */
prq.getResponsePermalink();

/* retake quiz */
prq.retakeQuiz();

/* close quiz */
prq.closeQuiz();

/* open quiz popup */
window.openQuizPopup('dbqHqN');
dbqHqN is the quiz ID

For other functions and properties refer to the console.log(prq).

Customization Examples¶

Example 1: Trigger functions from an element in the results page¶

ShopifyShopify (Legacy)WooCommerceMagentoBigCommerceStandalone

In the 💎Built for Shopify version of the RevenueHunt app, you can add interactive elements to your quiz results page:

Create an element in the result page and add the onclick functionality later via the Custom Javascript.

Add the onclick functionality via the Custom Javascript.

<!-- In Result page in a HTML block -->
<!-- add a HTML element such as -->
<a id="special_retake_quiz">Click here to retake the quiz</a>

/* In the Custom Javascript section */
// get the element
var element = document.getElementById("special_retake_quiz");

// add the onclick function to the element
element.onclick = function() {
    // You'll need to implement retake functionality using V2 objects
    // For example, you could redirect to the quiz URL
    window.location.href = window.location.href.split('#')[0] + '#quiz';
}

Or you can create the element in the Custom Javascript section and inject it into the results page.

Create the element with an onclick event first and then inject it in the results page.

/* In the Custom Javascript section */
// create the element
const element = document.createElement("a");
element.innerHTML = "Click here to retake the quiz";
element.style.cursor = "pointer";

// add the onclick function
element.onclick = function() {
  window.location.href = window.location.href.split('#')[0] + '#quiz';
};

// find a place to append the element
const container = window.quiz.querySelector('.result-section');
if (container) container.appendChild(element);

You can do it two ways:

Create an element in the result page and add the onclick functionality later via the Custom Javascript.

Add the onclick functionality via the Custom Javascript.

<!-- In Result page in a HTML block -->
<!-- add a HTML element such as -->
<a id="special_retake_quiz">Click here to retake the quiz</a>

/* In the Custom Javascript section */
// get the element
var element = document.getElementById("special_retake_quiz");

// add the onclick function to the element
element.onclick = function() {
    prq.retakeQuiz();
}

Or you can create the element in the Custom Javascript section with an onclick event first and then inject it in the results page.

Create the element with an onclick event first and then inject it in the results page.

/* In the Custom Javascript section */
// create the element
var element = document.createElement("a");
element.innerHTML = "Click here to retake the quiz"

// add the onclick function to the element
element.onclick = function() {
    prq.retakeQuiz();
}

// get element that we are going to append in the result
// in this case at the end of the first block
var destination_element = document.querySelectorAll(".lq-block")[0];
destination_element.appendChild(element);

You can do it two ways:

Create an element in the result page and add the onclick functionality later via the Custom Javascript.

Add the onclick functionality via the Custom Javascript.

<!-- In Result page in a HTML block -->
<!-- add a HTML element such as -->
<a id="special_retake_quiz">Click here to retake the quiz</a>

/* In the Custom Javascript section */
// get the element
var element = document.getElementById("special_retake_quiz");

// add the onclick function to the element
element.onclick = function() {
    prq.retakeQuiz();
}

Or you can create the element in the Custom Javascript section with an onclick event first and then inject it in the results page.

Create the element with an onclick event first and then inject it in the results page.

/* In the Custom Javascript section */
// create the element
var element = document.createElement("a");
element.innerHTML = "Click here to retake the quiz"

// add the onclick function to the element
element.onclick = function() {
    prq.retakeQuiz();
}

// get element that we are going to append in the result
// in this case at the end of the first block
var destination_element = document.querySelectorAll(".lq-block")[0];
destination_element.appendChild(element);

You can do it two ways:

Create an element in the result page and add the onclick functionality later via the Custom Javascript.

Add the onclick functionality via the Custom Javascript.

<!-- In Result page in a HTML block -->
<!-- add a HTML element such as -->
<a id="special_retake_quiz">Click here to retake the quiz</a>

/* In the Custom Javascript section */
// get the element
var element = document.getElementById("special_retake_quiz");

// add the onclick function to the element
element.onclick = function() {
    prq.retakeQuiz();
}

Or you can create the element in the Custom Javascript section with an onclick event first and then inject it in the results page.

Create the element with an onclick event first and then inject it in the results page.

/* In the Custom Javascript section */
// create the element
var element = document.createElement("a");
element.innerHTML = "Click here to retake the quiz"

// add the onclick function to the element
element.onclick = function() {
    prq.retakeQuiz();
}

// get element that we are going to append in the result
// in this case at the end of the first block
var destination_element = document.querySelectorAll(".lq-block")[0];
destination_element.appendChild(element);

You can do it two ways:

Create an element in the result page and add the onclick functionality later via the Custom Javascript.

Add the onclick functionality via the Custom Javascript.

<!-- In Result page in a HTML block -->
<!-- add a HTML element such as -->
<a id="special_retake_quiz">Click here to retake the quiz</a>

/* In the Custom Javascript section */
// get the element
var element = document.getElementById("special_retake_quiz");

// add the onclick function to the element
element.onclick = function() {
    prq.retakeQuiz();
}

Or you can create the element in the Custom Javascript section with an onclick event first and then inject it in the results page.

Create the element with an onclick event first and then inject it in the results page.

/* In the Custom Javascript section */
// create the element
var element = document.createElement("a");
element.innerHTML = "Click here to retake the quiz"

// add the onclick function to the element
element.onclick = function() {
    prq.retakeQuiz();
}

// get element that we are going to append in the result
// in this case at the end of the first block
var destination_element = document.querySelectorAll(".lq-block")[0];
destination_element.appendChild(element);

You can do it two ways:

Create an element in the result page and add the onclick functionality later via the Custom Javascript.

Add the onclick functionality via the Custom Javascript.

<!-- In Result page in a HTML block -->
<!-- add a HTML element such as -->
<a id="special_retake_quiz">Click here to retake the quiz</a>

/* In the Custom Javascript section */
// get the element
var element = document.getElementById("special_retake_quiz");

// add the onclick function to the element
element.onclick = function() {
    prq.retakeQuiz();
}

Or you can create the element in the Custom Javascript section with an onclick event first and then inject it in the results page.

Create the element with an onclick event first and then inject it in the results page.

/* In the Custom Javascript section */
// create the element
var element = document.createElement("a");
element.innerHTML = "Click here to retake the quiz"

// add the onclick function to the element
element.onclick = function() {
    prq.retakeQuiz();
}

// get element that we are going to append in the result
// in this case at the end of the first block
var destination_element = document.querySelectorAll(".lq-block")[0];
destination_element.appendChild(element);

Example 2: Insert calculations¶

ShopifyShopify (Legacy)WooCommerceMagentoBigCommerceStandalone

In the 💎Built for Shopify version of the RevenueHunt app, you can access the answers from the answers object to perform calculations. Here's how to create a BMI calculator:

Create a BMI calculator

Step 1: Add a placeholder element in the Results page (HTML block)

<div id="body_mass_index_calculation"></div>

Step 2: Add custom JavaScript

/* In the Custom Javascript section */

// Get the target element inside the quiz
const element = window.quiz.getElementById("body_mass_index_calculation");

// Use quiz.answers to find responses for weight and height
// Replace these IDs with your actual block references from your quiz
const weightAnswer = quiz.answers.byBlock['weight-question-id']?.value;
const heightAnswer = quiz.answers.byBlock['height-question-id']?.value;

if (element && weightAnswer && heightAnswer) {
  const weight = parseFloat(weightAnswer);
  const height = parseFloat(heightAnswer);

  if (!isNaN(weight) && !isNaN(height) && height > 0) {
    // Calculate BMI: weight (kg) / height^2 (m)
    const bmi = weight / (height * height);
    element.innerHTML = `Your BMI is: <b>${bmi.toFixed(2)}</b>`;
  } else {
    element.innerHTML = "Invalid data for BMI calculation.";
  }
} else if (element) {
  element.innerHTML = "Required data not found.";
}

Step 3: Debugging (find your actual block references)

console.log("All Answers:", quiz.answers);
console.log("Answers by block:", quiz.answers.byBlock);

When you run the quiz, check the Console in DevTools to see the structure of Quiz.answers and copy the correct IDs to use in the code above.

You can display the information you have gathered throughout the quiz and mash it up however you want. For example, you could create a BMI (body mass index) calculator the following way.

Create a BMI calculator

<!-- In Result page in a HTML block -->
<!-- add an HTML element such as -->
<div id="body_mass_index_calculation"></div>

/* In the Custom Javascript section */
// get the element
var element = document.getElementById("body_mass_index_calculation");

// get the values of the slides
var weight = prq.getSlideValue("rgiq0oE");
var height = prq.getSlideValue("0Mi2qLN");

// instead of using prq.getSlideValue you could do the same with this code:
/*
var slide_weight = prq.quiz.attributes.slides.data.find(s => s.id === "rgiq0oE");
var slide_height = prq.quiz.attributes.slides.data.find(s => s.id === "0Mi2qLN");

var weight = slide_weight.attributes.values[0];
var height = slide_height.attributes.values[0];
*/

// calculate the Body Mass Index
var bmi = weight / (height * height);

// insert the calculation on the element in the result page
element.innerHTML = bmi.toFixed(2);

You can also load jQuery this way.

You can display the information you have gathered throughout the quiz and mash it up however you want. For example, you could create a BMI (body mass index) calculator the following way.

Create a BMI calculator

<!-- In Result page in a HTML block -->
<!-- add an HTML element such as -->
<div id="body_mass_index_calculation"></div>

/* In the Custom Javascript section */
// get the element
var element = document.getElementById("body_mass_index_calculation");

// get the values of the slides
var weight = prq.getSlideValue("rgiq0oE");
var height = prq.getSlideValue("0Mi2qLN");

// instead of using prq.getSlideValue you could do the same with this code:
/*
var slide_weight = prq.quiz.attributes.slides.data.find(s => s.id === "rgiq0oE");
var slide_height = prq.quiz.attributes.slides.data.find(s => s.id === "0Mi2qLN");

var weight = slide_weight.attributes.values[0];
var height = slide_height.attributes.values[0];
*/

// calculate the Body Mass Index
var bmi = weight / (height * height);

// insert the calculation on the element in the result page
element.innerHTML = bmi.toFixed(2);

You can also load jQuery this way.

You can display the information you have gathered throughout the quiz and mash it up however you want. For example, you could create a BMI (body mass index) calculator the following way.

Create a BMI calculator

<!-- In Result page in a HTML block -->
<!-- add an HTML element such as -->
<div id="body_mass_index_calculation"></div>

/* In the Custom Javascript section */
// get the element
var element = document.getElementById("body_mass_index_calculation");

// get the values of the slides
var weight = prq.getSlideValue("rgiq0oE");
var height = prq.getSlideValue("0Mi2qLN");

// instead of using prq.getSlideValue you could do the same with this code:
/*
var slide_weight = prq.quiz.attributes.slides.data.find(s => s.id === "rgiq0oE");
var slide_height = prq.quiz.attributes.slides.data.find(s => s.id === "0Mi2qLN");

var weight = slide_weight.attributes.values[0];
var height = slide_height.attributes.values[0];
*/

// calculate the Body Mass Index
var bmi = weight / (height * height);

// insert the calculation on the element in the result page
element.innerHTML = bmi.toFixed(2);

You can also load jQuery this way.

You can display the information you have gathered throughout the quiz and mash it up however you want. For example, you could create a BMI (body mass index) calculator the following way.

Create a BMI calculator

<!-- In Result page in a HTML block -->
<!-- add an HTML element such as -->
<div id="body_mass_index_calculation"></div>

/* In the Custom Javascript section */
// get the element
var element = document.getElementById("body_mass_index_calculation");

// get the values of the slides
var weight = prq.getSlideValue("rgiq0oE");
var height = prq.getSlideValue("0Mi2qLN");

// instead of using prq.getSlideValue you could do the same with this code:
/*
var slide_weight = prq.quiz.attributes.slides.data.find(s => s.id === "rgiq0oE");
var slide_height = prq.quiz.attributes.slides.data.find(s => s.id === "0Mi2qLN");

var weight = slide_weight.attributes.values[0];
var height = slide_height.attributes.values[0];
*/

// calculate the Body Mass Index
var bmi = weight / (height * height);

// insert the calculation on the element in the result page
element.innerHTML = bmi.toFixed(2);

You can also load jQuery this way.

You can display the information you have gathered throughout the quiz and mash it up however you want. For example, you could create a BMI (body mass index) calculator the following way.

Create a BMI calculator

<!-- In Result page in a HTML block -->
<!-- add an HTML element such as -->
<div id="body_mass_index_calculation"></div>

/* In the Custom Javascript section */
// get the element
var element = document.getElementById("body_mass_index_calculation");

// get the values of the slides
var weight = prq.getSlideValue("rgiq0oE");
var height = prq.getSlideValue("0Mi2qLN");

// instead of using prq.getSlideValue you could do the same with this code:
/*
var slide_weight = prq.quiz.attributes.slides.data.find(s => s.id === "rgiq0oE");
var slide_height = prq.quiz.attributes.slides.data.find(s => s.id === "0Mi2qLN");

var weight = slide_weight.attributes.values[0];
var height = slide_height.attributes.values[0];
*/

// calculate the Body Mass Index
var bmi = weight / (height * height);

// insert the calculation on the element in the result page
element.innerHTML = bmi.toFixed(2);

You can also load jQuery this way.

Example 3: Multiple-choice questions: select all, select none¶

ShopifyShopify (Legacy)WooCommerceMagentoBigCommerceStandalone

You can make question choice become select all / selectnone via the Multiple-Choice settings.

It is possible to make the quiz multiple choice questions select all preceding answers and none of the answers with custom JavaScript code. You will be able to use it as long as there is only one choice that contains the word "All" and one that contains the word "None". It doesn't matter the order or the question number.

Select all, select none

This code may require adjustments by a developer. Use it as an example only.

// Initializes an object to hold the current slide's state, ensuring it doesn't overwrite if already exists.
var prq = prq || {
  currentSlide: {
    values: [], // An array to store the values (identifiers) of selected choices.
  },
};

// Selects all elements with class `.lq-choice` as the choices available on the current slide/view.
const choices = document.querySelectorAll(".lq-choice");

// Retrieves the currently selected choice values from the global state.
var values = prq.currentSlide.values;

// Iterates over each choice and attaches a click event listener to handle selection/deselection.
choices.forEach((selector) => {
  selector.addEventListener("click", function () {
    refresh(this.id); // Calls the refresh function on click, passing the clicked choice's ID.
  });
});

// Defines the logic to update choice selections based on user interaction.
function refresh(id) {
  var choice = document.getElementById(id); // Retrieves the DOM element for the clicked choice.

  // Logic to deselect a choice if it's already selected.
  if (valuesIncludes(values, choice)) {
    values = removeChoice(values, choice);
  } 
  // Logic to select all choices except "none" when "all" is clicked.
  else if (isAll(choice)) {
    const cs = [...choices].filter((c) => !isNone(c));
    values = cs.map((c) => choiceId(c));
  } 
  // Logic to handle "none" selection, deselecting all other choices or selecting none only.
  else if (isNone(choice)) {
    if (valuesIncludes(values, choice)) {
      values = [];
    } else {
      const cs = [...choices].filter((c) => !isNone(c));
      values = [choiceId(choice)];
    }
  } 
  // General logic for ticking a choice and unticking "none".
  else {
    addChoice(values, choice);
    values = removeChoice(values, choiceNone(choices));
  }

  // Updates the UI to reflect the current selection state.
  choices.forEach((c) =>
    values.includes(choiceId(c))
      ? c.classList.add("lq-selected")
      : c.classList.remove("lq-selected")
  );
}

// Helper function to add a choice's ID to the selection.
function addChoice(values, choice) {
  values.push(choiceId(choice));
}

// Helper function to remove a choice's ID from the selection.
function removeChoice(values, choice) {
  return values.filter((v) => v !== choiceId(choice));
}

// Returns the "none" choice element.
function choiceNone(choices) {
  return [...choices].find((c) => isNone(c));
}

// Unused in the given code but presumably intended to return the "all" choice element.
function choiceAll(choices) {
  return [...choices].find((c) => isAll(c));
}

// Extracts and returns the ID part of a choice's DOM ID.
function choiceId(choice) {
  return choice.id.split("-")[1];
}

// Determines if a choice is meant to select all options.
function isAll(c) {
  return c.innerHTML.toLowerCase().includes("all");
}

// Determines if a choice represents a "none" selection.
function isNone(c) {
  return c.innerHTML.toLowerCase().includes("none");
}

// Checks if the current selection includes a specific choice's ID.
function valuesIncludes(values, c) {
  return values.includes(choiceId(c));
}

It is possible to make the quiz multiple choice questions select all preceding answers and none of the answers with custom JavaScript code. You will be able to use it as long as there is only one choice that contains the word "All" and one that contains the word "None". It doesn't matter the order or the question number.

Select all, select none

This code may require adjustments by a developer. Use it as an example only.

// Initializes an object to hold the current slide's state, ensuring it doesn't overwrite if already exists.
var prq = prq || {
  currentSlide: {
    values: [], // An array to store the values (identifiers) of selected choices.
  },
};

// Selects all elements with class `.lq-choice` as the choices available on the current slide/view.
const choices = document.querySelectorAll(".lq-choice");

// Retrieves the currently selected choice values from the global state.
var values = prq.currentSlide.values;

// Iterates over each choice and attaches a click event listener to handle selection/deselection.
choices.forEach((selector) => {
  selector.addEventListener("click", function () {
    refresh(this.id); // Calls the refresh function on click, passing the clicked choice's ID.
  });
});

// Defines the logic to update choice selections based on user interaction.
function refresh(id) {
  var choice = document.getElementById(id); // Retrieves the DOM element for the clicked choice.

  // Logic to deselect a choice if it's already selected.
  if (valuesIncludes(values, choice)) {
    values = removeChoice(values, choice);
  } 
  // Logic to select all choices except "none" when "all" is clicked.
  else if (isAll(choice)) {
    const cs = [...choices].filter((c) => !isNone(c));
    values = cs.map((c) => choiceId(c));
  } 
  // Logic to handle "none" selection, deselecting all other choices or selecting none only.
  else if (isNone(choice)) {
    if (valuesIncludes(values, choice)) {
      values = [];
    } else {
      const cs = [...choices].filter((c) => !isNone(c));
      values = [choiceId(choice)];
    }
  } 
  // General logic for ticking a choice and unticking "none".
  else {
    addChoice(values, choice);
    values = removeChoice(values, choiceNone(choices));
  }

  // Updates the UI to reflect the current selection state.
  choices.forEach((c) =>
    values.includes(choiceId(c))
      ? c.classList.add("lq-selected")
      : c.classList.remove("lq-selected")
  );
}

// Helper function to add a choice's ID to the selection.
function addChoice(values, choice) {
  values.push(choiceId(choice));
}

// Helper function to remove a choice's ID from the selection.
function removeChoice(values, choice) {
  return values.filter((v) => v !== choiceId(choice));
}

// Returns the "none" choice element.
function choiceNone(choices) {
  return [...choices].find((c) => isNone(c));
}

// Unused in the given code but presumably intended to return the "all" choice element.
function choiceAll(choices) {
  return [...choices].find((c) => isAll(c));
}

// Extracts and returns the ID part of a choice's DOM ID.
function choiceId(choice) {
  return choice.id.split("-")[1];
}

// Determines if a choice is meant to select all options.
function isAll(c) {
  return c.innerHTML.toLowerCase().includes("all");
}

// Determines if a choice represents a "none" selection.
function isNone(c) {
  return c.innerHTML.toLowerCase().includes("none");
}

// Checks if the current selection includes a specific choice's ID.
function valuesIncludes(values, c) {
  return values.includes(choiceId(c));
}

It is possible to make the quiz multiple choice questions select all preceding answers and none of the answers with custom JavaScript code. You will be able to use it as long as there is only one choice that contains the word "All" and one that contains the word "None". It doesn't matter the order or the question number.

Select all, select none

This code may require adjustments by a developer. Use it as an example only.

// Initializes an object to hold the current slide's state, ensuring it doesn't overwrite if already exists.
var prq = prq || {
  currentSlide: {
    values: [], // An array to store the values (identifiers) of selected choices.
  },
};

// Selects all elements with class `.lq-choice` as the choices available on the current slide/view.
const choices = document.querySelectorAll(".lq-choice");

// Retrieves the currently selected choice values from the global state.
var values = prq.currentSlide.values;

// Iterates over each choice and attaches a click event listener to handle selection/deselection.
choices.forEach((selector) => {
  selector.addEventListener("click", function () {
    refresh(this.id); // Calls the refresh function on click, passing the clicked choice's ID.
  });
});

// Defines the logic to update choice selections based on user interaction.
function refresh(id) {
  var choice = document.getElementById(id); // Retrieves the DOM element for the clicked choice.

  // Logic to deselect a choice if it's already selected.
  if (valuesIncludes(values, choice)) {
    values = removeChoice(values, choice);
  } 
  // Logic to select all choices except "none" when "all" is clicked.
  else if (isAll(choice)) {
    const cs = [...choices].filter((c) => !isNone(c));
    values = cs.map((c) => choiceId(c));
  } 
  // Logic to handle "none" selection, deselecting all other choices or selecting none only.
  else if (isNone(choice)) {
    if (valuesIncludes(values, choice)) {
      values = [];
    } else {
      const cs = [...choices].filter((c) => !isNone(c));
      values = [choiceId(choice)];
    }
  } 
  // General logic for ticking a choice and unticking "none".
  else {
    addChoice(values, choice);
    values = removeChoice(values, choiceNone(choices));
  }

  // Updates the UI to reflect the current selection state.
  choices.forEach((c) =>
    values.includes(choiceId(c))
      ? c.classList.add("lq-selected")
      : c.classList.remove("lq-selected")
  );
}

// Helper function to add a choice's ID to the selection.
function addChoice(values, choice) {
  values.push(choiceId(choice));
}

// Helper function to remove a choice's ID from the selection.
function removeChoice(values, choice) {
  return values.filter((v) => v !== choiceId(choice));
}

// Returns the "none" choice element.
function choiceNone(choices) {
  return [...choices].find((c) => isNone(c));
}

// Unused in the given code but presumably intended to return the "all" choice element.
function choiceAll(choices) {
  return [...choices].find((c) => isAll(c));
}

// Extracts and returns the ID part of a choice's DOM ID.
function choiceId(choice) {
  return choice.id.split("-")[1];
}

// Determines if a choice is meant to select all options.
function isAll(c) {
  return c.innerHTML.toLowerCase().includes("all");
}

// Determines if a choice represents a "none" selection.
function isNone(c) {
  return c.innerHTML.toLowerCase().includes("none");
}

// Checks if the current selection includes a specific choice's ID.
function valuesIncludes(values, c) {
  return values.includes(choiceId(c));
}

It is possible to make the quiz multiple choice questions select all preceding answers and none of the answers with custom JavaScript code. You will be able to use it as long as there is only one choice that contains the word "All" and one that contains the word "None". It doesn't matter the order or the question number.

Select all, select none

This code may require adjustments by a developer. Use it as an example only.

// Initializes an object to hold the current slide's state, ensuring it doesn't overwrite if already exists.
var prq = prq || {
  currentSlide: {
    values: [], // An array to store the values (identifiers) of selected choices.
  },
};

// Selects all elements with class `.lq-choice` as the choices available on the current slide/view.
const choices = document.querySelectorAll(".lq-choice");

// Retrieves the currently selected choice values from the global state.
var values = prq.currentSlide.values;

// Iterates over each choice and attaches a click event listener to handle selection/deselection.
choices.forEach((selector) => {
  selector.addEventListener("click", function () {
    refresh(this.id); // Calls the refresh function on click, passing the clicked choice's ID.
  });
});

// Defines the logic to update choice selections based on user interaction.
function refresh(id) {
  var choice = document.getElementById(id); // Retrieves the DOM element for the clicked choice.

  // Logic to deselect a choice if it's already selected.
  if (valuesIncludes(values, choice)) {
    values = removeChoice(values, choice);
  } 
  // Logic to select all choices except "none" when "all" is clicked.
  else if (isAll(choice)) {
    const cs = [...choices].filter((c) => !isNone(c));
    values = cs.map((c) => choiceId(c));
  } 
  // Logic to handle "none" selection, deselecting all other choices or selecting none only.
  else if (isNone(choice)) {
    if (valuesIncludes(values, choice)) {
      values = [];
    } else {
      const cs = [...choices].filter((c) => !isNone(c));
      values = [choiceId(choice)];
    }
  } 
  // General logic for ticking a choice and unticking "none".
  else {
    addChoice(values, choice);
    values = removeChoice(values, choiceNone(choices));
  }

  // Updates the UI to reflect the current selection state.
  choices.forEach((c) =>
    values.includes(choiceId(c))
      ? c.classList.add("lq-selected")
      : c.classList.remove("lq-selected")
  );
}

// Helper function to add a choice's ID to the selection.
function addChoice(values, choice) {
  values.push(choiceId(choice));
}

// Helper function to remove a choice's ID from the selection.
function removeChoice(values, choice) {
  return values.filter((v) => v !== choiceId(choice));
}

// Returns the "none" choice element.
function choiceNone(choices) {
  return [...choices].find((c) => isNone(c));
}

// Unused in the given code but presumably intended to return the "all" choice element.
function choiceAll(choices) {
  return [...choices].find((c) => isAll(c));
}

// Extracts and returns the ID part of a choice's DOM ID.
function choiceId(choice) {
  return choice.id.split("-")[1];
}

// Determines if a choice is meant to select all options.
function isAll(c) {
  return c.innerHTML.toLowerCase().includes("all");
}

// Determines if a choice represents a "none" selection.
function isNone(c) {
  return c.innerHTML.toLowerCase().includes("none");
}

// Checks if the current selection includes a specific choice's ID.
function valuesIncludes(values, c) {
  return values.includes(choiceId(c));
}

It is possible to make the quiz multiple choice questions select all preceding answers and none of the answers with custom JavaScript code. You will be able to use it as long as there is only one choice that contains the word "All" and one that contains the word "None". It doesn't matter the order or the question number.

Select all, select none

This code may require adjustments by a developer. Use it as an example only.

// Initializes an object to hold the current slide's state, ensuring it doesn't overwrite if already exists.
var prq = prq || {
  currentSlide: {
    values: [], // An array to store the values (identifiers) of selected choices.
  },
};

// Selects all elements with class `.lq-choice` as the choices available on the current slide/view.
const choices = document.querySelectorAll(".lq-choice");

// Retrieves the currently selected choice values from the global state.
var values = prq.currentSlide.values;

// Iterates over each choice and attaches a click event listener to handle selection/deselection.
choices.forEach((selector) => {
  selector.addEventListener("click", function () {
    refresh(this.id); // Calls the refresh function on click, passing the clicked choice's ID.
  });
});

// Defines the logic to update choice selections based on user interaction.
function refresh(id) {
  var choice = document.getElementById(id); // Retrieves the DOM element for the clicked choice.

  // Logic to deselect a choice if it's already selected.
  if (valuesIncludes(values, choice)) {
    values = removeChoice(values, choice);
  } 
  // Logic to select all choices except "none" when "all" is clicked.
  else if (isAll(choice)) {
    const cs = [...choices].filter((c) => !isNone(c));
    values = cs.map((c) => choiceId(c));
  } 
  // Logic to handle "none" selection, deselecting all other choices or selecting none only.
  else if (isNone(choice)) {
    if (valuesIncludes(values, choice)) {
      values = [];
    } else {
      const cs = [...choices].filter((c) => !isNone(c));
      values = [choiceId(choice)];
    }
  } 
  // General logic for ticking a choice and unticking "none".
  else {
    addChoice(values, choice);
    values = removeChoice(values, choiceNone(choices));
  }

  // Updates the UI to reflect the current selection state.
  choices.forEach((c) =>
    values.includes(choiceId(c))
      ? c.classList.add("lq-selected")
      : c.classList.remove("lq-selected")
  );
}

// Helper function to add a choice's ID to the selection.
function addChoice(values, choice) {
  values.push(choiceId(choice));
}

// Helper function to remove a choice's ID from the selection.
function removeChoice(values, choice) {
  return values.filter((v) => v !== choiceId(choice));
}

// Returns the "none" choice element.
function choiceNone(choices) {
  return [...choices].find((c) => isNone(c));
}

// Unused in the given code but presumably intended to return the "all" choice element.
function choiceAll(choices) {
  return [...choices].find((c) => isAll(c));
}

// Extracts and returns the ID part of a choice's DOM ID.
function choiceId(choice) {
  return choice.id.split("-")[1];
}

// Determines if a choice is meant to select all options.
function isAll(c) {
  return c.innerHTML.toLowerCase().includes("all");
}

// Determines if a choice represents a "none" selection.
function isNone(c) {
  return c.innerHTML.toLowerCase().includes("none");
}

// Checks if the current selection includes a specific choice's ID.
function valuesIncludes(values, c) {
  return values.includes(choiceId(c));
}

Example 4: Redirect to Translated Product URL¶

ShopifyShopify (Legacy)WooCommerceMagentoBigCommerceStandalone

In this version of the Revenuehunt app you can direct users to different markets via the App Settings > Shopify Markets tab and the product will be already shown in the right language and currency.

Our application syncs only the base products from your store. Products translated into other languages won't have unique IDs for sync. Although you can change the quiz language, product names and descriptions will display in the original language.

A workaround for this could be creating quizzes in different languages and redirecting users to the translated product pages with JavaScript. We explain this approach in this article.