«

尝试使用 JavaScript 写脚本来辅助记忆单词(也是一种单词记忆方式的构想)

时间:2022-12-30 21:39     作者:独元殇     分类: 前端技术


[toc]

*文章补充 ( 非正文 )

当然,本项目还是在不断进行更新中,在前两天,我新添加了一个 按钮 ,以方便我在不同平台下的操作。

在电脑上,我可以在点击一次按钮后,用键盘上的 enter 、 空格 键来进行点亮下一个。

然后,今天突然发现,使用 看英语想汉语 这种模式貌似不是很好用,会让我变得如哑巴英语一样,(虽然让我对英语阅读更敏感),故今天又添加了一个 看中文想英语 模式,原来的放在 公告摘要 处,另一个放在 串串狗背英语 页面上。

然后因为 看中文想英语 的难度比较大,故也采用了一种可以规定范围的方式,即比如仅记忆 1 -- 100 条的内容。from 1 to 100.

具体代码和显示效果可看 https://www.ccgxk.com/238.html

当然,顺便一提,有人说阅读可以提高词汇量,但其实阅读并不会很显著提高词汇量,因为一篇文章中需要自己去记忆的单词,其实只占整篇文章很少很少部分,一篇文章那么长,可能只包含 10 个,最好 20 个目标生词,而阅读完这篇文章,则需要很久很久。故,直接读那些肯定包含生词的句子(如我的这种方法),肯定会更好。

2023-01-07 21:41:15 星期六

github

本项目的 Github 地址是: https://github.com/kohunglee/ccgword

缘起

本月的 22 日(2022.12.22),我完成了 1000 个单词的整理。这是为了一项可能造福自己之后很多年的一个「彪炳千古」、「丰功伟业」大工程。

即尝试一种新的背单词方法。

目前,在我网站两个地方可看到,一个是首页,网站公告的摘要部分,一个是这个地址, https://www.ccgxk.com/238.html ,前者是可看到注释的,后者没有。

其实我使用它已经很久了,我是把它封装成一个 emlog pro 的自用插件了,之前只有登录状态可见,普通网站访客看不到,只有我能看到,(其实这才是 emlog 系统的正确使用方式.... 可以很容易实现一些复杂的后端应用),其后台设置界面如下。

一直也在不断完善,不过现在来看,足以使用了。

想法是这样的

我的记忆力是很差的,极度差,而且我的注意力也很差,没错,真的可以称得上弱智级别的。

但为什么今天我还在正常存活呢?那是因为现在这个社会,(对对对踏马的这个 SB 的人类文明社会),除了学校这个课堂、考试,对记忆力、注意力要求很是严格外,其实生活中,记忆力差点一点影响也没有,而后者注意力差点反而还是优点,固,我说的我记忆力差、注意力差不是自嘲,是真的差,而且也要明白,这两者差,对生活,是没丝毫影响的。

于是,从小至大,每逢背诵一些东西,对我皆好像噩梦一样,尤其是英语单词。

虽然我英语目前还是能达到和老外进行小学生级别的无障碍交流水平,但我的词汇量一直是大痛。所以,同样,也为了应付几个月后的那场考试,我必须得在短时间内,高效率提升我的词汇量。

如果是在高中还好,我可以每天凌晨 6 点,哇哇哇捧着书读,背,一天背 5、6 个也很足够了,但现在我大学,而且在家,所以不能按传统方式背单词,也不现实。

于是上个月,我就在琢磨,怎么背单词好呢?除了要适合我现在这个学习环境情况,也要高效率才行。于是,我开始回忆。

其实为了背单词,我付出的努力真不少,高中,尝试过各种办法,装兜里单词纸,不午休背单词,贴桌子上,甚至写床上,在大学我甚至牺牲了早上睡回笼觉的美妙时刻,专门拿着手机 APP 背单词,什么扇贝单词、百词斩 .... 我都有深度用过。

然而结果让我 怅然自失,单词我起码背过 2,000+ 了,起码反复也绝对有两遍,甚至每次我看到都感觉自己记住了,然而时间飞逝而过,一般两个月后,它们一个个还是陌生人。

