Bionic Reading for Cards

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