fix(client): fix speaking-modal showing span tags (#64759)

Co-authored-by: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com>

client/src/templates/Challenges/components/multiple-choice-questions.tsx

@@ -11,6 +11,7 @@ import { SuperBlocks } from '../../../../../shared/config/curriculum';
 import SpeakingModal from './speaking-modal';
 import ChallengeHeading from './challenge-heading';
 import PrismFormatted from './prism-formatted';
+import { stripHtmlTags } from './speaking-modal-helpers';
 
 type MultipleChoiceQuestionsProps = {
   questions: Question[];
@@ -41,16 +42,12 @@ function MultipleChoiceQuestions({
   const [modalAnswerIndex, setModalAnswerIndex] = useState<number>(0);
   const [modalQuestionIndex, setModalQuestionIndex] = useState<number>(0);
 
-  function stripCodeTags(text: string): string {
-    return text.replace(/<code>(.*?)<\/code>/g, '$1');
-  }
-
   const handleSpeakingButtonClick = (
     answer: string,
     answerIndex: number,
     questionIndex: number
   ) => {
-    setModalText(stripCodeTags(removeParagraphTags(answer)));
+    setModalText(stripHtmlTags(answer));
     setModalAnswerIndex(answerIndex);
     setModalQuestionIndex(questionIndex);
     openSpeakingModal();

client/src/templates/Challenges/components/speaking-modal-helpers.test.ts

@@ -1,5 +1,9 @@
 import { describe, it, expect } from 'vitest';
-import { normalizeText, compareTexts } from './speaking-modal-helpers';
+import {
+  normalizeText,
+  compareTexts,
+  stripHtmlTags
+} from './speaking-modal-helpers';
 
 describe('speaking-modal-helpers', () => {
   describe('normalizeText', () => {
@@ -231,4 +235,38 @@ describe('speaking-modal-helpers', () => {
       });
     });
   });
+
+  describe('stripHtmlTags', () => {
+    it('should remove HTML tags and attributes', () => {
+      expect(stripHtmlTags('<code>hello</code>')).toBe('hello');
+      expect(stripHtmlTags('<span>world</span>')).toBe('world');
+      expect(stripHtmlTags('<p>Text content</p>')).toBe('Text content');
+      expect(
+        stripHtmlTags('<span id="text" class="highlighted-text">Nǐ hǎo</span>')
+      ).toBe('Nǐ hǎo');
+    });
+
+    it('should handle nested tags', () => {
+      expect(stripHtmlTags('<p>Hello <span>world</span></p>')).toBe(
+        'Hello world'
+      );
+      expect(stripHtmlTags('<p><span class="highlight">text</span></p>')).toBe(
+        'text'
+      );
+    });
+
+    it('should handle text without tags', () => {
+      expect(stripHtmlTags('plain text')).toBe('plain text');
+    });
+
+    it('should handle empty string', () => {
+      expect(stripHtmlTags('')).toBe('');
+    });
+
+    it('should remove tags but preserve spacing', () => {
+      expect(stripHtmlTags('Hello <code>world</code> today')).toBe(
+        'Hello world today'
+      );
+    });
+  });
 });

client/src/templates/Challenges/components/speaking-modal-helpers.ts

@@ -181,3 +181,7 @@ function alignWords(
     }));
   }
 }
+
+export const stripHtmlTags = (text: string): string => {
+  return text.replace(/<[^>]*>/g, '');
+};