Link Search Menu Expand Document

Using occlusions with clozes and shuffling

Table of contents

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