AnkiDroid: Multiple choice questions card with randomized answers

Question

I have this card that works perfectly in Anki for PC: the correct answer must be in bold, it will make the highlight on the back of the card appear. My problem is that the bold highlight is not shown in the Anki app for Android (Ankidroid) and I have no idea why. Could someone please help me?

Front Template

<section id="kard">
    <article>
        <div class="tags">#tags: {{Tags}}</div>

        {{#Pergunta}}
        <div id="choicesContainer" class="sample">
            {{Pergunta}}
            <ol class="answerList">
                <li id="answer1" class="answer">{{Resposta}}</li>
                <li id="answer2" class="answer">{{Errada-1}}</li>
                <li id="answer3" class="answer">{{Errada-2}}</li>
                <li id="answer4" class="answer">{{Errada-3}}</li>
                <li id="answer5" class="answer">{{Errada-4}}</li>
            </ol>
        </div>
        {{/Pergunta}}
    </article>
</section>

<script>
    var arrayElements = [];

    ((function () {
        var hasReview = typeof (review) !== 'undefined' && review.arrayElements;
        var parent = document.getElementsByClassName('answerList')[0];
        var elements = [...document.getElementsByClassName('answer')];

        var elementAnswer = elements.find(c => [...c.childNodes].find(d => d.nodeName == 'B') && (c.innerText = c.innerText));
        if (!elementAnswer) {
            var el = document.getElementById('choicesContainer');
            el.style = "color:#ee8f1a";
            el.innerHTML = 'É necessário que a resposta correta esteja NEGRITADA.';
        } else {
            elementAnswer.setAttribute('data-correct', true);
        }

        elements.forEach(c => {
            c.id = Math.floor(Math.random() * 1000);
            arrayElements.push(parent.removeChild(c));
        });

        arrayElements = hasReview ? review.arrayElements : arrayElements;

        arrayElements.sort((a, b) => a.id - b.id);
        arrayElements.filter(c => c.innerText.trim().length)
            .forEach(d => parent.append(d));

        if (!hasReview) {
            review = {
                arrayElements
            };
        } else {
            review = undefined
        }
    }))()
</script>

Styling

html {
    overflow: scroll;
    overflow-x: hidden;
}

/* CONTENÇÃO PARA OS CARTÕES */
#kard {
    padding: 0px 0px;
    max-width: 800px;
    margin: 0 auto;
    word-wrap: break-word;
}

.card {
    font-family: Open Sans;
    font-size: 20px;
    text-align: left;
    color: #D7DEE9;
    background-color: #333B45;
}

/* AJUSTE PARA AS ALTERNATIVAS SEREM "a)" , "b)", "c)", "d)" e "e)" */
ol {
  counter-reset: list;
}
ol li {
  list-style: none;
}
ol li:before {
  content: counter(list, lower-alpha) ") ";
  counter-increment: list;
}

/* ESTILO PARA AS TAGS APARECEREM NO TOPO DO CARTÃO QUANDO PASSAR O MOUSE */
.tags {
    color: #ee8f1a;
    opacity: 0;
    font-size: 10px;
    width: 100%;
    text-align: center;
    text-transform: ;
    position: fixed;
    padding: 0;
    top: 0;
    right: 0;
}

.tags:hover {
    opacity: 1;
    position: fixed;
}

/* ESTILO DE IMAGEM (para alterar a proporção, mexer apenas em max-width ("%" ou "px" (pixies)) */
img {
    display: block;
    max-width: 100%;
}

/* ESTILO DE TABELA (apenas para alterar o tamanho da fonte "px" (pixies)) */
tr {
    font-size: 18px;
}

/* ESTILO PARA O CONTAINER EXTRA */
.extraContainer {
    padding-top: 20px;
}

/* ESTILO PARA O TITULO DO CAMPO EXTRA */
.extraTitle {
    font-weight: bold;
    color: #ee8f1a;
}

/* COR E ESTILO PARA O NEGRITO (b), ITÁLICO (i) E SUBLINHADO (u) */

/* ESTILO NEGRITO (b) */
b {
    font-weight: bold;
    color: #C695C6;
}

/* ESTILO ITÁLICO (i) */
i {
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
    color: #64bfbf;
}

/* ESTILO SUBLINHADO (u) */
u {
    text-decoration: none;
    color: #F08080;
}

/* ESTILO PARA LINKS */
a {
    color: LightGray;
}

/* AJUSTES PARA CELULARES */
.mobile .card {
    color: #D7DEE9;
    background-color: #333B45;
}

.mobile .tags:hover {
    opacity: 1;
    position: relative;
}

Back Template

<section id="kard">
    <div class="tags">#tags: {{Tags}}</div>

<section id="kard">
    <article>
        <div class="tags">#tags: {{Tags}}</div>

        {{#Pergunta}}
        <div id="choicesContainer" class="sample">
            {{Pergunta}}
            <ol class="answerList">
                <li id="answer1" class="answer">{{Resposta}}</li>
                <li id="answer2" class="answer">{{Errada-1}}</li>
                <li id="answer3" class="answer">{{Errada-2}}</li>
                <li id="answer4" class="answer">{{Errada-3}}</li>
                <li id="answer5" class="answer">{{Errada-4}}</li>
            </ol>
        </div>
        {{/Pergunta}}
    </article>
</section>

<script>
    var arrayElements = [];

    ((function () {
        var hasReview = typeof (review) !== 'undefined' && review.arrayElements;
        var parent = document.getElementsByClassName('answerList')[0];
        var elements = [...document.getElementsByClassName('answer')];

        var elementAnswer = elements.find(c => [...c.childNodes].find(d => d.nodeName == 'B') && (c.innerText = c.innerText));
        if (!elementAnswer) {
            var el = document.getElementById('choicesContainer');
            el.style = "color:#ee8f1a";
            el.innerHTML = 'É necessário que a resposta correta esteja NEGRITADA.';
        } else {
            elementAnswer.setAttribute('data-correct', true);
        }

        elements.forEach(c => {
            c.id = Math.floor(Math.random() * 1000);
            arrayElements.push(parent.removeChild(c));
        });

        arrayElements = hasReview ? review.arrayElements : arrayElements;

        arrayElements.sort((a, b) => a.id - b.id);
        arrayElements.filter(c => c.innerText.trim().length)
            .forEach(d => parent.append(d));

        if (!hasReview) {
            review = {
                arrayElements
            };
        } else {
            review = undefined
        }
    }))()
</script>
    <article id="extraContainer" class="extraContainer">
        {{#Extra}}
        <span class="extraTitle">Extra</span><br>{{Extra}}
        {{/Extra}}
    </article>
</section>
<script>
    const answer = arrayElements.find(c => c.getAttribute('data-correct') == 'true');
    if (answer) {
        answer.style.color = "#3fc178";
        answer.style.fontWeight = 'bold';

    }
    review = undefined;
</script>