Conditions are below. ・The app will collect words from internet which are all HSK4 Chinese words. ・Add pinyin ・Add Japanese translations. ・Add example sentences. ・When user click button, a word, pinyin, translation and example sentence appear. Appear style is like this. 报名 bàomíng サインアップ等待大家报名。

HSK4 Chinese Words

Word	Pinyin	Translation	Example Sentence
报名	bàomíng	サインアップ	等待大家报名。
知识	zhīshì	知識	科学和经验是两种获得知识的途径。
年级	niánjí	学年	他们是初中八年级的学生。
自然	zìrán	自然	自然环境的改变对人类产生了很大的影响。
发生	fāshēng	起こる	这种事情不会发生在我身上。
任务	rènwù	任務	完成任务后，我们得到了很多奖励。
费用	fèiyòng	費用	这个项目需要很高的费用。

Why did the Chinese teacher give his students a shovel?

Because he wanted them to dig deeper into Chinese language and culture!

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>HSK4 Chinese Words</title>
	<style>
		body {
			font-family: Arial, sans-serif;
		}
		h1 {
			text-align: center;
		}
		table {
			margin: auto;
			border-collapse: collapse;
		}
		th, td {
			padding: 10px;
			text-align: center;
			border: 1px solid black;
		}
		button {
			font-size: 16px;
			padding: 10px 20px;
			border-radius: 5px;
			background-color: #4CAF50;
			color: white;
			border: none;
			cursor: pointer;
			margin: 20px auto;
			display: block;
			outline: none;
			box-shadow: 0 5px #38964e;
		}
		button:hover {
			background-color: #91cb91;
			box-shadow: 0 5px #5fa55f;
		}
		button:active {
			background-color: #38964e;
			box-shadow: none;
			transform: translateY(5px);
		}
	</style>
</head>
<body>
	<h1>HSK4 Chinese Words</h1>
	<table>
		<tr>
			<th>Word</th>
			<th>Pinyin</th>
			<th>Translation</th>
			<th>Example Sentence</th>
		</tr>
		<tr>
			<td>报名</td>
			<td>bàomíng</td>
			<td>サインアップ</td>
			<td>等待大家报名。</td>
		</tr>
		<tr>
			<td>知识</td>
			<td>zhīshì</td>
			<td>知識</td>
			<td>科学和经验是两种获得知识的途径。</td>
		</tr>
		<tr>
			<td>年级</td>
			<td>niánjí</td>
			<td>学年</td>
			<td>他们是初中八年级的学生。</td>
		</tr>
		<tr>
			<td>自然</td>
			<td>zìrán</td>
			<td>自然</td>
			<td>自然环境的改变对人类产生了很大的影响。</td>
		</tr>
		<tr>
			<td>发生</td>
			<td>fāshēng</td>
			<td>起こる</td>
			<td>这种事情不会发生在我身上。</td>
		</tr>
		<tr>
			<td>任务</td>
			<td>rènwù</td>
			<td>任務</td>
			<td>完成任务后，我们得到了很多奖励。</td>
		</tr>
		<tr>
			<td>费用</td>
			<td>fèiyòng</td>
			<td>費用</td>
			<td>这个项目需要很高的费用。</td>
		</tr>
	</table>
	<button onclick="showRandomWord()">Show Random Word</button>
	<script>
		function showRandomWord() {
			var table = document.getElementsByTagName("table")[0];
			var rows = table.rows.length - 1;
			var randomRow = Math.floor(Math.random() * rows) + 1;
			var cells = table.rows[randomRow].cells;
			var word = cells[0].innerHTML;
			var pinyin = cells[1].innerHTML;
			var translation = cells[2].innerHTML;
			var example = cells[3].innerHTML;
			alert(word + "  " + pinyin + "  " + translation + "  " + example);
		}
	</script>
	<p>Why did the Chinese teacher give his students a shovel?</p>
	<p>Because he wanted them to dig deeper into Chinese language and culture!</p>
</body>
</html>