于是我想到,现在在家,如果还是使用扇贝、百词斩,肯定是不行的,因为首先,使用它们很痛苦,绝对是酷刑,第二,它们效果并不显著。

然后我思考,能不能尝试转换下思想?那些背单词软件,每次界面就是孤零零一个单词,你短期想不起,单击那个「提示一下」按钮,也很像做错了事情一样,反正,刚开始还觉得挺新奇,时间久了,会很讨厌。

那么我能不能这样记忆呢?就是不刻意去记,不一次性记清?而是像靠一个个印象去记。第一次记不住就记不住,无所谓,下一次,下下一次,看多了就记住了。

对,就是重复。

重复、不严肃

重复,是记忆的绝大情况下的实现方式,活到现在很多年,其实很多单词,我不是在早读、睡前、或者 APP 上记住的,我之所以认识它,是因为我见过它很多次,甚至用过。

尤其是编程上,其实绝大部分的英语单词,我甚至不知道它的真实含义,但我就是很熟悉它,毕竟天天看啊。

当然,这也给了我一个「懒惰」的理由,因为 APP 这种方式,确实能让我记住一些单词,但真的很费劲。毕竟每次说服自己启动这个学习计划,都那么艰难....

那我就设立一个板子吧,每天就那几个单词,天天看它们。但这样有个缺点,就是一点刻意都不带,绝对没印象,而且,单词一天一换,直觉上告诉我这是无用功。....不过这方式也是个切入点。

我就在想,我每天空闲时刻都会打开我的网站 ( www.ccgxk.com )来欣赏自己的杰作,那就把这个程序嵌入其最显眼地方。以下是三个我悟出来的准则。

1、融入生活碎片时间
2、entertainment,不严肃
3、重复,生的少熟的多。

充分利用碎片时间,而且为了哄好自己去看一眼它们,所以不能很严肃,越搞笑越不正经越好。毕竟谁都喜欢看笑脸。

而第三点,是源于我的 MBTI 性格,INTJ。虽然都认为 INTJ 是天生设计师,是创意生产者,固应该很喜欢新奇、陌生的事情,其实并不是,INTJ 不喜欢陌生的事物,因为陌生的事物会让 INTJ 失去对生活的掌握力,因此,我必须设立很多熟悉的条目才行。

于是有了 1.0 的程序。内容和现在这个有点差别,程序基本一样,这个版本大概上个月(2022.11.26)就做好了。

是单独的一个个单词,下面是我凭自己理解,写的一些调侃的话。为的是我对它有印象。

像这样(这是我在本地 Excel 里写的条目原稿)。

不过一开始是,一直是开卷模式的,我觉得我记得很牢了,有一天,我把那个颜色改成透明,我发现,我几乎一个单词都不认识.....

于是这个方式 pass,而且更恐怖是,我发现,这些单词和我的考试大纲不符,我背完也白背。其实这都是一些高中我很陌生的词汇。(起码是,这些我不会拼写)。

无纳,从头整理单词

然后我从网上下了一份大纲,都是图片,(感谢 MAC 电脑操作系统,我突然发现,选中一大篇图片,右键,可以直接保存在 PDF。)不过很模糊,但也知足吧。然后,我也放弃了之前辛辛苦苦整理的第一版单词和句子(700 条整),然后就是艰巨的第二版单词整理。

其实很耗费时间的,首先就是一个个跳出单词,这个,花了我 10 天时间,很痛苦的,图片很模糊,大部分时间得猜,而且看久了很头疼。

然后,52 页 PDF ,挑出了 1000 个条目。

然后就是搞汉语了。突然,我知道原来那样强行写调侃的句子是不行的。

那我怎么弄呢?

新的思想

我最开始,是想到,减少记忆难度,每个单词,给它安排个词组,然后就开始了。

其实,大部分单词都很难找它的词组短语,而且每个单词都要百度必应搜索一些,一分钟能解决两个单词就不错了..... 有 1000 个单词在等我啊!

然后我懒惰了,索性直接就复制句子吧,对!!! 这个想法也会很好,不仅减少记忆的负担,而且也见过怎么用,会记得更牢!

