How can I make a button for extra information?

Anki Card Design
1

I am making a language deck to share on ankiweb and want to include example sentences in the cards. However, I cannot find a way to display two buttons next to each other that contain the example sentence and the translation. Is there a way I can do that?

2

What do you mean by buttons? Can you provide an example of what you want your cards to look like?

3

image
image744×194 7.64 KB

I want them to be like this but I could not figure it out.

4

You can use hint fields for that. They don’t look much like your example, but that’s customisable.

5

I tried them but they do not really look aesthetic. So, I tried to implement the code of another deck and succeeded. But unfortunately, one of the buttons are not displayed on AnkiDroid. The code is as follows.

<div id="buttonsBox">

<button onmouseover="ShowWikt()">Example</button>

<button id="button" disabled onmouseover="ShowExs()" style="display:none">Translation</button><br>


</div>

<!------------------------------------------------>
<!------------------------------------------------>
<!------------------------------------------------>

<script>
  var answerShown = 0;

if (document.getElementById("textsend").value === "") {
  document.getElementById('button').disabled = true;
  document.getElementById('button').style.display="none";
} else {
  document.getElementById('button').disabled = false;
  document.getElementById('button').style.display="";
}

<!-------><!-------><!-------><!------->
<!--check whether the audio transcript shows or not--!>
var transcript = document.getElementById("tags").innerHTML;

if (transcript.indexOf("adj")>-1){
  document.getElementById("aa").style.display = "";
}
<!-------><!-------><!-------><!------->


function ShowWikt() {
  document.getElementById("showWikt").style.display = "";
  document.getElementById("showExs").style.display = "none";
}

function ShowExs() {
  if (document.getElementById("showExs").style.display != "") {
    document.getElementById("showWikt").style.display = "none";
    document.getElementById("showExs").style.display = "";

    if (answerShown == 0) {
      document.getElementById("answerButton").style.display = "";
      answerShown = 1;
    }
  }
}


</script>
<!------------------------------------------------>
<!------------------------------------------------>
<!------------------------------------------------>


<!------------------------------------------------>
<div id="showWikt" style="display:none">
{{Example Sentence}}
</div>
<!------------------------------------------------>
<div id="showExs" style="display:none">

  <!---->
  <div id="ExsNoTrans">
    {{Translation of the example sentence}}
  </div>
  <!---->

</div>
<!------------------------------------------------>



<!------------------------------------------------>
<textarea class="input" id="textsend" onkeyup="" name="demo" style="display:none">{{Example Sentence}}</textarea>

<div id="tags" style=" display:none">{{Tags}}</div>

And the styling:

    #buttonsBox{
    margin: auto;
    width: 50%;
    border: 0px solid gray;
    padding: 10px;
    text-align:center;
    }

    #showExs{
    margin: auto;
    width: 75%;
    border: 3px solid gray;
    padding: 10px;
    text-align:left;
    }

    #showWikt{
    margin: auto;
    width: 75%;
    border: 3px solid gray;
    padding: 10px;
    text-align:left;
    }

It works fine on PC, but the second is just non-existent on AnkiDroid. Any idea why? Thank you in advance.
6

I agree, but that’s what I meant when I was saying that they are customisable. You only need CSS to style the hint class to your heart’s content. Anki takes responsibility to make this feature work on all platforms.
With JS on the other hand, you are pretty much on your own. There’s no guarantee that it will work on different platforms and versions. That’s why I only use it if absolutely necessary.

7

I tried to style the hint a few moments ago and although I paste the following:

{{#Example sentence}}

<a class=hint href="#"

onmouseover="this.style.display='none';document.getElementById('hint4753594160').style.display='inline-block';return false;">

Example</a><div id="hint4753594160" class=hint style="display: none">{{Example sentence}}</div>

{{/Example sentence}}

{{#Translation of the example sentence}}

<a class=hint href="#"

onmouseover="this.style.display='none';document.getElementById('hint4753594160').style.display='inline-block';return false;">

Translation</a><div id="hint4753594160" class=hint style="display: none">{{Translation of the example sentence}}</div>

{{/Translation of the example sentence}}

It displays two hint buttons but their content is the same: The field which is written first, occupies both of the hint buttons. Also, you cannot see the content of a button for a second time if you already pressed the other button. (the hint button disappears after it is clicked) Is there a way to fix these problems too?

8

id properties should be unique. E.g. use hint1 and hint2. I don’t think reversing the clicked hint is possible.
However, I don’t see the benefit over using Anki’s default hints, i.e. {{hint:Example sentence}} in the template and then styling like

.hint {
 background: yellow,
 color: green,
 font-family: sans-serif,
 border: 1px solid black,
 ...
}

If you want only temporary visible hints, there may be other CSS and HTMLs features like tooltips for that. You have to figure that out yourself, but I suppose it’s still a lot easier and more robust than JS.

4 Likes
9

I did not know that those come in so handy. I will use them if I cannot find a way to show the JS buttons on AnkiDroid. Thank you for answering my questions.

1 Like