🔥 French through Memes 🐸 Meme Learn French With Memes: Comment Je Voyais Un Bâton 23 🔗 Engage ✨ Breakdown
🔥 French through Memes 🐸 Meme Learn French With Memes: L’Aluminium Du Nutella 23 🔗 Engage ✨ Breakdown
📝 Post у3 /* ===== SCOPED STYLES — everything nested under .ggl-gagarin, nothing touches the theme ===== */ .ggl-gagarin{ --ggl-bg:#0b0f1e; --ggl-bg-grad:#111a33; --ggl-panel:#151d36; --ggl-panel-2:#1b2544; --ggl-line:#2a3560; --ggl-amber:#ff8a3d; --ggl-amber-dim:#7a4a24; --ggl-ion:#4fd6c9; --ggl-paper:#f3ede1; --ggl-paper-dim:#c9c2ae; --ggl-muted:#8a93b8; --ggl-radius:14px; display:block; box-sizing:border-box; background: radial-gradient(ellipse at 20% -10%, var(--ggl-bg-grad) 0%, var(--ggl-bg) 55%), var(--ggl-bg); font-family:'Manrope', system-ui, sans-serif; color:var(--ggl-paper); -webkit-font-smoothing:antialiased; border-radius:18px; isolation:isolate; } .ggl-gagarin *{ box-sizing:border-box; } .ggl-gagarin p, .ggl-gagarin h1, .ggl-gagarin div{ margin:0; padding:0; } .ggl-gagarin .ggl-wrap{ max-width:520px; margin:0 auto; padding:16px 12px 32px; position:relative; font-size:15px; line-height:1.5; } .ggl-gagarin .ggl-stars{ position:absolute; inset:0; pointer-events:none; z-index:0; background-image: radial-gradient(1.5px 1.5px at 10% 8%, #ffffff55 0%, transparent 60%), radial-gradient(1px 1px at 80% 4%, #ffffff44 0%, transparent 60%), radial-gradient(1.5px 1.5px at 65% 15%, #ffffff33 0%, transparent 60%), radial-gradient(1px 1px at 30% 20%, #ffffff3a 0%, transparent 60%); background-repeat:no-repeat; height:220px; } .ggl-gagarin .ggl-header{ position:relative; z-index:1; text-align:center; padding:6px 6px 16px; } .ggl-gagarin .ggl-callsign{ font-family:'Space Mono', monospace; font-size:11px; letter-spacing:.18em; color:var(--ggl-ion); text-transform:uppercase; display:flex; align-items:center; justify-content:center; gap:8px; margin:0 0 10px; } .ggl-gagarin .ggl-callsign::before, .ggl-gagarin .ggl-callsign::after{ content:''; height:1px; width:22px; background:var(--ggl-line); } .ggl-gagarin .ggl-dot{width:6px;height:6px;border-radius:50%;background:var(--ggl-amber);box-shadow:0 0 8px var(--ggl-amber);display:inline-block;animation:gglPulse 1.8s ease-in-out infinite;} @keyframes gglPulse{0%,100%{opacity:1;}50%{opacity:.35;}} .ggl-gagarin h1.ggl-title{ font-family:'Playfair Display', Georgia, serif; font-style:italic; font-weight:700; font-size:25px; line-height:1.15; margin:0 0 6px; background:linear-gradient(90deg,#fff,#ffd8b3 60%,var(--ggl-amber)); -webkit-background-clip:text; background-clip:text; color:transparent; } .ggl-gagarin .ggl-sub{ font-size:12.5px; color:var(--ggl-muted); line-height:1.5; max-width:380px; margin:0 auto; } .ggl-gagarin .ggl-legend{ display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin-top:12px; font-family:'Space Mono', monospace; font-size:10px; color:var(--ggl-muted); } .ggl-gagarin .ggl-legend span{display:flex; align-items:center; gap:5px;} .ggl-gagarin .ggl-legend b{color:var(--ggl-amber); font-weight:700;} .ggl-gagarin .ggl-legend em{color:var(--ggl-ion); font-style:normal; font-weight:700;} .ggl-gagarin .ggl-feed{position:relative; z-index:1; display:flex; flex-direction:column; gap:8px;} .ggl-gagarin .ggl-card{ background:linear-gradient(180deg, var(--ggl-panel), var(--ggl-panel-2)); border:1px solid var(--ggl-line); border-radius:var(--ggl-radius); overflow:visible; transition:border-color .2s ease; } .ggl-gagarin .ggl-card.ggl-open{border-color:var(--ggl-amber-dim);} .ggl-gagarin .ggl-card-top{ display:flex; align-items:flex-start; gap:10px; padding:12px 12px 12px 10px; cursor:pointer; -webkit-tap-highlight-color:transparent; } .ggl-gagarin .ggl-idx{ flex:0 0 auto; font-family:'Space Mono', monospace; font-size:10px; color:var(--ggl-bg); background:var(--ggl-amber); border-radius:6px; padding:3px 6px; min-width:26px; text-align:center; margin-top:2px; font-weight:700; } .ggl-gagarin .ggl-ru{ font-family:'Playfair Display', Georgia, serif; font-size:16.5px; line-height:1.7; color:var(--ggl-paper); flex:1; } .ggl-gagarin .ggl-chev{ flex:0 0 auto; width:20px; height:20px; margin-top:3px; color:var(--ggl-muted); transition:transform .25s ease; } .ggl-gagarin .ggl-card.ggl-open .ggl-chev{transform:rotate(180deg); color:var(--ggl-amber);} .ggl-gagarin .ggl-card-bottom{ max-height:0; overflow:hidden; transition:max-height .28s ease; background:#0e1530; border-top:1px dashed var(--ggl-line); } .ggl-gagarin .ggl-card.ggl-open .ggl-card-bottom{ max-height:400px; } .ggl-gagarin .ggl-en{ padding:10px 14px 14px 44px; font-size:13.5px; line-height:1.55; color:var(--ggl-paper-dim); font-style:italic; } .ggl-gagarin .ggl-en::before{ content:'EN →'; display:block; font-family:'Space Mono', monospace; font-style:normal; font-size:9.5px; letter-spacing:.14em; color:var(--ggl-muted); margin-bottom:5px; } /* interactive word */ .ggl-gagarin .ggl-w{ position:relative; cursor:pointer; border-bottom:1.5px dotted var(--ggl-ion); padding-bottom:1px; transition:color .15s ease; } .ggl-gagarin .ggl-w:hover, .ggl-gagarin .ggl-w:focus-visible{ color:var(--ggl-amber); border-bottom-color:var(--ggl-amber); outline:none; } .ggl-gagarin .ggl-w.ggl-speaking{ color:var(--ggl-ion) !important; border-bottom-color:var(--ggl-ion) !important; } .ggl-gagarin .ggl-w:hover::after, .ggl-gagarin .ggl-w:focus-visible::after{ content:attr(data-en); position:absolute; bottom:calc(100% + 7px); left:50%; transform:translateX(-50%); background:var(--ggl-amber); color:#1a0f04; padding:5px 9px; border-radius:7px; font-family:'Manrope', sans-serif; font-style:normal; font-size:11.5px; font-weight:700; white-space:normal; max-width:180px; width:max-content; text-align:center; line-height:1.3; z-index:30; box-shadow:0 6px 16px rgba(0,0,0,.35); pointer-events:none; } .ggl-gagarin .ggl-w:hover::before, .ggl-gagarin .ggl-w:focus-visible::before{ content:''; position:absolute; bottom:calc(100% + 2px); left:50%; transform:translateX(-50%); border:5px solid transparent; border-top-color:var(--ggl-amber); z-index:30; pointer-events:none; } .ggl-gagarin .ggl-dash{color:var(--ggl-muted); padding:0 1px;} .ggl-gagarin .ggl-footer{ position:relative; z-index:1; text-align:center; margin-top:18px; font-family:'Space Mono', monospace; font-size:10px; color:var(--ggl-muted); letter-spacing:.06em; line-height:1.8; } .ggl-gagarin .ggl-footer .ggl-sig{color:var(--ggl-amber);} @media (max-width:400px){ .ggl-gagarin h1.ggl-title{font-size:21px;} .ggl-gagarin .ggl-ru{font-size:15.5px;} } ТРАНСМИССИЯ · БАЙКОНУР · 10.04.1961 Письмо с орбиты Письмо Юрия Гагарина жене и дочерям за два дня до полёта. Тапни на карточку — откроется перевод. Наведи на слово — увидишь его перевод. Нажми на слово — услышишь произношение. ́ ударение слово = наведи → перевод слово = нажми → звук 🔊 12 апреля 1961 — первый полёт человека в космос Ю. А. Гагарин · подготовлено для изучения языка (function(){ // tokens: [word, gloss] — gloss === null means plain/non-interactive (e.g. a dash) const cards = [ { t:[["Здра́вствуйте,","hello (formal)"],["мои́","my"],["ми́лые,","dear, sweet"],["горячо́","warmly"],["люби́мые","beloved"],["Ва́лечка,","Valechka (wife)"],["Ле́ночка","Lenochka (daughter)"],["и","and"],["Га́лочка!","Galochka (daughter)"]], en:"Hello, my dear, beloved Valechka, Lenochka and Galochka!" }, { t:[["Реши́л","I decided"],["вот","here, so"],["вам","to you"],["написа́ть","to write"],["не́сколько","a few"],["строк,","lines"],["что́бы","so that"],["подели́ться","to share"],["с","with"],["ва́ми","you"],["и","and"],["раздели́ть","to share/divide"],["вме́сте","together"],["ту","that (f.)"],["ра́дость","joy"],["и","and"],["сча́стье,","happiness"],["кото́рые","which"],["мне","to me"],["вы́пали","fell to, happened"],["сего́дня.","today"]], en:"I decided to write you a few lines, to share with you the joy and happiness that came my way today." }, { t:[["Сего́дня","today"],["прави́тельственная","governmental"],["коми́ссия","commission"],["реши́ла","decided"],["посла́ть","to send"],["меня́","me"],["в","into"],["ко́смос","space"],["пе́рвым.","first"]], en:"Today the government commission decided to send me into space first." }, { t:[["Зна́ешь,","you know"],["дорога́я","dear"],["Валю́ша,","Valyusha (name)"],["как","how"],["я","I"],["рад,","glad"],["хочу́,","I want"],["что́бы","that"],["и","also"],["вы","you"],["бы́ли","were"],["ра́ды","glad"],["вме́сте","together"],["со","with"],["мной.","me"],["Просто́му","ordinary"],["челове́ку","to a person"],["дове́рили","was entrusted"],["таку́ю","such"],["большу́ю","great"],["госуда́рственную","state (adj.)"],["зада́чу","task"],["—",null],["проложи́ть","to pave/lay"],["пе́рвую","first"],["доро́гу","road"],["в","into"],["ко́смос!","space"],["Мо́жно","one can"],["ли","(question word)"],["мечта́ть","to dream"],["о","of"],["бо́льшем?","more"]], en:"You know, dear Valyusha, how happy I am, and I want you to be happy along with me. An ordinary man has been trusted with such a great task for the state — to lay the first road into space! Could one dream of more?" }, { t:[["Ведь","after all"],["э́то","this"],["—",null],["исто́рия,","history"],["э́то","this"],["—",null],["но́вая","new"],["э́ра!","era"],["Че́рез","in"],["день","a day"],["я","I"],["до́лжен","must"],["стартова́ть.","launch"]], en:"This is history, this is a new era! In a day, I must launch." }, { t:[["Вы","you"],["в","at"],["э́то","this"],["вре́мя","time"],["бу́дете","will be"],["занима́ться","occupied with"],["свои́ми","your own"],["дела́ми.","affairs"],["О́чень","very"],["больша́я","big"],["зада́ча","task"],["легла́","fell"],["на","on"],["мои́","my"],["пле́чи.","shoulders"],["Хоте́лось","I'd like"],["бы","(cond.)"],["пе́ред","before"],["э́тим","this"],["немно́го","a little"],["побы́ть","spend time"],["с","with"],["ва́ми,","you"],["поговори́ть","to talk"],["с","with"],["тобо́й.","you"],["Но,","but"],["увы́,","alas"],["вы","you"],["далеко́.","far away"],["Тем","(w/ 'не менее')"],["не","not"],["ме́нее","less"],["я","I"],["всегда́","always"],["чу́вствую","feel"],["вас","you"],["ря́дом","near"],["с","with"],["собо́й.","myself"]], en:"At that time you'll be going about your own business. A huge task has fallen on my shoulders. I wish I could spend a little time with you before this, talk with you. But alas, you're far away. Still, I always feel you close to me." }, { t:[["В","in"],["те́хнику","technology"],["я","I"],["ве́рю","believe"],["по́лностью.","completely"],["Она́","it"],["подвести́","let down"],["не","not"],["должна́.","should"],["Но","but"],["быва́ет","it happens"],["ведь,","after all"],["что","that"],["на","on"],["ро́вном","flat"],["ме́сте","ground"],["челове́к","a person"],["па́дает","falls"],["и","and"],["лома́ет","breaks"],["себе́","for himself"],["ше́ю.","neck"],["Здесь","here"],["то́же","also"],["мо́жет","might"],["что-нибу́дь","something"],["случи́ться.","happen"],["Но","but"],["сам","myself"],["я","I"],["пока́","for now"],["в","in"],["э́то","this"],["не","not"],["ве́рю.","believe"]], en:"I trust the technology completely. It shouldn't let me down. But it happens that a person falls on flat ground and breaks his neck. Something could happen here too. But I myself don't believe it will, for now." }, { t:[["Ну,","well"],["а","and"],["е́сли","if"],["что","something"],["случи́тся,","happens"],["то","then"],["прошу́","I ask"],["вас","you"],["и","and"],["в","in"],["пе́рвую","first"],["о́чередь","place"],["тебя́,","you"],["Валю́ша,","Valyusha"],["не","not"],["убива́ться","torment yourself"],["с","with"],["го́ря.","grief"],["Ведь","after all"],["жизнь","life"],["есть","is"],["жизнь,","life"],["и","and"],["никто́","no one"],["не","not"],["гаранти́рован,","guaranteed"],["что","that"],["его́","him"],["за́втра","tomorrow"],["не","not"],["задави́т","will run over"],["маши́на.","a car"]], en:"But if something does happen, I ask you — and you especially, Valyusha — not to grieve yourself to death. Life is life, and no one is guaranteed a car won't run him over tomorrow." }, { t:[["Береги́,","take care of"],["пожа́луйста,","please"],["на́ших","our"],["де́вочек,","girls"],["люби́","love"],["их,","them"],["как","as"],["люблю́","I love"],["я.","I"],["Вы́расти","raise (make them)"],["из","out of"],["них,","them"],["пожа́луйста,","please"],["не","not"],["белору́чек,","spoiled girls"],["не","not"],["ма́менькиных","mama's"],["до́чек,","daughters"],["а","but"],["настоя́щих","real"],["люде́й,","people"],["кото́рым","for whom"],["уха́бы","bumps"],["жи́зни","of life"],["бы́ли","would be"],["бы","(cond.)"],["не","not"],["стра́шны.","frightening"],["Вы́расти","raise"],["люде́й,","people"],["досто́йных","worthy"],["но́вого","of new"],["о́бщества","society"],["—",null],["коммуни́зма.","communism"],["В","in"],["э́том","this"],["тебе́","you"],["помо́жет","will help"],["госуда́рство.","the state"]], en:"Please take care of our girls, love them as I love them. Raise them not as pampered or spoiled daughters, but as real people who won't fear life's bumps. Raise people worthy of the new society — communism. The state will help you with this." }, { t:[["Ну,","well"],["а","and"],["свою́","your own"],["ли́чную","personal"],["жизнь","life"],["устра́ивай,","arrange"],["как","as"],["подска́жет","will suggest"],["тебе́","to you"],["со́весть,","conscience"],["как","as"],["посчита́ешь","you see fit"],["ну́жным.","necessary"],["Никаки́х","no"],["обяза́тельств","obligations"],["я","I"],["на","on"],["тебя́","you"],["не","not"],["накла́дываю,","impose"],["да","and"],["и","also"],["не","not"],["впра́ве","have the right"],["э́то","this"],["де́лать.","to do"]], en:"As for your personal life, arrange it as your conscience tells you, as you see fit. I place no obligations on you, nor do I have the right to." }, { t:[["Что́-то","somewhat"],["сли́шком","too"],["тра́урное","gloomy"],["письмо́","letter"],["получа́ется.","is turning out"],["Сам","myself"],["я","I"],["в","in"],["э́то","this"],["не","not"],["ве́рю!!!","believe"],["Наде́юсь,","I hope"],["что","that"],["э́то","this"],["письмо́","letter"],["ты","you"],["никогда́","never"],["не","not"],["уви́дишь,","will see"],["и","and"],["мне","to me"],["бу́дет","will be"],["сты́дно","ashamed"],["пе́ред","before"],["сами́м","myself"],["собо́й","myself"],["за","for"],["э́ту","this"],["мимолётную","fleeting"],["сла́бость.","weakness"]], en:"This letter is turning out too gloomy. I don't believe any of it myself!!! I hope you'll never see this letter, and I'll feel ashamed of myself for this passing weakness." }, { t:[["Но,","but"],["е́сли","if"],["что́-то","something"],["случи́тся,","happens"],["ты","you"],["должна́","must"],["знать","know"],["всё","everything"],["до","to"],["конца́.","the end"],["Я","I"],["пока́","so far"],["жил","have lived"],["че́стно,","honestly"],["правди́во,","truthfully"],["с","with"],["по́льзой","benefit"],["для","for"],["люде́й,","people"],["хотя́","although"],["она́","it"],["была́","was"],["и","even"],["небольша́я.","small"],["Когда́-то,","once"],["ещё","still"],["в","in"],["де́тстве,","childhood"],["прочита́л","I read"],["слова́","the words"],["В.","(initial) V."],["П.","(initial) P."],["Чка́лова:","of Chkalov (test pilot)"],["«Е́сли","if"],["быть,","to be"],["то","then"],["быть","be"],["пе́рвым».","first"],["Вот","so"],["я","I"],["и","also"],["стара́юсь","try"],["им","that"],["быть","to be"],["и","and"],["бу́ду","will be"],["до","until"],["конца́.","the end"]], en:"But if something does happen, you should know everything. So far I've lived honestly and truthfully, of some use to people, even if that use was small. Once, back in childhood, I read the words of test pilot Chkalov: 'If you're going to be, be first.' That's what I'm trying to be, and I will be, to the end." }, { t:[["Хочу́,","I want"],["Ва́лечка,","Valechka"],["посвяти́ть","to dedicate"],["э́тот","this"],["полёт","flight"],["лю́дям","to the people"],["но́вого","of new"],["о́бщества,","society"],["коммуни́зма,","communism"],["в","into"],["кото́рое","which"],["мы","we"],["уже́","already"],["вступа́ем,","are entering"],["на́шей","our"],["вели́кой","great"],["Ро́дине,","Motherland"],["на́шей","our"],["нау́ке.","science"]], en:"I want to dedicate this flight, Valechka, to the people of the new society, of communism, which we are already entering — to our great Motherland, to our science." }, { t:[["Наде́юсь,","I hope"],["что","that"],["че́рез","in"],["не́сколько","a few"],["дней","days"],["мы","we"],["опя́ть","again"],["бу́дем","will be"],["вме́сте,","together"],["бу́дем","will be"],["счастли́вы.","happy"],["Ва́лечка,","Valechka"],["ты,","you"],["пожа́луйста,","please"],["не","not"],["забыва́й","forget"],["мои́х","my"],["роди́телей,","parents"],["е́сли","if"],["бу́дет","there is"],["возмо́жность,","possibility"],["то","then"],["помоги́","help"],["в","in"],["чём-нибудь.","something"],["Переда́й","pass along"],["им","to them"],["от","from"],["меня́","me"],["большо́й","big"],["приве́т,","greetings"],["и","and"],["пусть","let"],["простя́т","forgive"],["меня́","me"],["за","for"],["то,","that"],["что","that"],["они́","they"],["об","about"],["э́том","this"],["ничего́","nothing"],["не","not"],["зна́ли,","knew"],["да","and"],["им","to them"],["не","not"],["поло́жено","was allowed"],["бы́ло","was"],["знать.","to know"]], en:"I hope that in a few days we'll be together again, and happy. Valechka, please don't forget my parents, help them if you can. Give them my warm regards, and let them forgive me for not telling them anything — I simply wasn't allowed to." }, { t:[["Ну","well"],["вот,","so"],["ка́жется,","it seems"],["и","and"],["всё.","that's all"],["До","until"],["свида́ния,","goodbye"],["мои́","my"],["родны́е.","dear ones"],["Кре́пко-на́крепко","tightly, firmly"],["вас","you"],["обнима́ю","I hug"],["и","and"],["целу́ю,","I kiss"],["с","with"],["приве́том","regards"],["ваш","your"],["па́па","papa"],["и","and"],["Ю́ра.","Yura"]], en:"Well, that's about it, I think. Goodbye, my dear ones. I hug and kiss you tightly, with love — your papa and Yura." } ]; function cleanForSpeech(word){ return word .replace(/\u0301/g,'') // strip stress mark .replace(/[«»"',.!?:;—]/g,'') // strip punctuation .trim(); } let ruVoice = null; function pickVoice(){ const voices = window.speechSynthesis ? window.speechSynthesis.getVoices() : []; ruVoice = voices.find(v => v.lang && v.lang.toLowerCase().startsWith('ru')) || null; } if (window.speechSynthesis){ pickVoice(); window.speechSynthesis.onvoiceschanged = pickVoice; } function speak(text, el){ if (!window.speechSynthesis) return; window.speechSynthesis.cancel(); const u = new SpeechSynthesisUtterance(text); u.lang = 'ru-RU'; if (ruVoice) u.voice = ruVoice; u.rate = 0.85; if (el){ el.classList.add('ggl-speaking'); u.onend = () => el.classList.remove('ggl-speaking'); u.onerror = () => el.classList.remove('ggl-speaking'); } window.speechSynthesis.speak(u); } const feed = document.getElementById('gglFeed'); cards.forEach((card, i) => { const el = document.createElement('div'); el.className = 'ggl-card'; const top = document.createElement('div'); top.className = 'ggl-card-top'; const idx = document.createElement('div'); idx.className = 'ggl-idx'; idx.textContent = String(i+1).padStart(2,'0'); const ru = document.createElement('div'); ru.className = 'ggl-ru'; card.t.forEach(([word, gloss], j) => { if (gloss === null){ const span = document.createElement('span'); span.className = 'ggl-dash'; span.textContent = word; ru.appendChild(span); } else { const span = document.createElement('span'); span.className = 'ggl-w'; span.textContent = word; span.setAttribute('data-en', gloss); span.setAttribute('tabindex', '0'); span.addEventListener('click', (ev) => { ev.stopPropagation(); speak(cleanForSpeech(word), span); }); ru.appendChild(span); } if (j el.classList.toggle('ggl-open')); el.appendChild(top); el.appendChild(bottom); feed.appendChild(el); }); })(); 23 🔗 Engage More Less
🔥 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; } .w-5 { background: #f3e8ff; color: #6b21a8; } .w-6 { background: #fee2e2; color: #991b1b; } .nad-translation { width: 100%; background: #f4f4f5; color: #3f3f46; font-size: 0.85rem; font-weight: 500; padding: 8px 12px; border-radius: 100px; text-align: left; } /* 2. TABS CONTAINER */ .nad-tabs-container { width: 100%; margin-bottom: 14px; padding-bottom: 8px; border-bottom: 1px solid #f4f4f5; } .nad-tab-btn { background: #f4f4f5; border: none; border-radius: 6px; font-weight: 800; text-transform: uppercase; color: #71717a; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .nad-tab-btn.active { background: #ffe043; color: #09090b; } /* DESKTOP Grid */ @media (min-width: 641px) { .nad-tabs-container { display: grid !important; grid-template-columns: repeat(5, 1fr); gap: 5px; } .nad-tab-btn { padding: 10px 4px; font-size: 0.72rem; letter-spacing: -0.2px; text-align: center; display: flex; align-items: center; justify-content: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } /* MOBILE Scroll */ @media (max-width: 640px) { .nad-card { padding: 10px 4px !important; } .nad-tabs-container { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; gap: 5px; scrollbar-width: none; padding-left: 2px; padding-right: 2px; } .nad-tabs-container::-webkit-scrollbar { display: none; } .nad-tab-btn { padding: 7px 10px; font-size: 0.7rem; white-space: nowrap !important; flex-shrink: 0 !important; touch-action: pan-x; } .nad-highlight-box, .nad-ctx-card { padding: 10px 8px; } } /* 3. TAB PANELS */ .nad-tab-panel { display: none; width: 100%; } .nad-tab-panel.active { display: block; } /* BREAKDOWN: Flow Grid */ .nad-breakdown-flow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; width: 100%; } .nad-b-chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 8px; font-size: 0.95rem; cursor: pointer; user-select: none; } .nad-b-chip .b-zh { font-size: 1.25rem; font-weight: 700; line-height: 1; } .nad-b-chip .b-py { font-size: 0.75rem; background: #ffffff; padding: 2px 6px; border-radius: 100px; font-weight: 600; opacity: 0.9; } .nad-b-chip .b-gl { font-size: 0.82rem; font-weight: 600; } .nad-b-chip .b-audio { font-size: 0.8rem; opacity: 0.4; margin-left: 2px; } /* TEXT CONTENT LAYOUTS */ .nad-text-block { font-size: 0.92rem; line-height: 1.5; color: #27272a; } .nad-highlight-box { background: #fafafa; border: 1px solid #f4f4f5; border-radius: 8px; padding: 12px; margin-bottom: 12px; } .nad-highlight-box.yellow-border { border-left: 4px solid #ffe043; } .nad-box-title { font-size: 0.95rem; font-weight: 700; color: #09090b; margin-bottom: 4px; } .nad-box-subtitle { font-size: 0.75rem; font-weight: 700; color: #71717a; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; } .nad-inline-chip { background: #ffe043; color: #09090b; font-weight: 700; padding: 1px 5px; border-radius: 4px; font-size: 0.85rem; } .nad-ctx-card { background: #fafafa; border: 1px solid #f4f4f5; padding: 12px; border-radius: 8px; margin-bottom: 10px; } .nad-ctx-label { font-size: 0.65rem; font-weight: 800; color: #a1a1aa; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; } .nad-ctx-cn { font-size: 1.15rem; font-weight: 700; color: #09090b; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; } .nad-ctx-en { font-size: 0.85rem; color: #52525b; margin-top: 8px; } /* Interactive Context Words & Tooltips */ .nad-interactive-word { position: relative; cursor: pointer; padding: 2px 4px; border-radius: 4px; transition: background 0.15s ease; display: inline-flex; align-items: center; } .nad-interactive-word:hover { background: #f4f4f5; } .nad-interactive-word.nad-highlight { background: #ffe043; } /* Tooltip styling */ .nad-word-tooltip { position: absolute; bottom: 110%; left: 50%; transform: translateX(-50%); background: #18181b; color: #ffffff; font-size: 0.72rem; font-weight: 500; padding: 4px 8px; border-radius: 6px; white-space: nowrap; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 0.15s ease, transform 0.15s ease; z-index: 10; } .nad-word-tooltip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border-width: 4px; border-style: solid; border-color: #18181b transparent transparent transparent; } .nad-interactive-word.active .nad-word-tooltip { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(-2px); } /* BUILD IT */ .nad-quiz-wrapper { display: flex; flex-direction: column; gap: 10px; width: 100%; } .nad-quiz-hint { background: #fcfcfc; border: 1px solid #f4f4f5; border-radius: 6px; padding: 8px 10px; width: 100%; } .nad-quiz-title { font-size: 0.6rem; font-weight: 800; color: #71717a; text-transform: uppercase; letter-spacing: 0.5px; } .nad-quiz-target-text { font-size: 0.9rem; font-weight: 700; color: #09090b; margin-top: 1px; } .nad-quiz-box { min-height: 70px; background: #fafafa; border: 2px dashed #e4e4e7; border-radius: 10px; padding: 8px; display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start; width: 100%; transition: all 0.2s ease; } .nad-quiz-box.state-error { background: #fff5f5 !important; border-color: #f87171 !important; } .nad-quiz-box.state-success { background: #f0fdf4 !important; border-color: #4ade80 !important; } .nad-quiz-pool { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; min-height: 36px; } .nad-quiz-chip { background: #ffffff; border: 1px solid #e4e4e7; padding: 4px 8px; border-radius: 6px; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03); user-select: none; width: auto; min-width: 44px; } .nad-quiz-chip .czh { font-size: 0.95rem; font-weight: 700; color: #09090b; line-height: 1.1; } .nad-quiz-chip .cpy { font-size: 0.62rem; color: #71717a; margin-top: 1px; white-space: nowrap; } .nad-quiz-actions { display: flex; gap: 6px; align-items: center; margin-top: 2px; } .nad-btn-check { background: #ffe043; color: #09090b; padding: 8px 14px; border-radius: 6px; font-size: 0.8rem; font-weight: 700; border: none; cursor: pointer; } .nad-btn-reset { background: #f4f4f5; color: #52525b; padding: 8px 12px; border-radius: 6px; font-size: 0.8rem; font-weight: 600; border: none; cursor: pointer; } .nad-quiz-feedback { font-size: 0.82rem; font-weight: 600; margin-top: 2px; display: none; } .nad-quiz-feedback.error { color: #dc2626; display: block; } .nad-quiz-feedback.success { color: #16a34a; display: block; } .nad-footer { margin-top: 16px; padding-top: 8px; border-top: 1px solid #f4f4f5; font-size: 0.65rem; font-weight: 800; text-transform: uppercase; color: #a1a1aa; text-align: right; } 当局者 迷 ， 旁观者 清 。 The players are confused, the onlookers are clear. — Bystanders see more of the game. BREAKDOWN MEANING GRAMMAR EXAMPLES BUILD IT 当局者 dāng jú zhě “player / one involved” 🔊 迷 mí “confused / lost” 🔊 旁观者 páng guān zhě “onlooker / bystander” 🔊 清 qīng “clear / lucid” 🔊 A classic Chinese proverb often used to remind us that those not emotionally or personally invested in a situation often see it more clearly. 当局者 (“THE PLAYER”) The person involved 当局者 in the situation. They are 迷 — confused, lost, or unable to see the whole picture. 旁观者 (“THE ONLOOKER”) The person standing aside and watching 旁观者. This observer is 清 — clear-headed and objective, because they are not caught up in personal stakes. Core Philosophy: Stepping back from a problem allows for clearer judgment. Often, we need an outside perspective to see the truth. Parallel structure · Subject + State [A (player)] + [迷 (confused)] , [B (observer)] + [清 (clear)] This is a balanced, two-part proverb. The first half 当局者迷 sets up the problem (involvement leads to confusion), and the second half 旁观者清 offers the solution (distance brings clarity). It uses the nominalizing particle 者 to turn verbs/nouns into “the one who…”, creating a clear contrast between the two roles. EXAMPLE 1 · RELATIONSHIP ADVICE 你 nǐ • you 太 tài • too 伤心 shāngxīn • sad ， 当局者迷 dāngjú zhě mí • involved and confused ， 听 tīng • listen 我 wǒ • me 的 de • [possessive] 建议 jiànyì • suggestion 。 You are too sad about it — players are confused, onlookers see clear. Listen to my advice. EXAMPLE 2 · PROJECT / WORK 我们 wǒmen • we 可能 kěnéng • maybe 太 tài • too 直接 zhíjiē • directly involved ， 旁观者清 pángguān zhě qīng • outsiders see clearly ， 请 qǐng • please 外来 wàilái • external 专家 zhuānjiā • expert 看看 kànkan • look 。 We might be too close to this project — onlookers see clearly. Let’s bring in an outside expert to evaluate. TARGET SENTENCE 当局者迷，旁观者清。 Check Answer Reset NOT A DICTIONARY // Обновленные данные для сборки - слова целиком const sentenceData = [ { zh: "当局者", py: "dāng jú zhě · player" }, { zh: "迷", py: "mí · confused" }, { zh: "旁观者", py: "páng guān zhě · onlooker" }, { zh: "清", py: "qīng · clear" } ]; 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 order: 当局者 → 迷 ， 旁观者 → 清 。'; playAudio('当局者迷旁观者清'); } else { target.className = 'nad-quiz-box state-error'; feedback.className = 'nad-quiz-feedback error'; feedback.innerHTML = '✕ Not quite. The correct order is: 当局者 → 迷 , 旁观者 → 清 .'; } } 23 🔗 Engage
🔥 Chinese Quotes ⚡ Snippet Chinese quotes: 良药苦口。 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.82rem; font-weight: 600; } .nad-b-chip .b-audio { font-size: 0.8rem; opacity: 0.4; margin-left: 2px; } /* TEXT CONTENT LAYOUTS */ .nad-text-block { font-size: 0.92rem; line-height: 1.5; color: #27272a; } .nad-highlight-box { background: #fafafa; border: 1px solid #f4f4f5; border-radius: 8px; padding: 12px; margin-bottom: 12px; } .nad-highlight-box.yellow-border { border-left: 4px solid #ffe043; } .nad-box-title { font-size: 0.95rem; font-weight: 700; color: #09090b; margin-bottom: 4px; } .nad-box-subtitle { font-size: 0.75rem; font-weight: 700; color: #71717a; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; } .nad-inline-chip { background: #ffe043; color: #09090b; font-weight: 700; padding: 1px 5px; border-radius: 4px; font-size: 0.85rem; } .nad-ctx-card { background: #fafafa; border: 1px solid #f4f4f5; padding: 12px; border-radius: 8px; margin-bottom: 10px; } .nad-ctx-label { font-size: 0.65rem; font-weight: 800; color: #a1a1aa; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; } .nad-ctx-cn { font-size: 1.15rem; font-weight: 700; color: #09090b; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; } .nad-ctx-en { font-size: 0.85rem; color: #52525b; margin-top: 8px; } /* Interactive Context Words & Tooltips */ .nad-interactive-word { position: relative; cursor: pointer; padding: 2px 4px; border-radius: 4px; transition: background 0.15s ease; display: inline-flex; align-items: center; } .nad-interactive-word:hover { background: #f4f4f5; } .nad-interactive-word.nad-highlight { background: #ffe043; } /* Tooltip styling */ .nad-word-tooltip { position: absolute; bottom: 110%; left: 50%; transform: translateX(-50%); background: #18181b; color: #ffffff; font-size: 0.72rem; font-weight: 500; padding: 4px 8px; border-radius: 6px; white-space: nowrap; box-shadow: 0 4px 10px rgba(0,0,0,0.15); pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 0.15s ease, transform 0.15s ease; z-index: 10; } .nad-word-tooltip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border-width: 4px; border-style: solid; border-color: #18181b transparent transparent transparent; } .nad-interactive-word.active .nad-word-tooltip { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(-2px); } /* BUILD IT */ .nad-quiz-wrapper { display: flex; flex-direction: column; gap: 10px; width: 100%; } .nad-quiz-hint { background: #fcfcfc; border: 1px solid #f4f4f5; border-radius: 6px; padding: 8px 10px; width: 100%; } .nad-quiz-title { font-size: 0.6rem; font-weight: 800; color: #71717a; text-transform: uppercase; letter-spacing: 0.5px; } .nad-quiz-target-text { font-size: 0.9rem; font-weight: 700; color: #09090b; margin-top: 1px; } .nad-quiz-box { min-height: 70px; background: #fafafa; border: 2px dashed #e4e4e7; border-radius: 10px; padding: 8px; display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start; width: 100%; transition: all 0.2s ease; } .nad-quiz-box.state-error { background: #fff5f5 !important; border-color: #f87171 !important; } .nad-quiz-box.state-success { background: #f0fdf4 !important; border-color: #4ade80 !important; } .nad-quiz-pool { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; min-height: 36px; } .nad-quiz-chip { background: #ffffff; border: 1px solid #e4e4e7; padding: 4px 8px; border-radius: 6px; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,0.03); user-select: none; width: auto; min-width: 44px; } .nad-quiz-chip .czh { font-size: 0.95rem; font-weight: 700; color: #09090b; line-height: 1.1; } .nad-quiz-chip .cpy { font-size: 0.62rem; color: #71717a; margin-top: 1px; white-space: nowrap; } .nad-quiz-actions { display: flex; gap: 6px; align-items: center; margin-top: 2px; } .nad-btn-check { background: #ffe043; color: #09090b; padding: 8px 14px; border-radius: 6px; font-size: 0.8rem; font-weight: 700; border: none; cursor: pointer; } .nad-btn-reset { background: #f4f4f5; color: #52525b; padding: 8px 12px; border-radius: 6px; font-size: 0.8rem; font-weight: 600; border: none; cursor: pointer; } .nad-quiz-feedback { font-size: 0.82rem; font-weight: 600; margin-top: 2px; display: none; } .nad-quiz-feedback.error { color: #dc2626; display: block; } .nad-quiz-feedback.success { color: #16a34a; display: block; } .nad-footer { margin-top: 16px; padding-top: 8px; border-top: 1px solid #f4f4f5; font-size: 0.65rem; font-weight: 800; text-transform: uppercase; color: #a1a1aa; text-align: right; } 良 药 苦 口 。 Good medicine tastes bitter; honest advice is hard to swallow; true words are harsh to the ear. BREAKDOWN MEANING GRAMMAR EXAMPLES BUILD IT 良 liáng “good / fine” 🔊 药 yào “medicine / remedy” 🔊 苦 kǔ “bitter / painful” 🔊 口 kǒu “mouth / taste” 🔊 Dating back to historical texts like the Han Feizi and Records of the Grand Historian, this proverb uses a medical reality to convey a social truth: 良药 (“GOOD MEDICINE”) The effective cure. High-quality remedies (良) or medical treatments (药) designed to heal the body. 苦口 (“BITTER TO THE MOUTH”) The unpleasant experience. They taste bitter (苦) in the mouth (口), reflecting how constructive criticism or candid feedback often feels uncomfortable to receive. Core Philosophy: Just as bitter medicine cures illness, harsh or critical advice is usually what helps a person improve. Subject-Adjective / State Formula: [Noun Phrase A] + [State/Adjective B] A direct four-character parallel structure divided evenly into two halves: 良药 (good medicine) acting as the subject, followed by 苦口 (bitter-tasting) describing its state. Often paired symmetrically with 忠言逆耳 (“honest advice jars the ears”) in classical and modern prose. EXAMPLE 1 · RECEIVING CRITICISM 虽然 suīrán • although 这些 zhèxiē • these 批评 pīpíng • criticism 很 hěn • very 直言 zhíyán • blunt words ， 但是 dànshì • but 良药苦口 liángyào kǔkǒu • bitter medicine cures 。 Although these criticisms are harsh to hear, good medicine tastes bitter and honest feedback helps us grow. EXAMPLE 2 · MENTORSHIP / ADVICE 老师 lǎoshī • teacher 的 de • [possessive] 教诲 jiàohuì • instruction 正为 zhèngwéi • truly is 良药苦口 liángyào kǔkǒu • hard advice ， 旨在 zhǐzài • aims to 帮助 bāngzhù • help 你 nǐ • you 。 The teacher’s strict guidance is like bitter medicine; it may sting, but it is meant to help you succeed. TARGET SENTENCE Good medicine tastes bitter; honest advice is hard to swallow. Check Answer Reset NOT A DICTIONARY const sentenceData = [ { zh: "良", py: "liáng • good/fine" }, { zh: "药", py: "yào • medicine" }, { zh: "苦", py: "kǔ • bitter" }, { zh: "口", py: "kǒu • mouth" } ]; 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 => { 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 idiom order.'; playAudio(correctAns); } else { target.className = 'nad-quiz-box state-error'; feedback.className = 'nad-quiz-feedback error'; feedback.innerHTML = '✕ Incorrect. Correct order: 良 + 药 + 苦 + 口.'; } } 23 🔗 Engage
