Refold Vocab Anki Deck Mobile Mode

README.md

What is this?

It's a modification for the excellent Refold Japanese language learning Anki decks which enables showing readings with a gamepad on Anki Mobile. There are also style tweaks to make the fonts easier to read at a distance and hides buttons.

This probably works with other language decks but I haven't tried it.

How does it work?

This hack uses the page scroll event so that you can push the arrow buttons on a gamepad to show readings.

How do I use it?

Add the following to the front card just before </script> in the {{#Kanji}} section.

var readingRevealed = false;
document.addEventListener('scroll', function(event) {
    if (readingRevealed) return
    var instruction2 = document.getElementById("step_2");
    if (instruction2) {
        readingRevealed = true;
        revealReading()
    };
});

Add this to the back card near the end just before the </script>.

setTimeout(function () {
    var readingRevealed = false;
    document.addEventListener('scroll', function(event) {
        if (readingRevealed) return;
        readingRevealed = true;
        revealReading();
    });
}, 500);

Add this to the end of the styling.

/* Custom mobile hacks. */

.mobile .card {
  font-size: 30px;
}

.mobile .card-target,
.mobile .word,
.mobile .word-reading {
  font-size: 62px;
  margin: 0.2em 0;
}

.mobile #example-sentence {
  font-size: 34px;
}

.mobile .example-sentence-reading ruby rt {
  font-size: 24px;
}

.mobile .sentence-translation {
  margin-top: 0.5em;
  font-size: 24px;
}

.mobile .rf-button, .mobile .replay-button {
  display: none;
}

html.mobile {
  min-height: 100%;
  margin-bottom: 5px;
}

body {
  margin: 5px;
}