Image occlusion and cloze not working together (in one note)

Anki Card Design
8

I think there might be no easy way to achieve that.

By design, cloze fields (e.g., {{text:Field}}) are only displayed when the current card number matches that of at least one of their cloze deletions.
For example: if card 1 corresponds to an image occlusion mask, and your {{cloze:Back}} field does not contain {{c1::some text}}, then, when Anki shows you card number 1, the {{cloze:Back}} field will not be included.

The following is a hacky workaround which employs javascript to selectively show the content of the {{Back}} field, depending on whether or not an image occlusion is currently being displayed.

It seems to work fine on my computer (Anki 24.02 beta1 for Windows10). I have not tested it on AnkiDroid or AnkiMobile. The first script might not work correctly if you use nested cloze deletions (e.g., {{c1::This is {{c2::an}} example}}).

<div id="originalBackContent" style="display: none;">{{Back}}</div>
<div id="backOutput"></div>
<div id="backCloze">{{cloze:Back}}</div>

<script>
    // This script retrieves the original content from an element with the id "originalBackContent",
    // removes any cloze syntax, and displays the modified content in an element with the id "backOutput".

    var originalContent = document.getElementById("originalBackContent").innerHTML;
    var unclozedContent = originalContent.replace(/\{\{c(\d+)::(.*?)(::(.*?))?\}\}/g, function(match, p1, p2, p3, p4) {
        return p2;
    });
    document.getElementById("backOutput").innerHTML = unclozedContent; 
</script>

<script>
    // This script checks if an element with the class "cloze" exists.
    // If such an element exists and it doesn't have a data attribute called "data-shape",
    // it hides the element with the id "backOutput".

    var clozeElement = document.querySelector('.cloze');
    if (clozeElement) {
        var clozeOcclusionInactive = clozeElement.getAttribute('data-shape');   
        if (!clozeOcclusionInactive) {
            document.getElementById("backOutput").style.display = "none";
        }
    }
</script>
2 Likes