Closet For Anki [Official support]

I am having the same issue as well. I submitted a ticket on Github a while ago, but I haven’t found a solution yet. Has there been any updates?

It looks like you are adding a card under the Basic note type (see top left of your screenshot). Change this to whatever your ‘Closet’ template card is named.
Once / if that is already done, make sure that your ‘cmds1’ field has some text in it (active seems to be the standard text)

Anyone had luck making the ‘overlapping clozes’ code work? I’m struggling to get it through.

Edit:

@shallash and @joaoapenas Did you get this feature to work? I’ve been trying for a few days but cannot figure it out.

Img 1 - Desired output from website

Img 2 - og Code from website -> probably dated since it doesn't have closet.flashcards.recipes

Img 3 - Sample note text I've been working off of

Sample template
{{#cmds1}}
<div id="extras" class="extras">{{cmds0}} {{cmds1}}</div>
<div id="content" class="content {{Tags}}">
<div id="bottom" class="top container">
<div class="main">{{edit:block}}</div>
</div>
</div>
<div id="tags">{{clickable:Tags}}</div>
{{/cmds1}}

<div id="anki-am" data-name="Assets by ASSET MANAGER" data-version="2.1">
<script data-name="Prevent reinclusion" data-version="v0.1">
var ankiAms = document.querySelectorAll("#anki-am");
if (ankiAms.length > 1) {
for (const am of Array.from(ankiAms).slice(0, -1)) {
am.outerHTML = "";
}
}
</script>
<script data-name="Ruby Support" data-version="v0.1">
function rubySupport(filterManager) {
const rubyStylizer = closet.Stylizer.make({
separator: "",
mapper: (v, i) => (i === 0 ? `<rb>${v}</rb>` : `<rt>${v}</rt>`),
processor: (v) => `<ruby>${v}</ruby>`,
});
filterManager.install(
closet.recipes.stylize({
tagname: "rb",
separator: {
sep: "::",
max: 2,
},
stylizer: rubyStylizer,
})
);
}
</script>
<script data-name="Flashcard Features" data-version="v0.1">
function flashcardFeatures(filterManager) {
filterManager.install(
closet.recipes.activate({ tagname: "on", storeId: "flashcardActive" }),
closet.recipes.deactivate({ tagname: "off", storeId: "flashcardActive" }),
closet.recipes.activate({ tagname: "show", storeId: "flashcardShow" }),
closet.recipes.activate({ tagname: "hide", storeId: "flashcardHide" })







closet.flashcard.recipes.setNumber({ tagname: "up", storeId: "flashcardActiveTop" }),
closet.flashcard.recipes.setNumber({ tagname: "down", storeId: "flashcardActiveBottom" }),
closet.flashcard.recipes.setNumber({ tagname: "top", storeId: "flashcardShowTop" }),
closet.flashcard.recipes.setNumber({ tagname: "bottom", storeId: "flashcardShowBottom" }),

closet.wrappers.product(closet.flashcard.recipes.setNumber, closet.flashcard.recipes.setNumber)({
tagname: "around",
optionsFirst: { storeId: "flashcardActiveTop" },
optionsSecond: { storeId: "flashcardActiveBottom" },
}),
closet.wrappers.product(closet.flashcard.recipes.setNumber, closet.flashcard.recipes.setNumber)({
tagname: "ctxt",
optionsFirst: { storeId: "flashcardShowTop" },
optionsSecond: { storeId: "flashcardShowBottom" },
}),









);
}
</script>
<script data-name="Closet Setup" data-version="v0.1">
function closetUserLogic(closet, preset, chooseMemory) {
const elements = closet.template.anki.getQaChildNodes();
const memory = chooseMemory("closet__1");
const filterManager = closet.FilterManager.make(preset, memory.map);
const output = [
[elements, memory, filterManager],
]; /** Click to reveal cloze */
const removeObscure = function (event) {
if (event.currentTarget.classList.contains("cl--obscure-clickable")) {
event.currentTarget.classList.remove("cl--obscure");
event.currentTarget.classList.remove("cl--obscure-hint");
event.currentTarget.classList.remove("cl--obscure-fix");
}
};
const wrappedClozeShow = closet.wrappers.aftermath(
closet.flashcard.recipes.cloze.show,
() => {
document.querySelectorAll(".cl--obscure").forEach((tag) => {
tag.addEventListener("click", removeObscure, { once: true });
});
}
);
const obscureAndClick = (t) => {
return [
`<span class="cl--obscure cl--obscure-hint cl--obscure-clickable">${t.values[0]}</span>`,
];
};
const obscureAndClickFix = (t) => {
return [
`<span class="cl--obscure cl--obscure-fix cl--obscure-clickable"><span>${t.values[0]}</span></span>`,
];
};
const frontStylizer = closet.Stylizer.make({
processor: (v) => `<span style="color: cornflowerblue">${v}</span>`,
});
/*here goes the setup - change it to fit your own needs*/
filterManager.install(
closet.recipes.shuffle({ tagname: "mix" }),
closet.recipes.order({ tagname: "ord", }),
wrappedClozeShow({ tagname: "cl", frontEllipser: obscureAndClick, frontStylizer: frontStylizer, }),
wrappedClozeShow({ tagname: "cx", frontEllipser: obscureAndClickFix, frontStylizer: frontStylizer, }),
closet.flashcard.recipes.cloze({ tagname: "c", defaultBehavior: closet.flashcard.behaviors.Show, }),
closet.flashcard.recipes.multipleChoice({ tagname: "mc", defaultBehavior: closet.flashcard.behaviors.Show, }),
closet.flashcard.recipes.sort({ tagname: "sort", defaultBehavior: closet.flashcard.behaviors.Show, }),
closet.browser.recipes.rect({ tagname: "rect", defaultBehavior: closet.flashcard.behaviors.Show, })
);
closetPromise.then(() => {
if (!window.ONCLICK_SET) {
// only set keydown event listener once
window.addEventListener("click", (event) => {
if (event.target.nodeName === "rect") {
event.target.parentElement.classList.remove("is-front");
event.target.parentElement.classList.add("is-back");
}
})
window.addEventListener("keydown", (event) => {
if (event.code === "KeyG") {
const next = document.querySelector(".closet-rect.is-front");
if (next) {
next.classList.remove("is-front");
next.classList.add("is-back");
}
}
});
window.ONCLICK_SET = true;
}
});
return output;
}
var getAnkiPrefix = () =>
globalThis.ankiPlatform === "desktop"
? ""
: globalThis.AnkiDroidJS
? "https://appassets.androidplatform.net"
: ".";
var closetPromise = import(`${getAnkiPrefix()}/__closet-0.5.3.js`);
closetPromise
.then(
({ closet }) =>
closet.template.anki.initialize(
closet,
closetUserLogic,
"{{Card}}",
"{{Tags}}",
"front"
),
(error) => console.log("An error occured while loading Closet:", error)
)
.catch((error) =>
console.log("An error occured while executing Closet:", error)
);
if (globalThis.onUpdateHook) {
onUpdateHook.push(() => closetPromise);
}
</script>
</div>```


This template is mine. Did you or @ankinium figure out what the issue was?
If not, let me know. It’ll help me if I know which template of mine you’re working with:

Template 1 - aka incremental image occlusion

Incremental Image Occlusion - AnkiWeb

or

Template 2 - Closet Note Template

https://ankiweb.net/shared/info/1671894111

May seem self-evident, but most people use template 2 so I like to be sure what you are using.