Problem Statement in Text Exercises not getting displayed properly

[janthoXO]

Describe the bug

The problem statement in text exercises (especially in the exam mode) does not get displayed properly. Its especially bad for formulas.

Screen.Recording.2024-07-24.at.14.10.18.mov

To Reproduce

1. Go in a text exercise with a long math formular
2. Look at problem statement

Expected behavior

The formula is displayed in the next line and not stretched to the right

Screenshots

No response

Which version of Artemis are you seeing the problem on?

7.4.4

What browsers are you seeing the problem on?

Chrome

Additional context

No response

Relevant log output

No response

[michael-schwarz]

Additional context: The formatting is fine when viewed from instructor view (https://artemis.ase.in.tum.de/course-management/351/exams/772/exercise-groups/3174/text-exercises/14267) and also seems to be fine in the summary view students get after the exam.

For us (FPV team), this is not really a high priority issue though. For the actual exam, we may just replace such complicated LaTeX elements with screenshots, which do not suffer from this problem.

[coolchock]

@michael-schwarz could you please send us a raw problem statement so that we could reproduce the issue?

[michael-schwarz]

@just-max could you export the task from the mock exam and upload it here?

[Strohgelaender]

Tipp for your upcoming exercises: During exam creation, instructors can create an exam test run. This will then show you how the exercises look from the perspective of a student and can hopefully can help you catching such issues before the exam.

[just-max]

instructors can create an exam test

We usually do, but I didn't think to do it for the test exam, since we had used exactly these exercises before. Definitely will for the real exam, thanks for the reminder!

Here is a minimal broken example for an exercise description that exhibits this issue @coolchock . The problem seems to come from KaTeX fractions:

```latex
\frac{9}{10}
```

Here is the original problem statement of the exercise :

# Big Step

Prove that the function
```ocaml
let rec mul = fun a b ->
  match a with 0 -> 0 | _ -> b + mul (a-1) b
```
terminates for all inputs $$a, b \geq 0$$, by filling the holes $$ \\color{red}\\texttt{\<hole n>} $$ in the following Big-Step proof:

Definitions

```latex
\def\R{{\color{#009696}\;\Rightarrow\;}}
\def\qsmio#1{\texttt{#1}}
\def\inferrule#1#2#3{\textrm{#1}\;\dfrac{#2}{#3}\;}
\def\hole#1{{\color{red}\texttt{<hole #1>}}}

\pi_{ mul } = \inferrule{\hole{1}}{ \qsmio{mul} = \qsmio{fun a b -> match a with 0 -> 0 | \_ -> b + mul (a-1) b} \qquad \qsmio{fun a b -> match a with 0 -> 0 | \_ -> b + mul (a-1) b} \R \qsmio{fun a b -> match a with 0 -> 0 | \_ -> b + mul (a-1) b} }{ \qsmio{mul} \R \qsmio{fun a b -> match a with 0 -> 0 | \_ -> b + mul (a-1) b} }\\[3ex]
```

We prove by induction on `a` that `mul a b` terminates with $$a*b$$:
- Base case: $$ \\color{red}\\texttt{\<hole 2>} $$:

```latex
\def\R{{\color{#009696}\;\Rightarrow\;}}
\def\qsmio#1{\texttt{#1}}
\def\inferrule#1#2#3{\textrm{#1}\;\dfrac{#2}{#3}\;}
\def\hole#1{{\color{red}\texttt{<hole #1>}}}

\inferrule{\hole{3}}{
  \hole{4}\qquad
  \inferrule{\hole{5}}{
  }{
    \hole{6} \R \hole{7}
  }
}{
  \qsmio{mul 0 b} \R \qsmio{0}
}
```

- Inductive case: Assume `mul a b` terminates for an $$a \geq 0$$. Now, we show that it also terminates for $$a+1$$:

```latex
\def\R{{\color{#009696}\;\Rightarrow\;}}
\def\qsmio#1{\texttt{#1}}
\def\inferrule#1#2#3{\textrm{#1}\;\dfrac{#2}{#3}\;}
\def\hole#1{{\color{red}\texttt{<hole #1>}}}

\inferrule{APP}{
  \hole{8}\qquad
  \inferrule{PM}{
    \inferrule{OP}{
      \inferrule{APP}{
        \hole{9}
      }{
        \qsmio{mul (a+1-1) b} \R a*b
      }
      b \; \textcolor{red}{+} \; (a*b) \R (a+1)*b
    }{
      \qsmio{b + mul (a+1-1) b} \R (a+1)*b
    }
  }{
    \qsmio{match a+1 with 0 -> 0 | \_ -> b + mul (a+1-1) b} \R (a+1)*b
  }
}{
  \qsmio{mul (a+1) b} \R (a+1)*b
}
```



## Submission Format


Write the content of one hole per line in the format:

$$\\texttt{hole 1 = \\red{\<content 1>}}$$  
$$\\texttt{hole 2 = \\red{\<content 2>}}$$  
$$\\phantom{\\texttt{hole n}}\\;\\;\\vdots$$


If your answer requires mathematical symbols, copy and paste the Unicode characters from the following table or type the ASCII-only variant yourself.

<style>
.private-use-marker-table ~ table {
  width: max-content !important;
}
</style>

<div class="private-use-marker-table"></div>

| Symbol | Unicode | ASCII-only |
| --- |: --- :|: --- :|
| Logical OR | ∨ | `OR` |
| Logical AND | ∧ | `AND` |
| Logical NOT | ¬ | `~` |
| Logical Implication | ⟹ | `==>` |
| Reversed Logical Implication | ⟸ | `<==` |
| Logically Equivalent | ≡ | `===` |
| Universal Quantifier ("for all") | ∀ | `forall` |
| Existential Quantifier ("there exists") | ∃ | `exists` |
| Less-Than | < | `<` |
| Greater-Than | > | `>` |
| Less-Than or Equal To | ≤ | `<=` |
| Greater-Than or Equal To | ≥ | `>=` |
| Not Equal To | ≠ | `!=` |
| Set Membership ("in") | ∈ | `in` |
| Exponents | ² <br> ³ | `^2` <br> `^3` <br> `^(a + b)` |
| Square Root | √ | `sqrt(x)` |
| Weakest Precondition | WP⟦ ⟧( )| `WP[[ ]]( )` |
| Pi | π | `pi` |
| Tau | τ | `tau` |

In the real exam we would not use such wide KaTeX expressions.

---

By diffing the rendered HTML in the preview vs. in the test run, we can see the issue:

-<!-- rendered HTML from the exercise preview -->
+<!-- rendered HTML from the test run -->
 <span aria-hidden="true" class="katex-html">
     <span class="base">
-        <span style="height: 2.00744em; vertical-align: -0.686em;" class="strut"></span>
+        <span class="strut"></span>
         <span class="mord">
             <span class="mopen nulldelimiter"></span>
             <span class="mfrac">
                 <span class="vlist-t vlist-t2">
                     <span class="vlist-r">
-                        <span style="height: 1.32144em;" class="vlist">
-                            <span style="top: -2.314em;">
-                                <span style="height: 3em;" class="pstrut"></span><span class="mord"><span class="mord">1</span><span class="mord">0</span></span>
+                        <span class="vlist">
+                            <span>
+                                <span class="pstrut"></span><span class="mord"><span class="mord">1</span><span class="mord">0</span></span>
                             </span>
-                            <span style="top: -3.23em;"><span style="height: 3em;" class="pstrut"></span><span style="border-bottom-width: 0.04em;" class="frac-line"></span></span>
-                            <span style="top: -3.677em;">
-                                <span style="height: 3em;" class="pstrut"></span><span class="mord"><span class="mord">9</span></span>
+                            <span><span class="pstrut"></span><span class="frac-line"></span></span>
+                            <span>
+                                <span class="pstrut"></span><span class="mord"><span class="mord">9</span></span>
                             </span>
                         </span>
                         <span class="vlist-s">​</span>
                     </span>
                     <span class="vlist-r">
-                        <span style="height: 0.686em;" class="vlist"><span></span></span>
+                        <span class="vlist"><span></span></span>
                     </span>
                 </span>
             </span>

The real exam mode apparently strips inline style attributes from KaTex.

Possibly related to #8461 ?

[just-max]

Is there any progress on this issue, or any idea where we can look to fix it ourselves? This affects basically all KaTeX used in exam mode, like subscripts, exponents, and fractions.

[just-max]

For now, we are replacing the KaTeX elements with screenshots as a workaround, which works for us.