Custom algorithm for answer's validation and data-sharing between front and back of a card

Anki Card Design
21

The explanation can help, thanks!

22

So, I ran a few tests and indeed, the variables defined as in the first solution proposed by @ZornHadNoChoice seem to have global scope.
But I also ran tests with sessionStorage, and there too, the scope of the variables seems to be global. Can you confirm that this is the case? For example, I defined the storage of a variable on the front of a card generated by a type A note, and I was able to retrieve it on the back of a card generated by a type B note…

23

The scope of variables defined in the root of a script is the page in which it is being executed (they are literally properties of the window object, var x = 10; is equivalent to window.x = 10; and window["x"] = 10;).
The scope of sessionStorage is a browser session. Meaning everything saved there will be accessible from other pages/iframes opened in the same tab.

24

I was intrigued by the fact that your answer did not match what I was observing. In fact, when I did the same test as you with the word “Anki,” this is the HTML I got :

<code id="typeans">
    <span class="typeBad">-</span>
    <span class="typeGood">nki</span>
    <br>
    <span id="typearrow">↓</span>
    <br>
    <span class="typeMissed">A</span>
    <span class="typeGood">nki</span>
</code>

I tried to understand why I didn’t get the same result as you… Until I remembered that I was using a very old version of Anki (2.1.46).

I then accessed a more recent version and observed the same behavior as you:

<code id="typeans">
    <span class="typeMissed">-</span>
    <span class="typeGood">nki</span>
    <br>
    <span id="typearrow">↓</span>
    <br>
    <span class="typeMissed">A</span>
    <span class="typeGood">nki</span>
</code>

I therefore conclude that between these two versions of Anki, there has been a change in the algorithm for formatting the result of the comparison between the user input and the expected answer.

25

A lot changes. You don’t know for six months whether an add-on will work. And you have a very old version.

26

That’s why I specifically asked for built-in solutions and excluded answers suggesting add-ons(no offense to add-on developers) or, more generally, code that I couldn’t maintain myself.

27

Well, if everyone’s using new versions, it’ll work, but if they’re using older versions, you’ll have to do it through localStorage.
And everything changes. Even Anki supports Win10 now, but what will happen next?
So you need to update at least once a year.

28

There may be valid reasons why someone would not want to update software, and I’m of the opinion that people should not feel obligated or pressured to do so. But we are getting off topic…

29

Are you creating this for yourself or for everyone? If it’s for yourself, you can use the mechanism that currently works in your version. But if it’s for everyone, you’ll have to take different things into account. Recently, I had to take into account AnkiDroid’s quirks; if it’s simpler now, that’s fine. But there are people who still use last year’s version, and they’ll have questions. So it’s easier for developers not to support the old version, and I like the solution outlined here for its simplicity.

30

To sum up the discussion so far (for anyone who’s interested), there are currently two ways to share any data between the front and back of a card :

  • Define the variable at the root of the JavaScript’s source code as described by @ZornHadNoChoice. A variable defined in this way has global scope.

  • Use the sessionStorage property of the Window object, as described by @Eltaurus. The scope of sessionStorage is global, which makes variables defined through sessionStorage globally accessible. This method would also be future-proof as @Eltaurus explained.

Both options use JavaScript’s Window object.

Personally, I’m not comfortable with the idea of using either of these methods because the variable has global scope or is globally accessible. This requires extreme caution in terms of coding.

In the specific case where the data to be shared between the front and the back of a card is the answer entered by the user on the front of the card, it is possible to “reconstruct” the answer entered by the user on the back of the card, as described by @ZornHadNoChoice, or in a shorter form as described by @Eltaurus. Just be aware that the algorithm for displaying the comparison between the user’s answer and the expected one may change from one version of Anki to another, and that the code for “reconstructing” the user’s response will therefore need to be udapted accordingly.

So for now, the answer to both the questions in my initial post is there is no built-in way, but there are workarounds which are more or less acceptable depending on your needs…

PS: I included direct links to posts on this page, but was informed by a popup I’m not allowed to (which is strange since I could add links in my initial post). So I removed those links. Sorry if it makes my recap less readable.

31

SessionStorage data is only available for one tab. Data is deleted when:

Closing the tab
Closing the browser

I don’t know what will happen over time, whether there will be tabs, etc., so I used localStorage—it’s essentially the same as sessionStorage now—just in case something changes in Anki.
The source code is available in this deck: https://ankiweb.net/shared/info/115901085

image
image513×278 5.94 KB