Anking 'cloze overlapping' note type formatting issues

[tah]

Hey there. I’d like some assistance from someone who’s familiar with coding. I myself know very little, so I’m having trouble figuring this out. Is there any way to make these two cards look the exact same?

When I say I want them to look the ‘same’, I mean that:

• both have their bulletpoints aligned to the left
• question at the top centred in the middle
• their font is the same size

One is using the Anking Cloze Overlapping note type (the one with the clozes) and the other one is the Default card type. I’ve looked at the ‘styling’ section on the Anking Overlapping card but it’s quite complicated and I’m not sure what to change. I could send the code for the styling of both the normal card and the cloze overlapping card if anyone is down to help, but it would be a pretty big wall of text.

Here’s the anking note type addon: 952691989

[Eltaurus]

@tah

I could send the code for the styling of both the normal card and the cloze overlapping card

It’s more important that you would provide the source code for the contents of your card itself. It is revealed by clicking <> in the top right corner of a field, when being viewed in the editor. You can post it here, wrapping in ``` from both ends to keep the correct formatting.

[tah]

For the front of the cloze overlapping card:

Explain how livestock farming practices increase efficiency of energy transfer (9)<br><br>•&nbsp;{{c1::Reduce respiratory losses within a human food chain so more energy to create biomass e.g:}}<br><br>• {{c2::Restrict movement and keep warm}}<br>→ {{c3::Less energy lost as heat from respiration}}<br><br>• {{c4::Slaughter animal while still growing / young}}<br>→ {{c5::When most of their energy is used for growth}}<br><br>• {{c6::Treat with antibiotics}}&nbsp;<br>→ {{c7::Prevent loss of energy due to pathogens}}<br><br>• {{c8::Selective breeding}}&nbsp;<br>→ {{c9::To produce breeds with higher growth rates}}&nbsp;

For the back of the normal card:

•&nbsp;Reduce respiratory losses within a human food chain so more energy to create biomass e.g:<br><br>• Restrict movement and keep warm<br>→ Less energy lost as heat from respiration<br><br>• Slaughter animal while still growing / young<br>→ When most of their energy is used for growth<br><br>• Treat with antibiotics&nbsp;<br>→ Prevent loss of energy due to pathogens<br><br>• Selective breeding&nbsp;<br>→ To produce breeds with higher growth rates&nbsp;

[Eltaurus]

@tah

• both have their bulletpoints aligned to the left
• question at the top centred in the middle

I couldn’t replicate your first screenshot with the card content you provided using the Basic Note Type. It looks like this (which is expected, since your backfield consists of regular text lines with line breaks and not formatted as a unified list):

I assume you already modified your basic Note Type, or mean something different by the “default” card type. In either case your actual source code for the back and the styling will be needed to come up with a solution.

@tah

their font is the same size

To change the size of the font on the Cloze Overlapping note type you’ll need to find the following part in its styling:

and change the value from 1rem to 20px to match the basic note type.

---

Also, the Cloze Overlapping Note Type installed by the addon you linked renders with a gray background for me:

Which means that it might not be the exact same version as the one you are using and other discrepances may occur as well.

[tah]

“Also, the Cloze Overlapping Note Type installed by the addon you linked renders with a gray background for me:”

Yep, the grey colour is set by default. I changed it to white, hence the difference. Here’s an image attached below:

---

---

@Eltaurus

I assume you already modified your basic Note Type, or mean something different by the “default” card type. In either case your actual source code for the back and the styling will be needed to come up with a solution.

You’re right about me editing the default card type. I will send the source code for the back and the styling.

Source code for back:

{{FrontSide}}

<hr id=answer>

{{Back}}
</div> 



<!-- BEGIN WRAPPER CODE shuffle
Please do not edit this section directly, this code is generated automatically. Modify config.json instead -->
<script>
    function shuffle(array) {
        let currentIndex = array.length;
        while (currentIndex != 0) {
            let randomIndex = Math.floor(Math.random() * currentIndex);
            currentIndex--;
            [array[currentIndex], array[randomIndex]] = [
                array[randomIndex],
                array[currentIndex],
            ];
        }
    }

    function shuffleElements(elements) {
        const shuffledElements = Array.from(
            elements.map((el) => el.cloneNode(true))
        );
        shuffle(shuffledElements);
        for (let i = 0; i < elements.length; i++) {
            elements[i].replaceWith(shuffledElements[i]);
        }
    }

    function shuffleList(listElement) {
        const items = Array.from(listElement.querySelectorAll("li"));
        shuffleElements(items);
    }

    (() => {
        const selectors = [".shuffle"];
        for (const selector of selectors) {
            for (const container of document.querySelectorAll(selector)) {
                if (["UL", "OL"].includes(container.tagName)) {
                    shuffleList(container);
                }
                for (const parentElement of container.querySelectorAll(
                    "ol, ul"
                )) {
                    shuffleList(parentElement);
                }
                const images = Array.from(container.querySelectorAll("img"));
                shuffleElements(images);
            }
        }
    })();
</script>

<!-- END WRAPPER CODE -->




<!-- Show the Extra field in a <details> disclosure widget if Extra is not empty-->
{{#Extra}}
<br><br>
<details>
<summary></summary>
{{Extra}}
</details>
{{/Extra}}

{{#Exam Question}}
<br><br>
<details>
<summary></summary>
{{Exam Question}}
</details>
{{/Exam Question}}```

