Element which stores the solution typed by the user

[rean]

Hi!

I am quite new to Anki. So, I am not entirely sure if this is the correct place to ask. Please direct me to the correct place, if this is wrong. Thanks

So, I am coming from Memrise and found this cards template which mimics the behaviour of Memrise in Anki: GitHub - Eltaurus-Lt/Anki-Card-Templates: Decks of templates + source code for Anki cards
(Support Thread here in the Forum)

Basically, it generates a multiple choice test with a button for each option. If I click the button, the solution is supposed to function as the solution instead of manually typing.

However, it does not really work on the iOS App. It looks all good, but the buttons do not seem to work. I did some debugging and found out that on the Android there seems to be an element with the id typeans which is where the card stores the result of the button push (I assume usually, the typed answer by the user would be stored in this element). Using this element, the card checks whether the user clicked the correct word or not.
On the iOS App, on the front side of the card, there is no element with this id (I tired to check, there does not seem to be anything with a similar id). That means, when I push a button nothing happens. When I go to the backside of the card, the element typeans is suddenly there. But then, I don’t need it anymore, because I am already on the backside.

Essentially, my question is: Is there an element which stores the currently typed answer by the user which I could use to get the card template working on iOS? (Or is it a bug that the typeans element is not there?)

Thanks in advance! Sorry if this is the wrong place to ask!

[Eltaurus]

I’m not sure about iOS app, but on Android there is a specific setting that has to be enabled for the typing field to appear on a card (settings → Advanced → Type answer into the card). Without it android app just as well uses the phone system input field and removes the one already existing on a card. Maybe there is a similar setting for iPhone.

If that doesn’t work, there might be another way. Using typeans for passing all the information from the front to the back of a card was indeed my original idea. However, it didn’t work well with the on-screen keyboard on Android because of this issue. So the template has an alternative build-in method for passing the information using SessionStorage. I don’t know if it would work on iOS, and I have no means of checking it myself, but there is a good chance it would. If you are willing to do some testing for me, we would likely be able to come to a working solution together, by making this method the default one for iOS app.

[rean]

Thanks for the reply!

I just checked, but I couldn’t find an option similar to “type answer into the card” in the setting, nor in the AnkiMobile Manual.
I have no idea if the SessionStorage might work on iOS. I saw that option for Android in the code, but I think for using it on iOS, some modifications are needed. In any case, yes, I can do some testing.

[Danika_Dakika]

@rean

but I couldn’t find an option similar to “type answer into the card” in the setting, nor in the AnkiMobile Manual.

AnkiMobile does have an overall setting for “Never Type Answer” in Preferences – Preferences - AnkiMobile Manual . But I don’t know if it will help you with this template?

[rean]

Yes, but doesn’t this disable the typing? I saw this option, but I thought it does the opposite of what we want? I will try it.

[Danika_Dakika]

Well – it depends on which way you have it currently switched!

[rean]

So, switching it on completely hides (or disables?) the typing field. No matter how this option is configured, it does not change the behaviour of the template. Still does not work.

Anyway, thanks for the suggestion!

[Eltaurus]

@Danika_Dakika

AnkiMobile does have an overall setting for “Never Type Answer”

that’s not an option I was talking about, though. The setting on Android I mentioned is not used for switching the typing on and off, but instead for switching between two different typing methods (android/html).

---

@rean

In any case, yes, I can do some testing.

I was looking into the code and started wondering if the issue is with the #typeans element itself. This element is not something specific to the card template or Android – it is the general id that Anki assigns to a typing field on both desktop and Android. The fact that it is also mentioned in the manual alongside AnkiMobile makes me think that on iPhone Anki works the same way in this regard.

Could you take some screenshots of how a typing-in card looks on your device? The appearance alone should have meaningful implications, but it also would be helpful to know, how the on-screen keyboard works in this case.

---

The issue I suspect now is one with a part of JS which is supposed to automatically flip a card to the back after a multiple-choice button is clicked. Unfortunately, in contrast to AnkiDroid the iPhone app does not have a public API for this (and will unlikely have one). Without it, even if the rest of the code is fixed, multiple-choice cards will require manually pressing the “Show Answer” button each time after an answer is selected.

[Danika_Dakika]

@Eltaurus

that’s not an option I was talking about, though.

Oops, I clearly misunderstood – nevermind!

[Eltaurus]

@Eltaurus

The fact that it is also mentioned in the manual alongside AnkiMobile makes me think that on iPhone Anki works the same way in this regard.

UPD. I’ve reread the original post, and it cleared up for me that the iPhone Anki really works like the Android app with the “type into card” option disabled (the screenshots of a typing card from an iphone would still be informative nonetheless). Since without that toggle the multiple-choice doesn’t work on Android as well, it would require a bit more involved changes than I originally counted on. It’s not a complete deal-breaker and (with the exception of the manual answer submission I wrote about above) I think it still can be made to work, but will take some time on my part to implement the needed functionality. I will post it here when the new version will be ready for testing.

[rean]

So, here is a screenshot and a short recording of the typing card:

I think, it is as you describe. I am not familiar with the “type into card” option on android, but on iOS it clearly does not write on the card, but in the text field above.

Before I wrote the post yesterday, I did some testing with the buttons and the JS, and to my understanding, the buttons can be pushed, the on-click event is also triggered and transmitted to the JS and JS function is called. So, I think it would be possible to “store” the typed answer on the screen to show the user what they have typed/ pushed. But the missing element is something to store the pushed button/ typed information from front to back (maybe using the SessionStorage?).

The fact that it is also mentioned in the manual alongside AnkiMobile makes me think that on iPhone Anki works the same way in this regard.

Yes, on the backside of the card, the typeans element can be accessed. It actually stores the answer and seems to work in the indented way (see screen recording.) But on the front it does not exist.

