Position-based Quran Memorization with Anki

“Use one mushaf for your memorization. Recalling based on location is easier and more intuitive” is the often cited memorization tips for Quran. We would pick one Quran book and stick with it to a lifetime long 😸.

Eloquent Connected Lines (by Karim MANJRA)

Pagination is what matters in that tips. So, when it comes to digital Qur’an, the widespread standard is to use pagination like the one adopted by Tanzil (I found real mushaf that use this exact pagination too, but do not know exactly whose pagination it is or what it’s called). The Quran free app in Play Store as well use this pagination. So, it is a wise choice to start our memorization through this pagination preference.

Why Anki?

If you do comfortable doing memorization and re-memorization directly on a mushaf, that’s wonderful (keep at it!). Often time, we want to get more with limited time we have: remembering part by part to be recited from the middle of surah. Like a puzzle, you might stumbled on a favorite ayah in the middle of surah then start to put together right from that part. Or simply, you want to focus remembering on specific part that’s difficult for you: to get reminded routinely as not to forget the part.

That use cases are what invited our special guest here, the Anki. Anki is an app or method to help you review learning by using hint on the front of a card and answer on its back-side, thus help your brain associate the hint and answer. It builds your long term memory by keep-showing you many cards, routinely.

Forget curve and review effect (source)

For Quran, those that comfortable in mushaf position would be reluctant to move to Anki. But actually, Anki is all yours! You can put whatever things into the front (as a hint) and back (as the “to learn” part) of your card. Hence, just put your Quran page to the card 😎.

Front side (left) and back side (right) of a Surah Al-Mulk:1–4 card

“Hey creating just one card would be lots of work,” you might say. Fortunately, no! We already have wonderful Tanzil project plus some Javascript and CSS to the rescue.

Creating Cards

First, go to Tanzil website, https://tanzil.net/, and find the page you want to memorize. After that pick the most comfortable font size and ensure your browser zoom is 100% (or consistently set to a specific size).

Find the page and set the preferred font and size

Then, open the Developer Panel by pressing Ctrl+Shift+i or Cmd+Alt+i on the Tanzil page. There’ll be a panel looked like the following (it may be light themed).

Steps in adding CSS custom styles

We’ll adding the style by creating new file to be read by the page. Navigate on to “Style Editor” tab. Then click on the plus (+) button. An empty space will be served for us to write. Copy and paste the following.

.aya.-inviz .ayaText {
  background-color: rgba(0, 20, 100, 0.1);
  color: transparent;
}
.aya.-invizfocus .ayaText {
  background-color: rgba(0, 20, 255, 0.2);
  color: transparent;  
}
.aya.-viz .ayaText {
  color: black;
}

Once you paste the text, it already takes effect. You may save the text into a file for later use. When you reload the page, you only need to load from file from the button shown below.

Save and load custom style

Next we will magically convert the ayah page to show some ayah for our back side card. So navigate to “Console” tab and copy paste the following code then press Enter.

/**
* Hide all ayah except in specified range
*
* @param surah Surah number.
* @param start The first ayah to show.
* @param stop The last ayah to show.
*/
function showOnlyAyaat(surah, start, stop) {
  document.querySelectorAll('.aya').forEach(function (el) {
    var idparts = el.id.split('-');
    var surahno = idparts[0];
    var ayahno = idparts[1];
    el.classList.remove('selected');
    if (surahno == surah && !(start <= ayahno && ayahno <= stop)) {
     el.classList.add('-inviz');
    }
  })
}
/**
* Hide all ayah and mark specified range (in bluish)
*
* @param surah Surah number.
* @param start The first ayah to show.
* @param stop The last ayah to show.
*/
function focusHideOnlyAyaat(surah, start, stop) {
  document.querySelectorAll('.aya').forEach(function (el) {
    var idparts = el.id.split('-');
    var surahno = idparts[0];
    var ayahno = idparts[1];
    el.classList.remove('selected');
    el.classList.add('-inviz');
    if (surahno == surah) {
      if (start <= ayahno && ayahno <= stop) {
        el.classList.add('-invizfocus');
      }
    }
  })
}

Now, you can call the above code to make your page display only specific part. Directly enter in your Console something like `showOnlyAyaat(82, 1, 5)` to show only surah 82 ayah 1 to 5.

Call the code with ayat begin and end numbers

The other ayaat will be hidden

After it looks good, you can screen capture the page by going to the “Inspector” and click the button left to the “Inpsector” part to select part of the page to capture. You may also search for “#quranText” in “Search HTML” input below the tab.

You can screen capture the page

After the part found, you can right click on it and select “Screenshot Node”. Nah, finally 🎉! You’ve download the image for your card.

Bonus GIF

Walkthrough

Faster?

You can create a Greasemonkey script so that all you need to do is calling the code. Maybe for later article.. By Allah will, I will try to create a Anki repository so that you can easily use an existing images or contributing to it.

With all said, this is a potential way to easily memorize Qur’an.