Tengo una configuración básica de mazo anki, me gustaría agregar colores para el género de una palabra sustantiva en idiomas latinos (portugués, para ser específicos):

Anverso: hombre

Reverso: homem

Ejemplo:

Genero M

<-- para el contraste, escribiré ejemplo de otra tarjeta --> Anverso: mujer

Reverso: mujer

Ejemplo:

Género: f

Para una mejor memorización, obligo a escribir mis respuestas:

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

Hasta ahora, todo bien.

Ahora, creé mi estilo:

 .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; }

y mi tarjeta de plantilla trasera tiene el siguiente formato:

 <div id=wrapper class=card-m> {{FrontSide}} <hr id=answer> {{hint:Example}} </div>

Aquí está mi pregunta: me gustaría tener un javascript para leer el valor de la variable Sexo y aplicar clase = resaltar el reverso de la tarjeta en Azul o Rosa (para femenino o masculino respectivamente):

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

Pero la variable Género parece no tener efecto en la clase que se está aplicando.

¿Alguna idea de por qué?