MWPW-157450: Localization Enhancements for quiz-entry block needed

adobecom · Sep 19, 2024 · b69f11b · b69f11b
1 parent adf2a9c
commit b69f11b
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 8 deletions.
diff --git 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">
       <h2 id="question" class="quiz-title">${quizLists.strings[selectedQuestion.questions].heading}</h2>
       <p class="quiz-subtitle">${quizLists.strings[selectedQuestion.questions]['sub-head']}</p>

diff --git a/libs/blocks/quiz-entry/quizoption.js b/libs/blocks/quiz-entry/quizoption.js
@@ -1,6 +1,7 @@
 import { html, useState, useEffect } from '../../deps/htm-preact.js';
 import { getSwipeDistance, getSwipeDirection } from '../carousel/carousel.js';
 import { createTag } from '../../utils/utils.js';
+import { removeLeftToRightMark } from '../quiz/utils.js';
 
 export const OptionCard = ({
   text, title, image, icon, iconTablet, iconDesktop, options,
@@ -18,13 +19,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
@@ -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;