Element which stores the solution typed by the user

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.

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.

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;	
}

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.

1 Like

Looks good now! Thanks!

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?

image

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.

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 :upside_down_face: 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.

1 Like

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.

This one turned out to be easier than I anticipated :grinning:

Demo

3 Likes

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)

That looks great!

Sorry, I did check the forum here during the weekend. I was not expecting that you are that fast :sweat_smile: 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

RPReplay_Final1717437910-ezgif.com-video-to-gif-converter

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?

1 Like

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


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.


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.


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.

1 Like