How to ensure triggering a custom shortcut only on the front or the back side of a card?

Anki Card Design
1

I have a function that should be triggered by a key shortcut on one side of a card.

  document.addEventListener("keydown", (e) => {
    if (
      e.key.toLowerCase() === "l" &&
      e.metaKey
    ) {
      e.preventDefault();
      showAnotherExample();
    }
  });

It should be placed and triggered only on the front (or back) side of a card. But the problem is that it can be triggered on both sides of my cards. How to prevent this behavior?

I need to create two functions (one on the front and one on the back) that can be triggered by the same shortcut.

Front:

  document.addEventListener("keydown", (e) => {
    if (
      e.key.toLowerCase() === "l" &&
      e.metaKey
    ) {
      e.preventDefault();
      frontFunction();
    }
  });

Back:

  document.addEventListener("keydown", (e) => {
    if (
      e.key.toLowerCase() === "l" &&
      e.metaKey
    ) {
      e.preventDefault();
      backFunction();
    }
  });
2

Try the following:

Front template

function frontListener(event) {
    if (event.key.toLowerCase() === "l") {
        console.log("front");
    }
}

if ("backListener" in globalThis) {
    document.removeEventListener("keydown", backListener);
}
document.addEventListener("keydown", frontListener);

Back template

function backListener(event) {
    if (event.key.toLowerCase() === "l") {
        console.log("back");
    }
}
if ("frontListener" in globalThis) {
    document.removeEventListener("keydown", frontListener);
}
document.addEventListener("keydown", backListener);

Note that if you use this approach, you cannot use {{FrontSide}} in the back template.

3

@hkr , Thanks for your reply.
When I’m trying to use your code a strange thing happens. The function I’m trying to invoke with the key shorcut starts to malfunction.
There is a variable that should be incremented by 1 every time the function is being triggered. For some reason when I’m using the key shortcut to do the job the variable is being incremented not correctly. It’s being incremented by some number (can be different each time).
What could cause this kind of a problem?

FRONT
<br>
<hr><br>

<div id="word">
  Word: {{Word}}
</div>

<br><br>

<div id="definition">
  Definition: {{Definition}}
</div>

<br><br>

<button onclick="showNextExample()">Show next example 🔄</button>

<br><br>