Without it, even if the rest of the code is fixed, multiple-choice cards will require manually pressing the “Show Answer” button each time after an answer is selected.

I am not too worried about the showAnswer functionality. For now I also need to manually click somewhere to flip to the back. If the rest works, I thinks it’s fine. Of course, it would be nice to have, but apparently this functionality is not coming to iOS (according to the post you linked). So, I guess there is nothing we can do about it.

I hope that helps. Let me know, if I can test something (or if you need more screenshots)

[Eltaurus]

Here is some code to test if sessionStorage works on iPhone app:
front template:

<div id="pid-display">{{Front}}</div>

<script>
isFront = !document.getElementById("front-container");
if (isFront) {
	pid = Array.from({length:5}, () => String.fromCharCode(Math.floor(Math.random() * 94) + 33)).join('');
	sessionStorage.setItem("page-id", pid);
} else {
	pid = sessionStorage.getItem("page-id");
}
document.getElementById("pid-display").innerText = pid;
</script>

back template:

<div id="front-container">
{{FrontSide}}
</div>

it is supposed to replace the respective code in the Basic Anki Note Type. You can make several cards with this and try flipping through them in a review. If everything works correctly, the back of each card will show the same string of random characters as its front. Otherwise, the back sides will probably appear empty.

---

On a side note, I see that the contents of the info screen on your recording appear to be centred. Did you modify card’s CSS, or did the template styles got overwritten by the iPhone app itself?

The audio button also appears different. As I understand you have some means of inspecting card’s HTML as it is displayed inside the app? Could you copy here the relevant piece of code with the audio button (or even the full HTML for the back of a card)?

[rean]

The SessionStorage seems to work. Both, front and back are showing the same generated sequence.

Here as a small proof

@Eltaurus

On a side note, I see that the contents of the info screen on your recording appear to be centred. Did you modify card’s CSS, or did the template styles got overwritten by the iPhone app itself?

I did not change the styles of the templates. It was centred for me all the time (I don’t think it looks bad btw). I guess, iOS overwrites certain things? no idea. Now, that you mentioned it, I just noted that this part of the card is not centred on my Mac.

@Eltaurus

The audio button also appears different. As I understand you have some means of inspecting card’s HTML as it is displayed inside the app? Could you copy here the relevant piece of code with the audio button (or even the full HTML for the back of a card)?

No, I have not figured out how to do this properly. I connected my phone to my Mac, and it lets me inspect websites in the ordinary browser, but not any random app (or web views inside an app). I guess, I had to build the app by myself for being able to inspect the HTML. I also tried to let the template print its own content/ code. This worked on Mac, but not on the iOS app.

[dae]

I’m afraid the typing area is, as you have guessed, stored outside of the webview area. This may change at some point in the future.

[Eltaurus]

@rean

The SessionStorage seems to work.

Great, then I should be able to come up with a working solution soon enough. Also, I don’t see a flip button on the front of the card in your screenshot. Is it just outside of the screened area, or controlled by gestures instead? Just genuinely curious.

---

@rean

No, I have not figured out how to do this properly. I connected my phone to my Mac, and it lets me inspect websites in the ordinary browser, but not any random app (or web views inside an app). I guess, I had to build the app by myself for being able to inspect the HTML.

That’s unfortunate. Android App enables developer tools for inspecting HTML by tapping the app logo in the “about” section of the settings six times. Maybe something similar works for iPhone?

[Eltaurus]

Would be great if that happens. Being able to write one code that works the same way on all devices should feel quite nice.

[Eltaurus]

I rewrote the template so that sessionStorage is always used for passing info from the front to the back of a card for Multiple-Choice questions. This should make them work on Anki Mobile. As a bonus, it allows creating Multiple-Choice questions with images as answer options and also makes multiple-choice work on Android even without the “type into card” setting.

The new version of the code is available here for testing:

Anki-Card-Templates/Add-on/Source code at Note-Type-Creator ·...

Code for the front and back of the cards is contained in the respective .html files (it is sufficient to replace only the JS part, starting from the first <script> tag in the old template, as there were no changes to the layout). The styling is contained in the .css file.

One of the styling updates should hide the on-screen keyboard now whenever its functionality is unavailable (like in the case of Anki Mobile), although I’m not sure if the used selector would work on iPhone. Tell me, how it goes

[rean]

It works! I tap an answer, then tap the card to evaluate (flip to the back) and it shows whether the answer was correct or not. I think, the visual clue that the answer was selected is a bit too subtle, I did not see that anything was happening, but it works! That’s great!

Here, a demo on the iOS app

[rean]

@Eltaurus

One of the styling updates should hide the on-screen keyboard now whenever its functionality is unavailable (like in the case of Anki Mobile), although I’m not sure if the used selector would work on iPhone. Tell me, how it goes

Regarding this feature… I think it works a bit too well On the typing views the on-screen keyboard is hidden until I tap it.

Screen Recoding

[Eltaurus]

@rean

I think, the visual clue that the answer was selected is a bit too subtle

If you have ideas about how to make it clearer, I can modify the styles.

@rean

On the typing views the on-screen keyboard is hidden until I tap it.

It looks like in the video it appears when the card is flipped, not when the keyboard is tapped. Do you mean that typing on the front of the cards itself now requires an extra click before input activates?

My bad about not considering the backside. Hiding the keyboard there with CSS alone isn’t possible, unfortunately, and other ways of doing this have a risk of breaking working keyboards on other platforms. I’ll have to think about it further. Maybe it’s better just to revert this change altogether?

If you’d like to revert it in your template, you can find and remove the following part from the styling tab:

.card-content:not(.mch):not(:has(#typeans)) #scr-keyboard {
	display: none;
}