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.

/** Make occlusions */
filterManager.install(
  closet.browser.recipes.occlusionEditor(),
  closet.browser.recipes.rect.show({ tagname: 'rect' }),
  closet.browser.recipes.rect.reveal({ tagname: 'rectr' }),
  closet.browser.recipes.rect.hide({ tagname: 'recth' }),
)

/** 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,
  }),
)

/** Default Shuffle */
filterManager.install(closet.recipes.shuffle({ tagname: 'mix' }))

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