iOS app(s) card HTML structure

AnkiMobile (iPhone/iPad)
1

On the desktop version the output card HTML structure it is something like

<html>
  <head>
    ...
  </head>
  <body class="card ...">
    ...
    <div id="qa">
      => card content goes here
    </div>
    ...
  </body>
</html>

Wheras on AnkiDroid the id of the div containing the card content is “content” but it is still a direct child of the body. Are there structural changes on iOS (I don’t have a device to check on)?

Thanks

2

Last time I checked (half a year ago), it was like this:

<html class=" webkit safari mobile ipad js">
   <head>
      <meta name="viewport" id="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=10,user-scalable=1">
      <link type="text/css" rel="stylesheet" href="res/web/css/reviewer.css">
      <script src="res/web/js/vendor/jquery-2.2.2.min.js"></script>
      <script src="res/web/js/vendor/browsersel.min.js"></script>
      <script type="text/javascript" src="res/web/js/mathjax.js"></script>
      <script type="text/javascript" src="res/web/js/vendor/mathjax/tex-chtml.js"></script><script src="ankifile://reviewer/res/web/js/vendor/mathjax/input/tex/extensions/noerrors.js" charset="UTF-8"></script><script src="ankifile://reviewer/res/web/js/vendor/mathjax/input/tex/extensions/mhchem.js" charset="UTF-8"></script>
      <!--stylesheets-->
   </head>
   <body class="card card1 nightMode night_mode">
      <div id="qa" style="opacity: 0;">
         <!-- content -->
      </div>
      <script src="res/web/js/reviewer.min.js"></script>
   </body>
</html>
1 Like
3

Ok, perfect thanks.

4

Is there any way to emulate iOS Anki for debugging purposes? There seems to be something not working with one of my addons (Flexible cloze) on iOS and it’s kind of tricky to debug without some way to test.

5

I’m afraid there isn’t.

6

I’m confused… addons on iOS. I thought this was not possible.

7

Maybe addon is a bit of a misnomer, Flexible cloze is just a cloze template with some javascript functionality, so that should be possible to get to work on iOS as well.

Ok, thanks, since I “have you on the line”, a couple of follow up questions:

  • As I know nothing of iOS development this may be barking up the wrong tree but could you share with what widget/qui framework you implemented the reviewer card view? I need to debug how my js is interpreted by the webview or equivalent so knowing which engine is used would be helpful.
  • Is {{Text}} is implemented in AnkiMobile for cloze type notes? On desktop Anki and AnkiDroid it will insert the entire note in original format regardless of which cloze ordinal is “active”, i.e. something like this for cloze 1 and the same for 2 and 3:
    Question 1: {{c1::Answer 1}}
    Question 2: {{c2::Answer 2}}
    Question 3: {{c3::Answer 3}}
  • Do you know of any way to visualize the javascript error log on iOS for AnkiMobile? Other than something like this I mean: GitHub - rwblackburn/inline-console: Easily adds a JavaScript developer console to the bottom of the page of any browser. (works on desktop and AnkiDroid at least).

Thanks

8

For getting dev tools in webview, the following can be used
GitHub - liriliri/eruda: Console for mobile browsers

I have tested it on AnkiDroid, it may work on AnkiMobile also.
Development Guide · ankidroid/Anki-Android Wiki · GitHub

9

The card content is displayed with a standard iOS webview (ie, the same rendering Safari would have). The simplest method of debugging would be to wrap your JS code in a try/catch block, and alert or write the caught error into the DOM.

Card templates are rendered the same way on both platforms.

10