1

I have got KaTeX strings which I'm trying to template through javascript template literals. But the results are not rendered properly instead the raw strings $$10 b^2$$ sq. units are displayed in the UI. I have got the required Js files in the script tag of the HTML file.

<script src=@routes.Assets.at("katex/katex.min.js")></script>
<script src=@routes.Assets.at("katex/contrib/auto-render.min.js")></script>

I'm using Scala playframework which supports templating. Playframework templating works whereas templating through Javascript doesn't. I'm not sure where the issue occurs.

Rendering works correctly for function getStudentQuestionPrompt but the issue occurs with getAnswerColumnForQuestion. This is the segment of code that I'm trying to use.

function getQuestionBodyString(question, conceptInfo) {
    return ` 
      <tr>
        <td> ${question.questionId} </td>
        <td><form class="form-inline">${getStudentQuestionPrompt(question)}</form>
        <td> ${getAnswerColumnForQuestion(question)} </td>
      </tr>
    `
}

function getAnswerColumnForQuestion(question) {
    let answerHTML = `${getAnswerForMCQ(question)}`;
    return answerHTML;
}

function getAnswerForMCQ(question) {
    return "$$10 b^2$$";
}
Maniyan
  • 35
  • 4
  • You're referring to code which doesn't appear in the question and have no data available that can be used to validate if the code is performing correctly. Please update the question so that the code presented is a [mre] – Tibrogargan Sep 15 '22 at 18:14
  • @Tibrogargan I have made edits so that the question is easier to understand. – Maniyan Sep 15 '22 at 18:24
  • The question was understandable before you made the changes, but perhaps you did not understand my comment. There is still no [mre] here. Please provide some example input data and what the expected output should be. – Tibrogargan Sep 15 '22 at 18:27
  • On the face of it however, JavaScript has absolutely no way to magically replace the string `$$10 b^2$$` by itself. Your Scala templating solution needs to have provided the final string and/or you need to make a call out to that component in order to process that value. – Tibrogargan Sep 15 '22 at 18:30
  • Are you sure that KaTeX listens for DOM changes? Otherwise it won't be aware that you added additional HTML to the page. Also, the template literals in `getAnswerColumnForQuestion` are unnecessary. – robertklep Sep 15 '22 at 18:30
  • @robertklep Thanks a lot for pointing out! I didn't make KaTex to render after loading the contents. – Maniyan Sep 15 '22 at 19:14

0 Answers0