<!DOCTYPE html>

<head>

<title>越南语单词+例句拼写记忆工具</title>

<style>

*{margin:0;padding:0;box-sizing:border-box;font-family:system-ui,"Microsoft YaHei"}

body{background:#f5f7fa;padding:16px;max-width:640px;margin:0 auto}

.container{background:#fff;border-radius:18px;padding:24px;box-shadow:0 3px 15px #e0e5ef}

.mode-bar{text-align:center;margin-bottom:20px}

.mode-bar label{margin:0 10px;font-size:15px}

.show-text{font-size:30px;font-weight:bold;color:#0F4CD0;text-align:center;margin-bottom:16px}

.info-card{background:#f0f7ff;border-radius:12px;padding:16px;margin:16px 0}

.pos-text{color:#0066ff;font-weight:bold;margin-bottom:8px}

.pos-place{color:#009944;margin:6px 0 8px;font-size:15px}

.desc-line{margin:8px 0;line-height:1.6;color:#222}

.sent-line{margin-top:10px;color:#444;font-size:14px;line-height:1.5}

.title-small{font-size:16px;margin:12px 0 6px;color:#222;font-weight:bold}

#input-word{width:100%;padding:14px 16px;font-size:17px;border:1px solid #d0d7e3;border-radius:10px;margin-bottom:10px}

#input-sent{width:100%;padding:14px 16px;font-size:17px;border:1px solid #d0d7e3;border-radius:10px;margin-bottom:12px}

.btn-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}

button{padding:14px;border:none;border-radius:10px;font-size:16px;cursor:pointer}

#submit{background:#0F4CD0;color:#fff}

#next{background:#e8ebf0;color:#111}

#wrongBtn{width:100%;background:#ff7d00;color:#fff}

.tip{margin-top:16px;font-size:17px;font-weight:500;text-align:center}

.right{color:#00a854}

.err{color:#f53f3f}

</style>

</head>

<body>

<label>

<input type="radio" name="mode" value="showVn" checked> 模式1：看越南词，拼写单词+例句

</label>

<label>

<input type="radio" name="mode" value="showCn"> 模式2：看中文释义，拼写单词+例句

</label>

</div>

<div class="sent-line">完整例句原文：<span id="sentence"></span></div>

</div>

<div class="title-small">1. 拼写越南单词</div>

<div class="title-small">2. 拼写配套实用例句</div>

<button id="submit" onclick="checkAll()">提交核对单词+例句</button>

<button id="next" onclick="getWord()">切换下一组</button>

</div>

<button id="wrongBtn" onclick="wrongMode()">错题强化模式（反复刷题）</button>

</div>

const wordList = [

{vn:"chào buổi sáng",cn:"早上好",pos:"礼貌问候短句",posPlace:"句首使用，放在整句话最前方，后接称呼或主语",usage:"清晨见面通用问候，结尾加ạ会更加礼貌，适用于客户、路人、外卖骑手",ex:"Chào buổi sáng, anh có cần xem hàng giảm xóc không?"},

{vn:"cảm ơn",cn:"谢谢",pos:"动词短语",posPlace:"句首独立使用，或放在句末表达感谢，后可接对象",usage:"全场景通用感谢话术，正式商务沟通使用 cảm ơn ạ",ex:"Cảm ơn anh đã tin tưởng sản phẩm của chúng tôi rất nhiều."},

{vn:"không có gì",cn:"不客气",pos:"应答短句",posPlace:"单独成句，用于对方道谢之后独立回复",usage:"他人向你道谢后的标准回复用语",ex:"Không có gì, tôi rất vui được hỗ trợ anh mọi lúc."},

{vn:"tạm biệt",cn:"再见",pos:"道别短句",posPlace:"句首单独使用，送别场景开头",usage:"送客、分别、客户离店时使用",ex:"Tạm biệt, chúc anh đi đường bình an và thuận lợi."},

{vn:"uống nước",cn:"喝水",pos:"动宾短语",posPlace:"放在主语之后作谓语，可搭配劝告句式",usage:"夏季慰问户外骑手、来访客户专用暖心话术",ex:"Trời nắng nóng cực độ, anh nhớ uống nước nhiều để giải nhiệt nhé."},

{vn:"bao nhiêu tiền",cn:"多少钱",pos:"疑问短句",posPlace:"放在名词后方，用于物品询价",usage:"逛街采购、询价、谈批发价格通用问句",ex:"Một bộ giảm xóc chất lượng tốt này bao nhiêu tiền một bộ?"},

{vn:"hàng tồn kho",cn:"库存、现货备货",pos:"名词短语",posPlace:"作宾语，放在谓语动词có / không có之后",usage:"外贸询盘高频词汇，用于告知或询问商家是否有现货库存",ex:"Chào buổi sáng, mẫu giảm xóc này chúng tôi hiện không có hàng tồn kho."},

{vn:"thương hiệu riêng",cn:"自有品牌",pos:"名词短语",posPlace:"作宾语，搭配bán / sản xuất使用",usage:"工厂门店介绍话术，说明只经营自家生产品牌，无第三方贴牌货",ex:"Chúng tôi là cửa hàng nhà máy, chỉ bán thương hiệu riêng tự sản xuất."},

{vn:"giảm xóc",cn:"减震器",pos:"名词",posPlace:"作主语/宾语，汽配句子核心名词",usage:"汽配主营核心产品词汇，和客户介绍产品必用",ex:"Nhà máy chúng tôi chuyên sản xuất giảm xóc cho các loại xe ô tô."},

{vn:"cửa hàng nhà máy",cn:"工厂直营店",pos:"名词短语",posPlace:"作表语，放在là之后介绍店铺身份",usage:"向客户介绍货源优势，突出无中间商差价",ex:"Chúng tôi là cửa hàng nhà máy, không kinh doanh các hãng trung gian khác."},

{vn:"giá buôn",cn:"批发价",pos:"名词短语",posPlace:"作宾语，搭配đưa / lấy使用",usage:"大批量拿货议价专用词汇，区分零售单价",ex:"Nếu mua số lượng lớn tôi sẽ đưa giá buôn ưu đãi hơn cho quý khách."}

];

let current = null;

let wrongArr = JSON.parse(localStorage.getItem("vnWrongData")) || [];

let isWrong = false;

function getWord(){

const pool = isWrong ? wrongArr : wordList;

const msgDom = document.getElementById("msg");

if(pool.length === 0){msgDom.innerText = isWrong ? "暂无错题，全部掌握！" : "词库加载完成";return;}

const idx = Math.floor(Math.random() * pool.length);

current = pool[idx];render();

}

function render(){

const mode = document.querySelector('input[name="mode"]:checked').value;

const showDom = document.getElementById("tipShow");

const inputWord = document.getElementById("input-word");

const inputSent = document.getElementById("input-sent");

const msg = document.getElementById("msg");

inputWord.value = "";inputSent.value = "";msg.innerText = "";

document.getElementById("pos").innerText = current.pos;

document.getElementById("posPlace").innerText = current.posPlace;

document.getElementById("cnMean").innerText = current.cn;

document.getElementById("useDesc").innerText = current.usage;

document.getElementById("sentence").innerText = current.ex;

if(mode === "showVn"){showDom.innerText = current.vn;}else{showDom.innerText = current.cn;}

}

function checkAll(){

const wordInput = document.getElementById("input-word").value.trim();

const sentInput = document.getElementById("input-sent").value.trim();

const msgDom = document.getElementById("msg");

const rightWord = current.vn;

const rightSent = current.ex;

let wordOk = wordInput === rightWord;

let sentOk = sentInput === rightSent;

if(wordOk && sentOk){

msgDom.className = "tip right";

msgDom.innerText = "单词、例句拼写全部正确！记忆巩固成功";

wrongArr = wrongArr.filter(item=>item.vn !== current.vn);

localStorage.setItem("vnWrongData", JSON.stringify(wrongArr));

}else{

msgDom.className = "tip err";

let tipText = "存在拼写错误：";

if(!wordOk) tipText += `单词正确：${rightWord}；`;

if(!sentOk) tipText += `例句正确：${rightSent}`;

msgDom.innerText = tipText;

const exist = wrongArr.some(item=>item.vn === current.vn);

if(!exist){wrongArr.push(current);localStorage.setItem("vnWrongData", JSON.stringify(wrongArr));}

}

function wrongMode(){

isWrong = true;

document.getElementById("msg").innerText = "【错题强化模式】仅循环练习拼写出错的词汇+例句";

getWord();

}

window.onload = function(){

getWord();

document.querySelectorAll('input[name="mode"]').forEach(radio=>{

radio.onchange = ()=>{isWrong = false;getWord();}

})

}

</script>

</body>

</html>