From 3e94ae65c8e435e79def419f5e8fc1974cada778 Mon Sep 17 00:00:00 2001
From: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com>
Date: Wed, 4 Mar 2026 16:32:20 +0700
Subject: [PATCH] fix(challenge-parser): display hanzi-pinyin pairs properly in
 quiz audio transcript (#66222)

---
 .../__fixtures__/with-chinese-quizzes.md      | 18 ++++++++++++++++
 .../parser/plugins/add-quizzes.js             | 21 ++++++++++++++++++-
 .../parser/plugins/add-quizzes.test.js        |  6 ++++++
 3 files changed, 44 insertions(+), 1 deletion(-)

diff --git a/tools/challenge-parser/parser/__fixtures__/with-chinese-quizzes.md b/tools/challenge-parser/parser/__fixtures__/with-chinese-quizzes.md
index 3254c05ec3d..37d90786cac 100644
--- a/tools/challenge-parser/parser/__fixtures__/with-chinese-quizzes.md
+++ b/tools/challenge-parser/parser/__fixtures__/with-chinese-quizzes.md
@@ -8,6 +8,24 @@
 
 Quiz 1, question 1 with `中文 (zhōng wén)`
 
+#### --audio--
+
+```json
+{
+  "audio": {
+    "filename": "7.3-1.mp3",
+    "startTimestamp": 24.7,
+    "finishTimestamp": 26.2
+  },
+  "transcript": [
+    {
+      "character": "Wang Hua",
+      "text": "你好 (nǐ hǎo)。"
+    }
+  ]
+}
+```
+
 #### --distractors--
 
 Quiz 1, question 1, distractor 1 with `中文 (zhōng wén)`
diff --git a/tools/challenge-parser/parser/plugins/add-quizzes.js b/tools/challenge-parser/parser/plugins/add-quizzes.js
index e895eab9a63..e379299a1a9 100644
--- a/tools/challenge-parser/parser/plugins/add-quizzes.js
+++ b/tools/challenge-parser/parser/plugins/add-quizzes.js
@@ -1,6 +1,9 @@
 const { root } = require('mdast-builder');
 const { getSection, getAllSections } = require('./utils/get-section');
-const { createMdastToHtml } = require('./utils/i18n-stringify');
+const {
+  createMdastToHtml,
+  parseHanziPinyinPairs
+} = require('./utils/i18n-stringify');
 
 const { splitOnThematicBreak } = require('./utils/split-on-thematic-break');
 
@@ -67,6 +70,22 @@ function plugin() {
             }
           });
 
+          // Convert hanzi-pinyin pairs in transcript text to HTML ruby elements
+          audioData.transcript = audioData.transcript.map(line => {
+            if (parseHanziPinyinPairs(line.text).length > 0) {
+              const nodes = [
+                {
+                  type: 'paragraph',
+                  children: [{ type: 'inlineCode', value: line.text }]
+                }
+              ];
+              const html = toHtml(nodes);
+              const innerHtml = html.replace(/^<p>|<\/p>$/g, '');
+              return { ...line, text: innerHtml };
+            }
+            return line;
+          });
+
           questionData.audioData = audioData;
         } catch (error) {
           if (error instanceof SyntaxError) {
diff --git a/tools/challenge-parser/parser/plugins/add-quizzes.test.js b/tools/challenge-parser/parser/plugins/add-quizzes.test.js
index 2b831301c38..8d28a555e67 100644
--- a/tools/challenge-parser/parser/plugins/add-quizzes.test.js
+++ b/tools/challenge-parser/parser/plugins/add-quizzes.test.js
@@ -124,6 +124,12 @@ describe('add-quizzes plugin', () => {
     expect(firstQuestion.answer).toBe(
       '<p>Quiz 1, question 1, answer with <ruby>中文<rp>(</rp><rt>zhōng wén</rt><rp>)</rp></ruby></p>'
     );
+    expect(firstQuestion.audioData.transcript).toEqual([
+      {
+        character: 'Wang Hua',
+        text: '<ruby>你好<rp>(</rp><rt>nǐ hǎo</rt><rp>)</rp></ruby>。'
+      }
+    ]);
   });
 
   it('should render Chinese in quizzes when lang is zh-CN and the text does not contain hanzi (pinyin) format', () => {