Anki Forums

Styling the parent element (whole sentence) of the 'cloze' deleted line instead of just the clozed part

My cloze cards have a few long paragraphs. Instead of copy pasting single sentences and clozing them, I paste the whole paragraphs pertaining to a topic and cloze them sentence wise. My wish is to make only the sentence containing the cloze deletion part to stand out in those paragraphs, so that I can quickly recognize the question presented. I am using a script posted by Anki’s author, somwhere in a website, to scroll long cards automatically to the clozed part. That is definitely a game changer for me. But being able to highlight or make just the clozed sentence stand out from the whole paragraph in addition to the scrolling into view, would be better and much quicker in my opinion. So, is there any way (add-on/script) by which that can be achieved. Thank you. Here is the script that I am using for scrolling into view the clozed part, in case some one finds it helpful…

    <script> 

    window.setTimeout(function () { document.getElementsByClassName("cloze")[0].scrollIntoView({block: "center"});
    }, 300); 


</script>

After posting on reddit, I got the below script from a member and this is doing the job, but only styling the first clozed element, may be because of the part [0] in ‘document.getElementsByClassName(“cloze”)[0]’

  <script>

    document.getElementsByClassName("cloze")[0].parentElement.style.color = "#2aa198";

    </script>

when I tried changing [0] with [1] or [2] or [3] it is styling the corrseponding clozed sentence…(in that particular card I have 4 {{c1:: }}s … so I came up with the below code

<script> 
for (var i= 0; i < document.getElementsByClassName(“cloze"); i++) {
 document.getElementsByClassName(“cloze")[i].parentElement.style.color = "#2aa198";}
</script>

but this is giving an error…I am not a programmer, so I do not know even the basics, the above for loop I came up with after searching for some java script tutorials… please help. Thank you.

If you want the same styling for all clozes, you can override the cloze styling, for example:

.cloze {
font-weight: bold;
color: #2aa198;
}

.nightMode .cloze {
font-weight: bold;
color: white;
}
2 Likes

My wish is to not only style the clozed part but the whole line containing the cloze. For example in the below list, my wish is not only to style the ‘France’, ‘Italy’ and ‘Hungary’ part with blue (or some other colour), but also the ‘Paris is the capital of’ , ‘Rome is the capital of’ , ‘Budapest is the capital of’ parts with red or some other colour. So that I can easily identify the the question presented to me, in a large paragraph.

  1. Paris is the capital of {{c1::France}}.
  2. Rome is the capital of {{c1::Italy}}.
  3. Budapest is the capital of {{c1::Hungary}}.
  <script>

    document.getElementsByClassName("cloze")[0].parentElement.style.color = "#2aa198";

    </script>

This code is working for me. You do not need to change the 0 at all. The preview is not shown but when reviewing you get the color highlighted.


2 Likes

yes…that code is working for me too…but the problem is it is working only for the first clozed part (Paris is the capital of) that that is for the first line, but I want that style to be applied to the other two lines too (Rome is the capital of; Budapest is the capital of)…

image

I am generating only one card for all the 3 sentences…I know it is a bad card design but some of my study requirements demand that…

if I use c1, c2 c3 in the above example it will style and it seems to work but if I only use c1 and generate only one card…it styles only the first sentence but not the other two sentences…I hope you understood my requirement, because it is even difficult for me to explain

Try this code:

<script> 
Array.from(document.getElementsByClassName("cloze")).forEach(
    function(element, index, array) {
        element.parentElement.style.color = "#2aa198";
    }
);

</script>
7 Likes

Wow…Thank you, so much…!! That’s what I wanted.

1 Like

You are welcome. You can link here in the reddit post so a future google hit user can read the solution.

yeah…sure I am posting now

1 Like

Can you also post here a link to the reddit post?

this is it…

2 Likes