conditional formatting of anki deck class style with javascript based on a hidden variable

Question

I have a basic anki deck configuration, I'd like to add colors for gender of a noun word in latin languages (Portuguese, to be specific):

Front: man

Back: homem

Example:

Gender: m

<-- for contrast, I'll write example of another card --> Front: woman

Back: mulher

Example:

Gender: f

For better memorization, I force to type my answers:

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

so far so good.

Now, I created my styling:

.card-m {
 font-family: Arial;
 font-size: 26px;
 text-align: center;
 color: white;
 background-color: #66d;
}

.card-f {
 font-family: Arial;
 font-size: 26px;
 text-align: center;
 color: white;
 background-color: #f5426f;
}

.card {
 font-family: Arial;
 font-size: 26px;
 text-align: center;
}

and my back Template card has the following format:

<div id=wrapper class=card-m>
{{FrontSide}}

<hr id=answer>

{{hint:Example}}
</div>

Here's my question: I would like to have a javascript to read the value of Gender variable, and apply class= highlight the back of the card in either Blue, or Pink (for feminine or masculine respectively):

<script>
var x = {{Gender}}.string;
if {{Gender}} == "m"
{ 
  document.getElementById("wrapper").class='card-m';
}
else
{ 
  document.getElementById("wrapper").class='card-f';
}
</script>

But the Gender variable seems to have no effect on the class that is being applied.

Any idea why?

Answer 1

It looks like some of the HTML and JS syntax was not correct. Also, the {{Gender}} card field can be directly inserted into a string.

I was able to make it work with these changes to your code.

Full Back Template:

<div id="wrapper" class="">
    {{FrontSide}}

    <hr id="answer">

    {{hint:Example}}
</div>

<script>

var x = "{{Gender}}";
if (x === "m")
{ 
  document.getElementById("wrapper").className = "card-m";
}
else
{ 
  document.getElementById("wrapper").className = "card-f";
}
</script>