Flexible Cloze [Support thread]

Hi, sorry for the late reply, this slipped my mind. The latest version has reworked configuration options:

  • Regarding the looping of iterations: I have added configuration to prevent looping of “next” etc. Please note that the logic determines where the loop starts and stops from the first cloze you show, i.e. if you have a card with 3 active clozes and manually click on the middle one that is set as the start (i.e. pressing next will go #3 - #1 and then stop). If you want it to always start from the top, also add the top option to --iterate.
  • Regarding the scrolling, if you set --scroll: center iterate-min it will first center all active clozes and when you “next” between the active clozes it will only scroll when needed - does that give you the effect your are looking for? Otherwise, what is your expected effect of scroll when “nexting” to a cloze which is outside the viewport? For it to jump to center and then again not scroll until the next cloze is outside the viewport?

I appreciate a lot your work with the new version. Now the scroll function works as I wanted. However, I see at present the following issues:

  1. With certain types of flashcards that I use, the add-on/template doesn’t work properly. These are flashcards in which I cloze a considerable amount of text with, in several cases, some indents inside it. The anomaly occurs when I press the Show The Answer button and I try the to collapse the cloze again in that state by clicking its content, and in other cases, simply by clicking the show the answer button gives me a strange result. [Problem 1 Flashcard]

  2. The other problem that I have now is in the conventional kind of flashcard that I use more often, and happens when I press the “J” in order to show the clozes one by one. The first time that I do that work, but not in the other ones, in which I can get more than one “c1” or even all showed. I had this problem after too, but no by clicking or touching (on Android) the left corner, only when using the “J” key [Problem 2 Flashcard].

I send you 2 sample notes. In each one occurs one of theses two issues. The title of each note is the same as the problem that I’ve mentioned above.

Does anyone else have this strange padding at the bottom of the card?
Is it possible to get rid of it?

EDIT: Nevermind, This is an incompatibility with the Amboss Add-On.

Ok, so looking at the notes you sent me.

Problem 1
I believe the problem is with the note that you have created and the Anki editor. Given the rather complex HTML your note has you have to be really careful of how to position the cursor to get the cloze tags to insert at the correct place (the Anki editor tries to guess where it is supposed to go). For instance, looking at a part of the HTML for your “Problem 1 Flashcard” you can see that the cloze tags bridge several HTML tags which results in strange rendering results when the cloze is hidden (end tags and start tags also become hidden) as well as how to interpret clicks as Flexible Cloze inserts a div or span tag around the cloze tag resulting in this case in invalid HTML:

<div>
    <div><hr></div>
    <div style="text-align: center;">
        {{c8::
            <span style="background-color: rgb(255, 255, 233);">
                <b>X medio de quién será la comparecencia en juicio</b>
            </span>
        }}
    </div>
    <div style="text-align: center;"><br></div>
    <div>
        <b style="background-color: rgb(85, 85, 127);"><font color="#ffffff">23.1 LEC</font></b>
            : {{c1::La comparecencia en juicio será x medio de procurador, k <b>habrá</b> de <b>SER</b> Licenciado en D, Graduado en D u otro título universitario de Grado equivalente, habilitado para <b>EJERCER</b> su profesión en el T k conozca del juicio.}}
    </div><b></b>
    <div></div><div><hr></div>
    <div style="text-align: center;">
        {{c8::
            <span style="background-color: rgb(255, 255, 233);">
                <b>En qué podrán comparecer los litigantes x sí mismos</b>
            </span>
        }}
    </div>
    <div style="text-align: center;"><b style="background-color: rgb(85, 85, 127);"><font color="#ffffff"><br></font></b></div>
    <div>
    <b style="background-color: rgb(85, 85, 127);"><font color="#ffffff">23.2 LEC</font></b>: {{c2::<font color="#108040"><b>No obstante </b></font>lo <b><font color="#1e67ff">DISPUESTO</font></b> en el <font color="#9900ff">apartado</font> anterior, ✊🏼<b>podrán</b> los litigantes <b>COMPARECER</b> x sí mismos:</div>
</div>
<blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;">
    <div>
        <font color="#e6e6e6" style="font-weight: bold; background-color: rgb(16, 128, 64);">1.º</font> En los juicios verbales cuya <b>determinación</b> se haya efectuado x razón de la cuantía y ésta no exceda de 2.000€, y <u>PARA</u> la petición inicial de los proc's monitorios, <u>CONFORME</u> a lo <b>
            <font color="#ff2727">PREVISTO</font>
        </b> en esta L (LEC).<span style="background-color: rgb(255, 255, 255);"><br></span><b><span style="background-color: rgb(16, 128, 64);">
                <font color="#e6e6e6">2.º</font>
            </span> </b>En los juicios universales, cuando se limite la <b>COMPARECENCIA</b> a la presentación de títulos de crédito <span style="background-color: rgb(255, 233, 229);"><u>o</u></span> D's, o para concurrir a Juntas.<span style="background-color: rgb(255, 255, 255);"><br></span><b>
            <font color="#e6e6e6" style="background-color: rgb(16, 128, 64);">3.º</font> 
        </b>En<b> </b>los <span style="background-color: rgb(255, 222, 222);"><b>incidentes</b></span> relativos a impugnación de resoluciones en materia de AJG y cuando se soliciten medidas urgentes con anterioridad al juicio.}}
    </div>
</blockquote>

For the HTML to be “correct” the cloze tags must wrap complete HTML tags (I see you have set FCZ to use span tags rather than divs):

  • <div>Prompt: {{c1::Answer}}</div> ⇐ Ok
  • Prompt: <div>{{c1::Answer}}</div> ⇐ Ok
  • Prompt: {{c1::<div>Answer</div>}} ⇐ Ok
  • Prompt: <div>{{c1::Answer</div>}} ⇐ Not ok because, Flexible Cloze will wrap the cloze contents in a span resulting in Prompt: <div><span id="fcz-id-1">Answer</div></span> which is invalid HTML (the span starts inside the div and ends outside it).

So as far as I can tell the issue is not with Flexible Cloze, but rather the nature of the layout of the notes you have created. If you were to use the same note with core Anki cloze you would also get incorrect HTML which would result in unpredictable rendering (it could render as you want or not). To address this you need to ensure the cloze tags are inserted at the correct place in the HTML (which is not really visible from the editor unless you open the HTML view (ctrl+shift+x) and even then the document structure needs to be such that your cloze doesn’t start inside one tag and ends in another.

Problem 2
The sample note you sent me has the same problem with the HTML as above and I am going to guess that the problem is due to the same reason: invalid HTML. Have you had the problem on any less complex notes? Where the cloze tags are not bridging HTML tags?

Could you use the AnkiWebView Inspector and have a look at what the HTML looks like? I adjusted the FCZ base HTML a while ago to take into consideration other addons that inject HTML into the page, maybe there is something that can be done there?

About the Problem 1, I could solve it thanks to your explanation. I’ve changed the HTML in order to work well with Flexible Cloze. I will have to recheck some HTML’s, but the more I do it, the faster I go, so it’s only a minor inconvenience by the moment.

Talking now about the Problem 2, yes, I have it also in very basic flashcards where I don’t format the text, I will send you an example (Flexible Cloze Problems).

I don’t know why, but this issue only happens when I press de “J” key, or whatever other key I use as a hotkey. When I do the click into the right corner (or when I tap it on my Android phone), it works perfectly.

Ok, thanks, I have found that the keydown handler was added multiple times resulting in multiple forwards for one keydown event. Could you try replacing this:

        // Add keyboard shortcuts
        document.addEventListener("keydown", function (evt) {
            if (evt.key === fcz.shortcuts.next.key && evt.shiftKey === fcz.shortcuts.next.shift
                && evt.ctrlKey === fcz.shortcuts.next.shift && evt.altKey === fcz.shortcuts.next.alt
                && evt.getModifierState('AltGraph') === fcz.shortcuts.next.altgr
                && evt.getModifierState('Meta') === fcz.shortcuts.next.meta)  {
                    fcz_iterate(true);
                    evt.preventDefault();
            } else if (evt.key === fcz.shortcuts.prev.key && evt.shiftKey === fcz.shortcuts.prev.shift
                && evt.ctrlKey === fcz.shortcuts.prev.shift && evt.altKey === fcz.shortcuts.prev.alt
                && evt.getModifierState('AltGraph') === fcz.shortcuts.prev.altgr
                && evt.getModifierState('Meta') === fcz.shortcuts.prev.meta)  {
                    fcz_iterate(false);
                    evt.preventDefault();
            } else if (evt.key === fcz.shortcuts.all.key && evt.shiftKey === fcz.shortcuts.all.shift
                && evt.ctrlKey === fcz.shortcuts.all.shift && evt.altKey === fcz.shortcuts.all.alt
                && evt.getModifierState('AltGraph') === fcz.shortcuts.all.altgr
                && evt.getModifierState('Meta') === fcz.shortcuts.all.meta)  {
                    fcz_toggle_all();
                    evt.preventDefault();
            }
        });

        // Init done
        fcz.content.setAttribute("fcz-init", "true");
    }

with this (please note that the part dealing with the keyhandler now is moved outside the scope it was initially in, i.e. after the closing } of if (!document.getElementById(“fcz-content”).hasAttribute(“fcz-init”)) {):

    // Init done
        fcz.content.setAttribute("fcz-init", "true");
    }

    // Add keyboard shortcuts - done at document level
    if (!document.fcz_keyhandler) {
        document.fcz_keyhandler = (evt) => {
            if (evt.key === fcz.shortcuts.next.key && evt.shiftKey === fcz.shortcuts.next.shift
                && evt.ctrlKey === fcz.shortcuts.next.shift && evt.altKey === fcz.shortcuts.next.alt
                && evt.getModifierState('AltGraph') === fcz.shortcuts.next.altgr
                && evt.getModifierState('Meta') === fcz.shortcuts.next.meta)  {
                    fcz_iterate(true);
                    evt.preventDefault();
            } else if (evt.key === fcz.shortcuts.prev.key && evt.shiftKey === fcz.shortcuts.prev.shift
                && evt.ctrlKey === fcz.shortcuts.prev.shift && evt.altKey === fcz.shortcuts.prev.alt
                && evt.getModifierState('AltGraph') === fcz.shortcuts.prev.altgr
                && evt.getModifierState('Meta') === fcz.shortcuts.prev.meta)  {
                    fcz_iterate(false);
                    evt.preventDefault();
            } else if (evt.key === fcz.shortcuts.all.key && evt.shiftKey === fcz.shortcuts.all.shift
                && evt.ctrlKey === fcz.shortcuts.all.shift && evt.altKey === fcz.shortcuts.all.alt
                && evt.getModifierState('AltGraph') === fcz.shortcuts.all.altgr
                && evt.getModifierState('Meta') === fcz.shortcuts.all.meta)  {
                    fcz_toggle_all();
                    evt.preventDefault();
            }
        }
        document.addEventListener("keydown", document.fcz_keyhandler);
    }

