matthayes / anki_cloze_anything

Add cloze deletions to any existing Anki notes without any modification to Anki
https://ankiweb.net/shared/info/330680661
Apache License 2.0
54 stars 12 forks source link

Make the revealed text blue and change font weight to bold #7

Closed An-png closed 4 years ago

An-png commented 4 years ago

One simple change that can be done to replicate anki's built in clozes is to add font-weight:bold; to current cloze.

Another problem is when the cloze is revealed, it isn't blue. I couldn't find how to change this. For example,

result = result.fontcolor("blue");
return result

in the expContent.replace function thinggy doesn't work, it makes every cloze blue. I assume this is because the sole purpose of that function is to strip the ((c1::)) off the text.

Is there a way to make the current cloze reveal blue?

matthayes commented 4 years ago

Thanks for the tip regarding the font-weight. I'll make that change.

Yes this is possible with a slight modification. I was actually recently working on improving that. I'll be merging it into master soon, but here's how you do it.

Replace this part:

     if (isBack) {
       // For the back card we need to strip out the surrounding characters used to mark those
       // we are keeping.
       result = strip_keep_chars(content);
     }

With this:

    if (isBack) {
      // For the back card we need to strip out the surrounding characters used to mark those
      // we are keeping.  We also wrap in a span in case we want to add styling.
      if (clozeNum == currentClozeNum) {
        result = wrap_span(strip_keep_chars(content), "current-cloze");
      }
      else {
        result = strip_keep_chars(content);
      }
    }

With this change, the text for the current cloze that is revealed on the back side will be colored the same way as the front side.

You can also add a CSS rule to color the back side clozed text differently. For example, this would make it green on the back side:

#back .current-cloze { color: green; }
An-png commented 4 years ago

Thank you!

It seems like the #back ID doesn't work unless you implement the new code

matthayes commented 4 years ago

Yea you need the replacement code I showed above. What the wrap_span function does is wrap a <span class="current-cloze">...</span> around the content so that you can apply a CSS rule like the example I gave. For now you can just update your template with the replacement. I'll probably be merging in this code soon and releasing it. Do you use the shared deck or did you set up the card templates using my instructions?

matthayes commented 4 years ago

I've merged the code into the master branch and released an updated version of the shared deck.