JavaScript variables not retained after card flip

[hssm]

Originally reported on Google Code with ID 1966

What steps will reproduce the problem?
1.I created a card type using HTML and JavaScript. this card type is to randomly display
one sentence from the fields of one notetype 
2.the card type is as following:

%%%%%%%%%%%%%%%%%%%%%%%%%%%% this is the front template of a card type%%%%%%%%%%%%
<div id="front"></div>

<script>
var front = document.getElementById("front");
var fieldsArry = ["{{s1}}","{{s2}}","{{s3}}"];
function numValidField(ary) //only the empty fields at the end of array is allowed,looks
like [1111000]
{  
    var len = ary.length;
    var i = len - 1;   
    while(ary[i]==""&&i>=0)   // this function return the number of nonempty fields
{
     len--; 
     i--;
}
return len;
}
var answer = document.getElementById("answer");
if (!answer) {  // if not on the back of the flash card
  var i = Math.floor(Math.random() * numValidField(fieldsArry));
  // create a random subscript
}
front.innerHTML=fieldsArry[i];
</script>
%%%%%%%%%%%%%%%%%%%%%%%%%%%% this is the back template of a card type%%%%%%%%%%%%%%
{{FrontSide}}

<hr id=answer>

{{nwd}}
%%%%%%%%%%%%%%%%%%%%%%%%%%%% this is the styling  of a card type%%%%%%%%%%%%%%%%%%%
.card {
 font-family: arial;
 font-size: 20px;
 text-align: center;
 color: black;
 background-color: white;
}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%end%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
3.or you can download my deck of .apkg file in the attachment

What is the expected output? What do you see instead?
my expected output is firstly randomly show a sentence, then after I filp the card
I shows the new words I have to learn. actually, the above code works well either on
PC version and my IOS device. but when i come to Android, I found once the answer of
a card is shown, usually the previous randomly shown sentence could be changed.

I guess this is because after I flip the card ankidroid run the code from front template
to back template again.

I use android 2.3.6 and ankidroid 2.0.3

I am not sure this should be counted as a bug or not, but I do hope ankidroid can have
the same output as PC vesion and AnkiMobile.

If anyone could present another HTML/JaveScript code to help me solve the problem.
I do appreciate it :) 

Reported by Taoluo93 on 2014-01-15 13:14:25

---

