🔥 Chinese Quotes ⚡ Interactive Breakdown of: 有理走遍天下,无理寸步难行 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: #ffedd5; color: #c2410c; } .w-6 { background: #f3e8ff; color: #7e22ce; } .w-7 { background: #ccfbf1; color: #0f766e; } .w-8 { background: #ffe4e6; color: #be123c; } .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(5, 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, .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: 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-highlight-box.yellow-border { border-left: 4px solid #ffe043; } .nad-box-title { font-size: 1.064rem; font-weight: 700; color: #09090b; margin-bottom: 4px; } .nad-box-subtitle { font-size: 0.84rem; 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.952rem; } .nad-ctx-card { background: #fafafa; border: 1px solid #f4f4f5; padding: 12px; border-radius: 8px; margin-bottom: 10px; } .nad-ctx-label { font-size: 0.728rem; font-weight: 800; color: #a1a1aa; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; } .nad-ctx-cn { font-size: 1.288rem; font-weight: 700; color: #09090b; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; } .nad-ctx-en { font-size: 0.952rem; 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.806rem; 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.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; } 有理 走遍 天下 , 无理 寸步 难行 。 With justice/reason, you can go anywhere; without it, you can’t move a single step. Truth and fairness prevail everywhere. BREAKDOWN MEANING GRAMMAR EXAMPLES BUILD IT 有理 yǒulǐ “reasonable / have reason” 🔊 走遍 zǒubiàn “travel all over” 🔊 天下 tiānxià “the world / all under heaven” 🔊 无理 wúlǐ “unreasonable / without reason” 🔊 寸步 cùnbù “an inch step” 🔊 难行 nánxíng “hard to move / difficult to proceed” 🔊 A foundational Chinese proverb expressing absolute faith in justice, logic, and moral correctness over arbitrary power or deceit. 有理走遍天下 (“WITH REASON, TRAVEL THE WORLD”) If your cause is just and you stand on truth (有理), you can walk everywhere (走遍天下) with confidence and success without fear of being overthrown. 无理寸步难行 (“WITHOUT REASON, CAN’T MOVE AN INCH”) If you are in the wrong or lack justification (无理), you will find it hard to move even a single step (寸步难行) in society. Core Philosophy: Truth is universal; fairness provides ultimate freedom, while dishonesty or injustice leads to a dead end. Parallel Antithesis Structure (对偶句): [Condition A] + [Action/Result A] ; [Condition B] + [Action/Result B] Composed of two balanced clauses matched word-for-word in grammatical category: 有理 (Verb-Object: “have reason”) vs 无理 (Verb-Object: “no reason”) 走遍 (Verb-Direction: “travel all over”) vs 寸步 (Noun Phrase: “one inch step”) 天下 (Noun: “the world”) vs 难行 (Verb-Adjective: “difficult to move”) This rhythmic contrast creates a strong rhetorical impact, making moral lessons easy to remember and quote. EXAMPLE 1 · STANDING FIRM FOR JUSTICE 只要 zhǐyào • as long as 我们 wǒmen • we 事情 shìqing • matter 做 zuò • do 对 duì • right , 有理走遍天下 yǒulǐ zǒubiàn tiānxià • truth goes everywhere 。 As long as we do what is right, justice will prevail wherever we go. EXAMPLE 2 · DISPUTES AND ARGUMENTS 不要 bùyào • do not 害怕 hàipà • be afraid of 辩论 biànlùn • debate , 正是 zhèngshì • it is 有理走遍天下,无理寸步难行 proverb • truth wins out 。 Don’t be afraid of debate; remember that reason goes everywhere, while unreasonableness gets you nowhere. TARGET SENTENCE 有理走遍天下,无理寸步难行。 Check Answer Reset NOT A DICTIONARY // Данные для сборки - теперь слова целиком const sentenceData = [ { zh: "有理", py: "yǒulǐ · have reason" }, { zh: "走遍", py: "zǒubiàn · travel all over" }, { zh: "天下", py: "tiānxià · the world" }, { zh: "无理", py: "wúlǐ · without reason" }, { zh: "寸步", py: "cùnbù · an inch step" }, { zh: "难行", py: "nánxíng · hard to move" } ]; 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! Perfect proverb sequence: 有理 → 走遍 → 天下 , 无理 → 寸步 → 难行 。'; playAudio('有理走遍天下无理寸步难行'); } else { target.className = 'nad-quiz-box state-error'; feedback.className = 'nad-quiz-feedback error'; feedback.innerHTML = '✕ Incorrect order. Correct sequence: 有理 → 走遍 → 天下 , 无理 → 寸步 → 难行 。'; } } 45 🔗 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: 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 */ @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.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.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; } .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-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; } 万事俱备 , 只欠东风 。 Everything is ready except the east wind. — All is prepared except for the final critical element. BREAKDOWN MEANING GRAMMAR EXAMPLES BUILD IT 万事俱备 wàn shì jù bèi everything is ready / 一切准备就绪 🔊 只欠东风 zhǐ qiàn dōng fēng only lacking the east wind / 只缺东风 🔊 A famous Chinese proverb originating from the Battle of Red Cliffs (208 AD), where the allied forces of Liu Bei and Sun Quan needed a favorable east wind to launch their fire attack against Cao Cao’s fleet. 万事俱备 (“EVERYTHING IS READY”) 万事 (all things) 俱 (all) 备 (prepared). All preparations have been made; everything is in place. 只欠东风 (“ONLY LACKING THE EAST WIND”) 只 (only) 欠 (lack) 东风 (east wind). The only thing missing is the final, crucial element — often something external and beyond one’s control. Core Philosophy: Success often depends on a single, critical factor that may be outside our control. Patience and timing are essential. Classical structure: Condition + Exception [万事俱备] , [只欠东风] The phrase consists of two four-character clauses. The first establishes a complete state (万事俱备 — everything is ready), and the second introduces the sole exception (只欠东风 — only lacking the east wind). The structure creates tension between near-completion and the final obstacle, making it highly memorable and widely applicable. EXAMPLE 1 · PROJECT MANAGEMENT 项目 xiàngmù • project 已经 yǐjīng • already 准备 zhǔnbèi • prepared 好 hǎo • done 了 le • [completion] , 但 dàn • but 还 hái • still 等 děng • wait for 领导 lǐngdǎo • leader 批准 pīzhǔn • approval , 万事俱备,只欠东风 wàn shì jù bèi, zhǐ qiàn dōng fēng • all set, just waiting for approval 。 The project is all prepared, but we’re still waiting for the leader’s approval — everything is ready except the east wind. EXAMPLE 2 · WEATHER AND PLANS 明天 míngtiān • tomorrow 的 de • [possessive] 野餐 yěcān • picnic 都 dōu • all 准备 zhǔnbèi • prepared 好 hǎo • done 了 le • [completion] , 就 jiù • just 看 kàn • depends on 天气 tiānqì • weather 了 le • [particle] , 万事俱备,只欠东风 wàn shì jù bèi, zhǐ qiàn dōng fēng • all set, just need good weather 。 Tomorrow’s picnic is all prepared — it just depends on the weather. Everything is ready except the east wind. 📝 BUILD THE SENTENCE Click the words below in the correct order to form the proverb. Check Answer Reset NOT A DICTIONARY function playAudio(text) { if (!('speechSynthesis' in window)) return; try { window.speechSynthesis.cancel(); var utt = new SpeechSynthesisUtterance(text); utt.lang = 'zh-CN'; utt.rate = 0.9; window.speechSynthesis.speak(utt); } catch (e) {} } function toggleTooltip(el, py) { var char = el.childNodes[0].textContent.trim(); playAudio(char); var card = el.closest('.nad-card'); var isActive = el.classList.contains('active'); card.querySelectorAll('.nad-interactive-word').forEach(function(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(function(w) { w.classList.remove('active'); }); } }); function switchNadTab(evt, tabClass) { var card = evt.target.closest('.nad-card'); card.querySelectorAll('.nad-tab-panel').forEach(function(p) { p.classList.remove('active'); }); card.querySelectorAll('.nad-tab-btn').forEach(function(b) { b.classList.remove('active'); }); card.querySelector('.' + tabClass).classList.add('active'); evt.currentTarget.classList.add('active'); var phraseWrapper = card.querySelector('.nad-phrase-wrapper'); if (tabClass === 'nad-tab-build') { phraseWrapper.classList.add('hidden'); setTimeout(function() { loadWords(card); }, 50); } else { phraseWrapper.classList.remove('hidden'); } } function loadWords(card) { var pool = card.querySelector('.nad-quiz-pool'); var target = card.querySelector('.nad-quiz-box'); var feedback = card.querySelector('.nad-quiz-feedback'); if (!pool || !card.getAttribute('data-sentence')) return; var sentenceData = JSON.parse(card.getAttribute('data-sentence')); target.innerHTML = ''; pool.innerHTML = ''; target.className = 'nad-quiz-box'; feedback.className = 'nad-quiz-feedback'; feedback.innerHTML = ''; var shuffled = sentenceData.slice(); for (var i = shuffled.length - 1; i > 0; i--) { var j = Math.floor(Math.random() * (i + 1)); var temp = shuffled[i]; shuffled[i] = shuffled[j]; shuffled[j] = temp; } for (var k = 0; k < shuffled.length; k++) { var item = shuffled[k]; var chip = document.createElement('div'); chip.className = 'nad-quiz-chip'; chip.setAttribute('data-zh', item.zh); chip.innerHTML = '' + item.zh + '' + item.py + ''; chip.onclick = function(e) { e.stopPropagation(); var zh = this.getAttribute('data-zh'); playAudio(zh); var parentCard = this.closest('.nad-card'); var targetBox = parentCard.querySelector('.nad-quiz-box'); var poolBox = parentCard.querySelector('.nad-quiz-pool'); if (this.parentElement === poolBox) { targetBox.appendChild(this); } else { poolBox.appendChild(this); } }; pool.appendChild(chip); } } function resetQuiz(btn) { var card = btn.closest('.nad-card'); loadWords(card); } function checkNadQuiz(btn) { var card = btn.closest('.nad-card'); var target = card.querySelector('.nad-quiz-box'); var feedback = card.querySelector('.nad-quiz-feedback'); var sentenceData = JSON.parse(card.getAttribute('data-sentence')); if (!target) return; var userAns = ''; var children = target.children; for (var i = 0; i < children.length; i++) { userAns += children[i].getAttribute('data-zh'); } var correctAns = ''; for (var j = 0; j < sentenceData.length; j++) { correctAns += sentenceData[j].zh; } if (userAns === correctAns) { target.className = 'nad-quiz-box state-success'; feedback.className = 'nad-quiz-feedback success'; feedback.innerHTML = '✓ Correct! 万事俱备 → 只欠东风 🎉'; playAudio(correctAns); } else { target.className = 'nad-quiz-box state-error'; feedback.className = 'nad-quiz-feedback error'; feedback.innerHTML = '✕ Not quite. Try again!'; } } 16 🔗 Engage
🔥 Chinese Quotes ⚡ Interactive Distance tests a horse’s stamina; time reveals a person’s true character. 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; } .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; } /* ⭐ ТАБЫ — РАБОТАЮТ ВЕЗДЕ */ .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: 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; } /* MEANING */ .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 !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; } .nad-quiz-chip { background: #ffffff; border: 1px solid #d4d4d8; padding: 6px 14px; border-radius: 8px; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,0.06); user-select: none; width: auto; min-width: 70px; transition: all 0.15s ease; } .nad-quiz-chip:hover { background: #f4f4f5; border-color: #a1a1aa; transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0,0,0,0.08); } .nad-quiz-chip .czh { font-size: 1.15rem; font-weight: 700; color: #09090b; line-height: 1.1; } .nad-quiz-chip .cpy { font-size: 0.7rem; color: #71717a; margin-top: 2px; white-space: nowrap; } .nad-quiz-actions { display: flex; gap: 8px; align-items: center; margin-top: 4px; } .nad-btn-check { background: #ffe043; color: #09090b; padding: 8px 16px; border-radius: 6px; font-size: 0.8rem; font-weight: 700; border: none; cursor: pointer; } .nad-btn-check:hover { background: #f5d000; } .nad-btn-reset { background: #f4f4f5; color: #52525b; padding: 8px 14px; border-radius: 6px; font-size: 0.8rem; font-weight: 600; border: none; cursor: pointer; } .nad-btn-reset:hover { background: #e8e8ea; } .nad-quiz-feedback { font-size: 0.85rem; font-weight: 600; margin-top: 4px; display: none; padding: 6px 12px; border-radius: 6px; } .nad-quiz-feedback.error { color: #dc2626; display: block; background: #fef2f2; } .nad-quiz-feedback.success { color: #16a34a; display: block; background: #f0fdf4; } .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; } 身体 力行 。 To practice what one preaches; to lead by example; to personally do what you advocate. BREAKDOWN MEANING BUILD IT 身体 shēn tǐ body / oneself / personally / 身体 / 亲自 🔊 力行 lì xíng to practice / to carry out / 实践 / 努力去做 🔊 身体力行 is a Chinese saying that means “to practice what you preach” or “to lead by example.” It describes someone who doesn’t just talk about ideas — they do them with their own body and actions. 身体 (“BODY / PERSONALLY”) 身 (body) and 体 (body / form). Together, they mean “one’s own body” or “personally.” It emphasizes that the action is done by the person themselves, not by someone else. 力行 (“TO PRACTICE / TO DO”) 力 (effort / strength) + 行 (to do / to walk). Together, they mean “to put effort into doing” — to actively carry out an idea or principle. Where does it come from? This saying has its roots in classical Chinese philosophy, particularly in Confucianism. Confucius (孔子) taught that a true gentleman must not only understand what is right — he must act on it. Talk without action is empty. The phrase became a way to praise people who live according to their values. Core Philosophy: True character is not shown by what you say, but by what you do. The most convincing person is the one who lives by their own principles. 📝 BUILD THE SENTENCE Click the words below in the correct order to form the saying. Check Answer Reset NOT A DICTIONARY var sentenceData = [ { zh: "身体", py: "shēn tǐ" }, { zh: "力行", py: "lì xíng" } ]; function playAudio(text) { if (!('speechSynthesis' in window)) return; try { window.speechSynthesis.cancel(); var utt = new SpeechSynthesisUtterance(text); utt.lang = 'zh-CN'; utt.rate = 0.9; window.speechSynthesis.speak(utt); } catch (e) {} } // ⭐ ПЕРЕКЛЮЧЕНИЕ ВКЛАДОК — ЧЕРЕЗ ДЕЛЕГИРОВАНИЕ document.addEventListener('click', function(e) { var btn = e.target.closest('.nad-tab-btn'); if (!btn) return; var card = btn.closest('.nad-card'); if (!card) return; var tabId = btn.getAttribute('data-tab'); if (!tabId) return; // Переключаем кнопки var buttons = card.querySelectorAll('.nad-tab-btn'); buttons.forEach(function(b) { b.classList.remove('active'); }); btn.classList.add('active'); // Переключаем панели var panels = card.querySelectorAll('.nad-tab-panel'); panels.forEach(function(p) { p.classList.remove('active'); }); var targetPanel = card.querySelector('#' + tabId); if (targetPanel) { targetPanel.classList.add('active'); } var phraseWrapper = card.querySelector('#nadPhraseWrapper'); if (tabId === 'nad-tab-build') { phraseWrapper.classList.add('hidden'); setTimeout(function() { loadWords(card); }, 50); } else { phraseWrapper.classList.remove('hidden'); } }); // ⭐ ЗАГРУЗКА СЛОВ function loadWords(card) { if (!card) return; var pool = card.querySelector('.nad-quiz-pool'); var target = card.querySelector('.nad-quiz-box'); var feedback = card.querySelector('.nad-quiz-feedback'); if (!pool || !target) { console.error('❌ BUILD IT элементы не найдены!'); return; } target.innerHTML = ''; pool.innerHTML = ''; target.className = 'nad-quiz-box'; feedback.className = 'nad-quiz-feedback'; feedback.innerHTML = ''; var shuffled = sentenceData.slice(); for (var i = shuffled.length - 1; i > 0; i--) { var j = Math.floor(Math.random() * (i + 1)); var temp = shuffled[i]; shuffled[i] = shuffled[j]; shuffled[j] = temp; } for (var k = 0; k < shuffled.length; k++) { var item = shuffled[k]; var chip = document.createElement('div'); chip.className = 'nad-quiz-chip'; chip.setAttribute('data-zh', item.zh); chip.innerHTML = '' + item.zh + '' + item.py + ''; chip.onclick = function(e) { e.stopPropagation(); var zh = this.getAttribute('data-zh'); playAudio(zh); var parentCard = this.closest('.nad-card'); if (!parentCard) return; var targetBox = parentCard.querySelector('.nad-quiz-box'); var poolBox = parentCard.querySelector('.nad-quiz-pool'); var parent = this.parentElement; if (parent === poolBox) { targetBox.appendChild(this); } else if (parent === targetBox) { poolBox.appendChild(this); } }; pool.appendChild(chip); } } // ⭐ ПРОВЕРКА function checkNadQuiz(btn) { var card = btn.closest('.nad-card'); if (!card) return; var target = card.querySelector('.nad-quiz-box'); var feedback = card.querySelector('.nad-quiz-feedback'); if (!target || !feedback) return; var userAns = ''; var children = target.children; for (var i = 0; i < children.length; i++) { userAns += children[i].getAttribute('data-zh'); } var correctAns = ''; for (var j = 0; j < sentenceData.length; j++) { correctAns += sentenceData[j].zh; } 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!'; } } // ⭐ СБРОС function resetQuiz(btn) { var card = btn.closest('.nad-card'); if (!card) return; loadWords(card); } // ⭐ ДЕЛЕГИРОВАНИЕ ДЛЯ КНОПОК BUILD IT document.addEventListener('click', function(e) { var 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() { var cards = document.querySelectorAll('.nad-card'); cards.forEach(function(card) { var buildPanel = card.querySelector('#nad-tab-build'); if (buildPanel && buildPanel.classList.contains('active')) { setTimeout(function() { loadWords(card); }, 100); } }); }); 23 🔗 Engage
🔥 Chinese Quotes ⚡ Interactive Chinese phrasese 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(5, 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, .nad-ctx-card { 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-highlight-box.yellow-border { border-left: 4px solid #ffe043; } .nad-box-title { font-size: 1.064rem; font-weight: 700; color: #09090b; margin-bottom: 4px; } .nad-box-subtitle { font-size: 0.84rem; 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.952rem; display: inline-flex; align-items: baseline; gap: 4px; } .nad-inline-chip .en-sub { font-size: 0.8rem; font-weight: 500; opacity: 0.75; } .nad-ctx-card { background: #fafafa; border: 1px solid #f4f4f5; padding: 12px; border-radius: 8px; margin-bottom: 10px; } .nad-ctx-label { font-size: 0.728rem; font-weight: 800; color: #a1a1aa; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; } .nad-ctx-cn { font-size: 1.288rem; font-weight: 700; color: #09090b; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; } .nad-ctx-en { font-size: 0.952rem; 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; } .nad-word-tooltip { position: absolute; bottom: 110%; left: 50%; transform: translateX(-50%); background: #18181b; color: #ffffff; font-size: 0.806rem; 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.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; } 哑巴 吃 饺子 , 心里有数 Like a mute eating dumplings—knowing it well in one’s heart without needing to speak. BREAKDOWN MEANING GRAMMAR EXAMPLES BUILD IT 哑巴 yǎba mute / deaf-mute 🔊 吃 chī eat 🔊 饺子 jiǎozi dumplings 🔊 心里有数 xīnli yǒu shù know very well inside 🔊 A popular Chinese allegorical saying (歇后语 – xiēhòuyǔ) used to describe a situation where someone is completely clear about a situation, a plan, or the truth of a matter, even though they choose to remain silent or cannot explain it out loud. 哑巴吃饺子,心里有数 (“A MUTE EATING DUMPLINGS, KNOWING IT WELL INSIDE”) The image pictures a mute person eating dumplings (哑巴吃饺子 yǎba chī jiǎozi). Because they cannot speak, they cannot tell anyone how many dumplings they ate or how good they taste. However, they ate them themselves, so they are entirely clear about the reality of the situation (心里有数 xīnli yǒu shù / fully aware). In daily life, it describes someone who keeps a low profile, hides their thoughts, or says nothing while being fully cognizant of what is going on behind the scenes. Allegorical Riddle Structure (歇后语): [Setup Scenario: 哑巴吃饺子] , [Implicit Meaning: 心里有数] This belongs to a unique class of Chinese phrasing split into two parts: The First Half (哑巴吃饺子) paints a vivid, humorous physical scenario that acts as a riddle. The Second Half (心里有数) delivers the actual meaning or punchline, relying on the metaphor of the first part. In casual conversation, people often just drop the first half (哑巴吃饺子 yǎba chī jiǎozi), and listeners instantly understand the implied outcome. The structure relies entirely on cultural wit and shared situational imagery. EXAMPLE 1 · KEEPING QUIET ABOUT A PLAN 他 tā • he 虽然 suīrán • although 不说话 bù shuōhuà • remains silent , 但是 dànshì • but 哑巴吃饺子,心里有数 idiom • fully aware inside 。 Although he doesn’t say anything, he is like a mute eating dumplings—he knows everything clearly in his heart. EXAMPLE 2 · AWARENESS OF A SITUATION 你 nǐ • you 别 bié • don’t 担心 dānxīn • worry , 我们 wǒmen • we 心里有数 phrase • have a clear idea 。 Don’t worry, we have a clear grasp of what’s happening. TARGET SENTENCE Like a mute eating dumplings—knowing it well in one’s heart. Check Answer Reset NOT A DICTIONARY const sentenceData = [ { zh: "哑巴", py: "yǎba • mute" }, { zh: "吃", py: "chī • eat" }, { zh: "饺子", py: "jiǎozi • dumplings" }, { zh: "心里有数", py: "xīnli yǒu shù • know well inside" } ]; 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')); } }); 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!'; } } 33 🔗 Engage
🔥 Chinese Quotes ⚡ Snippet 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; } .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; } @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; } } @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; } } .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: 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; } /* MEANING */ .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 !important; flex-wrap: wrap !important; gap: 6px !important; width: 100% !important; min-height: 50px !important; padding: 8px !important; border: 2px solid #e4e4e7; border-radius: 8px; background: #f8f8fa; } .nad-quiz-chip { background: #ffffff; border: 1px solid #d4d4d8; padding: 6px 14px; border-radius: 8px; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,0.06); user-select: none; width: auto; min-width: 70px; transition: all 0.15s ease; } .nad-quiz-chip:hover { background: #f4f4f5; border-color: #a1a1aa; transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0,0,0,0.08); } .nad-quiz-chip .czh { font-size: 1.15rem; font-weight: 700; color: #09090b; line-height: 1.1; } .nad-quiz-chip .cpy { font-size: 0.7rem; color: #71717a; margin-top: 2px; white-space: nowrap; } .nad-quiz-actions { display: flex; gap: 8px; align-items: center; margin-top: 4px; } .nad-btn-check { background: #ffe043; color: #09090b; padding: 8px 16px; border-radius: 6px; font-size: 0.8rem; font-weight: 700; border: none; cursor: pointer; } .nad-btn-check:hover { background: #f5d000; } .nad-btn-reset { background: #f4f4f5; color: #52525b; padding: 8px 14px; border-radius: 6px; font-size: 0.8rem; font-weight: 600; border: none; cursor: pointer; } .nad-btn-reset:hover { background: #e8e8ea; } .nad-quiz-feedback { font-size: 0.85rem; font-weight: 600; margin-top: 4px; display: none; padding: 6px 12px; border-radius: 6px; } .nad-quiz-feedback.error { color: #dc2626; display: block; background: #fef2f2; } .nad-quiz-feedback.success { color: #16a34a; display: block; background: #f0fdf4; } .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; } 身体 力行 。 To practice what one preaches; to lead by example; to personally do what you advocate. BREAKDOWN MEANING BUILD IT 身体 shēn tǐ body / oneself / personally / 身体 / 亲自 🔊 力行 lì xíng to practice / to carry out / 实践 / 努力去做 🔊 身体力行 is a Chinese saying that means “to practice what you preach” or “to lead by example.” It describes someone who doesn’t just talk about ideas — they do them with their own body and actions. 身体 (“BODY / PERSONALLY”) 身 (body) and 体 (body / form). Together, they mean “one’s own body” or “personally.” It emphasizes that the action is done by the person themselves, not by someone else. 力行 (“TO PRACTICE / TO DO”) 力 (effort / strength) + 行 (to do / to walk). Together, they mean “to put effort into doing” — to actively carry out an idea or principle. Where does it come from? This saying has its roots in classical Chinese philosophy, particularly in Confucianism. Confucius (孔子) taught that a true gentleman must not only understand what is right — he must act on it. Talk without action is empty. The phrase became a way to praise people who live according to their values. Core Philosophy: True character is not shown by what you say, but by what you do. The most convincing person is the one who lives by their own principles. 📝 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: "shēn tǐ" }, { zh: "力行", py: "lì xíng" } ]; let isQuizInitialized = false; 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'); // Инициализируем при первом переключении на вкладку if (!isQuizInitialized) { setTimeout(initNadQuiz, 50); } else { // Обновляем, если уже инициализировано setTimeout(initNadQuiz, 50); } } 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) { console.error('BUILD IT elements not found!'); 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(e) { e.stopPropagation(); playAudio(item.zh); const parent = this.parentElement; const targetBox = document.getElementById('nadQuizTarget'); const poolBox = document.getElementById('nadQuizPool'); if (parent === poolBox) { targetBox.appendChild(this); } else if (parent === targetBox) { poolBox.appendChild(this); } }; pool.appendChild(chip); }); isQuizInitialized = true; } function checkNadQuiz() { const target = document.getElementById('nadQuizTarget'); const feedback = document.getElementById('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! 身体 → 力行 🎉'; playAudio('身体力行'); } else { target.className = 'nad-quiz-box state-error'; feedback.className = 'nad-quiz-feedback error'; feedback.innerHTML = '✕ Not quite. Try again!'; } } // Инициализация при загрузке страницы — ТОЛЬКО если вкладка BUILD IT активна document.addEventListener('DOMContentLoaded', function() { // Проверяем, активна ли вкладка BUILD IT при загрузке const buildPanel = document.getElementById('nad-tab-build'); if (buildPanel && buildPanel.classList.contains('active')) { setTimeout(initNadQuiz, 100); } }); 53 🔗 Engage