Pull Request template

Purpose / Description

This PR make available the following details about cards

New Card Count
Learn Card Count
Review Card Count
ETA
Mark
Flag

Also following functions available to make any design of button using css and calling using JS

showAnswer()
buttonAnswerEase1()
buttonAnswerEase2()
buttonAnswerEase3()
buttonAnswerEase4()
ankiMarkCard()
ankiToggleFlag()

Usage of ankiToggleFlag()

ankiToggleFlag('none')
ankiToggleFlag('red')
ankiToggleFlag('orange')
ankiToggleFlag('green')
ankiToggleFlag('blue')

Using numeric values

ankiToggleFlag(0)   // none
ankiToggleFlag(1)   // red
ankiToggleFlag(2)   // orange
ankiToggleFlag(3)   // green
ankiToggleFlag(4)   // blue

Using above and css & js, following type of card can be designed
https://github.com/infinyte7/Anki-Custom-Card-Layout

Fixes

Fixes #6306

Approach

How does this change address the problem?
Using JavascriptInterface.

How Has This Been Tested?

Sample Deck can be used for testing (Contents in deck may be changed to get it work)

1. Turn on Gestures in AnkiDroid or use immersive mode
2. Map all Swipe getures to No Action
3. Turn on Full Screen
4. Add following to card

To make available following details to AnkiDroid WebView, add it to Front / Back side of Card in <script> tag.

 <script>
        console.log(AnkiDroidJS.ankiGetNewCardCount());
        console.log(AnkiDroidJS.ankiGetLrnCardCount());
        console.log(AnkiDroidJS.ankiGetRevCardCount());
        console.log(AnkiDroidJS.ankiGetCardMark());
        console.log(AnkiDroidJS.ankiGetCardFlag());
        console.log(AnkiDroidJS.ankiGetETA());
 </script>

5. Now use those values to redesign the card templates.

Demo

Learning (optional, can help others)

https://developer.android.com/reference/android/webkit/JavascriptInterface
https://stackoverflow.com/questions/21173888/how-to-pass-non-primitive-object-from-java-to-js-by-android-addjavascriptinterfa
https://stackoverflow.com/questions/175739/built-in-way-in-javascript-to-check-if-a-string-is-a-valid-number
https://grid.layoutit.com/
https://codepen.io/
https://www.w3schools.com/

Checklist

Please, go through these checks before submitting the PR.

• [ x ] You have not changed whitespace unnecessarily (it makes diffs hard to read)
• [ x ] You have a descriptive commit message with a short title (first line, max 50 chars).
• [ x ] Your code follows the style of the project (e.g. never omit braces in if statements)
• [ x ] You have commented your code, particularly in hard-to-understand areas
• [ x ] You have performed a self-review of your own code