Add a hint field that shows up automatically

Anki Card Design
1

Hello everyone,

I know that this topic has been treated multiple times here and there but I have tried all my best with many headaches without success so here I am.
Basically, I’ve managed to build this beautiful type-in template and I’d like 2 more things to make it perfect:

  • Add a hint field in very tiny fonts at the bottom of the rectangle
  • Make that hint only showing when pressing H key on the Front, BUT always showing up when revealing the Back (because I always want to see the hints with answers).

I know it might be simple but with my limited knowledge of HTML and CSS I couldn’t find a way to make it. I already managed to create the rectangle that will have a fixed dimension whatever the windows size^^

So here is my code if you want to have a look.
Extra is my hint field btw

Many thanks for your help!

Front

<body class="card">
  <div id="qa">
    
    <!-- Start of template -->
    <div class="kard">
      <div class="textbox">{{Front}}</div>
      <hr id="answer">
      <div class="textbox">{{type:Back}}</div>
    </div>
    <!-- End of template -->
    
  </div>
</body>


</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>



<script>
document.getElementById("typeans").style.fontSize = "45px";
</script>

Back

<div class="backtemplate">{{FrontSide}}
</div>
<br>
<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>

CSS

<div style="display:flex">
  <img src="" style="display:block !important; margin:auto">
</div>
/* center #qa inside .card (the body)  */
.card {
  font-size: 1.2rem;
  text-align: center;
  background-color: #8ab0ae;
  --text-fg: #575e6f;
  --text-bg: rgba(255, 255, 255, .5);
  --kard-bg: #fed6bc;

}

/* make #qa (child of .card) centerable */
/* and left-aligned */
#qa {
  min-width: 40%;
  display: inline-block;

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    display: inline-block;
    
}

.kard {
  padding: 2rem 10rem;
  background: 	#3D3847;
  box-shadow: rgba(0, 0, 0, 0.30) 0px 0px 25px 4px;
  border-radius: 15px;
}

.textbox {
  display: inline-block;

  text-align: left;
  color: vwhit;0.1rem 0.1rem 0 var(--text-bg);
	height: 100px;
}

hr#answer {
  margin-top: -3rem;
  margin-bottom: 1rem;
  border: 0;
  height: ;
  border-top: thin solid rgba(, 0, 0, 0.);
  border-bottom: thin solid rgba(255, 255, 255, 0.3);

}

/* for landscape orientation */
/* only use part of the available width */

@media (min-width: 500px) {
  #qa {
    min-width: 500px;
    max-width: 600px;

  font-family: arial;
 */
  }
}
@media (min-width: 1366px) {
  #qa {
    min-width: 600px;
    max-width: 600px;
  }
}
...................
.card {
 font-size: 45px;
 color: black;
    margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
 width: 150px;
  height: 200px;


}


input[type=text]:focus {

}


input[type=text]{

 background-color: rgba(0,0,0,0);
 text-align: center;
 cursor: text;
 border-radius: 5px;
 border-style: solid; 
 border-width: px;
 margin-top: 3.px;
 font-size: 50px;


}


input#typeans { 
font-family: "Arial;
	font-weight: bold;
font-size:8px;

}

.card, input {
font-family: "Arial", "Comic Sans", cursive !important;
font-size: 45px !important;
text-align: center;
color: #FAEBD7;
background-color: crimson;
}

#typeans{
	
  font-family: "Arial";
	font-weight: bold;
  font-size: 45px 
  text-align: center

}

.extra {
</div>
  font-family: "Ubuntu", Helvetica, Arial;
  font-size: 30px;
  line-height: 1.5;
  word-break: keep-all;
  text-align: center;
	color: #FFE4C4;
}
2

I’ll be honest, your template is all over the place - you’ve copied together a lot of things that don’t make sense the way they are right now.
But: This isn’t stackoverflow - as long as it works for you it’s all good. Nevertheless I suggest you look into the basics of HTML and how to use CSS selectors. It’ll make things a lot easier for you.

That being said, I’ve made no changes apart from the ones you asked for.

Here’s your Front:

<body class="card">
  <div id="qa">
    
    <!-- Start of template -->
    <div class="kard">
      <div class="textbox">{{Front}}</div>
      <hr id="answer">
      <div class="textbox">{{type:Back}}</div>

		<div id="hint" class="extra">{{Extra}}</div>

    </div>

    <!-- End of template -->
    
  </div>
</body>


</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>



<script>
document.getElementById("typeans").style.fontSize = "45px";
</script>



<script>/*------------------------------------- SHOW HINT --------------------------*/
  document.addEventListener("keyup", function(e) {
    if (e.key === "h") {
      var hintElement = document.getElementById("hint");
      hintElement.style.display = "block";
    }
  });
</script>

Add this to the bottom of your CSS:

/* Hide hint on Front, display on Back */
#hint {
  display: none;
}
.backtemplate #hint {
  display: block;
}

The Back Template doesn’t change.

1 Like
3

Thank you so much for your kind and quick help! It worked perfectly!

Just to make it a bit easier on the eyes, would you know how to make everything appearing inside the box (including the hint) without having the box size adjusting each time? It’s picky but whenever I review I like to have the box size staying the same and having juste the content changing (and now with the hint and answers correction the box is extending from the bottom each time I press space which add some fatigue to eyes).
A rectangle size that would always stay at the height of the correction answer would be great (like on the picture).
And it’s not too much asking, having the hint a bit lower so that it’s doesn’t touch the answer would be awesome. :pray:

