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