然后,经过 10 天的艰辛,1000 个单词,终于整理完了。

我想,这样应该会帮助我记得更有效吧。如果可以的话,那我终身受益啊。因为我会用很多年的。

程序细节

下面是一个 demo 的 html。

<audio id="likehong_e_ding">
    <source src="https://img1.ccgxk.com/ccgxk/7NIQcN20221127132127.m4a" type="audio/ogg">
</audio>
<div id="lkh_e_learn_a"></div>

<script>

// -----------------[ 参数配置区 ]-----------------------

const lkh_outNum = 10;  // 输出的条目数
const lkh_searchApi = "";  // 搜索 API,这里如果有地址,可以点单词搜百度,目前是句子模式,固不用了。

// -----------------[ 版本记录区 ]-----------------------

// version 2.0:2022-12-01
// version 1.0:2022-11-26

// -----------------[ 以下内容均是是逻辑区,不用动 ]-----------------------

a = `
This was the first international treaty
Tremendous progress has been made in this direction.
This trend is expected to continue in the future.
As a result, the case goes to trial.
It is a very old trick, but it works.
The troop included 5 males and 5 females
The length of the tube is not critical.
This can save you thousands of dollars in tuition
the majority of people are unable to carry a tune
there is a light at the end of the tunnel
They are in need of a tutor.
The ultimate goal is to improve the quality of health care.
It is up to them to undertake this work.
No effort is made to undo the effect of dog
It is intended to provide universal access to health care.`;

b = `
这是第一个国际条约
在这个方向上已经取得了巨大的进展。
预计这一趋势将在未来继续下去。
结果,案件进入了审判阶段。
这是一个非常古老的技巧,但它很有效。
这支队伍包括5只雄性和5只雌性
管子的长度并不重要。
这可以为你节省数千美元的学费
大多数人都不能跑调
隧道的尽头有一线光明
他们需要一个家庭教师。
最终目标是提高医疗保健的质量。
由他们来承担这项工作。
没有努力去消除狗的影响
其目的是普及保健服务。`;

var lkh_display_end = lkh_display_end || false;

let lkh_list_i;  // 记录条目从上到下的第几位
let lkh_list_num;  // 记录条目在字典中的 ID 数字

//生成从 minNum 到 maxNum 的随机数
function randomNum(minNum,maxNum){ 
    switch(arguments.length){ 
        case 1: 
            return parseInt(Math.random()*minNum+1,10); 
            break; 
        case 2: 
            return parseInt(Math.random()*(maxNum-minNum+1)+minNum,10); 
            break; 
        default: 
            return 0; 
            break; 
    } 
} 

let a_array = a.split("\n");
let b_array = b.split("\n");

console.log("a 长度:"+ a_array.length +" , b 长度:"+ b_array.length )

function lkh_make_a(a_content){
    if(lkh_searchApi){
        return `<a href='${lkh_searchApi}${a_content}+' target="_blank">${a_content}</a>`;
    } else {
        return a_content;
    }
}

function lkh_makecontent(number = -1) {
    let random_number = randomNum(1, (a_array.length - 1));

    let a_content = a_array[random_number];
    let b_content = b_array[random_number];

    console.log("随机 ID 是" + random_number);

    if(number !== -1){
        let a_num_c = a_array[number];
        let b_num_c = b_array[number];
        return lkh_make_a(a_num_c) + "<div class='lkh_infos' num="+ number +">" + b_num_c + "<div>";
    }
    return lkh_make_a(a_content) + "<div class='lkh_infos' num="+ random_number +">" + b_content + "<div>";
}

function lkh_outInfo() {
    let index = 0;
    let time = lkh_outNum;  // 这个是输出的次数
    while (index < time) {
        if(index == lkh_list_i){
            lkh_e_learn_a.innerHTML += lkh_makecontent(lkh_list_num);
        } else {
            lkh_e_learn_a.innerHTML += lkh_makecontent();
        }
        index++;
    }
}

let lkh_addclick_num = 0;

