在日本購物、買衣服常用到的對話用法分享
翻點卡片看意思與發音
日本購物情境對話演練
const vocabData = [
{ id: 1, kanji: '探す', kana: 'さがす', meaning: '尋找', cat: 'staff', emoji: ' ' },
{ id: 2, kanji: '見せる', kana: 'みせる', meaning: '展示、給看', cat: 'customer', emoji: ' ' },
{ id: 3, kanji: '試着する', kana: 'しちゃくする', meaning: '試穿', cat: 'customer', emoji: ' ' },
{ id: 4, kanji: 'サイズ', kana: 'さいず', meaning: '尺寸', cat: 'customer', emoji: ' ' },
{ id: 5, kanji: '売り切れ', kana: 'うりきれ', meaning: '售罄', cat: 'staff', emoji: ' ' },
{ id: 6, kanji: '他', kana: 'ほか', meaning: '其他', cat: 'customer', emoji: ' ' }
];
const scenarios = {
show: {
jp: "Tシャツです。これを見せてもらえますか。",
plain: "Tシャツです。これを見せてもらえますか。",
mean: "我想看T恤。可以給我看一下這件嗎?",
note: "提示:當店員詢問時,可用此句明確表達需求。"
},
try: {
jp: "これ、試着してもいいですか。",
plain: "これ、試着してもいいですか。",
mean: "這件可以試穿看看嗎?",
note: "情境提示:試穿前詢問店員是日本購物的基本禮儀。"
},
stock: {
jp: "他のサイズ・他の色はありますか。",
plain: "他のサイズ・他の色はありますか。",
mean: "有其他的尺寸或其他顏色嗎?",
note: "學習建議:想要詢問不同款式時,這個句子非常萬用。"
}
};
let currentFilter = 'all';
let currentPlain = "";
window.onload = () => {
renderVocab();
selectScenario('show');
};
function renderVocab() {
const grid = document.getElementById('vocab-grid');
grid.innerHTML = '';
const list = currentFilter === 'all' ? vocabData : vocabData.filter(v => v.cat === currentFilter);
list.forEach(v => {
const card = document.createElement('div');
card.className = 'card-container';
card.onclick = function() { flipCard(this); };
card.innerHTML = `
`;
grid.appendChild(card);
});
}
function flipCard(el) {
const inner = el.querySelector('.card-inner');
inner.classList.toggle('flipped');
}
function filterVocab(cat) {
currentFilter = cat;
document.querySelectorAll('.filter-btn').forEach(btn => btn.classList.remove('active'));
const activeBtn = document.querySelector(`.filter-btn[data-filter="${cat}"]`);
if (activeBtn) activeBtn.classList.add('active');
renderVocab();
}
function selectScenario(num) {
const data = scenarios[num];
const content = document.getElementById('scenario-content');
currentPlain = data.plain;
document.querySelectorAll('.scenario-btn').forEach(btn => btn.classList.remove('active'));
const btn = document.getElementById('btn-' + num);
if(btn) btn.classList.add('active');
content.innerHTML = `
中文解釋
${data.mean}
`;
}
function copySentence() {
const el = document.createElement('textarea');
el.value = currentPlain;
document.body.appendChild(el);
el.select();
document.execCommand('copy');
document.body.removeChild(el);
const toast = document.getElementById('toast');
toast.classList.add('show');
setTimeout(() => toast.classList.remove('show'), 2000);
}