Is there a way to change the display after typing in the answer?


At the moment, I would get the above standard display of a comparison of a word that I typed and an answer with some color indicating whether I spelled certain letters right, and I am wondering if it’s possible to display only the bottom half. It should be something like the below.

It should be possible as CSS (what websites and Anki use to style cards) can hide things with “display:none;” but I don’t know the specifics of what platform you are on or the exact HTML code produced by this feature.

Here is the Anki manual’s page on customizing the type box results:
https://docs.ankiweb.net/templates/fields.html#checking-your-answer

I checked the html code, and dealt with #typearrow, but if I change the css of typeGood from display: contents; to display: none;, not only would my typed answer disappear, but also the correct answer I want to keep.

Could you post the template you’re using. (with a few example cards)

I expected the ‘typeGood’, ‘typeBad’ and ‘typeMissed’ classes to be shared across the top and bottom. If there are no HTML tags that distinguish each line of text, then you may need to use tricks like :first-child selectors. I have checked a few add-ons to find out exactly what the HTML is, but can’t find anything that works on Windows.

I have found a workaround, but I haven’t tested it much. You will likely need to adjust the values for it to fit your font sizes.

1 Like

As an alternative to @Chartokai’s solution, you can also hide the top half by adding the following to the styling section.

#typeans > * {
    display: none;
}

#typearrow ~ span,
#typeans > .typeGood:only-child {
    display: inline;
}

typing

Note that if you hide the top half, you will not be able to tell if you have added an extra letter to the correct answer. For example, when the correct answer is “cat” and you type “cats” in the typing box, it will not be able to tell that you have typed an extra “s”.

1 Like