Suggestion for simplifying your template:
On the front template you have an extremely long list of cloze numbers. That is completely unnecessary.
Just replace it with:
let clozeNumber = parseInt(‘{{info-Ord:}}’)+1;
/* Template numbers start at 0 so add 1 to become the cloze number */
const card_ord = clozeNumber.toString();

I’m sorry, this is assuming you have the add-on Additional Card Fields Fork for 21
to be able to use {{info-Ord:}}
Maybe you know another way of accessing the Template number?

Thanks, I haven’t looked into that, I just went with the “built-in” functionality, runtime all that is reduced to the active cloze ordinal only by the Anki engine (so the WebView javascript only sees the current cloze ordinal) but you are right, it makes the template a less readable. I don’t know of any way to get the current cloze ordinal though, except through an addon and that will only work on desktop Anki.

Cheers

Another small suggestion. I have extensively customized this note type to be more like my extensively customized regular cloze notes. The large box border around your clozes I have reduced to be small borders functionally equivalent to the normal […] and [hint] brackets. In that use, sometimes extra leading and trailing spaces in the hint part of the cloze interfere with the border rendering properly. So in the following part of your Front template:

        let initial_content = "";
        if (state === 'show') { initial_content = fcz.clozes[index].content; }
        else if (state === 'hint') { initial_content = fcz.clozes[index].hint.trim(); }
        else { initial_content = fcz.clozes[index].hide; }

you will notice that I have added .trim()
That handles the extra spaces nicely.
I see that you use .trim() elsewhere but for some reason it is needed again here.

I don’t think adding that will adversely affect your add-on in any way.