🔥 Chinese Quotes ⚡ Interactive Chinese quotes breakdown: 此地无银三百两 Not a Dictionary · Sentence Card /* Reset */ .nad-card, .nad-card * { box-sizing: border-box !important; margin: 0; padding: 0; } .nad-card { width: 100% !important; max-width: 100% !important; background: #ffffff; padding: 16px 12px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #18181b; } /* 1. HEADER PHRASE */ .nad-phrase-wrapper { display: flex; flex-direction: column; gap: 8px; width: 100%; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px dashed #e4e4e7; } .nad-phrase-wrapper.hidden { display: none !important; } .nad-chinese-sentence { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 4px; width: 100%; } .nad-word { font-size: 1.064rem; font-weight: 700; padding: 3px 6px; border-radius: 6px; line-height: 1.2; display: inline-flex; align-items: center; } .nad-punct { font-size: 1.064rem; font-weight: 700; color: #a1a1aa; padding: 0 1px; } /* Word Colors */ .w-1 { background: #fef08a; color: #854d0e; } .w-2 { background: #e0f2fe; color: #0369a1; } .w-3 { background: #fce7f3; color: #9d174d; } .w-4 { background: #dcfce7; color: #15803d; } .nad-translation { width: 100%; background: #f4f4f5; color: #3f3f46; font-size: 0.952rem; font-weight: 500; padding: 8px 12px; border-radius: 100px; text-align: left; } /* 2. TABS CONTAINER */ .nad-tabs-container { width: 100%; margin-bottom: 14px; padding-bottom: 8px; border-bottom: 1px solid #f4f4f5; } .nad-tab-btn { background: #f4f4f5; border: none; border-radius: 6px; font-weight: 800; text-transform: uppercase; color: #71717a; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .nad-tab-btn.active { background: #ffe043; color: #09090b; } /* DESKTOP Grid */ @media (min-width: 641px) { .nad-tabs-container { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 5px; } .nad-tab-btn { padding: 10px 4px; font-size: 0.806rem; letter-spacing: -0.2px; text-align: center; display: flex; align-items: center; justify-content: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } /* MOBILE Scroll */ @media (max-width: 640px) { .nad-card { padding: 10px 4px !important; } .nad-tabs-container { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; gap: 5px; scrollbar-width: none; padding-left: 2px; padding-right: 2px; } .nad-tabs-container::-webkit-scrollbar { display: none; } .nad-tab-btn { padding: 7px 10px; font-size: 0.784rem; white-space: nowrap !important; flex-shrink: 0 !important; touch-action: pan-x; } .nad-highlight-box { padding: 10px 8px; } } /* 3. TAB PANELS */ .nad-tab-panel { display: none; width: 100%; } .nad-tab-panel.active { display: block; } /* BREAKDOWN */ .nad-breakdown-flow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; width: 100%; } .nad-b-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 8px; font-size: 1.064rem; cursor: pointer; user-select: none; } .nad-b-chip .b-zh { font-size: 1.4rem; font-weight: 700; line-height: 1; } .nad-b-chip .b-py { font-size: 0.84rem; background: #ffffff; padding: 2px 6px; border-radius: 100px; font-weight: 600; opacity: 0.9; } .nad-b-chip .b-gl { font-size: 0.918rem; font-weight: 600; } .nad-b-chip .b-audio { font-size: 0.896rem; opacity: 0.4; margin-left: 2px; } /* TEXT CONTENT LAYOUTS */ .nad-text-block { font-size: 1.03rem; line-height: 1.5; color: #27272a; } .nad-highlight-box { background: #fafafa; border: 1px solid #f4f4f5; border-radius: 8px; padding: 12px; margin-bottom: 12px; } .nad-box-title { font-size: 1.064rem; font-weight: 700; color: #09090b; margin-bottom: 4px; } /* BUILD IT */ .nad-quiz-wrapper { display: flex; flex-direction: column; gap: 10px; width: 100%; } .nad-quiz-hint { background: #fcfcfc; border: 1px solid #f4f4f5; border-radius: 6px; padding: 8px 10px; width: 100%; } .nad-quiz-title { font-size: 0.672rem; font-weight: 800; color: #71717a; text-transform: uppercase; letter-spacing: 0.5px; } .nad-quiz-target-text { font-size: 1.008rem; font-weight: 700; color: #09090b; margin-top: 1px; } .nad-quiz-box { min-height: 70px; background: #fafafa; border: 2px dashed #e4e4e7; border-radius: 10px; padding: 8px; display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start; width: 100%; transition: all 0.2s ease; } .nad-quiz-box.state-error { background: #fff5f5 !important; border-color: #f87171 !important; } .nad-quiz-box.state-success { background: #f0fdf4 !important; border-color: #4ade80 !important; } .nad-quiz-pool { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; min-height: 36px; } .nad-quiz-chip { background: #ffffff; border: 1px solid #e4e4e7; padding: 4px 8px; border-radius: 6px; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,0.03); user-select: none; width: auto; min-width: 44px; } .nad-quiz-chip .czh { font-size: 1.064rem; font-weight: 700; color: #09090b; line-height: 1.1; } .nad-quiz-chip .cpy { font-size: 0.694rem; color: #71717a; margin-top: 1px; white-space: nowrap; } .nad-quiz-actions { display: flex; gap: 6px; align-items: center; margin-top: 2px; } .nad-btn-check { background: #ffe043; color: #09090b; padding: 8px 14px; border-radius: 6px; font-size: 0.896rem; font-weight: 700; border: none; cursor: pointer; } .nad-btn-reset { background: #f4f4f5; color: #52525b; padding: 8px 12px; border-radius: 6px; font-size: 0.896rem; font-weight: 600; border: none; cursor: pointer; } .nad-quiz-feedback { font-size: 0.918rem; font-weight: 600; margin-top: 2px; display: none; } .nad-quiz-feedback.error { color: #dc2626; display: block; } .nad-quiz-feedback.success { color: #16a34a; display: block; } .nad-footer { margin-top: 16px; padding-top: 8px; border-top: 1px solid #f4f4f5; font-size: 0.728rem; font-weight: 800; text-transform: uppercase; color: #a1a1aa; text-align: right; } 此地 无银 三百 两 “No three hundred taels of silver buried here”—giving away one’s secret through clumsy denial. BREAKDOWN MEANING BUILD IT 此地 cǐ dì this place 🔊 无银 wú yín no silver 🔊 三百 sān bǎi three hundred 🔊 两 liǎng taels (currency weight) 🔊 An idiomatic expression used when someone tries to hide something or deny guilt, but their awkward actions or overly defensive words make it completely obvious. 此地无银三百两 (Cǐ dì wú yín sān bǎi liǎng) Based on a famous folk tale about a man named Zhang who buried his savings and put up a sign saying “no three hundred taels of silver buried here” to fool thieves, only to expose himself instantly. People use this phrase today whenever someone’s clumsy attempt at covering up a mistake actually points straight to their guilt. TARGET SENTENCE Giving away a secret through clumsy denial. Check Answer Reset NOT A DICTIONARY const sentenceData = [ { zh: "此地", py: "cǐ dì • this place" }, { zh: "无银", py: "wú yín • no silver" }, { zh: "三百", py: "sān bǎi • three hundred" }, { zh: "两", py: "liǎng • taels" } ]; function playAudio(text) { if (!('speechSynthesis' in window)) return; try { window.speechSynthesis.cancel(); const utt = new SpeechSynthesisUtterance(text); utt.lang = 'zh-CN'; utt.rate = 0.9; window.speechSynthesis.speak(utt); } catch (e) {} } function switchNadTab(evt, tabId) { const card = evt.target.closest('.nad-card'); card.querySelectorAll('.nad-tab-panel').forEach(p => p.classList.remove('active')); card.querySelectorAll('.nad-tab-btn').forEach(b => b.classList.remove('active')); card.querySelector('#' + tabId).classList.add('active'); evt.currentTarget.classList.add('active'); const phraseWrapper = card.querySelector('#nadPhraseWrapper'); if (tabId === 'nad-tab-build') { phraseWrapper.classList.add('hidden'); initNadQuiz(); } else { phraseWrapper.classList.remove('hidden'); } } function initNadQuiz() { const target = document.getElementById('nadQuizTarget'); const pool = document.getElementById('nadQuizPool'); const feedback = document.getElementById('nadQuizFeedback'); if (!target || !pool) return; target.innerHTML = ''; pool.innerHTML = ''; target.className = 'nad-quiz-box'; feedback.className = 'nad-quiz-feedback'; feedback.innerHTML = ''; const shuffled = [...sentenceData].sort(() => Math.random() - 0.5); shuffled.forEach((item, index) => { const chip = document.createElement('div'); chip.className = 'nad-quiz-chip'; chip.setAttribute('data-zh', item.zh); chip.setAttribute('data-id', index); chip.innerHTML = `${item.zh}${item.py}`; chip.onclick = function() { playAudio(item.zh); if (chip.parentElement === pool) target.appendChild(chip); else pool.appendChild(chip); }; pool.appendChild(chip); }); } function checkNadQuiz() { const target = document.getElementById('nadQuizTarget'); const feedback = document.getElementById('nadQuizFeedback'); const userAns = Array.from(target.children).map(c => c.getAttribute('data-zh')).join(''); const correctAns = sentenceData.map(d => d.zh).join(''); if (userAns === correctAns) { target.className = 'nad-quiz-box state-success'; feedback.className = 'nad-quiz-feedback success'; feedback.innerHTML = '✓ Correct! Perfect phrase sequence.'; playAudio(correctAns); } else { target.className = 'nad-quiz-box state-error'; feedback.className = 'nad-quiz-feedback error'; feedback.innerHTML = '✕ Incorrect order. Try rearranging the word blocks!'; } } 36 🔗 Engage
🔥 Chinese Quotes ⚡ Interactive A common expression pairing two vivid metaphors meaning that an action is completed and irreversible. Not a Dictionary · Sentence Card /* Reset */ .nad-card, .nad-card * { box-sizing: border-box !important; margin: 0; padding: 0; } .nad-card { width: 100% !important; max-width: 100% !important; background: #ffffff; padding: 16px 12px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #18181b; } /* 1. HEADER PHRASE */ .nad-phrase-wrapper { display: flex; flex-direction: column; gap: 8px; width: 100%; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px dashed #e4e4e7; } .nad-phrase-wrapper.hidden { display: none !important; } .nad-chinese-sentence { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 4px; width: 100%; } .nad-word { font-size: 1.064rem; font-weight: 700; padding: 3px 6px; border-radius: 6px; line-height: 1.2; display: inline-flex; align-items: center; } .nad-punct { font-size: 1.064rem; font-weight: 700; color: #a1a1aa; padding: 0 1px; } /* Word Colors */ .w-1 { background: #fef08a; color: #854d0e; } .w-2 { background: #e0f2fe; color: #0369a1; } .w-3 { background: #fce7f3; color: #9d174d; } .w-4 { background: #dcfce7; color: #15803d; } .w-5 { background: #fed7aa; color: #c2410c; } .w-6 { background: #e9d5ff; color: #7e22ce; } .nad-translation { width: 100%; background: #f4f4f5; color: #3f3f46; font-size: 0.952rem; font-weight: 500; padding: 8px 12px; border-radius: 100px; text-align: left; } /* 2. TABS CONTAINER */ .nad-tabs-container { width: 100%; margin-bottom: 14px; padding-bottom: 8px; border-bottom: 1px solid #f4f4f5; } .nad-tab-btn { background: #f4f4f5; border: none; border-radius: 6px; font-weight: 800; text-transform: uppercase; color: #71717a; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .nad-tab-btn.active { background: #ffe043; color: #09090b; } /* DESKTOP Grid */ @media (min-width: 641px) { .nad-tabs-container { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 5px; } .nad-tab-btn { padding: 10px 4px; font-size: 0.806rem; letter-spacing: -0.2px; text-align: center; display: flex; align-items: center; justify-content: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } /* MOBILE Scroll */ @media (max-width: 640px) { .nad-card { padding: 10px 4px !important; } .nad-tabs-container { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; gap: 5px; scrollbar-width: none; padding-left: 2px; padding-right: 2px; } .nad-tabs-container::-webkit-scrollbar { display: none; } .nad-tab-btn { padding: 7px 10px; font-size: 0.784rem; white-space: nowrap !important; flex-shrink: 0 !important; touch-action: pan-x; } .nad-highlight-box { padding: 10px 8px; } } /* 3. TAB PANELS */ .nad-tab-panel { display: none; width: 100%; } .nad-tab-panel.active { display: block; } /* BREAKDOWN */ .nad-breakdown-flow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; width: 100%; } .nad-b-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 8px; font-size: 1.064rem; cursor: pointer; user-select: none; } .nad-b-chip .b-zh { font-size: 1.4rem; font-weight: 700; line-height: 1; } .nad-b-chip .b-py { font-size: 0.84rem; background: #ffffff; padding: 2px 6px; border-radius: 100px; font-weight: 600; opacity: 0.9; } .nad-b-chip .b-gl { font-size: 0.918rem; font-weight: 600; } .nad-b-chip .b-audio { font-size: 0.896rem; opacity: 0.4; margin-left: 2px; } /* TEXT CONTENT LAYOUTS */ .nad-text-block { font-size: 1.03rem; line-height: 1.5; color: #27272a; } .nad-highlight-box { background: #fafafa; border: 1px solid #f4f4f5; border-radius: 8px; padding: 12px; margin-bottom: 12px; } .nad-box-title { font-size: 1.064rem; font-weight: 700; color: #09090b; margin-bottom: 4px; } /* BUILD IT */ .nad-quiz-wrapper { display: flex; flex-direction: column; gap: 10px; width: 100%; } .nad-quiz-hint { background: #fcfcfc; border: 1px solid #f4f4f5; border-radius: 6px; padding: 8px 10px; width: 100%; } .nad-quiz-title { font-size: 0.672rem; font-weight: 800; color: #71717a; text-transform: uppercase; letter-spacing: 0.5px; } .nad-quiz-target-text { font-size: 1.008rem; font-weight: 700; color: #09090b; margin-top: 1px; } .nad-quiz-box { min-height: 70px; background: #fafafa; border: 2px dashed #e4e4e7; border-radius: 10px; padding: 8px; display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start; width: 100%; transition: all 0.2s ease; } .nad-quiz-box.state-error { background: #fff5f5 !important; border-color: #f87171 !important; } .nad-quiz-box.state-success { background: #f0fdf4 !important; border-color: #4ade80 !important; } .nad-quiz-pool { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; min-height: 36px; } .nad-quiz-chip { background: #ffffff; border: 1px solid #e4e4e7; padding: 4px 8px; border-radius: 6px; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,0.03); user-select: none; width: auto; min-width: 44px; } .nad-quiz-chip .czh { font-size: 1.064rem; font-weight: 700; color: #09090b; line-height: 1.1; } .nad-quiz-chip .cpy { font-size: 0.694rem; color: #71717a; margin-top: 1px; white-space: nowrap; } .nad-quiz-actions { display: flex; gap: 6px; align-items: center; margin-top: 2px; } .nad-btn-check { background: #ffe043; color: #09090b; padding: 8px 14px; border-radius: 6px; font-size: 0.896rem; font-weight: 700; border: none; cursor: pointer; } .nad-btn-reset { background: #f4f4f5; color: #52525b; padding: 8px 12px; border-radius: 6px; font-size: 0.896rem; font-weight: 600; border: none; cursor: pointer; } .nad-quiz-feedback { font-size: 0.918rem; font-weight: 600; margin-top: 2px; display: none; } .nad-quiz-feedback.error { color: #dc2626; display: block; } .nad-quiz-feedback.success { color: #16a34a; display: block; } .nad-footer { margin-top: 16px; padding-top: 8px; border-top: 1px solid #f4f4f5; font-size: 0.728rem; font-weight: 800; text-transform: uppercase; color: #a1a1aa; text-align: right; } 木已成舟 , 生米 煮成 熟饭 What’s done is done; it’s too late to change it now. BREAKDOWN MEANING BUILD IT 木已成舟 mù yǐ chéng zhōu wood already made into a boat 🔊 , 生米 shēng mǐ raw rice 🔊 煮成 zhǔ chéng cook into 🔊 熟饭 shú fàn cooked rice 🔊 A common expression pairing two vivid metaphors meaning that an action is completed and irreversible. 木已成舟,生米煮成熟饭 The first part (“the wood is already made into a boat”) means you can’t turn the boat back into a tree. The second part (“raw rice has been cooked into a meal”) means you can’t turn cooked rice back into raw grains. Together, they emphasize that a situation is final and unchangeable. TARGET SENTENCE What’s done is done; it’s too late to change it now. Check Answer Reset NOT A DICTIONARY const sentenceData = [ { zh: "木已成舟", py: "mù yǐ chéng zhōu • wood into boat" }, { zh: "生米", py: "shēng mǐ • raw rice" }, { zh: "煮成", py: "zhǔ chéng • cook into" }, { zh: "熟饭", py: "shú fàn • cooked rice" } ]; function playAudio(text) { if (!('speechSynthesis' in window)) return; try { window.speechSynthesis.cancel(); const utt = new SpeechSynthesisUtterance(text); utt.lang = 'zh-CN'; utt.rate = 0.9; window.speechSynthesis.speak(utt); } catch (e) {} } function switchNadTab(evt, tabId) { const card = evt.target.closest('.nad-card'); card.querySelectorAll('.nad-tab-panel').forEach(p => p.classList.remove('active')); card.querySelectorAll('.nad-tab-btn').forEach(b => b.classList.remove('active')); card.querySelector('#' + tabId).classList.add('active'); evt.currentTarget.classList.add('active'); const phraseWrapper = card.querySelector('#nadPhraseWrapper'); if (tabId === 'nad-tab-build') { phraseWrapper.classList.add('hidden'); initNadQuiz(); } else { phraseWrapper.classList.remove('hidden'); } } function initNadQuiz() { const target = document.getElementById('nadQuizTarget'); const pool = document.getElementById('nadQuizPool'); const feedback = document.getElementById('nadQuizFeedback'); if (!target || !pool) return; target.innerHTML = ''; pool.innerHTML = ''; target.className = 'nad-quiz-box'; feedback.className = 'nad-quiz-feedback'; feedback.innerHTML = ''; const shuffled = [...sentenceData].sort(() => Math.random() - 0.5); shuffled.forEach((item, index) => { const chip = document.createElement('div'); chip.className = 'nad-quiz-chip'; chip.setAttribute('data-zh', item.zh); chip.setAttribute('data-id', index); chip.innerHTML = `${item.zh}${item.py}`; chip.onclick = function() { playAudio(item.zh); if (chip.parentElement === pool) target.appendChild(chip); else pool.appendChild(chip); }; pool.appendChild(chip); }); } function checkNadQuiz() { const target = document.getElementById('nadQuizTarget'); const feedback = document.getElementById('nadQuizFeedback'); const userAns = Array.from(target.children).map(c => c.getAttribute('data-zh')).join(''); const correctAns = sentenceData.map(d => d.zh).join(''); if (userAns === correctAns) { target.className = 'nad-quiz-box state-success'; feedback.className = 'nad-quiz-feedback success'; feedback.innerHTML = '✓ Correct! Perfect phrase sequence.'; playAudio(correctAns); } else { target.className = 'nad-quiz-box state-error'; feedback.className = 'nad-quiz-feedback error'; feedback.innerHTML = '✕ Incorrect order. Try rearranging the word blocks!'; } } 18 🔗 Engage
🔥 Chinese Quotes ⚡ Interactive Chinese quote breakdown: 化干戈为玉帛。 Not a Dictionary · Sentence Card /* Reset */ .nad-card, .nad-card * { box-sizing: border-box !important; margin: 0; padding: 0; } .nad-card { width: 100% !important; max-width: 100% !important; background: #ffffff; padding: 16px 12px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #18181b; } /* 1. HEADER PHRASE */ .nad-phrase-wrapper { display: flex; flex-direction: column; gap: 8px; width: 100%; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px dashed #e4e4e7; } .nad-phrase-wrapper.hidden { display: none !important; } .nad-chinese-sentence { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 5px; width: 100%; } .nad-word { font-size: 1.05rem; font-weight: 700; padding: 3px 6px; border-radius: 6px; line-height: 1.2; display: inline-flex; align-items: center; } .nad-punct { font-size: 1.05rem; font-weight: 700; color: #a1a1aa; padding: 0 1px; } /* Word Colors */ .w-1 { background: #fef08a; color: #854d0e; } .w-2 { background: #e0f2fe; color: #0369a1; } .w-3 { background: #fce7f3; color: #9d174d; } .w-4 { background: #dcfce7; color: #15803d; } .nad-translation { width: 100%; background: #f4f4f5; color: #3f3f46; font-size: 0.85rem; font-weight: 500; padding: 8px 12px; border-radius: 100px; text-align: left; } /* 2. TABS CONTAINER */ .nad-tabs-container { width: 100%; margin-bottom: 14px; padding-bottom: 8px; border-bottom: 1px solid #f4f4f5; } .nad-tab-btn { background: #f4f4f5; border: none; border-radius: 6px; font-weight: 800; text-transform: uppercase; color: #71717a; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .nad-tab-btn.active { background: #ffe043; color: #09090b; } /* DESKTOP Grid — 3 columns */ @media (min-width: 641px) { .nad-tabs-container { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 5px; } .nad-tab-btn { padding: 10px 4px; font-size: 0.72rem; letter-spacing: -0.2px; text-align: center; display: flex; align-items: center; justify-content: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } /* MOBILE Scroll */ @media (max-width: 640px) { .nad-card { padding: 10px 4px !important; } .nad-tabs-container { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; gap: 5px; scrollbar-width: none; padding-left: 2px; padding-right: 2px; } .nad-tabs-container::-webkit-scrollbar { display: none; } .nad-tab-btn { padding: 7px 10px; font-size: 0.7rem; white-space: nowrap !important; flex-shrink: 0 !important; touch-action: pan-x; } .nad-highlight-box { padding: 10px 8px; } } /* 3. TAB PANELS */ .nad-tab-panel { display: none; width: 100%; } .nad-tab-panel.active { display: block; } /* BREAKDOWN: Flow Grid */ .nad-breakdown-flow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; width: 100%; } .nad-b-chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 8px; font-size: 0.95rem; cursor: pointer; user-select: none; } .nad-b-chip .b-zh { font-size: 1.25rem; font-weight: 700; line-height: 1; } .nad-b-chip .b-py { font-size: 0.75rem; background: #ffffff; padding: 2px 6px; border-radius: 100px; font-weight: 600; opacity: 0.9; } .nad-b-chip .b-gl { font-size: 0.78rem; font-weight: 500; opacity: 0.85; } .nad-b-chip .b-audio { font-size: 0.8rem; opacity: 0.4; margin-left: 2px; } /* TEXT CONTENT LAYOUTS */ .nad-text-block { font-size: 0.92rem; line-height: 1.6; color: #27272a; } .nad-text-block p { margin-bottom: 10px; } .nad-highlight-box { background: #fafafa; border: 1px solid #f4f4f5; border-radius: 8px; padding: 12px; margin-bottom: 12px; } .nad-box-title { font-size: 0.95rem; font-weight: 700; color: #09090b; margin-bottom: 4px; } .nad-inline-chip { background: #ffe043; color: #09090b; font-weight: 700; padding: 1px 5px; border-radius: 4px; font-size: 0.85rem; } /* BUILD IT */ .nad-quiz-wrapper { display: flex; flex-direction: column; gap: 10px; width: 100%; } .nad-quiz-hint { background: #fcfcfc; border: 1px solid #f4f4f5; border-radius: 6px; padding: 8px 10px; width: 100%; } .nad-quiz-title { font-size: 0.6rem; font-weight: 800; color: #71717a; text-transform: uppercase; letter-spacing: 0.5px; } .nad-quiz-instruction { font-size: 0.85rem; font-weight: 500; color: #52525b; margin-top: 2px; } .nad-quiz-box { min-height: 70px; background: #fafafa; border: 2px dashed #e4e4e7; border-radius: 10px; padding: 8px; display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start; width: 100%; transition: all 0.2s ease; } .nad-quiz-box.state-error { background: #fff5f5 !important; border-color: #f87171 !important; } .nad-quiz-box.state-success { background: #f0fdf4 !important; border-color: #4ade80 !important; } .nad-quiz-pool { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; min-height: 36px; } .nad-quiz-chip { background: #ffffff; border: 1px solid #e4e4e7; padding: 4px 8px; border-radius: 6px; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,0.03); user-select: none; width: auto; min-width: 44px; } .nad-quiz-chip .czh { font-size: 0.95rem; font-weight: 700; color: #09090b; line-height: 1.1; } .nad-quiz-chip .cpy { font-size: 0.62rem; color: #71717a; margin-top: 1px; white-space: nowrap; } .nad-quiz-actions { display: flex; gap: 6px; align-items: center; margin-top: 2px; } .nad-btn-check { background: #ffe043; color: #09090b; padding: 8px 14px; border-radius: 6px; font-size: 0.8rem; font-weight: 700; border: none; cursor: pointer; } .nad-btn-reset { background: #f4f4f5; color: #52525b; padding: 8px 12px; border-radius: 6px; font-size: 0.8rem; font-weight: 600; border: none; cursor: pointer; } .nad-quiz-feedback { font-size: 0.82rem; font-weight: 600; margin-top: 2px; display: none; } .nad-quiz-feedback.error { color: #dc2626; display: block; } .nad-quiz-feedback.success { color: #16a34a; display: block; } .nad-footer { margin-top: 16px; padding-top: 8px; border-top: 1px solid #f4f4f5; font-size: 0.65rem; font-weight: 800; text-transform: uppercase; color: #a1a1aa; text-align: right; } 化 干戈 为 玉帛 。 Turn weapons into jade and silk. — To turn conflict into peace; to replace war with friendship. BREAKDOWN MEANING BUILD IT 化 huà to transform / turn into / 转变 🔊 干戈 gān gē weapons / war / conflict / 武器 / 战争 🔊 为 wéi into / as / 成为 🔊 玉帛 yù bó jade and silk / peace and friendship / 玉和丝绸 / 和平友好 🔊 化干戈为玉帛 is a powerful Chinese saying that means “to turn weapons into peace” or “to replace conflict with friendship.” 化 (“TO TRANSFORM”) 化 means to change or transform something from one state to another. It’s the action of making a fundamental shift. 干戈 (“WEAPONS / WAR”) 干 (shield) and 戈 (spear) were ancient weapons. Together, they represent war, fighting, conflict, and hostility. In ancient China, these two words were often used together to mean “military force” or “armed conflict.” 为 (“INTO / AS”) 为 here means “to become” or “to turn into.” It connects the transformation from conflict to peace. 玉帛 (“JADE AND SILK”) 玉 (jade) and 帛 (silk) were precious materials used in ancient China as gifts between rulers, as offerings in ceremonies, and as symbols of friendship, respect, and peaceful relations. They represent the complete opposite of weapons: beauty, value, and harmony. Where does it come from? This saying comes from ancient Chinese history, specifically from the Spring and Autumn period (about 2,500 years ago). It was used to describe the ideal of resolving disputes between states through diplomacy and mutual respect, rather than through war. Over time, it became a famous expression representing the highest ideal of conflict resolution. What does it mean in everyday life? This phrase is used whenever people choose peace over fighting. It can apply to: International relations: When two countries end a war and become friends. Personal conflicts: When two people who were angry with each other forgive and make up. Business: When competitors stop fighting and start cooperating. Inner peace: When someone lets go of anger and finds calm. The deeper message is that conflict is not the only option. Even in the most heated disagreements, there is always a chance to turn things around — to choose understanding over anger, cooperation over competition, and peace over war. Core Philosophy: True strength is not in winning fights, but in finding ways to turn enemies into friends and conflict into harmony. 📝 BUILD THE SENTENCE Click the words below in the correct order to form the saying. Check Answer Reset NOT A DICTIONARY const sentenceData = [ { zh: "化", py: "huà" }, { zh: "干戈", py: "gān gē" }, { zh: "为", py: "wéi" }, { zh: "玉帛", py: "yù bó" } ]; function playAudio(text) { if (!('speechSynthesis' in window)) return; try { window.speechSynthesis.cancel(); const utt = new SpeechSynthesisUtterance(text); utt.lang = 'zh-CN'; utt.rate = 0.9; window.speechSynthesis.speak(utt); } catch (e) {} } function switchNadTab(evt, tabId) { const card = evt.target.closest('.nad-card'); card.querySelectorAll('.nad-tab-panel').forEach(p => p.classList.remove('active')); card.querySelectorAll('.nad-tab-btn').forEach(b => b.classList.remove('active')); card.querySelector('#' + tabId).classList.add('active'); evt.currentTarget.classList.add('active'); const phraseWrapper = card.querySelector('#nadPhraseWrapper'); if (tabId === 'nad-tab-build') { phraseWrapper.classList.add('hidden'); initNadQuiz(); } else { phraseWrapper.classList.remove('hidden'); } } function initNadQuiz() { const target = document.getElementById('nadQuizTarget'); const pool = document.getElementById('nadQuizPool'); const feedback = document.getElementById('nadQuizFeedback'); if (!target || !pool) return; target.innerHTML = ''; pool.innerHTML = ''; target.className = 'nad-quiz-box'; feedback.className = 'nad-quiz-feedback'; feedback.innerHTML = ''; const shuffled = [...sentenceData].sort(() => Math.random() - 0.5); shuffled.forEach(item => { const chip = document.createElement('div'); chip.className = 'nad-quiz-chip'; chip.setAttribute('data-zh', item.zh); chip.innerHTML = `${item.zh}${item.py}`; chip.onclick = function() { playAudio(item.zh); if (chip.parentElement === pool) target.appendChild(chip); else pool.appendChild(chip); }; pool.appendChild(chip); }); } function checkNadQuiz() { const target = document.getElementById('nadQuizTarget'); const feedback = document.getElementById('nadQuizFeedback'); const userAns = Array.from(target.children).map(c => c.getAttribute('data-zh')).join(''); const correctAns = sentenceData.map(d => d.zh).join(''); if (userAns === correctAns) { target.className = 'nad-quiz-box state-success'; feedback.className = 'nad-quiz-feedback success'; feedback.innerHTML = '✓ Correct! 化 → 干戈 → 为 → 玉帛 🎉'; playAudio('化干戈为玉帛'); } else { target.className = 'nad-quiz-box state-error'; feedback.className = 'nad-quiz-feedback error'; feedback.innerHTML = '✕ Not quite. Try again!'; } } 43 🔗 Engage
🔥 Chinese Quotes ⚡ Interactive Chinese phrase breakdown: 民以食为天 Not a Dictionary · Sentence Card /* Reset */ .nad-card, .nad-card * { box-sizing: border-box !important; margin: 0; padding: 0; } .nad-card { width: 100% !important; max-width: 100% !important; background: #ffffff; padding: 16px 12px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #18181b; } /* 1. HEADER PHRASE */ .nad-phrase-wrapper { display: flex; flex-direction: column; gap: 8px; width: 100%; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px dashed #e4e4e7; } .nad-phrase-wrapper.hidden { display: none !important; } .nad-chinese-sentence { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 5px; width: 100%; } .nad-word { font-size: 1.05rem; font-weight: 700; padding: 3px 6px; border-radius: 6px; line-height: 1.2; display: inline-flex; align-items: center; } .nad-punct { font-size: 1.05rem; font-weight: 700; color: #a1a1aa; padding: 0 1px; } /* Word Colors */ .w-1 { background: #fef08a; color: #854d0e; } .w-2 { background: #e0f2fe; color: #0369a1; } .nad-translation { width: 100%; background: #f4f4f5; color: #3f3f46; font-size: 0.85rem; font-weight: 500; padding: 8px 12px; border-radius: 100px; text-align: left; } /* 2. TABS CONTAINER */ .nad-tabs-container { width: 100%; margin-bottom: 14px; padding-bottom: 8px; border-bottom: 1px solid #f4f4f5; } .nad-tab-btn { background: #f4f4f5; border: none; border-radius: 6px; font-weight: 800; text-transform: uppercase; color: #71717a; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .nad-tab-btn.active { background: #ffe043; color: #09090b; } /* DESKTOP Grid */ @media (min-width: 641px) { .nad-tabs-container { display: grid !important; grid-template-columns: repeat(5, 1fr); gap: 5px; } .nad-tab-btn { padding: 10px 4px; font-size: 0.72rem; letter-spacing: -0.2px; text-align: center; display: flex; align-items: center; justify-content: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } /* MOBILE Scroll */ @media (max-width: 640px) { .nad-card { padding: 10px 4px !important; } .nad-tabs-container { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; gap: 5px; scrollbar-width: none; padding-left: 2px; padding-right: 2px; } .nad-tabs-container::-webkit-scrollbar { display: none; } .nad-tab-btn { padding: 7px 10px; font-size: 0.7rem; white-space: nowrap !important; flex-shrink: 0 !important; touch-action: pan-x; } .nad-highlight-box, .nad-ctx-card { padding: 10px 8px; } } /* 3. TAB PANELS */ .nad-tab-panel { display: none; width: 100%; } .nad-tab-panel.active { display: block; } /* BREAKDOWN: Flow Grid */ .nad-breakdown-flow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; width: 100%; } .nad-b-chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 8px; font-size: 0.95rem; cursor: pointer; user-select: none; } .nad-b-chip .b-zh { font-size: 1.25rem; font-weight: 700; line-height: 1; } .nad-b-chip .b-py { font-size: 0.75rem; background: #ffffff; padding: 2px 6px; border-radius: 100px; font-weight: 600; opacity: 0.9; } .nad-b-chip .b-gl { font-size: 0.82rem; font-weight: 600; } .nad-b-chip .b-audio { font-size: 0.8rem; opacity: 0.4; margin-left: 2px; } /* TEXT CONTENT LAYOUTS */ .nad-text-block { font-size: 0.92rem; line-height: 1.5; color: #27272a; } .nad-highlight-box { background: #fafafa; border: 1px solid #f4f4f5; border-radius: 8px; padding: 12px; margin-bottom: 12px; } .nad-highlight-box.yellow-border { border-left: 4px solid #ffe043; } .nad-box-title { font-size: 0.95rem; font-weight: 700; color: #09090b; margin-bottom: 4px; } .nad-box-subtitle { font-size: 0.75rem; font-weight: 700; color: #71717a; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; } .nad-inline-chip { background: #ffe043; color: #09090b; font-weight: 700; padding: 1px 5px; border-radius: 4px; font-size: 0.85rem; } .nad-ctx-card { background: #fafafa; border: 1px solid #f4f4f5; padding: 12px; border-radius: 8px; margin-bottom: 10px; } .nad-ctx-label { font-size: 0.65rem; font-weight: 800; color: #a1a1aa; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; } .nad-ctx-cn { font-size: 1.15rem; font-weight: 700; color: #09090b; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; } .nad-ctx-en { font-size: 0.85rem; color: #52525b; margin-top: 8px; } /* Interactive Context Words & Tooltips */ .nad-interactive-word { position: relative; cursor: pointer; padding: 2px 4px; border-radius: 4px; transition: background 0.15s ease; display: inline-flex; align-items: center; } .nad-interactive-word:hover { background: #f4f4f5; } .nad-interactive-word.nad-highlight { background: #ffe043; } /* Tooltip styling */ .nad-word-tooltip { position: absolute; bottom: 110%; left: 50%; transform: translateX(-50%); background: #18181b; color: #ffffff; font-size: 0.72rem; font-weight: 500; padding: 4px 8px; border-radius: 6px; white-space: nowrap; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 0.15s ease, transform 0.15s ease; z-index: 10; } .nad-word-tooltip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border-width: 4px; border-style: solid; border-color: #18181b transparent transparent transparent; } .nad-interactive-word.active .nad-word-tooltip { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(-2px); } /* BUILD IT */ .nad-quiz-wrapper { display: flex; flex-direction: column; gap: 10px; width: 100%; } .nad-quiz-hint { background: #fcfcfc; border: 1px solid #f4f4f5; border-radius: 6px; padding: 8px 10px; width: 100%; } .nad-quiz-title { font-size: 0.6rem; font-weight: 800; color: #71717a; text-transform: uppercase; letter-spacing: 0.5px; } .nad-quiz-target-text { font-size: 0.9rem; font-weight: 700; color: #09090b; margin-top: 1px; } .nad-quiz-box { min-height: 70px; background: #fafafa; border: 2px dashed #e4e4e7; border-radius: 10px; padding: 8px; display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start; width: 100%; transition: all 0.2s ease; } .nad-quiz-box.state-error { background: #fff5f5 !important; border-color: #f87171 !important; } .nad-quiz-box.state-success { background: #f0fdf4 !important; border-color: #4ade80 !important; } .nad-quiz-pool { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; min-height: 36px; } .nad-quiz-chip { background: #ffffff; border: 1px solid #e4e4e7; padding: 4px 8px; border-radius: 6px; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03); user-select: none; width: auto; min-width: 44px; } .nad-quiz-chip .czh { font-size: 0.95rem; font-weight: 700; color: #09090b; line-height: 1.1; } .nad-quiz-chip .cpy { font-size: 0.62rem; color: #71717a; margin-top: 1px; white-space: nowrap; } .nad-quiz-actions { display: flex; gap: 6px; align-items: center; margin-top: 2px; } .nad-btn-check { background: #ffe043; color: #09090b; padding: 8px 14px; border-radius: 6px; font-size: 0.8rem; font-weight: 700; border: none; cursor: pointer; } .nad-btn-reset { background: #f4f4f5; color: #52525b; padding: 8px 12px; border-radius: 6px; font-size: 0.8rem; font-weight: 600; border: none; cursor: pointer; } .nad-quiz-feedback { font-size: 0.82rem; font-weight: 600; margin-top: 2px; display: none; } .nad-quiz-feedback.error { color: #dc2626; display: block; } .nad-quiz-feedback.success { color: #16a34a; display: block; } .nad-footer { margin-top: 16px; padding-top: 8px; border-top: 1px solid #f4f4f5; font-size: 0.65rem; font-weight: 800; text-transform: uppercase; color: #a1a1aa; text-align: right; } 民 以食为天 。 The people regard food as their heaven. — Food is the primary necessity of the people. BREAKDOWN MEANING GRAMMAR EXAMPLES BUILD IT 民 mín “the people” 🔊 以食为天 yǐ shí wéi tiān “regard food as heaven” 🔊 A foundational concept in Chinese political and social philosophy, emphasizing that food is the most essential need for the people, and thus the foundation of a stable society. 民 (“THE PEOPLE”) The common populace. In classical Chinese political thought, the well-being of the 民 is the ultimate measure of a ruler’s legitimacy. 以食为天 (“REGARD AS HEAVEN”) To treat food as the highest, most fundamental priority. The phrase underscores that without sustenance, all other pursuits are meaningless. Core Philosophy: This proverb is often cited to argue that governance must first ensure the people’s basic needs (food security) before anything else. It is a timeless reminder of the importance of agriculture and food policy. Classical structure: Subject + 以…为… 民 + 以食为天 [Subject] + [regard food as heaven] This is a classical Chinese construction where the pattern 以…为… means “to regard X as Y” or “to use X as Y”. Here, it literally translates to “The people [regard] food [as] heaven.” The phrase is concise, elegant, and deeply resonant in its simplicity. EXAMPLE 1 · POLICY DISCUSSION 政府 zhèngfǔ • government 必须 bìxū • must 把 bǎ • [object marker] 农业 nóngyè • agriculture 放在 fàngzài • put at 首位 shǒuwèi • top priority , 因为 yīnwèi • because 民以食为天 mín yǐ shí wéi tiān • food is the people’s heaven 。 The government must put agriculture first, because the people regard food as their heaven. EXAMPLE 2 · DAILY WISDOM 无论 wúlùn • no matter 多 duō • how 忙 máng • busy , 也 yě • also 要 yào • need 好好 hǎohǎo • properly 吃饭 chīfàn • eat meals , 民以食为天 mín yǐ shí wéi tiān • food is paramount 。 No matter how busy you are, make sure to eat well — food is the people’s heaven. TARGET SENTENCE 民以食为天。 Check Answer Reset NOT A DICTIONARY // Данные для сборки - 2 смысловых слова const sentenceData = [ { zh: "民", py: "mín · people" }, { zh: "以食为天", py: "yǐ shí wéi tiān · regard food as heaven" } ]; function playAudio(text) { if (!('speechSynthesis' in window)) return; try { window.speechSynthesis.cancel(); const utt = new SpeechSynthesisUtterance(text); utt.lang = 'zh-CN'; utt.rate = 0.9; window.speechSynthesis.speak(utt); } catch (e) {} } function toggleTooltip(el, py) { const text = el.textContent.trim(); playAudio(text); const isActive = el.classList.contains('active'); document.querySelectorAll('.nad-interactive-word').forEach(w => w.classList.remove('active')); if (!isActive) { el.classList.add('active'); } } document.addEventListener('click', function(e) { if (!e.target.closest('.nad-interactive-word')) { document.querySelectorAll('.nad-interactive-word').forEach(w => w.classList.remove('active')); } }); function switchNadTab(evt, tabId) { const card = evt.target.closest('.nad-card'); card.querySelectorAll('.nad-tab-panel').forEach(p => p.classList.remove('active')); card.querySelectorAll('.nad-tab-btn').forEach(b => b.classList.remove('active')); card.querySelector('#' + tabId).classList.add('active'); evt.currentTarget.classList.add('active'); const phraseWrapper = card.querySelector('#nadPhraseWrapper'); if (tabId === 'nad-tab-build') { phraseWrapper.classList.add('hidden'); initNadQuiz(); } else { phraseWrapper.classList.remove('hidden'); } } function initNadQuiz() { const target = document.getElementById('nadQuizTarget'); const pool = document.getElementById('nadQuizPool'); const feedback = document.getElementById('nadQuizFeedback'); if (!target || !pool) return; target.innerHTML = ''; pool.innerHTML = ''; target.className = 'nad-quiz-box'; feedback.className = 'nad-quiz-feedback'; feedback.innerHTML = ''; const shuffled = [...sentenceData].sort(() => Math.random() - 0.5); shuffled.forEach(item => { const chip = document.createElement('div'); chip.className = 'nad-quiz-chip'; chip.setAttribute('data-zh', item.zh); chip.innerHTML = `${item.zh}${item.py}`; chip.onclick = function() { playAudio(item.zh); if (chip.parentElement === pool) target.appendChild(chip); else pool.appendChild(chip); }; pool.appendChild(chip); }); } function checkNadQuiz() { const target = document.getElementById('nadQuizTarget'); const feedback = document.getElementById('nadQuizFeedback'); const userAns = Array.from(target.children).map(c => c.getAttribute('data-zh')).join(''); const correctAns = sentenceData.map(d => d.zh).join(''); if (userAns === correctAns) { target.className = 'nad-quiz-box state-success'; feedback.className = 'nad-quiz-feedback success'; feedback.innerHTML = '✓ Correct! 民 → 以食为天 。'; playAudio('民以食为天'); } else { target.className = 'nad-quiz-box state-error'; feedback.className = 'nad-quiz-feedback error'; feedback.innerHTML = '✕ Not quite. Correct order: 民 → 以食为天 。'; } } 22 🔗 Engage
🔥 Chinese Quotes ⚡ Interactive Chinese quotes breakdown: 事实胜于雄辩 Not a Dictionary · Sentence Card /* Reset */ .nad-card, .nad-card * { box-sizing: border-box !important; margin: 0; padding: 0; } .nad-card { width: 100% !important; max-width: 100% !important; background: #ffffff; padding: 16px 12px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #18181b; } /* 1. HEADER PHRASE */ .nad-phrase-wrapper { display: flex; flex-direction: column; gap: 8px; width: 100%; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px dashed #e4e4e7; } .nad-phrase-wrapper.hidden { display: none !important; } .nad-chinese-sentence { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 4px; width: 100%; } .nad-word { font-size: 1.064rem; font-weight: 700; padding: 3px 6px; border-radius: 6px; line-height: 1.2; display: inline-flex; align-items: center; } .nad-punct { font-size: 1.064rem; font-weight: 700; color: #a1a1aa; padding: 0 1px; } /* Word Colors */ .w-1 { background: #fef08a; color: #854d0e; } .w-2 { background: #e0f2fe; color: #0369a1; } .w-3 { background: #fce7f3; color: #9d174d; } .nad-translation { width: 100%; background: #f4f4f5; color: #3f3f46; font-size: 0.952rem; font-weight: 500; padding: 8px 12px; border-radius: 100px; text-align: left; } /* 2. TABS CONTAINER — ГАРАНТИРОВАННЫЙ СКРОЛЛ */ .nad-tabs-scroll { width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: none; -ms-overflow-style: none; margin-bottom: 14px; padding-bottom: 8px; border-bottom: 1px solid #f4f4f5; } .nad-tabs-scroll::-webkit-scrollbar { display: none; width: 0; height: 0; } .nad-tabs-container { display: flex !important; flex-wrap: nowrap !important; gap: 6px; min-width: max-content; width: 100%; } .nad-tab-btn { background: #f4f4f5; border: none; border-radius: 6px; font-weight: 800; text-transform: uppercase; color: #71717a; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; flex-shrink: 0; padding: 8px 12px; font-size: 0.7rem; white-space: nowrap; touch-action: manipulation; } .nad-tab-btn.active { background: #ffe043; color: #09090b; } @media (min-width: 641px) { .nad-tabs-scroll { overflow-x: visible !important; } .nad-tabs-container { display: flex !important; flex-wrap: wrap !important; gap: 6px; min-width: unset; justify-content: center; } .nad-tab-btn { padding: 8px 12px; font-size: 0.7rem; flex: 1 1 auto; min-width: 60px; text-align: center; justify-content: center; } } @media (max-width: 640px) { .nad-card { padding: 10px 4px !important; } .nad-tabs-scroll { padding-left: 2px; padding-right: 2px; } .nad-tabs-container { gap: 5px; } .nad-tab-btn { padding: 7px 12px; font-size: 0.7rem; flex-shrink: 0; } .nad-highlight-box { padding: 10px 8px; } } /* 3. TAB PANELS */ .nad-tab-panel { display: none; width: 100%; } .nad-tab-panel.active { display: block; } /* BREAKDOWN */ .nad-breakdown-flow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; width: 100%; } .nad-b-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 8px; font-size: 1.064rem; cursor: pointer; user-select: none; } .nad-b-chip .b-zh { font-size: 1.4rem; font-weight: 700; line-height: 1; } .nad-b-chip .b-py { font-size: 0.84rem; background: #ffffff; padding: 2px 6px; border-radius: 100px; font-weight: 600; opacity: 0.9; } .nad-b-chip .b-gl { font-size: 0.918rem; font-weight: 600; } .nad-b-chip .b-audio { font-size: 0.896rem; opacity: 0.4; margin-left: 2px; } /* TEXT CONTENT LAYOUTS */ .nad-text-block { font-size: 1.03rem; line-height: 1.5; color: #27272a; } .nad-highlight-box { background: #fafafa; border: 1px solid #f4f4f5; border-radius: 8px; padding: 12px; margin-bottom: 12px; } .nad-box-title { font-size: 1.064rem; font-weight: 700; color: #09090b; margin-bottom: 4px; } .nad-inline-chip { background: #ffe043; color: #09090b; font-weight: 700; padding: 1px 5px; border-radius: 4px; font-size: 0.952rem; display: inline-flex; align-items: baseline; gap: 4px; } .nad-inline-chip .en-sub { font-size: 0.8rem; font-weight: 500; opacity: 0.75; } /* BUILD IT */ .nad-quiz-wrapper { display: flex; flex-direction: column; gap: 10px; width: 100%; } .nad-quiz-hint { background: #fcfcfc; border: 1px solid #f4f4f5; border-radius: 6px; padding: 8px 10px; width: 100%; } .nad-quiz-title { font-size: 0.672rem; font-weight: 800; color: #71717a; text-transform: uppercase; letter-spacing: 0.5px; } .nad-quiz-target-text { font-size: 1.008rem; font-weight: 700; color: #09090b; margin-top: 1px; } .nad-quiz-box { min-height: 70px; background: #fafafa; border: 2px dashed #e4e4e7; border-radius: 10px; padding: 8px; display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start; width: 100%; transition: all 0.2s ease; } .nad-quiz-box.state-error { background: #fff5f5 !important; border-color: #f87171 !important; } .nad-quiz-box.state-success { background: #f0fdf4 !important; border-color: #4ade80 !important; } .nad-quiz-pool { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; width: 100% !important; min-height: 50px !important; padding: 8px !important; border: 2px solid #e4e4e7 !important; border-radius: 8px !important; background: #f8f8fa !important; margin-top: 4px !important; } .nad-quiz-chip { background: #ffffff; border: 1px solid #e4e4e7; padding: 4px 8px; border-radius: 6px; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,0.03); user-select: none; width: auto; min-width: 44px; } .nad-quiz-chip .czh { font-size: 1.064rem; font-weight: 700; color: #09090b; line-height: 1.1; } .nad-quiz-chip .cpy { font-size: 0.694rem; color: #71717a; margin-top: 1px; white-space: nowrap; } .nad-quiz-actions { display: flex; gap: 6px; align-items: center; margin-top: 2px; } .nad-btn-check { background: #ffe043; color: #09090b; padding: 8px 14px; border-radius: 6px; font-size: 0.896rem; font-weight: 700; border: none; cursor: pointer; } .nad-btn-check:hover { background: #f5d000; } .nad-btn-reset { background: #f4f4f5; color: #52525b; padding: 8px 12px; border-radius: 6px; font-size: 0.896rem; font-weight: 600; border: none; cursor: pointer; } .nad-btn-reset:hover { background: #e8e8ea; } .nad-quiz-feedback { font-size: 0.918rem; font-weight: 600; margin-top: 2px; display: none; } .nad-quiz-feedback.error { color: #dc2626; display: block; } .nad-quiz-feedback.success { color: #16a34a; display: block; } .nad-footer { margin-top: 16px; padding-top: 8px; border-top: 1px solid #f4f4f5; font-size: 0.728rem; font-weight: 800; text-transform: uppercase; color: #a1a1aa; text-align: right; } 事实 胜于 雄辩 。 Facts speak louder than words / Actions speak louder than words. BREAKDOWN MEANING NUANCE GRAMMAR EXAMPLES BUILD IT 事实 shìshí facts / reality 🔊 胜于 shèng yú surpass / outweigh 🔊 雄辩 xióngbiàn eloquence / debate 🔊 This classical idiom encapsulates the idea that objective reality easily trumps eloquent rhetoric or empty arguments: 事实 (FACTS / REALITY) 事实 (shìshí) represents objective facts, concrete evidence, real-world data, and undeniable outcomes. 胜于 雄辩 (SURPASSES ELOQUENT ARGUMENTS) 胜于 (shèng yú) means “is superior to” or “outweighs”, while 雄辩 (xióngbiàn) refers to powerful speech, rhetoric, or persuasive arguing. Core Philosophy: No matter how persuasive or vocal an argument is, one clear fact or piece of evidence instantly resolves the dispute. Proof always overrides talk. Social Tone This is a firm, formal, and decisive idiom. It carries strong weight when ending a debate, shutting down excuses, or highlighting undeniable achievements. It shifts the focus away from subjective opinions directly toward objective proof and measurable outcomes. Classical Comparative Frame: [Concept A] + 胜于 + [Concept B] The character 胜 (shèng) means “to win / surpass”, and 于 (yú) is a classical Chinese preposition equivalent to “than” or “over”. Together, [A] 胜于 [B] means “[A] is better / stronger / more convincing than [B].” Example 不用 búyòng • no need 解释 jiěshì • explain 了 le • [particle] , 事实胜于雄辩 shìshí shèng yú xióngbiàn • facts win 。 No need to explain further, facts speak louder than words. TARGET SENTENCE Facts speak louder than words. Check Answer Reset NOT A DICTIONARY const sentenceData = [ { zh: "事实", py: "shìshí • facts" }, { zh: "胜于", py: "shèng yú • surpass" }, { zh: "雄辩", py: "xióngbiàn • eloquence" } ]; function playAudio(text) { if (!('speechSynthesis' in window)) return; try { window.speechSynthesis.cancel(); const utt = new SpeechSynthesisUtterance(text); utt.lang = 'zh-CN'; utt.rate = 0.9; window.speechSynthesis.speak(utt); } catch (e) {} } function toggleTooltip(el, py) { const char = el.childNodes[0].textContent.trim(); playAudio(char); const isActive = el.classList.contains('active'); document.querySelectorAll('.nad-interactive-word').forEach(w => w.classList.remove('active')); if (!isActive) el.classList.add('active'); } // Закрытие тултипа document.addEventListener('click', function(e) { if (!e.target.closest('.nad-interactive-word')) { document.querySelectorAll('.nad-interactive-word').forEach(w => w.classList.remove('active')); } }); // ⭐ ПЕРЕКЛЮЧЕНИЕ ВКЛАДОК — ЧЕРЕЗ ДЕЛЕГИРОВАНИЕ document.addEventListener('click', function(e) { const btn = e.target.closest('.nad-tab-btn'); if (!btn) return; const card = btn.closest('.nad-card'); if (!card) return; const tabId = btn.getAttribute('data-tab'); if (!tabId) return; card.querySelectorAll('.nad-tab-btn').forEach(b => b.classList.remove('active')); btn.classList.add('active'); card.querySelectorAll('.nad-tab-panel').forEach(p => p.classList.remove('active')); const targetPanel = card.querySelector('#' + tabId); if (targetPanel) { targetPanel.classList.add('active'); } const phraseWrapper = card.querySelector('.nad-phrase-wrapper'); if (tabId === 'nad-tab-build') { if (phraseWrapper) phraseWrapper.classList.add('hidden'); setTimeout(() => { initNadQuiz(card); }, 50); } else { if (phraseWrapper) phraseWrapper.classList.remove('hidden'); } }); function initNadQuiz(card) { if (!card) { card = document.querySelector('.nad-card'); } const target = card.querySelector('#nadQuizTarget'); const pool = card.querySelector('#nadQuizPool'); const feedback = card.querySelector('#nadQuizFeedback'); if (!target || !pool) return; target.innerHTML = ''; pool.innerHTML = ''; target.className = 'nad-quiz-box'; feedback.className = 'nad-quiz-feedback'; feedback.innerHTML = ''; const shuffled = [...sentenceData].sort(() => Math.random() - 0.5); shuffled.forEach((item) => { const chip = document.createElement('div'); chip.className = 'nad-quiz-chip'; chip.setAttribute('data-zh', item.zh); chip.innerHTML = `${item.zh}${item.py}`; chip.onclick = function() { playAudio(item.zh); const parent = this.parentElement; const targetBox = card.querySelector('#nadQuizTarget'); const poolBox = card.querySelector('#nadQuizPool'); if (parent === poolBox) { targetBox.appendChild(this); } else if (parent === targetBox) { poolBox.appendChild(this); } }; pool.appendChild(chip); }); } function checkNadQuiz(btn) { const card = btn.closest('.nad-card'); const target = card.querySelector('#nadQuizTarget'); const feedback = card.querySelector('#nadQuizFeedback'); if (!target) return; const userAns = Array.from(target.children).map(c => c.getAttribute('data-zh')).join(''); const correctAns = sentenceData.map(d => d.zh).join(''); if (userAns === correctAns) { target.className = 'nad-quiz-box state-success'; feedback.className = 'nad-quiz-feedback success'; feedback.innerHTML = '✓ Correct! Perfect phrase sequence.'; playAudio(correctAns); } else { target.className = 'nad-quiz-box state-error'; feedback.className = 'nad-quiz-feedback error'; feedback.innerHTML = '✕ Incorrect order. Try rearranging the word blocks!'; } } function resetQuiz(btn) { const card = btn.closest('.nad-card'); initNadQuiz(card); } // ⭐ ДЕЛЕГИРОВАНИЕ ДЛЯ КНОПОК BUILD IT document.addEventListener('click', function(e) { const target = e.target; if (target.classList.contains('nad-btn-check')) { checkNadQuiz(target); return; } if (target.classList.contains('nad-btn-reset')) { resetQuiz(target); return; } }); // ⭐ ПРИ ЗАГРУЗКЕ document.addEventListener('DOMContentLoaded', function() { const card = document.querySelector('.nad-card'); const buildPanel = card ? card.querySelector('#nad-tab-build') : null; if (buildPanel && buildPanel.classList.contains('active')) { setTimeout(() => { initNadQuiz(card); }, 100); } }); 18 🔗 Engage