Cloze one by one uncovering

Anki Card Design
14

@kleinerpirat I’ve been using a closet note type that you helped set up some time ago, and I’d like your help again please.

I want to add a keyboard shortcut that would incrementally reveal the [[cl::]] and [[cx::]] type clozes. I looked into the “Reveal Clozes with Key Presses” script on the closet website, but it allows the clozes to reveal only with the keyboard shortcut, and not on clicking, which makes reviewing impossible on the mobile apps. Plus it’s not been updated since the major closet update which separated the styling and scripting, so I can’t make it work with the current closet template anway; or make enough sense of it to integrate into the click to reveal script, with my almost nil JS knowledge.

I also tried modifying the Anking one-by-one script, by making it target the closet cloze classes instead of the default cloze class, but it fails to work, maybe because it’s script executes before/after closet, not sure though.

Here's the code I'd added to the "Closet Setup" script for the cl and cx tags to work: 
/** Click to reveal cloze */

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.flashcard.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: var(--cloze-color)">${v}</span>`,
})

filterManager.install(
  wrappedClozeShow({
    tagname: 'cl',
    frontEllipser: obscureAndClick,
    frontStylizer: frontStylizer,
  }),

  wrappedClozeShow({
    tagname: 'cx',
    frontEllipser: obscureAndClickFix,
    frontStylizer: frontStylizer,
  }),
)

You spoke of your note template that can do it all? If it does support both key and click revealing incremental clozes, I’d like to see it.

(I think this in on topic for the thread, let me know if it is not though.)