Help with Bionic Reading Code

Card Design
1

How can I change this code I found on Reddit so that it works for the bionic reading of my cloze cards? I couldn’t get them to work with me on my own. The field name is just Text

The addon version painfully lags every time I load up the text, so I figured maybe if the code is embedded in the template it would load up faster.

@Shigeyuki?

image

<script>
        function bold_letters(word) {
                var len = word.length;
                if (!(/^[a-zA-Z]+$/.test(word))) {
                    return 0;
                }
                if (len<1) {
                    return 0;
                }
                if (len<=3) {
                    return 1;
                } 
                if (len==4) {
                    return 2;
                }
                else {
                    return Math.round(len/2);
                }
            }
            function antibold(word) {
                var len = word.length;
                return len-bold_letters(word);
            }
            var text = document.getElementById("Text").innerHTML;
            
            var i = 0;
            words = text.split(" ");
            final_str = ""
            while (i<words.length) {
                if(bold_letters(words[i])==0) {
                    final_str = final_str + " " + words[i];
                }
                if (antibold(words[i])==0) {
                    final_str = final_str + " <b>" + words[i] + "</b>";
                }
                else {
                    final_str = final_str + " <b>" + words[i].slice(0, bold_letters(words[i])) + "</b>" + words[i].slice(0-antibold(words[i]));
                }
                i++;
            }
            document.getElementById("Text").innerHTML = final_str;
    </script>
1 Like
2

Nvm just had to look a bit harder. There is a different code for it.
:sweat_smile:

1 Like
3

That’s a good code.
I think the first code would work if you enclose the text in <div id="Text">

<div id="Text"> text </div>
4

Hmm still doesnt seem to work. Do you mean putting the div tag inside or outside of the script

image
image879×689 58.7 KB

5

wait so i actually tested it and it turns out that it actually works with the simple input of just text
image

But it still doesn’t work for the entire cloze note. If I do put {{edit:cloze:Text}} instead of just Text, it just adds complete trash to within my text.

image
image889×938 76.4 KB

As you can see, the text looks a bit formatted but then code just suddenly pops up in the middle of nowhere.

image

6

I have the same problem :-/
The code by Ankiworld seems to work well with cloze, so I think that’s good enough.

7

Do you know how to make this code load faster and almost lag-free tho. Or is this something I am going to have to live with

8

What is Bionic Reading?

9

bionic-reading-little-component-you-can-use-if-you-want-v0-1yjcj4q7qw4a1
bionic-reading-little-component-you-can-use-if-you-want-v0-1yjcj4q7qw4a1802×764 47.7 KB

If you want to try it, then take a closer look at “Quickify” - for android

1 Like
10

I don’t understand how it’s in-depth. It does help people hide mistakes in spelling (see through, third line)

11

Perhaps this was not the best description. It rather helps to read a little faster.

1 Like
12

On my device there is no lag long enough to distract me with long sentences.
(Well, you might be distracted by it)
Maybe the card template is interfering, so you might want to test if you get the same lag with plain long text.

1 Like
13

You may already know this since you asked about the Font in another thread, using this Font for bionic-reading may reduce lag. (It was mentioned in a comment on the add-on page, and it works with cloze)

1 Like
14

Wow. I downloaded the ttf file, and it works like magic. Much faster as a downloadable font than having to apply code.

I found a code that runs faster. Here it is if your are interested


function bold_letters(word) {
var len = word.length;
if (!(/[1]+$/.test(word))) {
return 0;
}
if (len < 1) {
return 0;
}
if (len <= 3) {
return 1;
}
if (len == 4) {
return 2;
} else {
return Math.round(len / 2);
}
}

var text = document.getElementById(“shank”).innerHTML;
var words = text.split(" ");
var final_str = “”;

for (var i = 0; i < words.length; i++) {
var bold_chars = bold_letters(words[i]);
if (bold_chars > 0) {
final_str += " " + words[i].substring(0, bold_chars) + “” + words[i].substring(bold_chars);
} else {
final_str += " " + words[i];
}
}

document.getElementById(“shank”).innerHTML = final_str;

But downloading the font works so much better! Thank you.

  1. a-zA-Z ↩︎

1 Like
15

Btw is there a font version which colours the bolded part of each word. That will be even much, much better :pray:

1 Like
16

I can’t find a font to color bold text, perhaps it would require creating a font or Javascript.

However, this add-on to color text is interesting, I repaired it and uploaded it to AnkiWeb.
It’s not a font, but it’s probably faster since it edits the HTML directly.

1 Like
17

image
image710×266 18.8 KB

Hmm doesnt seem to work. I find no edit in the HTML and my cloze field name is indeed Text. So what does the edit in HTML look like.

Here is the configuration in case it helps
image

18
  • This Add-on is run by specifying deck from Browse menu.(Note that it affects notes in the deck.)
  • The note type names must match. (Cloze)
19

Hmm…I still cant find an option.

image
image608×668 34.3 KB

It would be more practical I think if it applies it self automatically, but oh well…

And let me know if you find a version of this font where the bolded part is coloured pls :pray:Help with Bionic Reading Code - #13 by Shigeyuki

20

I think “beeline” has been added to the Browse menu bar.

1 Like