分类
未分类

续·JavaScript实现文章隔字挖空及与Anki结合使用

在2018年暑假的时候,写了一个程序,使得在使用Anki卡片记忆英文短文的时候,卡片上每隔一个单词隐藏一个单词(显示一个空白方格),通过对被隐去的单词的联想,记忆文章。

我把我制作好的 Anki 卡片导出上传到了知乎、在博客里写了一篇记录我的思考过程的文章。很多人在知乎或我的博客里评论或私信我说他们自己制作的卡片不能工作。因为我已经没在用 Anki 了,所以我并没有去验证,并且认为是他们不会用才导致的。

在清明节的前一天,收到知乎发来的短信,有人向我付费咨询问题。我把知乎App安装到手机上,打开来看,那位网友也遇到了上述问题。我依然觉得是他不会用的原因,不过既然他付费咨询了,那就明明白白地向他证明,是他不会用,而不是我的代码有问题。我决定给他截张图,并委婉地“嘲讽”他一下。

我从我在知乎提供的下载链接把卡片下载下来、把Anki安装到电脑上,并把卡片导入到Anki中。我点开卡片,我用来做例子的新概念英语课文 A Puma at Large 显示依然是正常的。然后我就开始编辑给那位网友的回复:

我现在已经没在用Anki了,看到你所说的问题后,我测试了一下,

写到这里我想起,要制作一张新的卡片才有说服力。我随便写了一些句子,然后发现,确实不能正常挖空/笑哭。我本来想写“一切正常”的,硬生生的改成了“确实不能正常挖空”:

我现在已经没在用Anki了,看到你所说的问题后,我测试了一下, 确实不能正常挖空/笑哭。

我开始思考原因。

我把卡片导出为文本,发现了端倪。

我原本以为 Anki 是这样组织内容的:

<div id="content">
    <div>Nice to meet you. Nice to meet you.</div>
    <div>Nice to meet you. Nice to meet you.</div>
    <div>Nice to meet you. Nice to meet you.</div>
</div>

或者是这样的:

<div id="content">
    <div>
        <div>Nice to meet you. Nice to meet you.</div>
        <div>Nice to meet you. Nice to meet you.</div>
        <div>Nice to meet you. Nice to meet you.</div>
    </div>
</div>

其实它是这样的:

<div id="content">
    Nice to meet you. Nice to meet you.
    <div>Nice to meet you. Nice to meet you.</div>
    <div>Nice to meet you. Nice to meet you.</div>
</div>

也许是我写那篇文章的时候还是我以为的那种方式,后来改成了后面这种。

我重写了代码。没错,是重写,不是修改。

我在平时用 JavaScript 其实不多,之前写的代码,也只是把 JS 当成 C 来写。前几天我系统地学了一遍 Python,对我这次写的 JS 代码有了一些影响,至少,不再像是小学生写的代码了(虽然我还是用了很多 if 语句)。

本质上,这两次的代码是没什么区别的。

我重写后的代码,

  • 中、英文都能实现“隔字/单词挖空”
  • 用到了一些正则表达式。
  • 手机和电脑加载同一段代码,不再需要根据不同的设备选择加载不同的代码
  • 在卡片内容里无论插入什么html标签都不会影响挖空
  • 我在写代码时用 git 来进行代码管理
  • 没有对卡片进行美化

感觉自己总算是长大了。

我把代码上传到了 GitHub,感兴趣可以看看我的 commits。仓库地址:https://github.com/ZuoAoyu/Anki-Blank-Space

感觉自己也是起名困难症患者,写 README 和各种描述、名字的时候真的要纠结死个人。

代码我就不再在文章里分析了,制作好的卡片可以去 github 下载,直接导入 Anki 就能用了。

发表评论

电子邮件地址不会被公开。 必填项已用*标注