(Insert screenshots)
I would like to know how to adjust the “auto-scroll” function in order to automatically scroll a little below. That is because I always have more than one c1 or c2 in each flashcard, so I wouldn’t have to manually scroll down to see the other c1’s.
In particular, I would like to have the same auto-scroll function that I have with the Enhanced Cloze (for Anki 2.1) - AnkiWeb add-on. Let me show you the difference between the auto-scroll with these images: Differences between the auto-scroll function - Album on Imgur
Thanks in advance, cheers!
The logic for the scrolling into view is on the Front Template here:
fcz_data.clozes[fcz_data.cindex].node.scrollIntoView({block: “nearest”});
Which I have updated on my own cards to setTimeout(function () {fcz_data.clozes[fcz_data.cindex].node.scrollIntoView({block: “nearest”});}); but I haven’t gotten around to publish that change.
The above scrolls the current cloze (in your example the first of the active clozes) “just barely into view”, it doesn’t take multiple active clozes (as in your example) into consideration. A quick hack would be to change “nearest” to “top” or “center”, that will likely be closer to the behavior you want. However this will result in scrolling even when it is not needed (which irritates me) and in the case of “top” it will also scroll the preceding line of the current cloze out of view (which in my case often is a subheading that I want to see).
The correct answer is custom scroll logic but I haven’t gotten around to fix that.
I’ve replaced the default fcz_data.clozes[fcz_data.cindex].node.scrollIntoView({block: “nearest”}); with setTimeout(function () {fcz_data.clozes[fcz_data.cindex].node.scrollIntoView({block: “center”});});. It’s not perfect, but there’s a great enhancement. Thanks for your effort.
I’ve tried to edit a flashcard using Ankidroid and I could. However, after that, for some reason, the text had some white spaces between certain paragraphs and in some lines. This doesn’t happen if I edit a flashcard using the desktop Anki.
As far as I can tell this is due to the Ankidroid editor behavior, in particular how it handles newlines and <br> tags. Anki “follows” HTML rendering rules where newlines are not rendered (try it by opening the note source and insert newlines, you will note that no extra newlines are visible once you switch back to “normal view”. When you insert a line break in the desktop editor it will behind the scenes insert a <br> tag (which is rendered as a newline). The Ankidroid editor converts all <br> to newlines when opening the editor and the reverse when you save the note; this means that any prexisting newlines that were not initially <br> tags (hence not rendered) now become <br> tags and therefore rendered as newlines.
The same is true for tabs I believe.
Some addons insert “prettified” HTML and when that is cycled through the Ankidroid editor all “prettified” whitespace become rendered:
<table>
<tr>
<td>A table</td>
<td>that</td>
</tr>
<tr>
<td>is</td>
<td>pretty</td>
</tr>
</table>
vs
<table><tr><td>A table</td><td>that</td></tr><tr><td>isn’t</td><td>pretty</td></tr></table>
One way to address the issue is to make a script snippet which strips all newlines as well as any “prettified” space (a little more tricky from a regex point of view) in the source, that way no “extra” <br> tags will show up when you save the note in Ankidroid.
I see. Well, that’s too much for my 0 knowledge about programming. I will edit the flashcards using Anki Desktop xD. Thanks for your answer.
You can try the Ankidroid option “convert <br> to newlines in the editor”, it converts <br> to newlines on “entry” and then all newlines to <br> on exit. It doesn’t help with editing any cards that already have newlines in it as they will be cycled into <br> on edit, but you can address that by first stripping newlines on all notes with desktop Anki find and replace with regex “\n” to “”.
It might be worth putting in a feature request to Ankidroid to amend the above option with “first strip all newlines then convert <br> to newlines in the editor” - that would get “rid” of extra newlines turning up and, to me at least, seems more logical than the current functionality.
Ok, custom scroll logic implemented. That turned out to be as much of a headache as I expected but now scrolling should:
- Scroll only when required and then as little as possible.
- Scroll to get all/as many as possible of the active clozes in view.
- When scrolling down keep one line preceding the “first” cloze in view and vice versa.
I’ve tested the new custom scroll, and it works in some cloze numbers (for example, in some flashcards works in c1, c2, c3 and c5, but not with c4 or c6). Moreover, if I put my old style section into the new template, the scroll function becomes non-existent (that should be solved if I do a manual transition between the two styles in order to not alter the nature of the new one).
The missing of scrolling when not updating the full template was due to temporary rectocranial inversion. I have adjusted the logic so scrolling now occurs in the first element with the “fcz-scroll-area” class set (previously it was the element with id “fcz-scroll-area”). So if you are using your own card design (or not updating “All”) you need to manually add “fcz-scroll-area” to the classes of the element where you want the scrolling to occur.
However, the style section really shouldn’t affect the scrolling, nor can I recreate it not working for some clozes, could you share your card config (front, back, styling) and a few sample notes where the scrolling doesn’t work?
Also, what platform are you using for reviewing? I don’t have any mac/iOS devices so I am blind to any problem that turns up there.
I’m using MacOS, Windows (sometimes) and Android, with 2.1.49 on desktop, and the latest version of Ankidroid. I share here an example where this problem appears.
Furthermore, I also have issues with pressing the key (at desktop) in order to reveal clozes one by one, because several times it reveals all the active clozes at the same time.
Ok, I had a look:
- The scroll issue seems to be due to an edge case which I never encountered but your card design sometimes present it. I have added error checking (in the JavaScript on the Front) that should handle it in the last update, your cards should now scroll normally, let me know if it doesn’t work.
- In your styling, since all the non-function styling has been moved “out” from HTML on the “Front” template and into the Styling there is no need to unset any values, just delete the ones you don’t want and edit the ones you want to change.
- I get two scrollbars on your cards, there should really only be one. It seems like your :root { margin: 18px; } and .card { margin-top: 5px; margin-bottom: 5px; } under “CARD GENERAL STYLING” are messing up the rendering engine calculations of element heights (not sure why), I would add those margins on the fcz-content instead.
- If you don’t want to use the “Title” you could remove if on the Front hiding it.
- I have not had time to look into the key presses showing too many clozes, potentially it could be an effect of the above mentioned edge cases so let me know if the problem persists after updating.
It works now with the default template of Flexible Cloze. However, if I put my own settings on it, in particular, when I delete all what is related with the flags, symbols, note, mnemotecnics and extra (all the stuff of the bottom), the scroll function is affected. The clozes are showed in a way that you see them “cut” - in the last ones you only see a bit of them, so you have to manual scroll).
On the other hand, I would like to know if it would be possible to make that the auto-scroll function shows you the active clozes in the most central position possible (it will depend of the context, if it’s the last one then it’s not possible of course).
About the key presses, when I do my changes, I have the problem again, so I will have to see what is the exact modification that causes this.
Hi, thank you for this useful add-on.
Every time I try changing the Flexible Cloze colour on Anki Desktop, then on Anki Droid gives me a different colour.
Most of the time gives me a magenta or yellow and not the one I chose.
Looking at your note and trying to figure out what is going on I decided to redo the HTML structure (at the top of “Front”) as well as finding a bug in the scroll logic, all have been updated in the latest update.
Regarding centering of clozes, the current scroll logic calculates the line height of the preceding/following line of the first/last cloze and scrolls to “last cloze + 1 line”. redoing that math should be easy enough but I have limited time as it is right now, if you want to have a go at it look in the function scroll_to_cloze in “Front”:
if ((bottom - top >= fcz.viewport_height) || top < fcz.viewport.scrollTop) { // All clozes will not fit or first active cloze above viewport fcz.viewport.scrollTo(0, top - line_height(window.getComputedStyle(first.node.previousElementSibling ? first.node.previousElementSibling : first.node, ':before'))); } else if (bottom > (fcz.viewport.scrollTop + fcz.viewport_height)) { // All clozes will fit but last active cloze below viewport fcz.viewport.scrollTo(0, bottom - fcz.viewport_height + line_height(window.getComputedStyle(last.node.nextElementSibling ? last.node.nextElementSibling : last.node, ':after'))); } else { // No need for scrolling }
If the new version doesn’t work please share some notes that aren’t working. A few thoughts on the notes you shared earlier:
- If you don’t want the legend and/or flags, just remove their HTML on the Front or possibly style fcz-legend-entry and/or fcz-flag-footer to
display: none;(delete<div id="fcz-legend-footer" style="display: flex;"> <div id="fcz-legend-entry" style="flex-grow: 1;">→ Becomes</div><div id="fcz-legend-entry" style="flex-grow: 1;">⇒ Leads to</div><div id="fcz-legend-entry" style="flex-grow: 1;">⤙ Excite/activate</div><div id="fcz-legend-entry" style="flex-grow: 1;">⊣ Inhibit/deactivate</div> </div>and<div id="fcz-flag-footer" style="display: flex;"> <div id="fcz-flag-red" style="flex-basis: 100%;"></div><div id="fcz-flag-orange" style="flex-basis: 100%;"></div><div id="fcz-flag-green" style="flex-basis: 100%;"></div><div id="fcz-flag-blue" style="flex-basis: 100%;"></div><div id="fcz-flag-pink" style="flex-basis: 100%;"></div><div id="fcz-flag-turquoise" style="flex-basis: 100%;"></div><div id="fcz-flag-purple" style="flex-basis: 100%;"></div> </div>respectively) - As I mentioned in the earlier post, setting the margin (which you had done on the earlier shared notes) on
:rootand.cardresults in double scrollbars for me (one at.card/:rootlevel and one atfcz-scroll-arealevel). As I understand it this is due to fcz-root beingheight=100%and.cardand:rootis outside of fcz-root: 100% + margin = > 100%. I would suggest not putting the margin there but instead add it to fcz-scroll-area or fcz-title/fcz-content/fcz-footer and fcz-footer or fcz-legend-footer/fcz-flag-footer depending on what you want to achieve.
How/where are you trying to change the colors? Could you share a sample note?
With the new version, I don’t have that scroll problem anymore. Now, the two things that I would like to solve are the following:
— The centering of clozes (I didn’t know how to adjust it)
— The fact of being able to open only 1 hidden active cloze when I press J (it opens more than one, and this doesn’t happen if I click on the right corner). This issue occurs when I change this parameter to “false” → –iteration-hides-previous: “true”; / false leaves cloze open when cycling forward/backward*.
I send you the notes with the new code adjustments that I’ve made (including the ones that now, don’t put a double scroll line into the flashcard) just in case it’s necessary. I’ve also removed all the stuff that was at the bottom of the flashcard.
I’ve got the following error when updating to the latest version of your add-on:
Anki 2.1.49 (dc80804a) Python 3.8.6 Qt 5.14.2 PyQt 5.14.2
Platform: Mac 10.15.7
Flags: frz=True ao=True sv=2
Add-ons, last update check: 2022-02-12 15:41:58
Complementos posiblemente implicados: Flexible Cloze
Caught exception:
Traceback (most recent call last):
File “aqt/progress.py”, line 54, in handler
File “aqt/main.py”, line 149, in on_window_init
File “aqt/main.py”, line 244, in setupProfile
File “aqt/main.py”, line 425, in loadProfile
File “aqt/hooks_gen.py”, line 2985, in call
File “anki/hooks.py”, line 34, in runHook
File “/Users/james/Library/Application Support/Anki2/addons21/1632356464/init.py”, line 71, in update
(nfront, nback, ncss) = load_file()
File “/Users/james/Library/Application Support/Anki2/addons21/1632356464/init.py”, line 24, in load_file
front = fh.read()
File “/Library/Frameworks/Python.framework/Versions/3.8/lib/python3.8/encodings/ascii.py”, line 26, in decode
UnicodeDecodeError: ‘ascii’ codec can’t decode byte 0xe2 in position 2674: ordinal not in range(128)
Yes, I noticed that as well, I have updated the update earlier today, try checking for updates again. As a side note I have found yet another bug int the $#@! scrolling that I am trying to fix.