zhumazhanov.yer/chinese-teacher-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v3: audio pronunciation

Browse Source
This commit is contained in:
Dauren777 2026-06-19 06:17:56 +00:00
parent 32f2a40305
commit f7d747d5f3
1 changed files with 16 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
lesson.html
View File

@ -43,6 +43,9 @@ body{font:17px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,s
.back-btn{display:inline-block;margin-top:24px;padding:14px 28px;background:var(--cyan);color:var(--ink);border-radius:8px;font-weight:700;text-decoration:none} .back-btn{display:inline-block;margin-top:24px;padding:14px 28px;background:var(--cyan);color:var(--ink);border-radius:8px;font-weight:700;text-decoration:none}
.btn-check{display:inline-block;margin-top:16px;padding:12px 28px;background:var(--ink);color:var(--white);border:none;border-radius:8px;font-weight:700;cursor:pointer;font-size:16px;transition:.15s} .btn-check{display:inline-block;margin-top:16px;padding:12px 28px;background:var(--ink);color:var(--white);border:none;border-radius:8px;font-weight:700;cursor:pointer;font-size:16px;transition:.15s}
.btn-check:hover{opacity:.85} .btn-check:hover{opacity:.85}
.speaker{background:none;border:none;cursor:pointer;font-size:20px;padding:2px 6px;border-radius:6px;transition:.15s;vertical-align:middle;line-height:1}
.speaker:hover{background:var(--cyan-50)}
.vocab-table td{vertical-align:middle}
</style> </style>
</head> </head>
<body> <body>
@ -98,16 +101,27 @@ if (!lesson) {
let vocabHtml = ''; let vocabHtml = '';
lesson.vocab.forEach(v => { lesson.vocab.forEach(v => {
vocabHtml += `<tr><td class="cn">${v.cn}</td><td class="py">${v.py}</td><td class="ru">${v.ru}</td></tr>`; vocabHtml += `<tr><td class="cn">${v.cn} <button class="speaker" data-speak="${v.cn}">🔊</button></td><td class="py">${v.py}</td><td class="ru">${v.ru}</td></tr>`;
}); });
document.getElementById('vocab-table').innerHTML = vocabHtml; document.getElementById('vocab-table').innerHTML = vocabHtml;
let sentHtml = ''; let sentHtml = '';
lesson.sentences.forEach(s => { lesson.sentences.forEach(s => {
sentHtml += `<div class="sentence"><div class="cn">${s.cn}</div><div class="py">${s.py}</div><div class="ru">${s.ru}</div></div>`; sentHtml += `<div class="sentence"><div class="cn">${s.cn} <button class="speaker" data-speak="${s.cn}">🔊</button></div><div class="py">${s.py}</div><div class="ru">${s.ru}</div></div>`;
}); });
document.getElementById('sentences-list').innerHTML = sentHtml; document.getElementById('sentences-list').innerHTML = sentHtml;
document.getElementById('lesson-content').addEventListener('click', function(e) {
const btn = e.target.closest('.speaker');
if (!btn) return;
const text = btn.dataset.speak;
const u = new SpeechSynthesisUtterance(text);
u.lang = 'zh-CN';
u.rate = 0.85;
speechSynthesis.cancel();
speechSynthesis.speak(u);
});
document.getElementById('grammar-text').textContent = lesson.grammar; document.getElementById('grammar-text').textContent = lesson.grammar;
let quizHtml = ''; let quizHtml = '';