Recently, I started learning Chinese to watch Chinese anime (Spare me, I don’t want to any more Isekai or FS in my life), and I found that both Heisig and Marilyn method has their flaws:
- Heisig: I’m not good at imagination so it was hard for me to thought that 唱 like a mouth is wagging tongue and signing, same issue with other characters.
- Marilyn: I’ve learned hurdred of characters using this method and the problem was arose: everything in my head was messed up, like “Darkness is working in the field near the muscular male farmer in the village” for 男, but I thought “Wait, wasn’t she was supposed to be working in the moon? Or she was tortured by the orc in the field instead? or was it Goku who was working instead Darkness?” sound pretty crazy but those things was happened in my head. I realized that I didn’t noted down those characters, so if I forgot it, I may never remember them again. But if I note it down, I might end up with extensive notes, and sentence like “Goku stand up in the moon and kick the toilet” don’t make much of sense, making them hard for me to remember.
With those flaws listed, I decided to create my own method for learning chinese Characters, which make it easier to remember characters strokes and their meaning. Given that I don’t need to remember they pronunciation, which I can instintively learn while watching anime, I need a way to remember meaning of words and its had to be noteworthy, so I invented the following method:
Chinese character are structured by many of invidual characters, so first we need to list them and their meaning down:
We had a collection of words: double 7, run, moon, can.
Next, we need to make a sentence containing those words, using `` for stroke and ?? for meaning->“能: He ?could? `run` to the `moon` and back `77` times when he passed the exam.” this sentence make sense to me.
I formated all chinese characters I’ve learned following this method, and it worked like a charm. The only problem is that I remember sentence when look at the character but I did’t remember where is the meaning word was located in the sentence.
Human remember colors better than text, so i created a simple HTML file for this purpose.
<DOCTYPE! html>
<html>
<head>
<title>Practice Chinese</title>
</head>
<body style="background: #333">
<style>
.showButton{
font-size: 2em;
}
.hide{
display: none;
}
.show{
display: block;
color: white;
margin-top: auto;
margin-bottom: auto;
}
.li{
display: flex;
flex-direction: row;
height: 100px;
align-text: center;
border-top: solid 1px orange;
border-bottom: solid 1px orange;
border-left: solid 20px green;
margin: 0 0 0 0;
padding: 0 0 0 0;
}
.index{
display: block;
font-size: 2em;
color: purple;
margin-top: auto;
margin-bottom: auto;
margin-left: 2px;
margin-right: 2px;
border: solid 3px orange;
background-color: grey
}
#text{
padding-left: 10px;
color: #ddd;
}
#char{
border-right: solid 3px chartreuse;
padding-right: 10px;
}
</style>
<div id="input">
<input type="file" id="file"/>
<p style="color: #bbb">Select the file with this format:<br>
房: the `door` to the ?house? was flanked by large `quads` of stone, imposing and solid<br>
间: chaos and `moan` ?among? the population when the first `bullet` break though the `wall`<br>
路: the traffics sign `say` "`Stop`, this ?road? just only for `walker` and forbid mortocycle" then i `shout` "Shut up stupid board, i will do as i want"<br>
左: i want to use the right toilet, but it has an "X" sign indicating under repair, so `I` have to use the ?left? toilet, which stinky and dirty<br>
边: i met a `gymer` `walking` along ?side? me when we went to the park, he muscles were amazing<br>
....
Click into index number to highlight the character you forgot.
</p>
</div>
<div id="data"></div>
<script>
document.getElementById("file").addEventListener("change", (e)=>{
document.getElementById("input").style.display="none"
var file = e.target.files[0]
if(!file) return
var reader= new FileReader()
reader.onload= function(e){
var data= e.target.result.split("\n")
data.forEach((line, i)=>{
const character= line.split(": ")[0]
let show= false
const li = document.createElement("li")
const button = document.createElement("button")
const char= document.createElement("p")
const text= document.createElement("p")
const index= document.createElement("p")
index.textContent= i+1
index.className="index"
char.className="show"
const structStart="<span style='color: yellow'>"
const structEnd="</span>"
const meanStart="<span style='background: red'>"
const meanEnd="</span>"
let currentStruct=structStart
let currentMean=meanStart
let currentData=""
for(const c of line){
if (c=='\`'){
currentData+=currentStruct
currentStruct=currentStruct==structStart?structEnd:structStart
}
else if (c=='\?' || c=='*' ){
currentData+=currentMean
currentMean=currentMean==meanStart?meanEnd:meanStart
}else{
currentData+=c
}
}
text.innerHTML=currentData.split(/^.: /)[1]
char.textContent=character
text.style.fontSize="1em"
char.style.fontSize="2em"
char.id="char"
text.className="hide"
text.id="text"
button.textContent="Show"
button.className="showButton"
li.style.backgroundColor="#333"
button.style.backgroundColor="yellow"
index.addEventListener("click", function(e){
li.style.backgroundColor=li.style.backgroundColor=="rgb(51, 51, 51)"?"purple": "#333"
text.className="hide"
show=false
button.textContent="Show"
})
button.addEventListener("click", function(e){
text.className=show?"hide": "show"
button.textContent=show?"Show": "Hide"
show=!show
})
char.style.display="inline"
li.className="li"
li.appendChild(index)
li.appendChild(button)
li.appendChild(char)
li.appendChild(text)
document.getElementById("data").appendChild(li)
})
}
reader.readAsText(file)
})
</script>
</body>
</html>
And another for sentence editing:
<DOCTYPE! html>
<html>
<head>
<title>Simple Text Editor</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
</head>
<body style="background: #333" style="display: inline">
<style>
#data{
width: 100vh;
height: 90vh;
background: grey;
color: black;
}
#data:focus{
outline: none;
}
#button{
display: flex;
flex-direction: row;
justify-content: space-evenly;
width: 100vh;
}
button{
width: calc(100vh*3/10);
height: 50px;
font-size: 1.1em;
background: chartreuse;
color: purple;
}
#fontSize{
display: flex;
flex-direction: column;
}
#fontSize button{
width: calc(100vh*1/10);
height: 25px;
}
</style>
<div id="button">
<button id="stroke">Stroke</button>
<button id="meaning">Meaning</button>
<button id="order">Order</button>
<div id="fontSize">
<button id="plus"><i class="fas fa-plus"></i></button>
<button id="minus"><i class="fas fa-minus"></i></button>
</div>
</div>
<textarea id="data" style="resize: none"></textarea>
<script>
function appendBackticksToSelection(textarea, sign) {
const start = textarea.selectionStart;
const end = textarea.selectionEnd;
const selectedText = textarea.value.slice(start, end);
const beforeText = textarea.value.slice(0, start);
const afterText = textarea.value.slice(end);
const modifiedText = beforeText + sign + selectedText + sign + afterText;
if (sign + selectedText + sign == textarea.value.slice(start - 1, end + 1)) {
textarea.value = beforeText.slice(0, beforeText.length - 1) + selectedText + afterText.slice(1);
textarea.focus()
textarea.setSelectionRange(start - 1, start - 1 + selectedText.length);
} else if (selectedText) {
textarea.value = modifiedText;
textarea.focus()
textarea.setSelectionRange(start+1, start + selectedText.length + 2 * sign.length-1);
}
}
const textarea = document.getElementById('data');
const meaning= document.getElementById('meaning')
const stroke= document.getElementById('stroke')
const order= document.getElementById('order')
const plus= document.getElementById('plus')
const minus= document.getElementById('minus')
let reOrder=true
meaning.addEventListener("click", ()=>{
appendBackticksToSelection(textarea, "\?")
})
stroke.addEventListener("click", ()=>{
appendBackticksToSelection(textarea, "\`")
})
order.addEventListener("click", ()=>{
if (reOrder){
textarea.value=textarea.value.split("\n").map((e, i)=>((i+1)+". "+e)).join("\n")
}else{
textarea.value=textarea.value.split("\n").map(e=>e.replace(/^\d*. /, "")).join("\n")
}
reOrder=!reOrder
})
const clamp = (val, min, max) => Math.min(Math.max(val, min), max)
let fontSize=1
textarea.style.fontSize=fontSize+"em"
plus.addEventListener("click", ()=>{
fontSize=clamp(0.5, (fontSize+0.5), 3)
textarea.style.fontSize=fontSize+"em"
})
minus.addEventListener("click", ()=>{
fontSize=clamp(0.5, (fontSize-0.5), 3)
textarea.style.fontSize=fontSize+"em"
})
</script>
</body>
</html>
I following this cycle for each character:
-List the strokes and them meanings.
-Make a sentence.
-After a while…
-Look at the character, try to remember sentence and where the meaning words was located. If forgotten, review the sentence and repeat this process again after a while.
This method is working great for me, what about you? I will happy if you share me some opinion.