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

[![enter image description here](https://i.stack.imgur.com/4InLR.png)](https://i.stack.imgur.com/4InLR.png)

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

Back:
mulher

Example:

Gender:
f

[![enter image description here](https://i.stack.imgur.com/29R8j.png)](https://i.stack.imgur.com/29R8j.png)

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?