Using occlusions with clozes and shuffling

Using occlusions with other effects

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.]]

Using occlusions with clozes and shuffling

Table of contents

Using occlusions with other effects