function lkh_addclick(){
    let lkh_info_list = document.getElementsByClassName("lkh_infos");

    for(let i in lkh_info_list){
        lkh_info_list[i].onclick = function(){  // 点击后的动作

            if(lkh_info_list[i].style.color !== "red"){
                lkh_info_list[i].style.color = "red";
            } else { return }

            lkh_addclick_num++;

            console.log("点击了" + lkh_addclick_num);

            if(lkh_addclick_num === lkh_outNum){  // 点击第十次后的动作

            if(lkh_display_end){
                lkh_list_i = i;
                lkh_list_num = lkh_info_list[i].getAttribute("num");
            }
                lkh_e_learn_a.innerHTML = "";
                lkh_addclick_num = 0;

                likehong_e_ding.play();

                lkh_outInfo();  // 输出
                lkh_addclick(); // 添加点击事件

                // 最后,把上次最后点击的题目,触发一次点击事件
                document.getElementsByClassName("lkh_infos")[lkh_list_i].click()
            }
        } 
    }
}

lkh_outInfo();  // 输出
lkh_addclick(); // 添加点击事件
</script>

因为是自用的,所以程序没做太多工程优化。

使用方式

大概是,html 要写一个 < div id="lkh_e_learn_a" >< /div > , 这是我规定的使用容器。

当然,为了让自己像心理学中的那条巴浦洛夫的狗,听到铃铛响就流口水那种条件反射,还要再写一个「铃铛响」的声音。

<audio id="likehong_e_ding">
    <source src="https://img1.ccgxk.com/ccgxk/7NIQcN20221127132127.m4a" type="audio/ogg">
</audio>

这是我截出来的苹果 APP store 的支付成功的铃声,每当我做完一页,就给我响一下。有趣吧?(是 js 里控制响的)

之后是 js。

其中大家如果感兴趣,只对其中 4 个变量有了解就行了。

lkh_outNum 这个变量,后面是输出的条目数。比如 10。

a 和 b ,这两个变量,左边是单词句子,右边是汉语意思。(这里是个小 demo 演示,真实我用的是,1000 对儿条目)

还有一个是 lkh_display_end。这个是为颜色是透明那个设计的(透明,请自行写 CSS)。因为颜色透明,我点击最后一个,它会不显示意思,直接翻页,这是不行的,然后如果在某个页面想让它翻页后,仍然红色显示,那就在这些 JS 上面,加上这条。

<script>
    var lkh_display_end = true;
</script>

这就是代码需要注意的地方了。

其原理很简单,就是..... 也不扯什么细节了,其实就是随机显示。懒得写什么算法,也没必要研究什么算法,就 Radom ,每次就随机显示就行了,没多少条,1000 条,天天看,怎么还不重复好几遍呢?

感悟

其实,感觉还是有点效果的,不过现在觉得,还是看透明的那个比较有效果,但天天看了几遍开卷那种形式,其实多多少少也记住了很多。

希望好运!

标签: 网页设计 原创 english

推荐阅读:

评论:
avatar
dousha99 2023-01-12 12:30
多年的互联网摸爬滚打改变了我。我在注意到这个链接之前,正试图在这凌乱的短句中寻找隐含的意义,试图在支离破碎之间看到现实的联系——哦天哪,这世界上发生的事情难道还不够糟么?病人难以相信的说辞、散点图、在演讲厅收集的数据、盲人的国度、年度账目、第一批货物短缺……荒谬的短句排成了不成韵的诗,指控这血淋淋的事实,挂在了公告页面!虽然我并不信 QAnon 那一套,但这些东西还能是什么?!

……

什么?你说这是背单词的?

……

哦……哦,那没事了。
commentator
独元殇 2023-01-12 15:08
@dousha99:我的老伙计,天哪,您这样说我就放心了。好惊险差点把 ... 我是说把您惊吓到。没错,这是一个很实用的背单词系统。如果您不介意的话,您也可以使用它来增加您的词汇量。或者其他零碎的知识。
avatar
2broear 2023-01-03 09:48
这个功能有点像ankidroid
avatar
Lvtu 2022-12-31 12:17
技术牛人呀~~~
avatar
沉舟侧畔 2022-12-31 09:07
背单词推荐用 anki
commentator
独元殇 2022-12-31 11:16
@沉舟侧畔:卧槽,,,牛