Just ouf of curiosity, and you’re totally right, I aggregated a few templates to make this one, but what are the consequences of having this «mess» in the codes? Or it’s for the sake of the art of coding itself?

I’ll definitely starts learning coding soon!

Thank you

Xnip2023-12-05_06-54-53
Xnip2023-12-05_06-54-531072×790 95.1 KB

4

You can use the visibility property instead of not displaying the object. Change the script on the Front to:

<script>/*------------------------------------- SHOW HINT --------------------------*/
  document.addEventListener("keyup", function(e) {
    if (e.key === "h") {
      var hintElement = document.getElementById("hint");
      hintElement.style.visibility = "visible";
    }
  });
</script>

And change the CSS to this - this also gives the hint a bit of a padding on top.

#hint {
  padding-top: 10px;
  visibility: hidden;
}
.backtemplate #hint {
  visibility: visible;
}

When it comes to these kinds of basic format and styling issues, ChatGPT can be a great help as well!

 

As for

In theory, the JS you copied without using makes your cards slower, but that’s irrelevant in this case. It simply makes it a lot harder to change things or debug it once something doesn’t work. When things are neat and orderly, it is so much more enjoyable for someone else (or most likely you 6 months later) to read and understand what your code does.

5

Thank you again for the fix!

I’ve integrated your new lines but it doesn’t seem to work on my hand, the rectangle size still changes from Front to Back (it gets bigger with Back corrections).
Could you double check if my code is correct?

As for the ChatGPT, that’s a great idea, thank you!

Front:

<body class="card">
  <div id="qa">
    
    <!-- Start of template -->
    <div class="kard">
      <div class="textbox">{{Front}}</div>
      <hr id="answer">
      <div class="textbox">{{type:Back}}</div>

		<div id="hint" class="extra">{{Extra}}</div>

    </div>

    <!-- End of template -->
    
  </div>
</body>


</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>



<script>
document.getElementById("typeans").style.fontSize = "45px";
</script>



<script>/*------------------------------------- SHOW HINT --------------------------*/
  document.addEventListener("keyup", function(e) {
    if (e.key === "h") {
      var hintElement = document.getElementById("hint");
      hintElement.style.visibility = "visible";
    }
  });
</script>

CSS

<div style="display:flex">
  <img src="" style="display:block !important; margin:auto">
</div>
/* center #qa inside .card (the body)  */
.card {
  font-size: 1.2rem;
  text-align: center;
  background-color: #8ab0ae;
  --text-fg: #575e6f;
  --text-bg: rgba(255, 255, 255, .5);
  --kard-bg: #fed6bc;

}

/* make #qa (child of .card) centerable */
/* and left-aligned */
#qa {
  min-width: 40%;
  display: inline-block;

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    display: inline-block;
    
}

.kard {
  padding: 2rem 10rem;
  background: 	#3D3847;
  box-shadow: rgba(0, 0, 0, 0.30) 0px 0px 25px 4px;
  border-radius: 15px;
}

.textbox {
  display: inline-block;

  text-align: left;
  color: vwhit;0.1rem 0.1rem 0 var(--text-bg);
	height: 100px;
}

hr#answer {
  margin-top: -3rem;
  margin-bottom: 1rem;
  border: 0;
  height: ;
  border-top: thin solid rgba(, 0, 0, 0.);
  border-bottom: thin solid rgba(255, 255, 255, 0.3);

}

/* for landscape orientation */
/* only use part of the available width */

@media (min-width: 500px) {
  #qa {
    min-width: 500px;
    max-width: 600px;

  font-family: arial;
 */
  }
}
@media (min-width: 1366px) {
  #qa {
    min-width: 600px;
    max-width: 600px;
  }
}
...................
.card {
 font-size: 45px;
 color: black;
    margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
 width: 150px;
  height: 200px;


}


input[type=text]:focus {

}


input[type=text]{

 background-color: rgba(0,0,0,0);
 text-align: center;
 cursor: text;
 border-radius: 5px;
 border-style: solid; 
 border-width: px;
 margin-top: 3.px;
 font-size: 50px;


}


input#typeans { 
font-family: "Arial;
	font-weight: bold;
font-size:8px;

}

.card, input {
font-family: "Arial", "Comic Sans", cursive !important;
font-size: 45px !important;
text-align: center;
color: #FAEBD7;
background-color: crimson;
}

#typeans{
	
  font-family: "Arial";
	font-weight: bold;
  font-size: 45px 
  text-align: center

}

.extra {
</div>
  font-family: "Ubuntu", Helvetica, Arial;
  font-size: 15px;
  line-height: 1.5;
  word-break: keep-all;
  text-align: center;
	color: #FFE4C4;
}


/* Hide hint on Front, display on Back */
#hint {
  display: none;
padding-top: 10px;
  visibility: hidden;
}
.backtemplate #hint {
  display: block;
  visibility: visible;
}
6

Quick answer:

.kard {
  padding: 2rem 10rem;
  background: 	#3D3847;
  box-shadow: rgba(0, 0, 0, 0.30) 0px 0px 25px 4px;
  border-radius: 15px;
  min-height: 300px;
}

#hint {
  visibility: hidden;
  position: absolute;
  bottom: 0;
  text-align: center;
  left: 50%;
  transform: translateX(-50%);
}
.backtemplate #hint {
  visibility: visible;
}

Now the rectangle should always stay the same size - with the hint at the bottom. I would still urge you to look at some very basic HTML/CSS tutorials, because issues like these will keep coming up all the time.

Best of luck!

7

Thank you a lot, it worked perfectly! I’m really grateful!

I’ll dig into the codes to learn about it.

8

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.