That’s the same thing. Within the setup, there is a section where it says
/* here goes the setup - change it to fit your own needs */
That’s where you put your custom code.
Both the YouTube tutorial and the website examples are a bit outdated. The necessary changes you need to make have already been discussed in this thread, but to save you some time, here’s what you need to do to get your multiple choice setup working:
Styling (CSS)
Closet no longer injects styling via the user setup, so you need to move these parts to the note template.
What you need to do
Add the following CSS to the styling section of your note template:
.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;
}
Changed file structure
Since version 0.5.0, Closet has a slightly different file structure.
closet.recipes
became
closet.flashcard.recipes
What you need to do
Insert the following code into the closet setup. This is the same code as seen on the website, but with the necessary changes applied to get it working again.
/** 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>`,
}),
}))
That should be all the changes you need to make to get this effect working:
