Element which stores the solution typed by the user

[rean]

@Eltaurus

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

Maybe a slightly darker background for the selected choice? I think having a different border color is a common option, but I guess that would not work with the raised buttons which are currently in the template. So, maybe try some background color options.

@Eltaurus

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?

Yes, I think you are right.

But now, I got your intention. Generally, I think, hiding the on-screen keyboard might be confusing, because on Memrise you can always choose to use the on-screen keyboard. So, if you come from Memrise and expect to see the same on-screen keyboard and it’s not there, you might be confused? Idk.

In addition, I personally prefer using the on-screen keyboard over the phone keyboard. Typing the answer using the on-screen keyboard is quite different from using the build-in phone keyboard, especially when you have special characters (For me, typing the pinyin transliteration of Chinese characters on my phone keyboard is annoying, because I have to type vowels like àáǎā quite a lot.).

Since the session storage seem to work also on iOS, it’s possible to get the typing cards working, right? I mean, on the front you would record which button was pressed, then store that in the session storage, and on the back you evaluate the stored answer in the same way as now? Maybe I am not seeing something here, but I would prefer that option.

[Eltaurus]

@rean

Maybe a slightly darker background for the selected choice?

Yes, I think this might work well and is very easy to do. Just modify the very last declaration block, adding the declaration with the needed shade specified:

#scr-keyboard .membtn.pressed {
  --elevation: 0px !important;
  --button-color: #e5dfd0;	
}

---

@rean

Since the session storage seem to work also on iOS, it’s possible to get the typing cards working, right? I mean, on the front you would record which button was pressed, then store that in the session storage, and on the back you evaluate the stored answer in the same way as now?

I think it is possible, and I was also planning to try that at some point, because it seems to be the only way of making typing work in AnkiWeb as well. It won’t be very easy though, as it might require a more significant redo of the whole template, and some things, such as spelling corrections, which come naturally with the built-in Anki typing, would have to be recreated from scratch within the template.

[rean]

@Eltaurus

Yes, I think this might work well and is very easy to do. Just modify the very last declaration block, adding the declaration with the needed shade specified:

Looks good now! Thanks!

@Eltaurus

I think it is possible, and I was also planning to try that at some point, because it seems to be the only way of making typing work in AnkiWeb as well. It won’t be very easy though, as it might require a more significant redo of the whole template, and some things, such as spelling corrections, which come naturally with the built-in Anki typing, would have to be recreated from scratch within the template.

I am not sure if I understand this correctly. What are the features that come with Anki? What kind of spelling correction? Does Anki on Android correct spelling when I use the on-screen keyboard?

[Eltaurus]

@rean

What kind of spelling correction?

I mean the feature on the back of the card that shows exactly which parts of the answer were typed incorrectly. But also checking for correctness overall is partially based on the standard Anki form of presenting typed answers.

[rean]

Ah, I see. I had no idea how that worked.

I just looked into the Anki source code and found the corresponding file which does the comparison (Link). Apparently, they are using the SequenceMatcher of the difflib library to handle the comparison. You probably knew that already, but I just put it here in case anyone wonders There are also at least two javascript ports of the original python library. That might be helpful so that you do not need to reimplement everything by yourself.

[Eltaurus]

@rean

You probably knew that already, but I just put it here in case anyone wonders

Actually, no, I never got to look closely into it. So this link might save me quite a bit of time, thank you.
Unfortunately, using external libraries is not a good solution for doing anything in Anki cards because it creates other issues with moving the code between devices and managing the collection’s media files. I can only hope that the relevant functionality can be tracked down to a small enough bit of code, that can be copied inside the cards as a whole. In that case, even porting it from rust should be manageable.

---

I thought a little further about handling all typing with only html and js, and I am beginning to like the idea more. It might be the best way of making a convenient system with alternative answers, which I was also planning to do for a while. The main issue might be maintaining the compatibility with the native mobile keyboards on Android and iPhone. Of course, using only the on-screen keyboard might be convenient, but typing an answer from a preselected set of characters reduces the difficulty significantly, which probably is rather undesirable for many. I also think that keeping the native keyboards is important because they allow one to practice typing in a language the same way it will be done everywhere else. (and on top of that, I am still not sure, whether the on-screen keyboard works well with right-to-left writing systems).
This will require quite a bit of testing, but I probably can make a separate experimental branch for that purpose (without all the auxiliary stuff such as spelling corrections, for a start). If all goes well, maybe I will be able to merge it with the main one.

[Eltaurus]

@Eltaurus

This one turned out to be easier than I anticipated

Demo

[Eltaurus]

Can you test something else for me?

I’ve tried to make a prototype for the custom card input with sessionStorage. It works well on desktop, but on Android without the type into card... option, the phone keyboard simply won’t appear when the input field is selected. Since in this mode it functions similarly to iPhone app, I suspect this will be the case for Anki Mobile as well. At the same time, the card on-screen keyboard seems to be functioning fine (the A key on the card).

Here is the code for the front side:

{{Front}}

<input id="typeans" type="text" inputmode="text">

<button>A</button>

<script>
typeAns = document.getElementById('typeans');
btn = document.querySelector('button');

function updAnswer(ans = '') {
	if (!ans && typeAns) {ans = typeAns.value};
	sessionStorage.setItem("providedAnswer", ans);
}

function typeIn(s) {
	typeAns.focus();
	typeAns.value += s;
	updAnswer();
}

function submitAnswer() {
	pycmd("ans");
}

