Back Template.html

<!-- version b174588 -->
<script>
// ##############  HINT REVEAL SHORTCUTS  ##############
// All shortcuts will also open with "H" if using the Hint Hotkeys add-on 
var ButtonShortcuts = {
    "Lecture Notes" : "Alt + 1",
    "Missed Questions" : "Alt + 2",
    "Pixorize" : "Alt + 3",
    "Sketchy" : "Alt + 4",
    "Additional Resources" : "Alt + 5",
}
var ToggleAllButtonsShortcut = "'" // '
var ToggleNextButtonShortcut = "H";
// ##############  SHOW HINTS AUTOMATICALLY  ##############
var ButtonAutoReveal = {
    "Lecture Notes": false,
    "Missed Questions": false,
    "Pixorize": false,
    "Sketchy": false,
    "Additional Resources": false,
}

var ScrollToButton = true;

// ##############  TAG SHORTCUT  ##############
var toggleTagsShortcut = "C";

// ENTER THE TAG TERM WHICH, WHEN PRESENT, WILL TRIGGER A RED BACKGROUND
var tagID = "XXXYYYZZZ"

// WHETHER THE WHOLE TAG OR ONLY THE LAST PART SHOULD BE SHOWN

var numTagLevelsToShow = 0;


// ##############  CLOZE ONE BY ONE  ##############
var revealNextShortcut = "N" 
var revealNextWordShortcut = "Shift + N"
var toggleAllShortcut = ","

// Changes how "Reveal Next" and clicking behaves. Either "cloze" or "word".
// "word" reveals word by word. 
var revealNextClozeMode = "cloze" 

// What cloze is hidden with
var clozeHider = (elem) => "👑"
/* 
You can replace the above line with below examples. '█' or '_' works well for hiding clozes.

// Fixed length:
var clozeHider = (elem) => "███"
// Replace each character with "█":
var clozeHider = (elem) => "█".repeat(elem.textContent.length)
// Show whitespaces:
var clozeHider = (elem) => "[" + elem.textContent.split(" ").map((t) => "█".repeat(t.length)).join(" ") + "]"
// Color-filled box (doesn't hide images):
var clozeHider = (elem) => `<span style="background-color: red; color: transparent;">${elem.innerHTML}</span>`
*/

// enables selective cloze one-by-one (e.g. only c1 and c3)
// seperate wanted numbers by "," in one-by-one field
var selectiveOneByOne = false;
// if selective one-by-one is disabled, set this to select a min number of clozes necessary to activate 1b1
// can be set to any number to set lower bound, any falsy value (e.g. 0 or null) disables this setting
var minNumberOfClozes = 0;

</script>


<section>
<div class="clozefield">
  <p>{{cloze:Text}}</p>
</div>

<!-- ##############  EDIT CLOZE DURING REVIEW  ##############
			-change below (not above) to  "edit:cloze:Text" for editable field,
				but be sure to have the correct add-on installed-->

<div class="editcloze">
  <p>{{edit:cloze:Text}}</p>
</div>

<br>

<!-- ##############  TEXT-TO-SPEECH ##############
replace the arrows/dashes from the statement below with double curly brackets-->
{{^One by one}}
<!--tts en_US voices=Apple_Samantha,Microsoft_Zira speed=1.4:cloze-only:Text-->
{{/One by one}}

</section>

<hr>

<section>
<!-- BUTTON FIELDS -->
<!-- ClOZE ONE BY ONE BUTTONS -->

<div id="one-by-one" style="display: none;">{{One by one}}</div>

<div id="1by1-btns" style="display: none;">
  <button id="button-reveal-next" class="button-general" onclick="revealNextCloze()">Reveal Next</button>
  <button id="button-toggle-all" class="button-general" onclick="toggleAllCloze()">Toggle All</button>
</div>

<script>
  (() => {
    let clozeOneByOneEnabled = true;
      clozeOneByOneEnabled = document.getElementById("one-by-one").textContent !== "";
    
    if (clozeOneByOneEnabled) {
      document.getElementById("1by1-btns").style.display = "block";
    }
    })()
  </script>

