Bionic Reading for Cards

Suggestions
1

Recently learned about Bionic Reading. Might be useful for the cards / learning too.
Helps the brain reading the text faster by guiding the eyes by making parts of the word bold.

NPM Open Source version in repository on Github:
Gumball12/bionic-reading

2

Just looked it up, it’s an interesting concept. But how would it fit into Anki?

It certainly speeds up the reading flow (if you already know the language), but in terms of retention, I’m not so sure it would be helpful. Learning generally involves slow thinking (i.e. forming connections, processing concepts).

Anki is a flashcard app, not a PDF reader. It’s best to avoid long texts in your cards.

4 Likes
3

Good points. Sure it’s not useful for all circumstances. Spending fewer time on a card due to a faster reading flow seems to be in general beneficial to me.
Example with bulletpoints:
Capture

Maybe it even helps with retention. I did a class in speed reading, where I learned and experienced that higher (still balanced - too fast without practice makes retention worse) reading speed actually helps with retention. This might not be applicable exactly the same to learning cards though.

1 Like
4

I’m not too sure about how useful that would be. At least, personally, I think most of my cards would not benefit for it, as most have at least one of the following characteristic:

  • there is very little text to be read, as having a bloated card makes it hard to remember it — so the time spent reading it, as opposed to just trying to remember the answer, is neglectable;
  • most of the information is contained in images, so when reviewing I spend most of my time figuring out the content of the image, not the text around it;
  • the text is in a non-english language that could not benefit from bionic reading (think of Chinese, for example);
  • most of the information is contained in mathematical formulas, and first order logic is already a very dense way to formulate ideas;
  • most of the information is code, which is syntax-highlighted, and thus bold already has a meaning (it is already used to convey something else).

I’m not saying there wouldn’t be applications for bionic reading, just that I think it’s usefulness is yet to be shown (but maybe it will be).

1 Like
5

For those interested to try it. I put this together from different sources. You can add it to your card template.

$(document).ready(function() {


    const FIXATION_POINTS = [
        [0, 4, 12, 17, 24, 29, 35, 42, 48],
        [1, 2, 7, 10, 13, 14, 19, 22, 25, 28, 31, 34, 37, 40, 43, 46, 49],
        [1, 2, 5, 7, 9, 11, 13, 15, 17, 19, 21, 23, 25, 27, 29, 31, 33, 35, 37, 39, 41, 43, 45, 47, 49],
        [0, 2, 4, 5, 6, 8, 9, 11, 14, 15, 17, 18, 20, 0, 21, 23, 24, 26, 27, 29, 30, 32, 33, 35, 36, 38, 39, 41, 42, 44, 45, 47, 48],
        [0, 2, 3, 5, 6, 7, 8, 10, 11, 12, 14, 15, 17, 19, 20, 21, 23, 24, 25, 26, 28, 29, 30, 32, 33, 34, 35, 37, 38, 39, 41, 42, 43, 44, 46, 47, 48]
    ]

    bionicWord();

    function filter(node) {
        var p = node.parentNode;
        if (p.tagName === "SCRIPT" || p.tagName === "STYLE" || p.tagName === "mo" || p.tagName === "mi" || p.tagName === "mn") {
            return NodeFilter.FILTER_REJECT;
        }
        return NodeFilter.FILTER_ACCEPT;
    }

    function bionicWord() {
        var rootnode = document.getElementById("qa")
        var nodes = document.createTreeWalker(rootnode, NodeFilter.SHOW_TEXT, filter, null);
        var node;
        while (node = nodes.nextNode()) {
            var p = node.parentNode;
            // console.log(p.tagName);
            var text = node.nodeValue;
            var m;
            while (m = text.match(/^(\s*)(\S+)/)) {
                text = text.slice(m[0].length);
                p.insertBefore(document.createTextNode(m[1]), node);
                var breakpoint = m[0].length - getWordFixationLength(m[0], 2)
                var firstpart = p.insertBefore(document.createElement('b'), node);
                firstpart.appendChild(document.createTextNode(m[2].slice(0, breakpoint)));
                var secondpart = p.insertBefore(document.createElement('span'), node);
                secondpart.appendChild(document.createTextNode(m[2].slice(breakpoint)))
            }
            node.nodeValue = text;
        }
    }

    function getWordFixationLength(word, fixationSize) {
        const wordSize = word.length,
            points = FIXATION_POINTS[fixationSize]

        for (let i = 0; i < points.length; i++)
            if (wordSize <= points[i]) return i
    }

})();
1 Like