Making an entire field a Type-in cloze field itself

[scoubidou75]

Hi,

I have no idea if it’s feasible or not and couldn’t any solution so far, but basically I’d like to a create Type-in Cloze in all my “Back” fields from a specific card model without having to write the usual {{c1::mytext0}} (or to click to the Cloze button). The reason is because I want to review my cards in browse without having this ugly code and just have the content as it is (and it’s a bit time consuming). So is there a way to tell Anki, "ok make whatever there is in this field (let’s say “back” field) as a type-in Cloze whenever I start to review this card. So to be sure my question is clear, let’s say I type 1+1 in Front field, and 2 in Back field, when I review the card I have directly the Type-in Cloze box where I can type in 2. Obviously when I do it now I have a no data error.

I thought of tricking Anki by putting {{c1::}} in the Back side template so that any entry will get {{c1::}} around it to make the field automatically “type-in clozable” but it doesn’t work…

Is there a way or a add-on I missed to do it?

Thank you for insights!

[daddydave]

I tried doing this by creating a custom “fake cloze” note type with three fields, Whole Sentence, Partial Sentence, and Cloze. (I cloned the Basic note type, then renamed the Front and Back fields of the clone, and added another field.) Then on the card templates, I put

{{Partial Sentence}}
{{type:Cloze}}

on the front and

{{Whole Sentence}}
{{type:Cloze}}

on the back.
Instead of using the Cloze toolbar items or shortcuts, you would type underscores for the cloze in the Partial Sentence field. So in your example, Whole Sentence would have “1 + 1 = 2”, Partial Sentence would have “1 + 1 = __”, and Cloze would have “2”.

Seems to work reasonably well for what you are asking. (You probably need to style and arrange fields to your liking.)

Since this is a fake cloze note type, it would take more work to have more than one cloze in a note, you would have to add more fields.

Another thing to consider is that from the Browser, you can also just hit Preview and then browse through the list using the arrow keys and look at the card previews instead of the “ugly code” in the background.

[scoubidou75]

Thank you so much for your quick fix, and it solved 99% of my issue, brilliant!
I have changed the field names and applied them to my need by removing the “Whole sentence” one that appeared to be unnecessary for me and for Anki and it all works perfectly. Like that I just have to enter my question in Front and type cloze in Back for my answer (because my answers won’t be written in the questions). And I won’t have multiple Clozes in my questions, so no worries here too.

The only thing if I want to be picky is to have the same display as I had with the add-on “Fill the blanks - Multiple type:cloze support”, which has the very nice Instant feedback features (shows wrong and good answers in colored backgrounds while typing the answer in Back" as well as a neater Back answer with a crossed out sign side by side with the answer.
I have put you comparison pictures so you see.

I tried to mimic the card codes I had when using the cloze add-on template but while it still makes the cloze feature work, I don’t get any features from it.
Am I missing something in my codes to make it pulled out the features from the add-on?

What I want:

What I have (no features from the add-on):

My current template to fine-tune without the template working:
Front:

{{Front}}

{{type:Back}}

Back:

{{Front}}

{{type:cloze:Back}}

Style:
.card {
font-family: arial;
font-size: 20px;
text-align: center;
color: black;
background-color: white;
}

My other template with the add-on working (but I have to put the C1:: stuff and so on…
Front:

{{Title}}

{{type:cloze:Texto}}

Back:

{{Title}}

{{cloze:Texto}}

Style:
.card {
font-family: arial;
font-size: 20px;
text-align: center;
color: black;
background-color: white;
}
.cloze {
font-weight: bold;
color: blue;
}
.nightMode .cloze {
color: lightblue;
}

Again, your solution makes it work just fine, I’m just being picky for the add-on display but I understood more or less that by making a “fake cloze” the add-on might not be able to recognize the card as a cloze one at all…If so, I will live with it, but otherwise I’d really appreciate another magical move you may have!

Thank you again!

[daddydave]

@scoubidou75

EDIT: I missed the “while typing” part, so probably a bit more complicated from what I said below:

I think it should be possible, the note type would need a way to remember what you typed on the front to display it on the back.

I think I’ve seen something like that in these forums, using a snippet of JavaScript in the note type. I’m not finding it at the moment and it is a little outside of my expertise.

[jcznk]

About the instant feedback feature, try checking this topic: How to have instant type:answer feedback? - #14 by ODeer

[scoubidou75]

Thank you so much daddydave and jcznk for your kind help. Anki is definitely a rabbit hole haha
So I managed to implement the “while typing” feature and tweak some colors and it all works fine, except that I now have 2 other complications with it: 1) I can’t merge this new template/features with my old black and grey template, 2) I have an annoying conflict bug with the arrow coming from the add-on Anki-redesign.

