@kleinerpirat
Hello!
I’m trying to set up Closet and wanted to add the Graphical Effects function to my cards.
I tried your suggestions from earlier in the thread and added the styling directly to the card as well as the edited code to the closet setup.
However, the changes aren’t actually showing up on the cards. Additionally there’s an error message at the bottom of the front and back templates.
Anki version: Version 2.1.40 on macOS Big Sur
Front Template
{{Front}}
<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="Closet Setup" data-version="v0.1">
function closetUserLogic(
closet,
preset,
chooseMemory,
) {
const elements = closet.anki.getQaChildNodes()
const memory = chooseMemory('closet__1')
const filterManager = closet.FilterManager.make(preset, memory.map)
const output = [[
elements,
memory,
filterManager,
]]
/* here goes the setup - change it to fit your own needs */
/** Fancy multiple choice */
const wrappedMultipleChoiceShow = closet.wrappers.aftermath(closet.flashcard.recipes.multipleChoice.show, (e, inter) => {
document.querySelectorAll('.cl--child')
.forEach(v => v.addEventListener('click', () => {
const container = document.querySelector('.cl--container')
if (container) {
container.classList.add('cl--reveal')
}
}))
const keyword = 'fancyMultipleChoice'
if (!inter.environment.has(keyword)) {
inter.environment.set(keyword, true)
}
})
const wrapItem = (v, _i, cat) => `<div class="cl--card"><div class="cl--child cl--category-${cat}"><h3>${v}</h3></div></div>`
filterManager.install(wrappedMultipleChoiceShow({
tagname: 'mc',
frontStylizer: closet.Stylizer.make({
mapper: wrapItem,
separator: '',
processor: (v) => `<div class="cl--container">${v}</div>`,
}),
backStylizer: closet.Stylizer.make({
mapper: wrapItem,
separator: '',
processor: (v) => `<div class="cl--container cl--reveal">${v}</div>`,
}),
}))
return output
}
var getAnkiPrefix = () => globalThis.ankiPlatform === 'desktop'
? ''
: globalThis.AnkiDroidJS
? 'https://appassets.androidplatform.net'
: '.'
var closetPromise = import(`${getAnkiPrefix()}/__closet-v0.3.0.js`)
.then(
closet => closet.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>
Back Template
{{FrontSide}}
<hr id="answer">
{{Back}}
<div id="anki-am" data-name="Assets by ASSET MANAGER" data-version="2.1">
<script data-name="Closet Setup" data-version="v0.1">
function closetUserLogic(
closet,
preset,
chooseMemory,
) {
const elements = closet.anki.getQaChildNodes()
const memory = chooseMemory('closet__1')
const filterManager = closet.FilterManager.make(preset, memory.map)
const output = [[
elements,
memory,
filterManager,
]]
/* here goes the setup - change it to fit your own needs */
/** Fancy multiple choice */
const wrappedMultipleChoiceShow = closet.wrappers.aftermath(closet.flashcard.recipes.multipleChoice.show, (e, inter) => {
document.querySelectorAll('.cl--child')
.forEach(v => v.addEventListener('click', () => {
const container = document.querySelector('.cl--container')
if (container) {
container.classList.add('cl--reveal')
}
}))
const keyword = 'fancyMultipleChoice'
if (!inter.environment.has(keyword)) {
inter.environment.set(keyword, true)
}
})
const wrapItem = (v, _i, cat) => `<div class="cl--card"><div class="cl--child cl--category-${cat}"><h3>${v}</h3></div></div>`
filterManager.install(wrappedMultipleChoiceShow({
tagname: 'mc',
frontStylizer: closet.Stylizer.make({
mapper: wrapItem,
separator: '',
processor: (v) => `<div class="cl--container">${v}</div>`,
}),
backStylizer: closet.Stylizer.make({
mapper: wrapItem,
separator: '',
processor: (v) => `<div class="cl--container cl--reveal">${v}</div>`,
}),
}))
return output
}
var getAnkiPrefix = () => globalThis.ankiPlatform === 'desktop'
? ''
: globalThis.AnkiDroidJS
? 'https://appassets.androidplatform.net'
: '.'
var closetPromise = import(`${getAnkiPrefix()}/__closet-v0.3.0.js`)
.then(
closet => closet.anki.initialize(closet, closetUserLogic, '{{Card}}', '{{Tags}}', 'back'),
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>
Styling
.cl--container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
grid-gap: 0px 40px;
margin: 40px auto;
}
.cl--card {
cursor: pointer;
position: relative;
height: 0;
padding-bottom: 100%;
transition: transform 0.6s ease;
--translate: 0;
transform: translate(var(--translate), var(--translate));
}
.cl--card:hover {
--translate: calc(-5px);
transition: transform 0.3s ease;
}
.cl--child {
position: absolute;
width: 100%;
height: 80%;
padding: 8px 16px;
background: #fff;
box-shadow: 0px 4px 8px rgba(128, 128, 128, 0.1), 0px -4px 8px rgba(255, 255, 255, 0.8);
border-radius: 6px;
transition: inherit;
transform: translate(var(--translate), var(--translate));
z-index: 5;
}
.cl--child > h3 {
color: black;
}
.cl--reveal .cl--category-0 {
background-color: lime;
}
.cl--reveal .cl--category-1 {
background-color: coral;
}
**Closet Setup Code**
const elements = closet.anki.getQaChildNodes()
const memory = chooseMemory(‘closet__1’)
const filterManager = closet.FilterManager.make(preset, memory.map)
const output = [[
elements,
memory,
filterManager,
]]
/* here goes the setup - change it to fit your own needs */
filterManager.install(
closet.recipes.shuffle({ tagname: ‘mix’ }),
closet.recipes.order({ tagname: ‘ord’ }),
closet.recipes.cloze({ tagname: ‘c’ }),
closet.recipes.multipleChoice({ tagname: ‘mc’ }),
closet.browser.recipes.rect({ tagname: ‘rect’ }),
)
/** Fancy multiple choice */
const wrappedMultipleChoiceShow = closet.wrappers.aftermath(closet.flashcard.recipes.multipleChoice.show, (e, inter) => {
document.querySelectorAll(’.cl–child’)
.forEach(v => v.addEventListener(‘click’, () => {
const container = document.querySelector(’.cl–container’)
if (container) {
container.classList.add('cl--reveal')
}
}))
const keyword = ‘fancyMultipleChoice’
if (!inter.environment.has(keyword)) {
inter.environment.set(keyword, true)
}
})
const wrapItem = (v, _i, cat) => <div class="cl--card"><div class="cl--child cl--category-${cat}"><h3>${v}</h3></div></div>
filterManager.install(wrappedMultipleChoiceShow({
tagname: ‘mc’,
frontStylizer: closet.Stylizer.make({
mapper: wrapItem,
separator: ‘’,
processor: (v) => <div class="cl--container">${v}</div>,
}),
backStylizer: closet.Stylizer.make({
mapper: wrapItem,
separator: ‘’,
processor: (v) => <div class="cl--container cl--reveal">${v}</div>,
}),
}))
Can this image occlusion work on 2.1.49? I downloaded this template 
Solved already