Link Search Menu Expand Document

Incremental Reveal

Table of contents

  1. Reveal clozes on click
  2. Reveal clozes on key press

Reveal clozes on click

Using the obscuring feature, you can also create more interactive cards, which allow user input. In this example, you have to click on each cloze, to reveal its content. This is also dubbed incremental reveal, or incremental clozes.

/** 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,
  }),
)
The four major dopaminergic pathways:
* [[c1::Mesolimbic pathway]]
* [[c1::Mesocortical pathway]]
* [[c2::Nigostriatal pathway]]
* [[cx2::Tuberoinfundibular pathway]]
* [[cx3::Hypothalamospinal projection]]
* [[cx3::Incertohypothalamic pathway]]

As you can see, the c tag provides the effect of a typical incremental cloze. The cx tag is useful for cases, where simply obscuring the text would still yield too much context.

As an alternative to separating out a single note into multiple cards, some people also like to make one large incremental cloze card. This can be useful for cramming for a exam.

/** 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,
  }),
)
The four major dopaminergic pathways:
* Mesol[[c0::imbic pathway]]
* Mesoc[[c0::ortical pathway]]
* Ni[[c0::gostriatal pathway]]
* Tub[[c0::eroinfundibular pathway]]
* Hy[[c0::pothalamospinal projection]]
* In[[c0::certohypothalamic pathway]]

Reveal clozes on key press

Rather than using clicks, we can also utilize key presses. The following clozes will not react to clicks, but only to key presses. In particular, pressing Q will reveal one cloze, pressing W will reveal all clozes at once.

/** Keydown to reveal clozes */
const makeObscureOnKd = (keycode, uid) => {
  return function removeObscureOnKd(event) {
    if (event.keyCode === keycode) {
      const nextTarget = document.querySelector(`.cl--obscure.cl--obscure-kd-${uid}`)

      if (nextTarget) {
        nextTarget.classList.remove('cl--obscure')
        nextTarget.classList.remove('cl--obscure-hint')
        nextTarget.classList.remove('cl--obscure-fix')
      }
    }
  }
}

const makeObscureOnKdAll = (keycode, uid) => {
  return function removeObscureOnKdAll(event) {
    if (event.keyCode === keycode) {
      const nextTargets = document.querySelectorAll(`.cl--obscure.cl--obscure-kd-${uid}`)

      for (const nt of nextTargets) {
        nt.classList.remove('cl--obscure')
        nt.classList.remove('cl--obscure-hint')
        nt.classList.remove('cl--obscure-fix')
      }
    }
  }
}

const wrappedClozeShow = closet.wrappers.aftermath(closet.recipes.cloze.show, (e, inter) => {
  const keyword = 'keydownToRevealObscure'

  if (!inter.environment.has(keyword)) {
    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 revealOnQ = makeObscureOnKd(KeyEvent.DOM_VK_Q, '6')
    const revealAllOnW = makeObscureOnKdAll(KeyEvent.DOM_VK_W, '5')

    document.addEventListener('keydown', revealOnQ)
    document.addEventListener('keydown', revealAllOnW)

    inter.environment.set(keyword, true)
  }
})

const obscureAndKeydown = (tag) => {
  return [`<span class="cl--obscure cl--obscure-hint cl--obscure-kd-5 cl--obscure-kd-6">${tag.values[0]}</span>`]
}

const obscureAndKeydownFix = (tag) => {
  return [`<span class="cl--obscure cl--obscure-fix cl--obscure-kd-5 cl--obscure-kd-6"><span>${tag.values[0]}</span></span>`]
}

const frontStylizer = closet.Stylizer.make({
  processor: v => `<span style="color: cornflowerblue">${v}</span>`,
})

filterManager.install(wrappedClozeShow({
  tagname: 'c',
  frontEllipser: obscureAndKeydown,
  frontStylizer: frontStylizer,
}))

filterManager.install(wrappedClozeShow({
  tagname: 'cx',
  frontEllipser: obscureAndKeydownFix,
  frontStylizer: frontStylizer,
}))
The four major dopaminergic pathways:
* Mesol[[c0::imbic pathway]]
* Mesoc[[c0::ortical pathway]]
* Ni[[c0::gostriatal pathway]]
* Tub[[c0::eroinfundibular pathway]]
* Hy[[c0::pothalamospinal projection]]
* In[[c0::certohypothalamic pathway]]