For 1), I’ve tried everything with my very limited understanding of how html works but couldn’t figure a way to put the “type-in” box beautifully inside the middle black but to no avail (the 3rd bottom rectangle is for some extra plain text)

Here is my initial back and gray template

Front:

 <script>
/* SPLIT HIERARCHICAL TAGS */
var tagEl = document.querySelector('.tags');
if(tagEl) {
    var tags = tagEl.innerHTML.split(' ');
    var html = '';
    tags.forEach(function(tag) {
        if(tag.includes('::')) {
            var topleveltag = tag.substring(0, tag.indexOf("::"));
            var bottomleveltag = tag.substring(tag.lastIndexOf("::")+2);
        } else { 
            var bottomleveltag = tag;
        }
        var newTag = '<span class="tag ' + topleveltag + ' ' + bottomleveltag + '">' + bottomleveltag + '</span>';
        html += newTag;
    });
    tagEl.innerHTML = html;
}
</script>

<div class="note">
<div class="front k">
	{{#Tags}}<div class="tags row">{{Tags}}</div>{{/Tags}}
	<div class="question row">
		{{#Front}}<div class="image">{{edit:Front}}</div>{{/Front}}
	</div>
</div>
</div>

<div class="note ">
<div class="back k ">
	<div class="backonly row">{{edit:Back}}</div>

</div>
</div>

<div class="backtemplate">{{FrontSide}}</div>

<div class="note"> 
<div id="extra" class="front extra">
<div class="exlink">
{{#Front}}
<script>
  q = document.getElementById('Target');
  q.innerHTML = q.innerHTML.replace(/({{Front}})/g, '<span class="expression">\$1</span>');
</script>
{{/Front}}
<span id="Target"> {{edit:Extra}}</span>




<div class="exdef">



<div class="exsyn">


</div>

Back

<div class="backtemplate">{{FrontSide}}</div>

Style

And here is the one I could make thanks to your inputs with the type-in feature:

Blockquote
Front
{{Front}}



{{type:Back}}

Back
{{Front}}

{{type:Back}}

Style

/* BODY */
html {
    background-color: black !important;
}

html,
body {
	margin: 0 !important;
	padding: 0;
	height: 101%; /* may need to be adjusted based on platform */
    max-height: 100vh; /* may need to be adjusted based on platform */
	width: 100%;
    max-width: 100vw;
}

html.mobile,
body.mobile {
    height: 86vh; /* may need to be adjusted based on platform */
}

body {
	font-family: San Francisco, "Noto Sans KR", Helvetica, Arial;
	font-weight: 525;
	font-size: 30px;
	word-break: keep-all;
	text-align: left;
    position: relative;
    padding-top: 1em;
    height: 100%; /* may need to be adjusted based on platform */
    max-height: 100vh; /* may need to be adjusted based on platform */
    width: 100%;
    max-width: 100vw;
    z-index: -2;
    overflow: auto;

}

body::after {
  background-color: black;
  content: "";
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 101%; /* may need to be adjusted based on platform */
    max-height: 101vh; /* may need to be adjusted based on platform */
    position: absolute;
    z-index: -1;
}

/* CARD */
.note {
  border-radius: 1em;
	margin: 0 auto;
	width: 100%;
	box-sizing: border-box;
	padding: 0 1.5vh;
	max-width: 55em;
  position: relative;
}

.front,
.back,
.onesided {
	padding: 0 2em 1em 2em;
 	backdrop-filter: blur(10px);
  overflow: auto;
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

.front {
  line-height: 1.0;
  background-color: rgb(25, 26, 28);
  color: white;
	margin: 1em  0 0;
	border-top-left-radius: 1.2em;
	border-top-right-radius: 1.2em;
}

.front a,
.front a:link,
.front a:visited,
.front a:hover,
.front a:active {
	color: grey;
	text-decoration: none;
}

.back {
  line-height: 1.;
  background-color: rgb(35, 36, 41);
  color: NavajoWhite;
  z-index: 1;
	border-bottom-left-radius: 1.2em;
	border-bottom-right-radius: 1.2em;
	margin: 0;
}

.onesided {
	border-radius: 1.2em;
	margin: 1em 0;
}

.row {
	padding: 1em 0 0 0;
}

/* TAGS */
.tags {
	margin-bottom: -2.3em;
}

.tablecontainer + .onesided .tags {
	padding-bottom: 0;
}

.tag {
  font-size: 0.3em;
	padding: .4em .8em .4em .8em;
	display: inline-block;
	border-radius: 1.5em;
  border-color: rgb(78, 78, 84);
  border-style: solid;
  border-width: 1.5px;
	margin: .5em .5em .5em 0;
	position: relative;
	bottom: 4em;
	right: 4em;
  color: #808080;
  /* background-color: rgb(23, 91, 191); */
}

/* IMAGES */
img {
	object-fit: contain;
	margin: 0 auto;
	height: 3em;
	width: auto;
	max-width: 100%; /* fix for Anki */
}

/* ANKI TEMPLATE WIZARDRY */
:not(.backtemplate) .backonly {
	visibility:hidden;
}

.backtemplate .backonly {
	visibility: visible;
}

.backtemplate .frontonly {
	display: none;
}

/* MY ADDITIONAL */
.extra {
  padding: 2em 2em 2em 3em;
  overflow: auto;
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  background-color: rgb(35, 36, 41);
  color: rgb(134, 134, 142);
  margin: 1em 0 0 0;

  border-top-left-radius: 1.2em;
	border-top-right-radius: 1.2em;
  border-bottom-left-radius: 1.2em;
	border-bottom-right-radius: 1.2em;

  font-family: San Francisco, "Noto Sans KR", Helvetica, Arial;
  font-size: 20px;
  line-height: 1.5;
  word-break: keep-all;
  text-align: left;
}

/*@import url("_beautiful2.css");*/

/*Start of style added by resize image add-on. Don't edit directly or the edition will be lost. Edit via the add-on configuration */
.mobile .card img {height:unset  !important; width:unset  !important;}
/*End of style added by resize image add-on*/

.exlink {
    color: #FFC0CB;
}

.exdef {
    color: #DDA0DD;
}

.exsyn {
    color: #DB7093;
}

.expression {
font-weight: bold;
background: #FAEBD7;
color: black;

And here is the one I could make with the type-in feature:

Front

{{Front}}
<br><br>
{{type:Back}}

<script>
  (() => {
   /**
   * Type-in-the-answer live feedback for Anki (vague variant)
   * @author Matthias Metelka | @kleinerpirat
   */
    const input = document.getElementById("typeans");
    const answer = "{{Back}}";
    if (input) {
      input.addEventListener("input", () => {
        input.classList.add("typed");
        input.classList.toggle(
          "goodsofar",
          input.value == answer.substring(0, input.value.length)
        );
        input.classList.toggle(
          "correct",
          input.value == answer
        );
      });
    }
  })();
</script>

Back

{{Front}}

<br><br>
{{type:Back}}

Style

#typeans.typed {
  background: #CD5C5C;
	color: black;
	font-weight: bold;
	text-align: center;
}
#typeans.typed.goodsofar {
  background: #FAEBD7;
	text-align: center;
}
#typeans.typed.correct {
  background: #3CB371;
	text-align: center;
}

For 2), as I mentioned, I can’t understand why the add-on Anki-redesign is making this arrow shift as you can see in the image. I could isolate and know it comes from it by deactivating all others, as without it the arrow is well centered between my typed answer and the corrected answer.
Of course I could just not use the add-on and it would work fine but as I use Anki everyday pretty intensively I would love to have something less dull.

Thank you again in advance for any help
ps: random question, is the language used for the templates called html? I would like to learn it later

[jcznk]

Regarding the positioning of the type-in box, try changing your Front template to:

<script>
/* SPLIT HIERARCHICAL TAGS */
var tagEl = document.querySelector('.tags');
if(tagEl) {
    var tags = tagEl.innerHTML.split(' ');
    var html = '';
    tags.forEach(function(tag) {
        if(tag.includes('::')) {
            var topleveltag = tag.substring(0, tag.indexOf("::"));
            var bottomleveltag = tag.substring(tag.lastIndexOf("::")+2);
        } else { 
            var bottomleveltag = tag;
        }
        var newTag = '<span class="tag ' + topleveltag + ' ' + bottomleveltag + '">' + bottomleveltag + '</span>';
        html += newTag;
    });
    tagEl.innerHTML = html;
}
</script>

<div class="note">
<div class="front k">
	{{#Tags}}<div class="tags row">{{Tags}}</div>{{/Tags}}
	<div class="question row">
		{{#Front}}<div class="image">{{edit:Front}}</div>{{/Front}}
	</div>
</div>
</div>

<div class="note ">
<div class="back k ">
	<div class="backonly row">{{edit:Back}}</div>
 {{type:Back}}
</div>
</div>

<div class="backtemplate">{{FrontSide}}</div>

<div class="note"> 
<div id="extra" class="front extra">
<div class="exlink">
{{#Front}}
<script>
  q = document.getElementById('Target');
  q.innerHTML = q.innerHTML.replace(/({{Front}})/g, '<span class="expression">\$1</span>');
</script>
{{/Front}}
<span id="Target"> {{edit:Extra}}</span>




<div class="exdef">

<div class="exsyn">

</div>

<script>
  (() => {
   /**
   * Type-in-the-answer live feedback for Anki (vague variant)
   * @author Matthias Metelka | @kleinerpirat
   */
    const input = document.getElementById("typeans");
    const answer = "{{Back}}";
    if (input) {
      input.addEventListener("input", () => {
        input.classList.add("typed");
        input.classList.toggle(
          "goodsofar",
          input.value == answer.substring(0, input.value.length)
        );
        input.classList.toggle(
          "correct",
          input.value == answer
        );
      });
    }
  })();
</script>

And the Style section to:

/* BODY */
html {
    background-color: black !important;
}

html,
body {
	margin: 0 !important;
	padding: 0;
	height: 101%; /* may need to be adjusted based on platform */
    max-height: 100vh; /* may need to be adjusted based on platform */
	width: 100%;
    max-width: 100vw;
}

html.mobile,
body.mobile {
    height: 86vh; /* may need to be adjusted based on platform */
}

body {
	font-family: San Francisco, "Noto Sans KR", Helvetica, Arial;
	font-weight: 525;
	font-size: 30px;
	word-break: keep-all;
	text-align: left;
    position: relative;
    padding-top: 1em;
    height: 100%; /* may need to be adjusted based on platform */
    max-height: 100vh; /* may need to be adjusted based on platform */
    width: 100%;
    max-width: 100vw;
    z-index: -2;
    overflow: auto;

}

body::after {
  background-color: black;
  content: "";
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 101%; /* may need to be adjusted based on platform */
    max-height: 101vh; /* may need to be adjusted based on platform */
    position: absolute;
    z-index: -1;
}

/* CARD */
.note {
  border-radius: 1em;
	margin: 0 auto;
	width: 100%;
	box-sizing: border-box;
	padding: 0 1.5vh;
	max-width: 55em;
  position: relative;
}

.front,
.back,
.onesided {
	padding: 0 2em 1em 2em;
 	backdrop-filter: blur(10px);
  overflow: auto;
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

.front {
  line-height: 1.0;
  background-color: rgb(25, 26, 28);
  color: white;
	margin: 1em  0 0;
	border-top-left-radius: 1.2em;
	border-top-right-radius: 1.2em;
}

.front a,
.front a:link,
.front a:visited,
.front a:hover,
.front a:active {
	color: grey;
	text-decoration: none;
}

.back {
  line-height: 1.;
  background-color: rgb(35, 36, 41);
  color: NavajoWhite;
  z-index: 1;
	border-bottom-left-radius: 1.2em;
	border-bottom-right-radius: 1.2em;
	margin: 0;
}

.onesided {
	border-radius: 1.2em;
	margin: 1em 0;
}

.row {
	padding: 1em 0 0 0;
}

/* TAGS */
.tags {
	margin-bottom: -2.3em;
}

.tablecontainer + .onesided .tags {
	padding-bottom: 0;
}

.tag {
  font-size: 0.3em;
	padding: .4em .8em .4em .8em;
	display: inline-block;
	border-radius: 1.5em;
  border-color: rgb(78, 78, 84);
  border-style: solid;
  border-width: 1.5px;
	margin: .5em .5em .5em 0;
	position: relative;
	bottom: 4em;
	right: 4em;
  color: #808080;
  /* background-color: rgb(23, 91, 191); */
}

/* IMAGES */
img {
	object-fit: contain;
	margin: 0 auto;
	height: 3em;
	width: auto;
	max-width: 100%; /* fix for Anki */
}

/* ANKI TEMPLATE WIZARDRY */
:not(.backtemplate) .backonly {
	visibility:hidden;
}

.backtemplate .backonly {
	visibility: visible;
}

.backtemplate .frontonly {
	display: none;
}

/* MY ADDITIONAL */
.extra {
  padding: 2em 2em 2em 3em;
  overflow: auto;
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  background-color: rgb(35, 36, 41);
  color: rgb(134, 134, 142);
  margin: 1em 0 0 0;

  border-top-left-radius: 1.2em;
	border-top-right-radius: 1.2em;
  border-bottom-left-radius: 1.2em;
	border-bottom-right-radius: 1.2em;

  font-family: San Francisco, "Noto Sans KR", Helvetica, Arial;
  font-size: 20px;
  line-height: 1.5;
  word-break: keep-all;
  text-align: left;
}

/*@import url("_beautiful2.css");*/

/*Start of style added by resize image add-on. Don't edit directly or the edition will be lost. Edit via the add-on configuration */
.mobile .card img {height:unset  !important; width:unset  !important;}
/*End of style added by resize image add-on*/

.exlink {
    color: #FFC0CB;
}

.exdef {
    color: #DDA0DD;
}

.exsyn {
    color: #DB7093;
}

.expression {
font-weight: bold;
background: #FAEBD7;
color: black;
}

#typeans.typed {
  background: #CD5C5C;
	color: black;
	font-weight: bold;
	text-align: center;
}
#typeans.typed.goodsofar {
  background: #FAEBD7;
	text-align: center;
}
#typeans.typed.correct {
  background: #3CB371;
	text-align: center;
}

input[type=text]{
 background-color: rgba(0,0,0,0);
 text-align: left;
 font-size: 25px;
 cursor: text;
 border-radius: 5px;
 border-style: solid; 
 border-width: 1px;
 }

input[type=text]:focus {
 outline-color: unset;
}

About the arrow, I am not familiar with the add-on so I am afraid I can’t help. Maybe you could install this add-on to check the code: AnkiWebView Inspector - AnkiWeb

Lastly, yes, the language is called HTML. The Front and Back templates use mostly HTML, and sometimes also JavaScript (i.e. the parts of the code written inside <script></script> tags). The Styling section uses CSS instead.

[scoubidou75]

Thank you for your input, it integrates nicely in my old template now!
Is there a way to center the box in the grey box and make thin like the 3rd grey box below when just with the answer box? (I think the grey box is supposed to remain thinner according to the content).

I’ll look in this inspector add-on to see what I am missing for the arrows! Thank you!

[jcznk]

I modified the Front template and the Style section a little bit to vertically-center the type box.
I also moved part of the code to the Back template, as I was under the impression it was previously moved to the Front template by accident. If you liked it better the way it was before, feel free to tell me/change it back.

Front:

<script>
/* SPLIT HIERARCHICAL TAGS */
var tagEl = document.querySelector('.tags');
if(tagEl) {
    var tags = tagEl.innerHTML.split(' ');
    var html = '';
    tags.forEach(function(tag) {
        if(tag.includes('::')) {
            var topleveltag = tag.substring(0, tag.indexOf("::"));
            var bottomleveltag = tag.substring(tag.lastIndexOf("::")+2);
        } else { 
            var bottomleveltag = tag;
        }
        var newTag = '<span class="tag ' + topleveltag + ' ' + bottomleveltag + '">' + bottomleveltag + '</span>';
        html += newTag;
    });
    tagEl.innerHTML = html;
}
</script>

<div class="note">
<div class="front k">
	{{#Tags}}<div class="tags row">{{Tags}}</div><br>{{/Tags}}
	<div class="question row">
		{{#Front}}<div class="image">{{edit:Front}}</div>{{/Front}}
	</div>
</div>
</div>

<div class="note ">
<div class="back k ">
	<span class="backonly row"><p>{{edit:Back}}</p></span>
 {{type:Back}}
</div>
</div>

<script>
  (() => {
   /**
   * Type-in-the-answer live feedback for Anki (vague variant)
   * @author Matthias Metelka | @kleinerpirat
   */
    const input = document.getElementById("typeans");
    const answer = "{{Back}}";
    if (input) {
      input.addEventListener("input", () => {
        input.classList.add("typed");
        input.classList.toggle(
          "goodsofar",
          input.value == answer.substring(0, input.value.length)
        );
        input.classList.toggle(
          "correct",
          input.value == answer
        );
      });
    }
  })();
</script>

Back:

<div class="backtemplate">{{FrontSide}}</div>

<div class="note"> 
<div id="extra" class="front extra">
<div class="exlink">
{{#Front}}
<script>
  q = document.getElementById('Target');
  q.innerHTML = q.innerHTML.replace(/({{Front}})/g, '<span class="expression">\$1</span>');
</script>
{{/Front}}
<span id="Target"> {{edit:Extra}}</span>

<div class="exdef">
<div class="exsyn">

</div>

Styling section:

/* BODY */
html {
    background-color: black !important;
}

html,
body {
	margin: 0 !important;
	padding: 0;
	height: 101%; /* may need to be adjusted based on platform */
    max-height: 100vh; /* may need to be adjusted based on platform */
	width: 100%;
    max-width: 100vw;
}

html.mobile,
body.mobile {
    height: 86vh; /* may need to be adjusted based on platform */
}

body {
	font-family: San Francisco, "Noto Sans KR", Helvetica, Arial;
	font-weight: 525;
	font-size: 30px;
	word-break: keep-all;
	text-align: left;
    position: relative;
    padding-top: 1em;
    height: 100%; /* may need to be adjusted based on platform */
    max-height: 100vh; /* may need to be adjusted based on platform */
    width: 100%;
    max-width: 100vw;
    z-index: -2;
    overflow: auto;

}

body::after {
  background-color: black;
  content: "";
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 101%; /* may need to be adjusted based on platform */
    max-height: 101vh; /* may need to be adjusted based on platform */
    position: absolute;
    z-index: -1;
}

/* CARD */
.note {
  border-radius: 1em;
	margin: 0 auto;
	width: 100%;
	box-sizing: border-box;
	padding: 0 1.5vh;
	max-width: 55em;
  position: relative;
}

.front,
.back,
.onesided {
	padding: 0 2em 1em 2em;
 	backdrop-filter: blur(10px);
  overflow: auto;
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

.front {
  line-height: 1.0;
  background-color: rgb(25, 26, 28);
  color: white;
	margin: 1em  0 0;
	border-top-left-radius: 1.2em;
	border-top-right-radius: 1.2em;
}

.front a,
.front a:link,
.front a:visited,
.front a:hover,
.front a:active {
	color: grey;
	text-decoration: none;
}

.back {
  line-height: 1.;
  background-color: rgb(35, 36, 41);
  color: NavajoWhite;
  z-index: 1;
	border-bottom-left-radius: 1.2em;
	border-bottom-right-radius: 1.2em;
	margin: 0;
}

.onesided {
	border-radius: 1.2em;
	margin: 1em 0;
}

.row {
	padding: 1em 0 0 0;
}

/* TAGS */
.tags {
	margin-bottom: -2.3em;
}

.tablecontainer + .onesided .tags {
	padding-bottom: 0;
}

.tag {
  font-size: 0.3em;
	padding: .4em .8em .4em .8em;
	display: inline-block;
	border-radius: 1.5em;
  border-color: rgb(78, 78, 84);
  border-style: solid;
  border-width: 1.5px;
	margin: .5em .5em .5em 0;
	position: relative;
	bottom: 4em;
	right: 4em;
  color: #808080;
  /* background-color: rgb(23, 91, 191); */
}

/* IMAGES */
img {
	object-fit: contain;
	margin: 0 auto;
	height: 3em;
	width: auto;
	max-width: 100%; /* fix for Anki */
}

/* ANKI TEMPLATE WIZARDRY */
:not(.backtemplate) .backonly {
	display: none;
}

.backtemplate .backonly {
	display: unset;
}

.backtemplate .frontonly {
	display: none;
}

/* MY ADDITIONAL */
.extra {
  padding: 2em 2em 2em 3em;
  overflow: auto;
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  background-color: rgb(35, 36, 41);
  color: rgb(134, 134, 142);
  margin: 1em 0 0 0;

  border-top-left-radius: 1.2em;
	border-top-right-radius: 1.2em;
  border-bottom-left-radius: 1.2em;
	border-bottom-right-radius: 1.2em;

  font-family: San Francisco, "Noto Sans KR", Helvetica, Arial;
  font-size: 20px;
  line-height: 1.5;
  word-break: keep-all;
  text-align: left;
}

/*@import url("_beautiful2.css");*/

/*Start of style added by resize image add-on. Don't edit directly or the edition will be lost. Edit via the add-on configuration */
.mobile .card img {height:unset  !important; width:unset  !important;}
/*End of style added by resize image add-on*/

.exlink {
    color: #FFC0CB;
}

.exdef {
    color: #DDA0DD;
}

.exsyn {
    color: #DB7093;
}

.expression {
font-weight: bold;
background: #FAEBD7;
color: black;
}

#typeans.typed {
  background: #CD5C5C;
	color: black;
	font-weight: bold;
	text-align: center;
}
#typeans.typed.goodsofar {
  background: #FAEBD7;
	text-align: center;
}
#typeans.typed.correct {
  background: #3CB371;
	text-align: center;
}

input[type=text]{
 background-color: rgba(0,0,0,0);
 text-align: left;
 font-size: 25px;
 cursor: text;
 border-radius: 5px;
 border-style: solid; 
 border-width: 1px;
 margin-top: 30px;
 }

input[type=text]:focus {
 outline-color: unset;
}

@scoubidou75

make thin like the 3rd grey box below when just with the answer box? (I think the grey box is supposed to remain thinner according to the content).

I’m not sure if I understood this part correctly. Would you mind explaining?