AnkiDroid：带有随机答案的多项选择题卡

Question

我有这张卡可以在Anki PC上完美使用：正确的答案必须为粗体，这将使卡背面的突出显示。 我的问题是，Android版Anki应用程序（Ankidroid）中未显示粗体突出显示的内容，我也不知道为什么。 有人可以帮我吗？

前模板

<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>

样式

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

返回模板

<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>