Source code for the styling:

.card {

    font-family: arial;
    font-size: 20px;
    text-align: left;
    color: black;
    background-color: white;
.front { text-align: center; }
.back { text-align: left; }
}

[Eltaurus]

@tah

text-align: left;

So, basically, this is the modification that was used to set the desired alignment in your default card type. If you want to replicate it for the Cloze Overlapping Note type, you just need to substitute the same left value into the same piece of styling I referenced previously:

However, this won’t center the question line. Since in the Cloze Overlapping case, instead of being split into a separate field, the question is part of the same text block as the rest of the card, a different alignment can’t be set for it using styling alone. Depending on the type of a solution you are looking for, there are several ways of going about it:

1. Make a new dedicated field for the question and move its content there. Then adjust the template accordingly. It would be the cleanest method, but would require some work reformatting the cards (although it can be automated to an extent).
2. Apply the centering option in the Anki editor to the question line:
   
   The simplest method because of the GUI, but might require quite a bit of manual work and doesn’t result in a very clean note structure.
3. Use a bit of JS to separate the question during card display. Require the least amount of setup, but may result in a flicker each time a card is flipped during review. Also might fail on cards with questions formatted in a non standardized way.

---

Also, note that this part of your styling is not a proper css code:

@tah

.card {
  ....
.front { text-align: center; }
.back { text-align: left; }
}

This would be valid SCSS, but to my knowledge Anki interprets styles as plain CSS, which does not support nested selectors. It might still work occasionally due to automatic error correction by the CSS interpreter, but it won’t do so reliably. To correct it, this should either be changed to

.card {
  ....
}
.card .front { text-align: center; }
.card .back { text-align: left; }

or

.card {
  ....
}
.front { text-align: center; }
.back { text-align: left; }

depending on what it was originally intended for (or the .front {} and .back {} rules could be deleted entirely, since I didn’t see them being utilized anywhere anyway).

[tah]

@Eltaurus

Make a new dedicated field for the question and move its content there. Then adjust the template accordingly. It would be the cleanest method, but would require some work reformatting the cards (although it can be automated to an extent).

• I think this solution is good, but I’m wondering how you’d automate it. Is it complicated? I guess instead of automating it I could just move the question to the separate field any time I come across a cloze overlapping card. I’d only have to move it once for each set of cloze overlapping cards because they are part of the same note, so it isn’t that inconvenient. But some days I may have to review all the cards on my ipad, and editing is kind of tedious on there. Let’s say we go with the new field method. Will the cards not work properly if there is an empty field in them, assuming that i haven’t put the question in them? (i.e will they display an error?)

@Eltaurus

To correct it, this should either be changed to..

• Thanks, I’ve corrected this.

[Eltaurus]

Before you try any adjustments suggested below, a reminder to make a backup File → Create Backup in case anything won’t work as expectec.

@tah

I’m wondering how you’d automate it. Is it complicated?

There are many add-ons that can help with a task like that. From the top of my head, the Advanced Copy Fields can be used to duplicate the content of your Text field into the Question field (that you should add to the note type beforehand). With all the relevant notes being selected in the browser go to Notes → Advanced Copy and choose the settings:

1. Action: Replace
2. Source Field: Text
3. Replace: Question

After, you can remove all the redundant parts by using the standard Anki Notes → Find and Replace feature. Settings for removing everything but the question from the Question field:

1. Find: ^(.*?)<br>.*$ (captures everything before the first linebreak)
2. Replace with: $1 (leaves only the captured part)
3. In: Question
4. Treat input as regular expression

Similarly, for deleting the question from the Text field:

