Back side appears blank- custom template

Anki Card Design
1

I am using a custom template I developed using Claude AI to help remember Mnemonics.
If using the deck on Android, everything functions as it should.
But on PC, only the first card shows the back side on pressing the spacebar. The back of every subsequent card shows up as blank. The cards advance and show the front as they should.
if I D out, and do the same deck again, the rear of the first card always shows.
I have tried changing through all the video drivers and pressing shift during startup to negate any issues with the add-ons, but the problem persists.

the back template is as follows.

<div id="backContent" class="back"> 
    <div class="mnemonic"></div>
    <div id="itemContainer"></div>
</div>

<div id="buttonContainer">
    <button onclick="revealNext()" id="revealButton">Reveal Next (Q)</button>
    <button onclick="revealAll()" id="revealAllButton">Reveal All</button>
</div>

<script>
let items;
let currentIndex = 0;

// Add keyboard listener for 'Q'
document.addEventListener('keydown', function(event) {
    if (event.code === 'KeyQ') {
        event.preventDefault(); // Prevent any default behavior
        revealNext();
    }
});

function initialize() {
    // Get the original content
    const originalContent = `{{Back}}`;
    const lines = originalContent.split('<br>');
    
    // Set mnemonic (first line)
    const mnemonicDiv = document.querySelector('.mnemonic');
    mnemonicDiv.innerHTML = lines[0];
    
    // Get items (skip mnemonic and empty line)
    items = lines.slice(2);
    
    // Create hidden items
    const container = document.getElementById('itemContainer');
    container.innerHTML = ''; // Clear container
    
    items.forEach(item => {
        container.innerHTML += `<div class="item hidden">${item}</div>`;
    });
}

function revealNext() {
    if (currentIndex < items.length) {
        document.querySelectorAll('.item')[currentIndex].classList.remove('hidden');
        currentIndex++;
    }
}

function revealAll() {
    document.querySelectorAll('.item').forEach(item => {
        item.classList.remove('hidden');
    });
    currentIndex = items.length;
}

// Initialize when card is shown
initialize();
</script>

<style>
.hidden {
    display: none;
}
.item {
    margin: 5px 0;
    transition: opacity 0.3s ease;
    text-align: left;  /* Left alignment for items */
    padding-left: 20px;
}
.mnemonic {
    margin-bottom: 20px;
    font-weight: bold;
    color: red;
    text-align: center;  /* Center alignment for mnemonic */
}
#backContent {
    display: flex;
    flex-direction: column;
    align-items: center;    /* Horizontally center the content */
    padding-top: 20px;      /* Add space at the top */
    text-align: left;       /* Ensure the text is left-aligned */
    padding-bottom: 60px;   /* Add space at the bottom to avoid overlap with buttons */
}
#itemContainer {
    margin-bottom: 10px; /* Small gap between text and buttons */
}
#buttonContainer {
    position: fixed;         /* Fixes the buttons at the bottom */
    bottom: 0;              /* Align to the bottom of the window */
    left: 0;
    width: 100%;            /* Full width */
    /*background-color: #fff;  Optional: Background to ensure visibility */
    text-align: center;     /* Center the buttons */
    padding: 10px 0;        /* Padding around the buttons */
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1); /* Optional shadow for a floating effect */
}
button {
    margin: 5px;
    padding: 10px 20px;
    font-size: 18px;
    background: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
button:hover {
    background: #45a049;
}
</style>
2

Try replacing let with var in these two lines:

let items;
let currentIndex = 0;
2 Likes
3

Also on desktop, this will add the eventListener again each time you progress to the next card back, causing pressing q to call revealNext as many times as there have been cards reviewed so far. You might not have noticed if the amount of hidden elements added was never more than one.

Fix:

// Prevent duplicate eventListener adding on desktop
var qKeydownListenerAdded;
if (!qKeydownListenerAdded) {
  document.addEventListener('keydown', function(event) {
      if (event.code === 'KeyQ') {
          event.preventDefault(); // Prevent any default behavior
          revealNext();
      }
  });
  qKeydownListenerAdded = true;
}
1 Like
4

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