🔥 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; } .w-5 { background: #ffedd5; color: #c2410c; } .w-6 { background: #f3e8ff; 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(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; } 人过 留名 , 雁过 留声 。 As a person leaves a name behind after passing, a wild goose leaves a cry in its wake; actions leave a lasting legacy. BREAKDOWN MEANING GRAMMAR EXAMPLES BUILD IT 人过 rénguò “person passes” 🔊 留名 liúmíng “leave a name” 🔊 雁过 yànguò “goose passes” 🔊 留声 liúshēng “leave a sound” 🔊 A traditional Chinese proverb emphasizing that every individual leaves an enduring reputation or impact behind them, just like migrating geese leave a trace of their sound. 人过留名,雁过留声 (“A PERSON LEAVES A NAME, A GOOSE LEAVES A CRY”) Human actions and character persist in memory long after we pass (人过留名 rén guò liú míng / leave a name), parallel to nature (雁过留声 yàn guò liú shēng / leave a sound). Core Philosophy: Accountability, legacy, and the indelible mark one leaves on the world. Parallel Clause Structure: [Phrase 1: 人过留名] , [Phrase 2: 雁过留声] A balanced, symmetrical structure common in Chinese proverbs and folk sayings: 人过 (rénguò) + 留名 (liúmíng) pairs a human actor with the permanent trace of a reputation. 雁过 (yànguò) + 留声 (liúshēng) mirrors this exact dynamic using a natural phenomenon (geese in flight). The compound phrasing divides neatly into two balanced halves of four characters each. The rhythmic parallelism makes the proverb intuitive, poetic, and rhetorically powerful. EXAMPLE 1 · SPEAKING OF REPUTATION 做人 zuòrén • behave 要 yào • must 正直 zhèngzhí • upright , 人过留名 proverb • reputation remains 。 One must conduct themselves with integrity; a person’s reputation outlives them. EXAMPLE 2 · EMPHASIZING LEGACY 我们 wǒmen • we 得 děi • must 做事 zuòshì • take action 负责 fùzé • accountable , 人过留名,雁过留声 proverb • actions leave marks 。 We must take responsibility for our actions; after all, a person leaves a name just as a goose leaves a sound. TARGET SENTENCE As a person leaves a name behind, a wild goose leaves a sound. Check Answer Reset NOT A DICTIONARY const sentenceData = [ { zh: "人过", py: "rénguò • person passes" }, { zh: "留名", py: "liúmíng • leave a name" }, { zh: "雁过", py: "yànguò • goose passes" }, { zh: "留声", py: "liúshēng • leave a sound" } ]; 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 proverb 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!'; } } 43 🔗 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; } .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; } .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; 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; } 如 坐 针 毡 As if sitting on pins and needles; feeling extremely uncomfortable, nervous, or uneasy. BREAKDOWN MEANING BUILD IT 如 rú as if / like 🔊 坐 zuò sit 🔊 针 zhēn needle 🔊 毡 zhān felt mat 🔊 An idiom used to describe someone who is deeply uncomfortable, anxious, or tense in a given situation, making them unable to sit still or relax. 如坐针毡 (Rú zuò zhēn zhān) Literally translating to “as if sitting on a mat made of needles and pins,” this phrase paints a clear physical picture. Imagine trying to sit down on a surface poked full of sharp metal needles—you would immediately want to stand up or squirm because every second causes sharp irritation. Metaphorically, people use this when they are trapped in an awkward social environment, waiting for severe test results, or sitting through a harsh reprimand from a boss. TARGET SENTENCE As if sitting on pins and needles (extremely uneasy). Check Answer Reset NOT A DICTIONARY const sentenceData = [ { zh: "如", py: "rú • as if" }, { zh: "坐", py: "zuò • sit" }, { zh: "针", py: "zhēn • needle" }, { zh: "毡", py: "zhān • felt mat" } ]; 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!'; } } 12 🔗 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; } .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 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
🔥 Chinese Quotes ⚡ Interactive Chinese saying explained: 大智若愚。 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; } 大智 若愚 。 Great wisdom appears foolish. — The wisest people often seem simple or naive. BREAKDOWN MEANING BUILD IT 大智 dà zhì great wisdom / 大智慧 🔊 若愚 ruò yú seems foolish / appears naive / 好像愚蠢 🔊 大智若愚 is a classic Chinese saying that means “Great wisdom appears foolish.” It describes people who are truly wise but do not show off their intelligence — instead, they seem simple, humble, or even naive. 大智 (“GREAT WISDOM”) 大 (great / big) + 智 (wisdom / intelligence). This is not ordinary cleverness. It is deep, profound wisdom — the kind that comes from experience, reflection, and understanding of life. 若愚 (“SEEMS FOOLISH”) 若 (like / as if) + 愚 (foolish / stupid). This means that on the surface, the person appears simple, unassuming, or even slow. They don’t try to look smart. Where does it come from? This saying comes from ancient Chinese philosophy, especially Taoism (道家) and the teachings of Laozi (老子). In the Dao De Jing (道德经), Laozi wrote: “The greatest wisdom seems like stupidity” (大智若愚). The idea is that true wisdom does not need to show off. In fact, those who constantly try to prove how smart they are often lack real depth. It is also connected to the Confucian ideal of humility and the idea that a wise person does not boast. What does it mean in everyday life? This saying is about a very specific kind of person: They don’t need to prove their intelligence. They are comfortable not being the center of attention. They listen more than they speak. They understand that you learn more by listening. They don’t argue for the sake of winning. They choose their battles wisely. They know when to stay silent. Sometimes silence is wiser than words. They see the bigger picture. They don’t get caught up in small details. Who is an example of this? An old master who speaks few words but everyone respects. A quiet colleague who never brags but always has the right answer. A leader who doesn’t shout orders but inspires through calm confidence. Forrest Gump — a character who seems slow but lives with deep wisdom. The paradox: The wisest person is often the one who does not look wise. They don’t wear their intelligence on their sleeve. They are not flashy or boastful. And that is exactly what makes them truly wise. Core Philosophy: Real wisdom is humble. It does not need to impress others. It is patient, quiet, and deep. The people who seem the most simple are often the ones who understand the most. 📝 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: "dà zhì" }, { zh: "若愚", py: "ruò yú" } ]; 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!'; } } 48 🔗 Engage