1. Find: ^.*?(?:<br>)+(.*)$
2. Replace with: $1
3. In: Text
4. Treat input as regular expression

@tah

I guess instead of automating it I could just move the question to the separate field any time I come across a cloze overlapping card.

Yes, this is also an option.

@tah

Will the cards not work properly if there is an empty field in them, assuming that i haven’t put the question in them? (i.e will they display an error?)

They should work just fine. Just add

<center>{{Question}}</center><br>

before the <div ... id="text" ... (on both the front and the back template) and the only difference between the “processed” and “unprocessed” notes would be the displayed alignment of the piece of text being moved into the Question field.

---

However, one more thing to be concerned about is the possibility of a conflict between the changes and updates that AnKing add-on might introduce in the future. I’m not familiar with how exactly it functions, but is has a potential to overwrite any non-standard modifications to its Note Types.

[tah]

It worked, thank you so much. I managed to separate the questions. However, the only issue is that the ‘Question’ field doesn’t show up when I preview the card:

In the card browser:

Preview:

[tah]

Nevermind, I think I fixed it. Forgot to add the <center>{{Question}}</center><br" to the front and back. Should work fine now. Thank you so much dude, you’re a legend!

[tah]

I don’t know if this is an illusion but I feel like the text in the cloze overlapping card is a bit smaller than the text in the ‘Basic’ card.

How do I fix this?

@Eltaurus

and change the value from 1rem to 20px to match the basic note type.

• I’m pretty sure I did this but it looks off

[tah]

nevermind, I think it’s just an illusion, i copmared the text and they are the exact same size. I know what the issue is. The ‘basic’ note type has a border seperating the question and text, but the cloze overlapping card doesn’t. Is there any way to add one to the cloze overlapping note type? (between the ‘question’ and the ‘text’ field)

[Eltaurus]

@tah

Like this? I only ticked the treat input as regular expression

You should have left Selected note only toggled. Without it replacements affect all notes in the collection. If there aren’t any other Note Types in your Anki that have either Question or Answer fields, this is fine too. But if you do, you’d better check them to see if they are ok.

---

@tah

I don’t know if this is an illusion but I feel like the text in the cloze overlapping card is a bit smaller than the text in the ‘Basic’ card.

How the text is displayed in the editor fields is independent from how it is presented on the cards themselves, which is what all the previous instructions were about. If you want to adjust the font size here as well, you need to click the Fields button right above the screenshot area → select Text in the list → change the number “16” across from Editing Font to “20”.

[Eltaurus]

@tah

The ‘basic’ note type has a border seperating the question and text, but the cloze overlapping card doesn’t. Is there any way to add one to the cloze overlapping note type? (between the ‘question’ and the ‘text’ field)

Insert <hr id=answer> between them, similarly to how it appears between {{FrontSide}} and {{Back}} in your basic template.

[tah]

Say I have a bulletpointed list like the one shown below: is there any way to shift the bulletpointed list to the left in the ‘ClozeOverlapping’ notetype? Or, does the nature of the bulletpointed list override the existing text alignment which is already set to left? I’ve included a snapshot of both the ‘clozeoverlapping’ and my ‘basic’ note type down below.

[Eltaurus]

There are many ways of doing it. I assume you are looking for the following piece of the clozeoverlapping style code:

/* ~~~~~~~~~ LISTS ~~~~~~~~~ */
ul, ol {
  padding-left: 40px;
  max-width: 50%;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

The “max-width” value here can be increased to give the list block more room or deleted completely, which will default to the full width of the page.

[tah]

Hey Eltaurus, thanks for all the help. I noticed something about the questions on each of my cards - for the ‘basic’ note type, there’s no indentation for the question whereas for the ‘ClozeOverlapping’ note type there is one. Is there any way to make these the same? I would like both of them to have the identation. I’ve attached an image below to visualise what I mean - the top is the basic note type and the bottom one is the clozeoverlapping note type.

[Eltaurus]

I don’t see what you might refer to as indentation in the screenshots. There are different margins on the question part, but those are present on the basic note type and missing on the CloseOverlapping, not the other way around. There is also slight difference in the left margin of the list, but that is the answer section, not question.

[tah]

yes, what I meant to say were the different margins on the question part but I worded it badly, apologies. How do I make them present on the cloze overlapping note type? And also, how do I make the left margin of the list the same?

[Eltaurus]

Can you share the current code for your basic card? The aren’t any margins on it by default either, so I assume there were more changes to it not mentioned in this thread yet.