Javascript not working properly on AnkiMobile?

[b1-66er]

Hi! I am using a deck i’ve downloaded as a shared deck (PGN Chess Flashcards https://ankiweb.net/shared/info/340753088) and it is working on windows 10 and AnkiDroid app. It is not working properly on AnkiMobile app though. I can only see the text but not the image which I assume is being generated with javascript.

Hardware: Ipad Pro (12.9-inch)
Model Number ML0Q2LL/A
Software Version: 13.3.1
AnkiMobile version: 2.0.59 (20059.3)

I’ve asked the author of the shared deck and this is his reply:

“Your problem doesn’t have anything to do with this addon which only works on desktop. The problem you described is javascript related, and pertains to the original code in the card templates. I’m afraid I don’t know much about Apple products to help here.”

I know he said it works only in desktop but I shared the deck from my pc to my android and it is working perfectly (not working in ankiweb though when i’m on android but that’s another story).

I hope you can help me because the android phone screen is very very small and I think the deck will look awesome on the ipad like the other decks

[p4nix]

Anki has no official support for JS, so there is a kind of “just hope that it works, and if it doesn’t, it’s your problem”-policy: https://docs.ankiweb.net/#/templates/styling?id=javascript

Could it have to do with the fact that the Anki deck needs external JS from chesstempo? I mean you do need the JSBooster add-on on Desktop, and Android/AnkiDroid might be more open than AnkiMobile/iOS. Maybe it’s possible to localise their javascript in your collection folder and use it from there.

https://ankiweb.net/shared/info/1388898263

This also seems interesting, and I could get it to run on my iPad by changing the javascript and pressing Enter in the type field (changed timeout from 200 ms to 2000 ms). Maybe adjustments can be made to make it work instantly, but I can see the chessboard - so it’s only a matter of some tweaks. However, I am not really interested into doing this right now, as I don’t plan to learn chess in the next few weeks. Feel free to try it though, it definitely will work

[boydkelly]

I was also wanting to replace the Hint link with a button. I followd the example here: https://chrisk91.me/2018/04/28/Adding-Hint-fields-in-Anki.html

And it works fine on the deskotp, but not in AnkiMobile. If any js gurus have any suggestions they would be welcome. Otherwise this isn’t some esoteric thing. It just displays text on click. Normally should work with java in android…

[mmdj2]

Show code

{{#Hint}}
<br>
<button class=hint onclick="this.style.display='none';document.getElementById('myHint').style.display='inline-block';return false;" style="display: inline-block" accesskey="4"><div position=bottom>
Show Hint</div></button><div id="myHint" class=hint style="display: none;">{{Hint}}</div>
{{/Hint}}

<script>
function showhide() {
if (document.getElementById('hide').style.display=='none')
{text = document.getElementById('hide');
text.style.display=''}
else
{text = document.getElementById('hide');
text.style.display='none'}
}
</script>

this works for me on both devices.

if you want the button to show/hide hint you can change it like this

Show code

{{#Hint}}
<br>
<button class=hint onclick="showhide()" style="display: inline-block" accesskey="4"><div position=bottom>
Show Hint</div></button><br>
<div id="hide" class=hint style="display: none;">{{Hint}}</div>
{{/Hint}}

<script>
function showhide() {
if (document.getElementById('hide').style.display=='none')
{text = document.getElementById('hide');
text.style.display='inline'}
else
{text = document.getElementById('hide');
text.style.display='none'}
}
</script>

[boydkelly]

Hey! Thanks for the reply and suggestion. Just in case anyone has the same issue, I also was able to cobble up a css only solution that also works great.

CSS:

.hint {
  display: none; }

#trigger:checked + .hint {
  display: block;
  text-align: center; }

.hint-row, .example-row {
  display: flex;
  align-items: center;
  justify-content: left;
  padding: 0px 0px 6px 6px; }

Card:

{{#Hint1}}
<div class= "jl hint-row">
  <label for="trigger"></label>
  <div class=badge>Hint</div>
  <input id="trigger" type="checkbox">
  <div class="hint">{{Hint1}}</div>
</div>
{{/Hint1}}