<div> Example: <br><br>
  {{#Example1}}<div class="example">1: {{Example1}}</div>{{/Example1}}
  {{#Example2}}<div class="example">2: {{Example2}}</div>{{/Example2}}
  {{#Example3}}<div class="example">3: {{Example3}}</div>{{/Example3}}
  {{#Example4}}<div class="example">4: {{Example4}}</div>{{/Example4}}
  {{#Example5}}<div class="example">5: {{Example5}}</div>{{/Example5}}
</div>

<br><br>

<div>
  Test: <div id="test"></div>
</div>


<script>
  {

    const examples = document.querySelectorAll(".example");
    examples.forEach((element) => (element.style.display = "none"));
    var number = 0;
    examples[number].style.display = "block";

    var testNumber = 1;

    function showNextExample() {
      if (number >= examples.length - 1) {
        number = 0;
        testNumber++;
      }
      else {
        number++;
        testNumber++;
      }
      examples.forEach((element) => (element.style.display = "none"));
      examples[number].style.display = "block";

      document.getElementById("test").textContent = testNumber;
    }

    function frontListener(event) {
      if (event.key.toLowerCase() === "l") {
        showNextExample();
      }
    }
    if ("backListener" in globalThis) {
      document.removeEventListener("keydown", backListener);
    }
    document.addEventListener("keydown", frontListener);

		//display how the testNumber is being incremented
    document.getElementById("test").textContent = testNumber;

  }
</script>

testNumber variable is used here to show how the incrementation works when invoking the function either by a regular virtual button or with a key shortcut.

When studying the deck the variable increments like this:
First card – the variable inside the card is being incremended by 1 when pressing a key shortcut (as supposed to be)
Second card – the variable inside the card is being incremended by 2 when pressing a key shortcut
Third card – the variable inside the card is being incremended by 3 when pressing a key shortcut
etc.

Demonstration: https://youtu.be/bdkafMhm6pU
Deck with the card template: https://gofile.io/d/MdbceG

4

Adding the following to the back template, as in the code in my previous comment, should fix that.

if ("frontListener" in globalThis) {
    document.removeEventListener("keydown", frontListener);
}
1 Like
5

@hkr Unfortunately it doesn’t.
Here is the code:
Front:

FRONT
<br>
<hr><br>

<div id="word">
  Word: {{Word}}
</div>

<br><br>

<div id="definition">
  Definition: {{Definition}}
</div>

<br><br>

<button onclick="showNextExample()">Show next example 🔄</button>

<br><br>

<div> Example: <br><br>
  {{#Example1}}<div class="example">1: {{Example1}}</div>{{/Example1}}
  {{#Example2}}<div class="example">2: {{Example2}}</div>{{/Example2}}
  {{#Example3}}<div class="example">3: {{Example3}}</div>{{/Example3}}
  {{#Example4}}<div class="example">4: {{Example4}}</div>{{/Example4}}
  {{#Example5}}<div class="example">5: {{Example5}}</div>{{/Example5}}
</div>

<br><br>

<div>
  testNumber should be incremented by 1: <div id="test"></div>
</div>


<script>
  {

    const examples = document.querySelectorAll(".example");
    examples.forEach((element) => (element.style.display = "none"));
    var number = 0;
    examples[number].style.display = "block";

    var testNumber = 1;

    function showNextExample() {
      if (number >= examples.length - 1) {
        number = 0;
        testNumber++;
      }
      else {
        number++;
        testNumber++;
      }
      examples.forEach((element) => (element.style.display = "none"));
      examples[number].style.display = "block";

      //display how the testNumber is being incremented
      document.getElementById("test").textContent = testNumber;
    }

    function frontListener(event) {
      if (event.key.toLowerCase() === "l") {
        showNextExample();
      }
    }
    if ("backListener" in globalThis) {
      document.removeEventListener("keydown", backListener);
    }
    document.addEventListener("keydown", frontListener);


    //display how the testNumber is being incremented
    document.getElementById("test").textContent = testNumber;

  }
</script>

Back:

BACK

<br>
<hr><br>

<div id="word">
  Word: {{Word}}
</div>

<br><br>

<div id="definition">
  Definition: {{Definition}}
</div>

<br><br>

<button onclick="showNextExample()">Show next example 🔄</button>

<br><br>

<div> Example: <br><br>
  {{#Example1}}<div class="example">1: {{Example1}}</div>{{/Example1}}
  {{#Example2}}<div class="example">2: {{Example2}}</div>{{/Example2}}
  {{#Example3}}<div class="example">3: {{Example3}}</div>{{/Example3}}
  {{#Example4}}<div class="example">4: {{Example4}}</div>{{/Example4}}
  {{#Example5}}<div class="example">5: {{Example5}}</div>{{/Example5}}
</div>

<br><br>

<div>
  testNumber should be incremented by 1: <div id="test"></div>
</div>


<script>
  {

    const examples = document.querySelectorAll(".example");
    examples.forEach((element) => (element.style.display = "none"));
    var number = 0;
    examples[number].style.display = "block";

    var testNumber = 1;

    function showNextExample() {
      if (number >= examples.length - 1) {
        number = 0;
        testNumber++;
      }
      else {
        number++;
        testNumber++;
      }
      examples.forEach((element) => (element.style.display = "none"));
      examples[number].style.display = "block";

      //display how the testNumber is being incremented
      document.getElementById("test").textContent = testNumber;
    }


    function frontListener(event) {
      if (event.key.toLowerCase() === "l") {
        showNextExample();
      }
    }

    if ("frontListener" in globalThis) {
      document.removeEventListener("keydown", frontListener);
    }
    document.addEventListener("keydown", frontListener);


    //display how the testNumber is being incremented
    document.getElementById("test").textContent = testNumber;

  }
</script>

The deck with the code itself: https://gofile.io/d/4FGdJH

6

Try modifying the back template as follows:

diff --git a/back.html b/back.html
index 2d980fd..9dacef8 100644
--- a/back.html
+++ b/back.html
@@ -60,18 +60,18 @@ BACK
       document.getElementById("test").textContent = testNumber;
     }
 
 
-    function frontListener(event) {
+    function backListener(event) {
       if (event.key.toLowerCase() === "l") {
         showNextExample();
       }
     }
 
     if ("frontListener" in globalThis) {
       document.removeEventListener("keydown", frontListener);
     }
-    document.addEventListener("keydown", frontListener);
+    document.addEventListener("keydown", backListener);
 
 
     //display how the testNumber is being incremented
     document.getElementById("test").textContent = testNumber;
2 Likes
7

@hkr Thanks. That’s a silly mistake on my part.

Now it works most of the time fine but there is still a small issue when I make some adjustments to any card while learning/reviewing cards.

If I press “Edit” and make some changes to a card the function starts to malfunction and increments the variable by 2 instead of 1.
Or, for instance, if I go to “Tools –> Manage Note Types” while learning cards and make some changes to any of the note types and then go back to learn cards it also malfunctions.

So each time after editing a card or adjusting settings I need to exit the deck and enter it one more time. That’s very strange.

8

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.