为 Anki 添加一个小乌龟爬行的计时器丨学习骇客

学习骇客 · 公众号 · · 2024-08-21 17:04

正文

内容丨心智工具 / 学习科学 / 周边利器 / 经验案例
作者丨讯飞教育产品经理 / 华东师范心理硕士
使命丨用技术和心理学改善学习
周期丨2014~2024 第297次

用途

设置复习的倒计时提醒，评估自己回答的流畅性，也能防止走神太久而不自知。

为静止、枯燥的界面增加一些趣味性。

方法

找到需要修改的笔记模板，进入模板的代码界面。

在“背面内容模板 ” 找到如下图所示的位置，该标签表示分割线。

将分割线替换成如下图所示的代码。

代码如下，小乌龟爬行所需的时间可以自定义， 即下方三处 “10s” 。当然，你也可以把小乌龟换成别的 Emoji 表情，例如兔子🐇、老虎🐅、蛇🐍等等。

class="turtle-hr-container">        <hr  id="answer" class="timed-hr" style="animation-duration: 10s;">        <div class="turtle turtle-left" style="animation-duration: 10s;">🐢div>        <div class="turtle turtle-right" style="animation-duration: 10s;">🐢div>div>
再在“背面内容模板”以下位置添加如下图所示的代码。如果希望在正面，也就是显示答案之前进行计时，可以将这两处添加到“正面内容模板”。

代码如下。
<style>    .turtle-hr-container {        position: relative;        width: 100%;        height: 40px;    }
    hr.timed-hr {        position: absolute;        top: 50%;        left: 50%;        transform: translate(-50%, -50%);        width: 0;        height: 2px;        background-color: black;        border: none;        animation: expandHr linear forwards;    }
    .turtle {        font-size: 24px;        position: absolute;        top: 50%;        transform: translateY(-50%);    }
    .turtle-left {        left: 50%;        transform: translate(-50%, -50%);        animation: moveLeft linear forwards;    }
    .turtle-right {        right: 50%;        transform: translate(50%, -50%) scaleX(-1); /* 水平翻转乌龟图标 */        animation: moveRight linear forwards;    }
    @keyframes expandHr {        from {            width