Using occlusions with clozes and shuffling
Table of contents
Using occlusions with other effects
Occlusions can be combined with other flashcard features.
/** Default Shuffle */
filterManager.install(closet.recipes.shuffle({ tagname: 'mix' }))
/** Click to reveal cloze */
closet.browser.appendStyleTag(`
.cl--obscure-hint {
filter: blur(0.25em);
}
.cl--obscure-fix::after {
content: 'XXXXXXXXXX';
filter: blur(0.25em);
}
.cl--obscure-fix > span {
display: none;
}`)
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.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>`,
})
filterManager.install(
wrappedClozeShow({
tagname: 'c',
frontEllipser: obscureAndClick,
frontStylizer: frontStylizer,
}),
wrappedClozeShow({
tagname: 'cx',
frontEllipser: obscureAndClickFix,
frontStylizer: frontStylizer,
}),
)
/** Make occlusions */
globalThis.target = closet.browser.recipes.occlusionEditor()(filterManager.registrar)
filterManager.install(
closet.browser.recipes.rect.show({ tagname: 'rect' }),
closet.browser.recipes.rect.reveal({ tagname: 'rectr' }),
closet.browser.recipes.rect.hide({ tagname: 'recth' }),
)
<img src="/assets/images/cranial-bones.png" />
<!--
[[recth1::326,78,587,144]]
[[recth2::117,283,574,274]]
[[recth3::78,666,500,265]]
[[recth4::1656,48,617,165]]
[[recth5::1973,391,495,252]]
[[recth6::1952,1179,509,283]]
-->
[[mix1::[[c1::Frontal bone]]: vertically oriented [[c1::squamous]] part, and the horizontally oriented [[c1::orbital]] part.]]
[[mix1::[[c2::Sphenoid bone]]: in front of the [[c2::basilar]] part of the [[c2::occipital]] bone]]
[[mix1::[[c3::Ethmoid bone]]: separates the [[c3::nasal cavity]] from the brain.]]
[[mix1::[[c4::Parietal bone]]: each bone is roughly [[c4::quadrilateral]] in form]]
[[mix1::[[c5::Temporal bone]]: situated at the sides and base of the skull, and lateral to the [[c5::temporal lobes]] of the [[c5::cerebral cortex]].]]
[[mix1::[[c6::Occipital bone]]: is [[c6::trapezoidal]] in shape.]]