{{#Lecture Notes}}
<span id = "hint-ln" class="hintBtn" data-name="Lecture Notes">
  <a href="#" class="hint" onclick="toggleHintBtn('hint-ln')"></a>
  <button id="button-ln" class="button-general" onclick="toggleHintBtn('hint-ln')">
    <img src="_AnKingIconSmall.png" style="height:12px"> Lecture Notes
  </button>
  <div dir="auto" id="notes" class="hints" style="display: none;">{{edit:Lecture Notes}}</div>
</span>
{{/Lecture Notes}}

{{#Missed Questions}}
<span id = "hint-mq" class="hintBtn" data-name="Missed Questions">
  <a href="#" class="hint" onclick="toggleHintBtn('hint-mq')"></a>
  <button id="button-mq" class="button-general" onclick="toggleHintBtn('hint-mq')">
    <img src="_AnKingIconSmall.png" style="height:12px"> Missed Questions
  </button>
  <div dir="auto" id="missed" class="hints" style="display: none;">{{edit:Missed Questions}}</div>
</span>
{{/Missed Questions}}

<!-- Extra field as margin note -->
{{#Extra}}
<span class="marginnote" id="extra">{{edit:Extra}}</span>
{{/Extra}}

{{#Pixorize}}
<span id = "hint-pixorize" class="hintBtn" data-name="Pixorize">
  <a href="#" class="hint" onclick="toggleHintBtn('hint-pixorize')"></a>
  <button id="button-pixorize" class="button-general" onclick="toggleHintBtn('hint-pixorize')">
    <img src="_pixorize.png" style="height:12px"> Pixorize
  </button>
  <div dir="auto" id="pixorize" class="hints" style="display: none;">{{edit:Pixorize}}</div>
</span>
{{/Pixorize}}

{{#Sketchy}}
<span id = "hint-sketchy" class="hintBtn" data-name="Sketchy">
  <a href="#" class="hint" onclick="toggleHintBtn('hint-sketchy')"></a>
  <button id="button-sketchy" class="button-general" onclick="toggleHintBtn('hint-sketchy')">
    <img src="_sketchy.icon.png" style="height:12px"> Sketchy
  </button>
  <div dir="auto" id="sketchy" class="hints" style="display: none;">{{edit:Sketchy}}</div>
</span>
{{/Sketchy}}

{{#Additional Resources}}
<span id = "hint-ar" class="hintBtn" data-name="Additional Resources">
  <a href="#" class="hint" onclick="toggleHintBtn('hint-ar')"></a>
  <button id="button-ar" class="button-general" onclick="toggleHintBtn('hint-ar')">
    <img src="_AnKingIconSmall.png" style="height:12px"> Additional Resources
  </button>
  <div dir="auto" id="additional" class="hints" style="display: none;">{{edit:Additional Resources}}</div>
</span>
{{/Additional Resources}}

</section>

<!-- ANKING HYPERLINK IMAGE -->
<a href="https://www.ankingmed.com"><img src="_AnKingIconSmall.png" alt="The AnKing" id="pic"></a>

<!-- NOT-PERSISTING EVENT LISTENER -->
<script>
  if (window.ankingEventListeners) {
    for (const listener of ankingEventListeners) {
      const type = listener[0]
      const handler = listener[1]
      document.removeEventListener(type, handler)
    }
  }
  window.ankingEventListeners = []
  
  window.ankingAddEventListener = function(type, handler) {
    document.addEventListener(type, handler)
    window.ankingEventListeners.push([type, handler])
  }
</script>

<!-- Shortcut Matcher Function -->
<script>
  var specialCharCodes = {
    "-": "minus",
    "=": "equal",
    "[": "bracketleft",
    "]": "bracketright",
    ";": "semicolon",
    "'": "quote",
    "`": "backquote",
    "\\": "backslash",
    ",": "comma",
    ".": "period",
    "/": "slash",
  };
  // Returns function that match keyboard event to see if it matches given shortcut.
  function shortcutMatcher(shortcut) {
    let shortcutKeys = shortcut.toLowerCase().split(/[+]/).map(key => key.trim())
    let mainKey = shortcutKeys[shortcutKeys.length - 1]
    const mainKeyVariants = [];
    if (mainKey.length === 1) {
      if (/\d/.test(mainKey)) {
        // Treat alphanumeric and numpad keys interchangeably
        mainKeyVariants.push("digit" + mainKey)
        mainKeyVariants.push("numpad" + mainKey)
      } else if (/[a-zA-Z]/.test(mainKey)) {
        mainKeyVariants.push("key" + mainKey)
      } else {
        let code = specialCharCodes[mainKey];
        if (code) {
          mainKey = code
          mainKeyVariants.push(code)
        } else {
          mainKeyVariants.push(mainKey)
        }
      }
    } else {
      mainKeyVariants.push(mainKey)
    }
    let ctrl = shortcutKeys.includes("ctrl")
    let shift = shortcutKeys.includes("shift")
    let alt = shortcutKeys.includes("alt")

    let matchShortcut = function (ctrl, shift, alt, mainKeyVariants, event) {
      if (!mainKeyVariants.includes(event.code.toLowerCase())) return false
      if (ctrl !== (event.ctrlKey || event.metaKey)) return false
      if (shift !== event.shiftKey) return false
      if (alt !== event.altKey) return false
      return true
    }.bind(window, ctrl, shift, alt, mainKeyVariants)
    
    return matchShortcut
  }
</script>

<!-- CLICKABLE COLORFUL TAGS -->
{{#Tags}}
<div id="tags-container">{{clickable::Tags}}</div>
<script>
  var tagContainer = document.getElementById("tags-container")
  var tagList;
  if (tagContainer.childElementCount == 0) {
    tagList = tagContainer.innerHTML.split(" ");
    var kbdList = [];
    var newTagContent = document.createElement("div");

    for (var i = 0; i < tagList.length; i++) {
      var newTag = document.createElement("kbd");
      var tag = tagList[i];
      // numTagLevelsToShow == 0 means the whole tag should be shown
      if(numTagLevelsToShow != 0){
        tag = tag.split('::').slice(-numTagLevelsToShow).join("::");
      }
      newTag.innerHTML = tag;
      newTagContent.append(newTag)
    }
    tagContainer.innerHTML = newTagContent.innerHTML;
    tagContainer.style.cursor = "default";
  }
  else {
    tagList = Array.from(tagContainer.children).map(e => e.innerText);
  }
  globalThis.tagList = tagList.map(t => t.trim().toLowerCase());
  if (tagContainer.innerHTML.indexOf(tagID) != -1) {
    tagContainer.style.backgroundColor = "rgba(251,11,11,.15)";
  }

  function showtags() {
    var tagContainerShortcut = document.getElementById("tags-container");

    if (tagContainerShortcut.style.display
      === "none") {
      tagContainerShortcut.style.display = "block";
    } else {
      tagContainerShortcut.style.display =
        "none";
    }
  }
  
  var isShortcut = shortcutMatcher(toggleTagsShortcut)
  ankingAddEventListener('keyup', function (e) {
      if (isShortcut(e)) {
          showtags();
      }
  });

</script>
{{/Tags}}

<!-- HINT BUTTONS SETUP -->
<script>
    (function() {
      window.toggleHintBtn = function(containerId, noScrolling=false) {
        const container = document.getElementById(containerId)
        const link = container.getElementsByTagName("a")[0]
        const button = container.getElementsByTagName("button")[0]
        const hint = container.getElementsByTagName("div")[0]
    
        if (hint.style.display == "none") {
          button.classList.add("expanded-button")
          hint.style.display = "block"
          link.style.display = "none"
          if (ScrollToButton && !noScrolling) {
            hint.scrollIntoView({
              behavior: "smooth", // "auto" for instant scrolling
              block: "start",
              inline: "nearest"
            });
          }
        } else {
          button.classList.remove("expanded-button")
          hint.style.display = "none"
          link.style.display = ""
        }
      }

      window.toggleNextButton = function(){
        // adapted from Hint Hotkey add-on
        var customEvent = document.createEvent('MouseEvents');
        customEvent.initEvent('click', false, true);
        var arr = document.getElementsByTagName('a');
        for (var i=0; i<arr.length; i++) {
          var el = arr[i];
          if (
            window.getComputedStyle(el).display === 'none' ||
            window.getComputedStyle(el.parentElement).display === 'none'
          ) {
            continue;
          }
          if (el.classList.contains("hint")) {
            el.dispatchEvent(customEvent);
            break
          }
        }
      }
        
      const isToggleNextShortcut = shortcutMatcher(ToggleNextButtonShortcut)
      ankingAddEventListener("keydown", (evt) => {
        if (evt.repeat) return
        if (isToggleNextShortcut(evt)) {
          toggleNextButton()
        }
      })
    
      const setupHintBtn = function(elem) {
        const containerId = elem.id
        const fieldName = elem.dataset.name
        const container = document.getElementById(containerId)
        const button = elem.getElementsByClassName("button")[0]
        const tag = `autoopen::${fieldName.toLowerCase().replace(' ', '_')}`
        if (ButtonAutoReveal[fieldName] || (globalThis.tagList && globalThis.tagList.includes(tag))) {
          toggleHintBtn(containerId, noScrolling=true)
        }
        const shortcut = ButtonShortcuts[fieldName]
        container.title = shortcut ? `Shortcut: ${shortcut}` : ""
        const isShortcut = shortcutMatcher(shortcut)
        const isToggleAllShortcut = shortcutMatcher(ToggleAllButtonsShortcut)
        ankingAddEventListener("keydown", (evt) => {
          if (evt.repeat) return
          if (isShortcut(evt) || isToggleAllShortcut(evt)) {
            toggleHintBtn(containerId)
          }
        })
      }
    
      const hints = document.getElementsByClassName("hintBtn")
      for (let i = 0; i < hints.length; i++) {
        setupHintBtn(hints[i])
      }
    })()
    </script>

<!-- Credit: Anki Persistence, MIT: https://github.com/SimonLammer/anki-persistence/blob/8190116c95df202773aa692c5e9ae704fb407bc9/script.js -->

<script>
if (typeof(window.Persistence) === 'undefined') {
  var _persistenceKey = 'github.com/SimonLammer/anki-persistence/';
  var _defaultKey = '_default';
  window.Persistence_sessionStorage = function() { // used in android, iOS, web
    var isAvailable = false;
    try {
      if (typeof(window.sessionStorage) === 'object') {
        isAvailable = true;
        this.clear = function() {
          for (var i = 0; i < sessionStorage.length; i++) {
            var k = sessionStorage.key(i);
            if (k.indexOf(_persistenceKey) == 0) {
              sessionStorage.removeItem(k);
              i--;
            }
          };
        };
        this.setItem = function(key, value) {
          if (value == undefined) {
            value = key;
            key = _defaultKey;
          }
          sessionStorage.setItem(_persistenceKey + key, JSON.stringify(value));
        };
        this.getItem = function(key) {
          if (key == undefined) {
            key = _defaultKey;
          }
          return JSON.parse(sessionStorage.getItem(_persistenceKey + key));
        };
        this.removeItem = function(key) {
          if (key == undefined) {
            key = _defaultKey;
          }
          sessionStorage.removeItem(_persistenceKey + key);
        };
        this.getAllKeys = function () {
          var keys = [];
          var prefixedKeys = Object.keys(sessionStorage);
          for (var i = 0; i < prefixedKeys.length; i++) {
            var k = prefixedKeys[i];
            if (k.indexOf(_persistenceKey) == 0) {
              keys.push(k.substring(_persistenceKey.length, k.length));
            }
          };
          return keys.sort()
        }
      }
    } catch(err) {}
    this.isAvailable = function() {
      return isAvailable;
    };
  };
  window.Persistence_windowKey = function(persistentKey) { // used in windows, linux, mac
    var obj = window[persistentKey];
    var isAvailable = false;
    if (typeof(obj) === 'object') {
      isAvailable = true;
      this.clear = function() {
        obj[_persistenceKey] = {};
      };
      this.setItem = function(key, value) {
        if (value == undefined) {
          value = key;
          key = _defaultKey;
        }
        obj[_persistenceKey][key] = value;
      };
      this.getItem = function(key) {
        if (key == undefined) {
          key = _defaultKey;
        }
        return obj[_persistenceKey][key] == undefined ? null : obj[_persistenceKey][key];
      };
      this.removeItem = function(key) {
        if (key == undefined) {
          key = _defaultKey;
        }
        delete obj[_persistenceKey][key];
      };
      this.getAllKeys = function () {
        return Object.keys(obj[_persistenceKey]);
      }

      if (obj[_persistenceKey] == undefined) {
        this.clear();
      }
    }
    this.isAvailable = function() {
      return isAvailable;
    };
  };
  /*
   *   client  | sessionStorage | persistentKey | useful location |
   * ----------|----------------|---------------|-----------------|
   * web       |       YES      |       -       |       NO        |
   * windows   |       NO       |       py      |       NO        |
   * android   |       YES      |       -       |       NO        |
   * linux 2.0 |       NO       |       qt      |       YES       |
   * linux 2.1 |       NO       |       qt      |       YES       |
   * mac 2.0   |       NO       |       py      |       NO        |
   * mac 2.1   |       NO       |       qt      |       YES       |
   * iOS       |       YES      |       -       |       NO        |
   */
  window.Persistence = new Persistence_sessionStorage(); // android, iOS, web
  if (!Persistence.isAvailable()) {
    window.Persistence = new Persistence_windowKey("py"); // windows, mac (2.0)
  }
  if (!Persistence.isAvailable()) {
    var titleStartIndex = window.location.toString().indexOf('title'); // if titleStartIndex > 0, window.location is useful
    var titleContentIndex = window.location.toString().indexOf('main', titleStartIndex);
    if (titleStartIndex > 0 && titleContentIndex > 0 && (titleContentIndex - titleStartIndex) < 10) {
      window.Persistence = new Persistence_windowKey("qt"); // linux, mac (2.1)
    }
  }
}
</script>

<!-- AUTOFLIP BACK SCRIPT -->
<script>
    // autoflip hides card in front template
    document.getElementById("qa").style.removeProperty("display")
</script>

<!-- CLOZE ONE BY ONE SCRIPT -->
<style>
  .cloze-replacer:hover {
    cursor: pointer;
  }
  .cloze-hidden {
    display: none;
  }
  .cloze-replacer .hidden {
    display: none;
  }
  #extra.hidden {
    display: none;
  }
</style>

<!-- Credit: Code for selective 1b1 clozes is adapted from the Ankizin project: https://ankiweb.net/shared/info/2058530482 -->

<script>
  (function() {
    // enables cloze one-by-one even when one-by-one field is empty
    // minNumberOfClozes is still considered in this case
    // overridden in importance by selectiveOneByOne
    var alwaysOneByOne = false;
    var clozeOneByOneEnabled = true;
    var oneByOneFieldNotEmpty = document.getElementById("one-by-one").textContent !== "";
      clozeOneByOneEnabled = alwaysOneByOne || oneByOneFieldNotEmpty;

    // --- CHECK IF ONE BY ONE SHOULD BE ENABLED FOR THIS SPECIFIC CARD ---
    /**
     * Credit for the getCardNumber function goes to foenixx (GitHub) / ollevolle (AnkiWeb Forum)
     */
    const getCardNumber = function () {
      clz = document.body.className;
      const regex = /card(\d+)/gm;
      let m;

      if ((m = regex.exec(clz)) !== null) {
        return m[1];
      } else {
        // Should only fire if card is not cloze
        console.error("Cannot find cardN class of body element!");
        return "0";
      }
    }

    // parse the cloze numbers for which selectiveOneByOne is enabled
    var clozeNumbers = document.getElementById("one-by-one").textContent.split(',').filter(element => element).map(Number)
    var cardNumberIsOneByOne = !clozeNumbers.filter(n => !Number.isNaN(n)).length || clozeNumbers.includes(parseInt(getCardNumber()))

    // check the amount of clozes -> disable OneByOne if less than minimum value wanted (minNumberOfClozes)
    var numClozesForNumber = (minNumberOfClozes) ? document.querySelectorAll('.cloze').length : 0

    // stop OneByOne if selectiveOneByOne is not enabled for this specific card OR if OneByOne is disabled some other way
    // -> show normal backside
    if (!alwaysOneByOne && ((selectiveOneByOne && !cardNumberIsOneByOne) || (oneByOneFieldNotEmpty && (numClozesForNumber < minNumberOfClozes)))) {
      clozeOneByOneEnabled = false
    }

    if (!clozeOneByOneEnabled) {
      return
    }

    // Needed for amboss to recognize first word in .cloze-hidden
    const CLOZE_REPLACER_SEP = "<span class='hidden'> </span>"

    const hideAllCloze = function(initial) {
      let clozes = document.getElementsByClassName("cloze")
      let count = 0 // hidden cloze count
      for (const cloze of clozes) {
        const existingHidden = cloze.getElementsByClassName("cloze-hidden")[0]
        if (existingHidden) {
          revealCloze(cloze);
        }
        if (cloze.offsetWidth === 0) {
          continue
        }
        const clozeReplacer = document.createElement("span")
        const clozeHidden = document.createElement("span")
        clozeReplacer.classList.add("cloze-replacer")
        clozeHidden.classList.add("cloze-hidden")
        while (cloze.childNodes.length > 0) {
          clozeHidden.appendChild(cloze.childNodes[0])
        }
        cloze.appendChild(clozeReplacer)
        cloze.appendChild(clozeHidden)

        var clozeHints = Persistence.getItem("clozeHints");
        if (clozeHints && clozeHints[count]) {
          clozeReplacer.classList.add("cloze-hint")
          clozeReplacer.innerHTML = clozeHints[count] + CLOZE_REPLACER_SEP
        } else {
          clozeReplacer.innerHTML = clozeHider(cloze) + CLOZE_REPLACER_SEP
        }
        count += 1
        if (initial) {
          cloze.addEventListener("touchend", revealClozeClicked)
          cloze.addEventListener("click", revealClozeClicked)
          cloze.classList.add("one-by-one");
        }
      }
      // Don't hide the Extra field - let it display as a margin note
      // const extra = document.getElementById("extra");
      // if (extra) {
      //   extra.classList.add("hidden");
      // }
      for (const [field, autoReveal] of Object.entries(ButtonAutoReveal)) {
        const container = document.querySelector(`[data-name="${field}"]`)
          if (container) {
            const tag = `autoopen::${field.toLowerCase().replace(' ', '_')}`
            if (autoReveal || (globalThis.tagList && globalThis.tagList.includes(tag))) {
              const link = container.getElementsByTagName("a")[0]
              const button = container.getElementsByTagName("button")[0]
              const hint = container.getElementsByTagName("div")[0]
              button.classList.remove("expanded-button")
              hint.style.display = "none"
              link.style.display = ""
          }
        }
      }
    }
    
    const revealCloze = function(cloze) {
      const clozeReplacer = cloze.getElementsByClassName("cloze-replacer")[0]
      const clozeHidden = cloze.getElementsByClassName("cloze-hidden")[0]
      if (!clozeReplacer || !clozeHidden) return;

      cloze.removeChild(clozeReplacer)
      cloze.removeChild(clozeHidden)
      while (clozeHidden.childNodes.length > 0) {
        cloze.appendChild(clozeHidden.childNodes[0])
      }
      maybeRevealExtraField()
    }

    const revealClozeWord = function(cloze) {
      const clozeReplacer = cloze.getElementsByClassName("cloze-replacer")[0]
      const clozeHidden = cloze.getElementsByClassName("cloze-hidden")[0]
      if (!clozeReplacer || !clozeHidden) return;

      let range = new Range()
      range.setStart(clozeHidden, 0)
      const foundSpace = setRangeEnd(range, clozeHidden, "beforeFirstSpace")
      if (!foundSpace) {
        range.setEnd(clozeHidden, clozeHidden.childNodes.length)
      }
      let fragment = range.extractContents()
      cloze.insertBefore(fragment, clozeReplacer)
      // Extract whitespaces after word
      range = new Range()
      range.setStart(clozeHidden, 0)
      const foundWord = setRangeEnd(range, clozeHidden, "beforeFirstChar")
      if (!foundWord) {
        range.setEnd(clozeHidden, clozeHidden.childNodes.length)
      }    
      fragment = range.extractContents();
      cloze.insertBefore(fragment, clozeReplacer)
      if (!foundWord) {
        cloze.removeChild(clozeHidden)
        cloze.removeChild(clozeReplacer)
        maybeRevealExtraField()
        return
      }
      clozeReplacer.innerHTML = clozeHider(clozeHidden) + CLOZE_REPLACER_SEP
      if (clozeReplacer.classList.contains("cloze-hint")) [
        clozeReplacer.classList.remove("cloze-hint")
      ]
      maybeRevealExtraField()
    }

    const revealNextClozeOf = (type) => {
      const nextHidden = document.querySelector(".cloze-hidden")
      if(!nextHidden) {
          return
      } 
      const cloze = clozeElOfClozeHidden(nextHidden);
      if (type === "word") {
          revealClozeWord(cloze)
      } else if (type === "cloze") {
          revealCloze(cloze)
      } else {
        console.error("Invalid type: " + type)
      }
    }

    const revealClozeClicked = function(ev) {
      let elem = ev.currentTarget
      if (!ev.altKey && (revealNextClozeMode !== "word")) {
        revealCloze(elem)
      } else {
        revealClozeWord(elem)
      }
      ev.stopPropagation()
      ev.preventDefault()
    }

    window.revealNextCloze = function() {
      revealNextClozeOf(revealNextClozeMode)
    }

    window.toggleAllCloze = function() {
      let elems = document.querySelectorAll(".cloze-hidden")
      if(elems.length > 0) {
        for (const elem of elems) {
          const cloze = clozeElOfClozeHidden(elem)
          revealCloze(cloze)
        }
      } else {
        hideAllCloze(initial=false)
      }
    }

    const clozeElOfClozeHidden = (cloze) => {
      while (!cloze.classList.contains("cloze")) {
        cloze = cloze.parentElement;
      }
      return cloze;
    }

    const maybeRevealExtraField = () => {
      let elems = document.querySelectorAll(".cloze-hidden")
      if (elems.length == 0) {
        // Extra field is always visible as margin note, no need to reveal
        // const extra = document.getElementById("extra")
        // if (extra) {
        //   extra.classList.remove("hidden")
        // }
        // Also reveal autoReveal fields
        for (const [field, autoReveal] of Object.entries(ButtonAutoReveal)) {
          const container = document.querySelector(`[data-name="${field}"]`)
          if (container) {
            const tag = `autoopen::${field.toLowerCase().replace(' ', '_')}`
            if (autoReveal || (globalThis.tagList && globalThis.tagList.includes(tag))) {
              const link = container.getElementsByTagName("a")[0]
              const button = container.getElementsByTagName("button")[0]
              const hint = container.getElementsByTagName("div")[0]
              button.classList.add("expanded-button")
              hint.style.display = "block"
              link.style.display = "none"
            }
          }
        }
      }
    }

    /**
     * mode: 'beforeFirstSpace' or 'beforeFirstChar'
     * Return `true` if it exists and setEnd() was called, otherwise `false`
     */
    const setRangeEnd = function(range, node, mode) {
      if (node.nodeType === Node.TEXT_NODE) {
        const regex = mode === 'beforeFirstSpace' ? /\s/ : /\S/
        const match = node.textContent.match(regex)
        if (match) {
          if (match.index === 0) {
            while (node.previousSibling === null) {
              node = node.parentElement
            }
            range.setEndBefore(node)
          } else {
            range.setEnd(node, match.index);
          }
          return true;
        } else {
          return false;
        }
      } else if (mode === 'beforeFirstChar' && isCharNode(node)) {
        range.setEndBefore(node)
        return true
      } else if (!ignoreSpaceInNode(node)) {
        for (const child of node.childNodes) {
          if (setRangeEnd(range, child, mode)) {
            return true;
          }
        }
        return false;
      }
    }

    const ignoreSpaceInNode = function (node) {
      return node.tagName === "MJX-ASSISTIVE-MML"
    }

    const isCharNode = function(node) {
      return ["IMG", "MJX-CONTAINER"].includes(node.tagName)
    }

    hideAllCloze(initial=true)

    const toggleAllButton = document.getElementById("button-toggle-all")
    const revealNextButton = document.getElementById("button-reveal-next")
    toggleAllButton.title = `Shortcut: ${window.toggleAllShortcut}`;
    revealNextButton.title = `Shortcut: ${window.revealNextShortcut}`;
    let isShowNextShortcut = shortcutMatcher(window.revealNextShortcut)
    let isShowWordShortcut = shortcutMatcher(window.revealNextWordShortcut)
    let isToggleAllShortcut = shortcutMatcher(window.toggleAllShortcut)
    ankingAddEventListener("keydown", (ev) => {
      let next = isShowNextShortcut(ev)
      let word = isShowWordShortcut(ev)
      let all = isToggleAllShortcut(ev)
      if (next) {
        revealNextClozeOf("cloze")
      } else if (word) {
        revealNextClozeOf("word")
      } else if (all) {
        toggleAllCloze()
      } else {
        return;
      }
      ev.stopPropagation()
      ev.preventDefault()
    });
  })()
</script>

<!-- WIKIPEDIA SEARCHES -->
<div id="popup-container">
  <button id="close-popup-btn" onclick="closePopup(true)">&times;</button>
  <a id="open-wiki-btn" href="">&#8618;</a>
  <div id="tc"></div>
  <div id="fadebottom_v"></div>
  <div id="ic"><img id="popup-image"></div>
</div>
<style>
  #tc {
    color: #222222;
    position: absolute;
    top: 16px;
    margin: 0px;
    left: 15px;
    text-decoration: none;
    height: 320px;
    overflow: hidden;
    overflow-y: scroll;
    white-space: pre-wrap;
    width: 300px;
  }
  
  #tc p {
    margin: 0px;
  }
  
  #tc::-webkit-scrollbar {
    display: none;
  }
  
  #fadebottom_v {
    height: 30px;
    width: 300px;
    background: -webkit-linear-gradient(270deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 1));
    z-index: 111;
    position: absolute;
    bottom: 0px;
    left: 15px;
  }
  
  #hc {
    color: #666;
    font-weight: bold;
  }
  
  #ic {
    right: 0px;
    top: 30px;
    position: absolute;
  }
  
  #ic img {
    width: 160px;
    height: auto;
    object-fit: cover;
    overflow: hidden;
  }
  
  #popup-image {
    width: 140px;
    height: auto;
  }
  
  #popup-container {
    background: #fff;
    position: absolute;
    bottom: 30px;
    right: 10px;
    z-index: 110;
    -webkit-box-shadow: 0 30px 90px -20px rgba(0, 0, 0, 0.3), 0 0 1px 1px rgba(0, 0, 0, 0.05);
    box-shadow: 0 30px 90px -20px rgba(0, 0, 0, 0.3), 0 0 1px 1px rgba(0, 0, 0, 0.05);
    padding: 0;
    display: none;
    font-size: 17px;
    line-height: 20px;
    border-radius: 2px;
    width: 480px;
    height: 340px;
    overflow: hidden;
    font-family: Arial;
    text-align: left;
    border: 1px solid #d0d0d0;
    border-radius: 5px;
  }
  
  #close-popup-btn {
    position: absolute;
    top: 1px;
    right: 5px;
    width: 32px;
    height: 32px;
    background: none;
    border: 0;
    cursor: pointer;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 20px;
    outline: none;
    text-align: right;
    z-index: 112;
  }
  
  #open-wiki-btn {
    position: absolute;
    top: 10px;
    right: 30px;
    width: 15px;
    height: 32px;
    background: none;
    border: 0;
    cursor: pointer;
    text-decoration: none;
    color: #222222;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 17px;
    outline: none;
    text-align: left;
    z-index: 112;
  }
</style>

<script>
  function getSummaryFor(word) {
    word = word.replace(/^[\.,\/#\!$%\^&\*;:{}=\-_`~() \'\s]+|[\.,\/#\!$%\^&\*;:{}=\-_`~()\'\s]+$/g, "");
    var pc = document.getElementById("popup-container");
    var hc = document.getElementById("hc");
    var tc = document.getElementById("tc");
    var ic = document.getElementById("ic");
    var imgelem = document.getElementById("popup-image");
    imgelem.src = "";
    var shortsum = "";
    
    fetch("https://en.wikipedia.org/api/rest_v1/page/summary/" + word)
    .then(function (response) { return response.json(); })
    .then(function (response) {
      shortsum = response.description;
      shortsum = shortsum.replace(/(Disambiguation.*)/g, "Disambiguation");
      tc.innerHTML = "<span id='hc'>" + capfl(shortsum) + "</span>" + "\n" + response.extract_html + "\n";
      tc.style.width = "420px";
      if (response.extract_html && !response.extract.endsWith("to:")) {
        pc.style.display = "block";
        document.getElementById("open-wiki-btn").href = response.content_urls.desktop.page;
      } else { 
        pc.style.display = "none"; 
      }
      if (!response.thumbnail.source || response.type === "disambiguation") {
        tc.style.width = "420px";
      } else { 
        tc.style.width = "300px"; imgelem.src = response.thumbnail.source; 
      }
    })
    .catch(function (error) { 
      console.log(error); 
    });
  }
  
  function closePopup(deselectAlso = false) {
    pcc.style.display = 'none';
    if (deselectAlso) { clearSelection(); }
  }

  var pcc = document.getElementById("popup-container");
  var prevSel = "";
  ankingAddEventListener('click', function () {
    var currentSelection = getSelectionText();
    if (currentSelection !== "") { prevSel = currentSelection; }
    if (currentSelection && !mustClickW) {
      getSummaryFor(currentSelection);
    } else { closePopup(); }
  });

  ankingAddEventListener('keyup', function (e) {
    if (e.key == "w") {
      if (pcc.style.display === "block") { closePopup(); } else { getSummaryFor(prevSel); }
    }
  });

  function getSelectionText() {
    var text = "";
    if (window.getSelection) {
      text = window.getSelection().toString();
    } else if (document.selection && document.selection.type != "Control") { text = document.selection.createRange().text; }
    return text;
  }

  function capfl(s) {
    return s.charAt(0).toUpperCase() + s.slice(1);
  }

  function clearSelection() {
    if (window.getSelection) { window.getSelection().removeAllRanges(); }
    else if (document.selection) { document.selection.empty(); }
  }
  
  //CUSTOMIZATION
  //this is a variable controlling whether user must click the "w" key to open the popup.
  //if set to true: user must select text, then click the "w" key to open wikipedia popup. Clicking "w" key again will close the popup. 
  //if set to false: user only needs to select text. popup will open automatically. Clicking "w" is an alternative but not obligatory way of opening/closing the popup in this mode.
  //BELOW SET to true or to false. 
  var mustClickW = true;
  //END CUSTOMIZATION
</script>

<!-- ANKIMOBILE USER ACTIONS -->
<script>
var userJs1 = undefined
var userJs2 = undefined
var userJs3 = undefined
var userJs4 = undefined
var userJs5 = undefined
var userJs6 = undefined
var userJs7 = undefined
var userJs8 = undefined
</script>


<!-- IMAGE BLUR -->
<script>
    for (const image of document.querySelectorAll(".blur")) {
        image.classList.add("tappable");
        image.addEventListener("click", () => {
            image.classList.toggle("blur");
        });
    }
</script>