isFront = !document.getElementById("front-container");
if (isFront) {
	updAnswer();
	btn.onclick = ()=>typeIn(btn.innerText);
	typeAns.addEventListener('input', (event) => {updAnswer();});
	typeAns.addEventListener('keydown', (event) => {
    if (event.key === 'Enter') {
			submitAnswer();
    }
	});
} else {
	providedAnswer = sessionStorage.getItem("providedAnswer");
	if (!providedAnswer) {providedAnswer = ''};
	typeAns.value = providedAnswer;
	//typeAns.setAttribute('readonly', 'true');
	typeAns.disabled = true;
}
</script>

(the rest is the same as before)

[rean]

@Eltaurus

This one turned out to be easier than I anticipated

Demo

That looks great!

@Eltaurus

Can you test something else for me?

Sorry, I did check the forum here during the weekend. I was not expecting that you are that fast Anyway, now I got the time and tested the template.

I think, it overall works well. When the on screen buttons are pushed, the letter appears. But also, the phone keyboard pops up. (When removing typeAns.focus() the keyboard does not pop up, but I am not sure if you added this line on purpose?)

Here is the recording

Also, when I simply touch the input field instead of the button (not in the video), the phone keyboard also pops up. Seems to work well.

Is there anything else I should test when using this template?

[Eltaurus]

@rean

Sorry, I did check the forum here during the weekend. I was not expecting that you are that fast

Not to worry, I am not always able to check all the discussions and answer in time myself (as you can see ), so naturally don’t expect immediate answers from anyone else.

---

@rean

I think, it overall works well.

That’s great! I didn’t have much hope, but now it seems that it can be the universal solution for all platforms after all.

---

@rean

When removing typeAns.focus() the keyboard does not pop up, but I am not sure if you added this line on purpose?

Yes, I’ve added it for easier testing on desktop and didn’t think about removing before sharing the code. The current version of the actual template has a platform check here anyway, so this pop-up shouldn’t happen on mobile in the final version.

---

@rean

Is there anything else I should test when using this template?

I think we are good for now. Next I will have to write the full update for the template with this method, then it will probably require some more testing. Not sure how long will it take though, as I still have to finish some important updates for the Chrome extension first, but hopefully it won’t be much longer than a week or so.

[rean]

Just to prevent the topic from being closed. So, pressure, but I don’t know how easy it is to re-open the topic: How is your progress?

[Eltaurus]

I’m sorry, I haven’t got to work on this so far. I just finished updating the extension a couple of days ago. But if I don’t get flooded with bug reports about that one, I should get back to card template next.

[Eltaurus]

Sorry for all the delays, this is a preliminary solution, but at the very least it should keep the thread open:

Anki-Card-Templates/Add-on/Source code at...

It is not fully merged with other branches yet, so there will be more testing required when it is done, but the basic functionality for managing all types of inputs with sessionStorage is ready and seems to work fine on Windows desktop and AnkiDroid.

The contents of the .html and .css files are supposed to replace the respective tabs in a previous version of the template (they require the same field to exist in a Note Type)

Main things to keep an eye for during testing:

• mixed typing with various methods (iPhone keyboard, card’s on-screen keyboard, hint button) in different order including moving a text cursor to different positions or selecting sections of text before typing:
  

• multiple-choice questions with image options

• changing or removing a selection in a multiple-choice question before submitting it

• submitting empty answers (in both multiple-choice questions and typing-in, especially following non-empty submitted answers in a previous card with the same question type)

• The styles for highlighting pressed multiple-choice buttons were also modified, so it’s good to test them as well

Feedback on any of those points will be rather helpful, thank you!

[amaccuish]

Hey, new to Anki and using the iOS app. I was facing the same issues and tried this branch.

It mostly works, thank you! I can now enter an answer using both on-screen and the html keyboard, whereas previously, pressing any of the suggested buttons submitted the answer as that one character.

However, submitting by pressing enter doesn’t work, I have to tap the page which submits. Also, empty answers are accepted just by tapping the page.

I am using translations only, no images, audio, or multiple choice.

[Eltaurus]

@amaccuish

submitting by pressing enter doesn’t work

Unfortunately, just as with multiple-choice questions, answers will have to be submitted manually on iPhone app, because unlike desktop and Android it does not have API for this functionality.

@amaccuish

previously, pressing any of the suggested buttons submitted the answer as that one character

I’m not sure about this behavior though, was your experience different from what’s shown in this post?

---

@amaccuish

Also, empty answers are accepted just by tapping the page.

This should already be fixed in the current version of the branch. You can access the latest state here (the link in my previous post leads to a fixed state, which is obsolete now):

GitHub - Eltaurus-Lt/Anki-Card-Templates at full-sessionStorage

the source code for cards is stored in the “Add-on/Source code” folder.

It should have all the known bugs fixed at this point. Although I still keep coming up with ways of introducing new ones and could use a hand with testing.

[Eltaurus]

Alright, this seems to be the final state for this branch for now:

Anki-Card-Templates/Add-on/Source code at...

It seems to pass any test I can throw at it, so I’ll move on to another branch, leaving this one here for a while, in case anyone will be willing to run some tests with it on the iPhone app.

[amaccuish]

@Eltaurus works great, thank you so much! Shame about submit, but that’s out of your hands. From my end it works great otherwise!

[Eltaurus]

Thank you for testing. Would you mind taking a couple of screenshots?

[amaccuish]

Sorry for the delay!

[amaccuish]

FYI I use <input id="typeans" type="text" inputmode="text" autocorrect="off" autocomplete="off" autocapitalize="off" spellcheck="false">

because the autocorrect on ios takes up space and is kind of against the idea of Anki IMHO.

One more thing would be scrolling up to the top when showing a correction, you’ll see in the first screenshot, at least on my iPhone 14, that it’s cut off.

Oh and the Hint svg doesn’t show, but the button works.

More than happy with this already though, thank you so much!