Suggestion - Highlight cloze in card when selected in browser

One suggestion I had to improve usability would be to make it so the cloze in the editor highlights somehow when switching to that card in the browser. For example, if I’m using arrow keys to look through cards 1, 2, 3, when I switch from card 1 to card 2 it would change the highlight from c1 to c2 (by changing font color or underlining or something to highlight it).

4 Likes

@Shigeyuki do you think an addon could do this? Or are you interested in building it into Anki? Happy to fund the project if anyone is interested

2 Likes

Hello, thanks for the mention.
If you exclude the developer Abdo (Since I think he is a member of Anking), I think you may want to contact the developer Kleinerpirat.

He is a contributor to Anki for desktop and has developed some advanced add-ons for the editor, so he is the most knowledgeable Add-ons developer for the latest Anki editor and should be able to embed Anki.

However, he does not seem to be looking for work and has been busy and inactive recently, so I do not know if a request is possible.

No worries! It’s not urgent by any means just something that may help improve quality of life

2 Likes

Hmmm, I see.

I think it’s probably technically possible, but a bit difficult. Editor works a little differently, so there are not many developers working on advanced add-ons for Editor.

For now I am not active to incorporate features into the official Anki. If I wanted to incorporate it, I guess I need to test it for a year or so with add-ons.

I am looking for Add-ons ideas and Patoreon ($5/month), however I am not accepting any work requests. (Because if I did, I would not be able to develop content for my patrons.)

So if possible I will try to develop that when I feel like it.
(For example, when I repair the Editor add-on, or when I am developing a game add-on, I may be able to develop it along with it.)

And some of my patrons are medical students, so Add-ons that are in demand by medical students are a bit higher priority for my development.
(This idea of yours has nothing to do with medicine, but since you are a medical professional, what you think you need and what medical students need may be close.)

however I am not sure if I can develop new add-ons, because sometimes I fail to develop new add-ons by simply not having the technical skills to do so.

I’m not sure if this aligns with what you’re looking for, but I essentially forked Glutanimate’s Search Highlight Addon and rewrote one function to work on cloze deletions instead of the search bar input.

Example:
Animation

A few caveats:

  • The qtWebViewer.findText function only works on one occurrence at a time. Unfortunately, there doesn’t seem to be an easy workaround for this. I suspect you would need to inject a JavaScript snippet into the browser to highlight all cloze deletions.
  • The same function also malfunctions when the result contains HTML elements (like italic or bold styles). I’m not sure why this happens.

If anyone is interested, feel free to experiment with it and possibly fix a bug or two. The code can be found here. Note the browser.py file.

I probably won’t spend any more time on it, but maybe shige can pick up on this.

3 Likes

Looks like a really good start! Maybe @glutanimate would have an idea on why it gives an error with HTML elements (or how to make it highlight all cloze deletions).

1 Like

Wow, that’s great! I had completely forgotten about Search Highlight.

It seems that “checkAnkiVersion” cannot be imported (browser.py line 41).
If I remove it, it almost works correctly.
There is one error of some kind but I have not looked into it yet.

On my device it seems to highlight everything in orange and yellow, so it looks like it is already working fine.

I am not clear about this. Can you provide HTML for the card to reproduce this issue?

What would you like to do about uploading the add-on?
If you are very busy, I can fix it and upload the Fork.
Otherwise (e.g. you upload it, or Anking will do it) I will try to send you a pull request.

You can upload it if you want. I don’t mind :slight_smile:

For me some cards like this didn’t work properly. Not sure why.

A(n) {{c1::<i>atrial</i>}} <b>pacemaker</b> will generate a spike followed by a P-wave, a {{c2::<u>normal</u>}} <b>PR-interval</b>, and a {{c3::<u>normal</u>}} <b>QRS complex</b>.

removing the <i> element from the c1 made the highlight work fine though. They were all picked up fine by the regex, so I just assumed it had to be the WebView function that’s causing the issue.

2 Likes

Thanks, I’ll try to upload it once it’s repaired and adjusted.
Perhaps you are a medical student, so will you be busy with graduation etc. soon?

Thanks for the code and information, I was able to reproduce the issue.
I will look into the cause.


The “checkAnkiVersion” issue I mentioned seems to be out of date in the libaddon, I updated the code and that solved it.

1 Like

Qt’s find text works on rendered text, so you will have to strip any markup from the query.

The browser module seems to be out-of-date / from an older build of the add-on. See main for the latest version (last updated 8 months ago for 23.x)


Generally speaking, I really like this idea and good thinking on repurposing highlight search results @CravingCrates. For now this approach seems like the most viable and maintainable option.

4 Likes

Yay thank you genius, solved the issue.

image

1 Like

Super cool! Thank you all for finding something that works. @Shigeyuki once you’ve uploaded it let me know and I’ll share on my socials. I’ll share your patreon as well to support!

3 Likes

haha, no I’m not graduating any time soon but exam season is coming up and I have enough on my plate already. Glad I was able to help kick things off.

What Qt Version are you on? I found the highlighting in orange and yellow to work inconsistently over time (Qt6.6, Anki 24.06.01) and from what I read in the Qt Docs it’s not “supposed” to work on all occurences but rather the first one like a browser search would. Not sure why it works for you lol

1 Like

I have finished the repairs and adjustments and uploaded it to AnkiWeb.

Hmm, I was able to upload it, but I had a problem with multiple cloze not highlighting properly for a bit. Not good enough, but usable anyway.

Wow, that would be super helpful!

Good luck with your exam season! :slight_smile:

I fixed it, but it might flicker a bit.

This seems to be a problem with my card sample. Simply put, it only highlights in yellow when the text is an exact match.
(I copied the text so it matches, if I change the text it doesn’t.)
So normal cards don’t highlight as you say. I added a workaround, but still not enough.

2 Likes

Not fully highlighted, like this.

image

There might be a tiny mistake then,

only {{c0::: will be highlighted

There should be two colons If I’m not wrong. Actually, I was confused by this until I saw the image here. So If you don’t mind, an image would be nice. This one here is good. What do you think?

1 Like

Thanks, I corrected the AnkiWeb page, it may take a bit time to reflect.

1 Like

The source code was barely used, so it was finally worked only by __init__.py (137 lines, about half comments).
The additional files are for my changelog and options(no options yet), so they are not needed for working.

1 Like

Now the highlight is not perfect. Ideally, highlight everything.

image


About this I already tried various ways, but all did not work.

PyQt → No way found to work around Qt limitation.
PyQt → When highlighted in sequence (0.5 sec), Anki freezes and scrolls.
PyQt → Qt can highlight yellow only for exact match text.
PyQt ->There is no way to change the color in PyQt
JavaScript → When adding colors, the field is permanently edited. No workaround found.


So to implement this, I think it is necessary to edit the HTML of the card fields in batch.

For example,

  1. Handle Cloze note types in batch
  2. Cloze deletions enclosed like <span...
  3. When selected in browser, add color by JavaScript.

Perhaps this way the color can be customized as well.
However, this is a lot of development and debugging workload, so I don’t know when I will develop it.

Github issues : Perfect highlights + Change color #8