Cloze one by one uncovering

Card Design
16

Consider me very intrigued. :slightly_smiling_face:

I was able to solve the issue after reading the guide, and a few hours of stumbling around, and here’s what i came up with, for anyone interested in using clozes that reveal incrementally on keypress, and also reveal on clicking/tapping them, with Closet clozes.

The Script

In the end I went with a quite different approach from the script I found on closetengine.com . Mostly because I could not make head or tails of it.

if (typeof doc_keyUp !== "function") {
  var doc_keyUp = function(e) {
    if (e.key === "z" || e.code === "Numpad0") {
      flipVisibility();
    } else if (e.code === "NumpadDecimal") {
      removeObscureOnKd();
    }
  };
  document.addEventListener("keyup", doc_keyUp, false);
}

function flipVisibility() {
  if (document.getElementById('hintzu').style.display == 'none') {
    document.getElementById('hintzu').style.display = 'block';
  } else {
    document.getElementById('hintzu').style.display = 'none';
  }
}

function removeObscureOnKd() {
  var firstCloze = document.getElementsByClassName('cl--obscure')[0];
  firstCloze.classList.remove('cl--obscure')
  firstCloze.classList.remove('cl--obscure-hint')
  firstCloze.classList.remove('cl--obscure-fix')
}

This script should work fine if you’re using the closet setup script found in my previous post on this thread.

The relevant function here is removeObscureOnKd, so you can change the keyboard shortcut to whatever you want to using https://keyjs.dev .

The flipVisibility function is for a button to toggle the visibility of some content, it functions basically like the <details> tag, except with a keyboard shortcut too. If someone wants i’ll post how to make it work for your notetype. I used one eventlistener for both functions because it seems efficent to do so.

3 Likes