From 52f86729d09c9a6182de7bdf445d1fb9bc60e327 Mon Sep 17 00:00:00 2001
From: Jacky Sun <XIASUN@ADOBE.COM>
Date: Tue, 10 Sep 2024 13:48:50 -0700
Subject: [PATCH] update quiz entry code for some localization bugs

---
 libs/blocks/quiz-entry/quiz-entry.js | 4 +++-
 libs/blocks/quiz-entry/quizoption.js | 9 +++++----
 libs/blocks/quiz-entry/utils.js      | 6 +++---
 3 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/libs/blocks/quiz-entry/quiz-entry.js b/libs/blocks/quiz-entry/quiz-entry.js
index 6c9c9394ba..61b3b8545f 100644
--- a/libs/blocks/quiz-entry/quiz-entry.js
+++ b/libs/blocks/quiz-entry/quiz-entry.js
@@ -3,6 +3,7 @@ import { getQuizEntryData, handleNext, handleSelections } from './utils.js';
 import { mlField, getMLResults } from './mlField.js';
 import { GetQuizOption } from './quizoption.js';
 import { quizPopover, getSuggestions } from './quizPopover.js';
+import { getConfig } from '../../utils/utils.js';
 
 export const locationWrapper = {
   redirect: (url) => {
@@ -343,7 +344,8 @@ const App = ({
 
   if (!dataLoaded || !selectedQuestion) return null;
 
-  return html`<div class="quiz-container">
+  const { locale } = getConfig();
+  return html`<div class="quiz-container${locale?.ietf === 'ja-JP' ? ' jpwordwrap-disabled' : ''}">
     <div class="quiz-heading-container">
       <div id="question" class="quiz-title">${quizLists.strings[selectedQuestion.questions].heading}</div>
       <div class="quiz-subtitle">${quizLists.strings[selectedQuestion.questions]['sub-head']}</div>
diff --git a/libs/blocks/quiz-entry/quizoption.js b/libs/blocks/quiz-entry/quizoption.js
index bb3f88bf15..5771d6ff92 100644
--- a/libs/blocks/quiz-entry/quizoption.js
+++ b/libs/blocks/quiz-entry/quizoption.js
@@ -1,5 +1,6 @@
 import { html, useState, useEffect } from '../../deps/htm-preact.js';
 import { getSwipeDistance, getSwipeDirection } from '../carousel/carousel.js';
+import { removeLeftToRightMark } from '../quiz/utils.js';
 
 export const OptionCard = ({
   text, title, image, icon, iconTablet, iconDesktop, options,
@@ -17,13 +18,13 @@ export const OptionCard = ({
 
   const getIconHtml = () => html`<div class="quiz-option-icon">
     <picture>
-      ${iconDesktop && html`<source media="(min-width: 1024px)" srcset="${iconDesktop}" />`}
-      ${iconTablet && html`<source media="(min-width: 600px)" srcset="${iconTablet}" />`}
-      <img src="${icon}" alt="" loading="lazy" />
+      ${iconDesktop && html`<source media="(min-width: 1024px)" srcset="${removeLeftToRightMark(iconDesktop)}" />`}
+      ${iconTablet && html`<source media="(min-width: 600px)" srcset="${removeLeftToRightMark(iconTablet)}" />`}
+      <img src="${removeLeftToRightMark(icon)}" alt="" loading="lazy" />
     </picture>
   </div>`;
 
-  const imageHtml = image ? html`<div class="quiz-option-image" style="background-image: url('${image}'); background-size: cover" loading="lazy"></div>` : null;
+  const imageHtml = image ? html`<div class="quiz-option-image" style="background-image: url('${removeLeftToRightMark(image)}'); background-size: cover" loading="lazy"></div>` : null;
   const titleHtml = title ? html`<p class="quiz-option-title">${title}</p>` : null;
   const textHtml = text ? html`<p class="quiz-option-text">${text}</p>` : null;
 
diff --git a/libs/blocks/quiz-entry/utils.js b/libs/blocks/quiz-entry/utils.js
index dfca985432..787b4ee79a 100644
--- a/libs/blocks/quiz-entry/utils.js
+++ b/libs/blocks/quiz-entry/utils.js
@@ -1,4 +1,4 @@
-import { getNormalizedMetadata } from '../quiz/utils.js';
+import { getNormalizedMetadata, getLocalizedURL } from '../quiz/utils.js';
 
 export async function fetchJson(path) {
   const response = await fetch(path);
@@ -104,8 +104,8 @@ export const handleSelections = (prevSelections, selectedQuestion, selections) =
 
 export async function getQuizEntryData(el) {
   const blockData = getNormalizedMetadata(el);
-  const dataPath = blockData.data.text;
-  const quizPath = blockData.quiz.text;
+  const dataPath = getLocalizedURL(blockData.data.text);
+  const quizPath = getLocalizedURL(blockData.quiz.text);
   const maxQuestions = Number(blockData.maxquestions?.text) || 10;
   const analyticsType = blockData.analyticstype?.text;
   const analyticsQuiz = blockData.analyticsquiz?.text;