- _Attachment: [random display3.0.apkg](https://storage.googleapis.com/google-code-attachments/ankidroid/issue-1966/comment-0/random display3.0.apkg)_

[hssm]

So, this works on Anki Desktop, right?

The problem is that the JavaScript is executed two times, I guess?

I think I remember an option to not refresh WebView... not sure whether it applies
to the current problem though.

Reported by nicolas.raoul on 2014-02-28 07:41:01

• Status changed: Accepted
• Labels added: Priority-Low
• Labels removed: Priority-Undecided

[hssm]

Also seeing the same (Android 5.0.1, ankidroid 2.3.2), but worth noting that this is
related to issue #1484

Reported by brownie.brown on 2015-01-04 14:04:30

[epistularum]

I am still experiencing this issue 3 years later it is quite annoying.
I'd really like to use decks such as the popular "DoJG Core Random" both in ankidroid and anki desktop.
Is there any workaround?

I've found someone who seems to have found a workaround but I can't seem to make it work (I'm not experienced with javascript)
Workaround in question: https://yingtongli.me/blog/2015/03/15/random-question-generator-on-anki-using.html

[mikehardy]

There was another issue recently which led to the discovery (possible not for the first time) that AnkiDroid does not share the WebView between the front and the back during a flip - it loads a new one. The other issue used an HTML+javascript local storage workaround in order to persist / load state between the two webviews, and it was sufficient for that problem.

Which is just to say that there are workarounds even with the limitation of not maintaining WebView state across the note flip from front to back, but other than that no one has yet proposed a pull request that shares the webview between the two

[epistularum]

Well that's a real bummer, it doesn't looks like it's gonna be fixed any time soon even though it seems like a basic feature ankidroid should have implemented long ago.

I guess I'm stuck with fields getting randomized two times, feels bad.

[mikehardy]

while I understand the frustration, just remember "ankidroid" is "us", I only started working on it myself a few months ago. I found a reference to the other person who overcame this limitation - has re-usable code and everything over on his github... #4868 (comment)

[timrae]

#493 was also meant to address this use case, it would be nice if someone with some knowledge on the topic could write some nice instructions and put them on the advanced formatting wiki

[epistularum]

Don't get me wrong I genuinely admire the work being done here, I just get obsessed over things I can't solve and my poor coding skill surely is not helping.

[epistularum]

@timrae
I've read #493 and #4868 I'm not fully understanding the technical terms being used but does it mean that anki-canvas is preserving state between front and back?

Also here is the Anki deck I've been talking about if anyone is interested: https://drive.google.com/open?id=1FhJBal0-NBhQ85wsvWWocRnnSJZhPkMF

[mikehardy]

@epistularum that's exactly it - there are ways to preserve state even though AnkiDroid doesn't use the same WebView.

The anki-canvas repo linked in #4868 is a great piece of work but uses a lot of technology to get the job done and has a specific use case (an embeddable drawing object - no small thing, justifying all the ancillary technology).

The technique of state storage is the important thing here though - and that's in these lines if I'm reading correctly (the store declaration, and load + save methods):
https://github.com/pigoz/anki-canvas/blob/master/src/touch.ts#L43

[epistularum]

@mikehardy That's quite the particular use case indeed. If I were to use anki-canvas would it solve the issue of cards being randomized two times? Because I might switch to for a while anki-canvas if it's capable of doing so (assuming I know how to even install it).

The technique of state storage was also mentioned on the link with the workaround I posted up there (even though I'm too much of a monkey to even make it work on my own deck).

I'm sure the piece of code you just linked is quite remarkable but to be honest I have no understanding of its meaning.

[hssm]

For DoJG, you can use this template.

(Surprise: me)

[epistularum]

@hssm I'd like to keep the current formatting of my cards, is that possible to achieve?
https://drive.google.com/open?id=1FhJBal0-NBhQ85wsvWWocRnnSJZhPkMF

[timrae]

@epistularum

You just need to apply the formatting parts from your template to the one Houssam has given you. I hope you're not expecting someone to do all the work for you.

[hssm]

It's probably easier for you to pluck out the small portion of javascript that decides the random number (which is clearly delineated) and use that in your existing template. But yeah, you're on your own with that one.

[epistularum]

@timrae Of course I'm not.

[epistularum]

@timrae @hssm I'm really sorry, I have no knowledge whatsoever of coding. I managed to modify the code to only have one example phrase.
I am now struggling on adding the corresponding example translation to the example phrase.

This is what I currently have: https://imgur.com/a/UUUxEVz

[epistularum]

Ok I've found a workaround, I'll post the result here.

[epistularum]

Here's what I managed to Frankenstein:
https://drive.google.com/open?id=1bypaH2_JbWYnYQkIcplv5NAItpQki07q

Thanks a lot! Sorry to have bothered you.

[mikehardy]

Just a quick note on this one as I was in the area yesterday. We do re-use the WebView across card flips (and card reviews), so this is more possible than I thought. The state is still obliterated across card flips because we do a "loadDataFromBaseURL" (or similar, I might have the API call name not exact). In order to preserve state across card-flips I'd suppose we'd need to rewrite the DOM for the answer or somehow do the HTML differently. Or you could use cookies perhaps (its the same WebView). The solutions that work so far are using HTML5 local storage which is effective but maybe not fully necessary in other words.

[github-actions]

Hello 👋, this issue has been opened for more than 2 months with no activity on it. If the issue is still here, please keep in mind that we need community support and help to fix it! Just comment something like still searching for solutions and if you found one, please open a pull request! You have 7 days until this gets closed automatically

[github-actions]

Hello 👋, this issue has been opened for more than 2 months with no activity on it. If the issue is still here, please keep in mind that we need community support and help to fix it! Just comment something like still searching for solutions and if you found one, please open a pull request! You have 7 days until this gets closed automatically

[dae]

Closing in favor of #14302