fix(client,curriculum): add MathJax support for Precalculus (#66441)

2026-05-28 18:26:54 +00:00 · 2026-03-17 00:22:31 +07:00
parent 3c21283045
commit c9071dd6a9
12 changed files with 60 additions and 53 deletions
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { connect } from 'react-redux';
 import { useTranslation } from 'react-i18next';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -8,6 +8,7 @@ import { Button, Spacer } from '@freecodecamp/ui';
 import { Question } from '../../../redux/prop-types';
 import { openModal } from '../redux/actions';
 import { SuperBlocks } from '@freecodecamp/shared/config/curriculum';
+import { initializeMathJax, isMathJaxAllowed } from '../../../utils/math-jax';
 import SpeakingModal from './speaking-modal';
 import ChallengeHeading from './challenge-heading';
 import PrismFormatted from './prism-formatted';
@@ -39,6 +40,12 @@ function MultipleChoiceQuestions({
 }: MultipleChoiceQuestionsProps): JSX.Element {
  const { t } = useTranslation();

+  useEffect(() => {
+    if (isMathJaxAllowed(superBlock)) {
+      initializeMathJax();
+    }
+  }, [superBlock]);
+
  const [modalText, setModalText] = useState('');
  const [modalAnswerIndex, setModalAnswerIndex] = useState<number>(0);
  const [modalQuestionIndex, setModalQuestionIndex] = useState<number>(0);
@@ -67,7 +74,9 @@ function MultipleChoiceQuestions({
  };

  return (
-    <>
+    <div
+      className={isMathJaxAllowed(superBlock) ? 'mathjax-support' : undefined}
+    >
      <ChallengeHeading
        heading={
          questions.length > 1 ? t('learn.questions') : t('learn.question')
@@ -191,7 +200,7 @@ function MultipleChoiceQuestions({
        answerIndex={modalAnswerIndex}
        superBlock={superBlock}
      />
-    </>
+    </div>
  );
 }

@@ -13,7 +13,8 @@ const superBlocksWithMathJax = [
  SuperBlocks.ProjectEuler,
  SuperBlocks.RosettaCode,
  SuperBlocks.SciCompPy,
-  SuperBlocks.PythonV9
+  SuperBlocks.PythonV9,
+  SuperBlocks.IntroductionToPrecalculus
 ];

 const configure = () => {
@@ -29,11 +30,9 @@ const configure = () => {
      processClass: 'mathjax-support'
    }
  });
-  MathJax.Hub.Queue([
-    'Typeset',
-    MathJax.Hub,
-    document.querySelector('.mathjax-support')
-  ]);
+  document.querySelectorAll('.mathjax-support').forEach(el => {
+    MathJax.Hub.Queue(['Typeset', MathJax.Hub, el]);
+  });
 };

 export const initializeMathJax = (mathJaxChallenge = true) => {
@@ -18,20 +18,19 @@ What is the Law of Cosines?

 ## --answers--

-For any triangle with sides of length a, b, and c, and angle C opposite side c, the Law of Cosines states that `c^2 = a^2 + b^2 + 2ab * cos(C)`.
+For any triangle with sides of length a, b, and c, and angle C opposite side c, the Law of Cosines states that $c^2 = a^2 + b^2 + 2ab\cos(C)$.

 ---

-For any triangle with sides of length a, b, and c, and angle C opposite side c, the Law of Cosines states that `c = a + b - 2 * cos(C)`.
-
+For any triangle with sides of length a, b, and c, and angle C opposite side c, the Law of Cosines states that $c = a + b - 2\cos(C)$.

 ---

-For any triangle with sides of length a, b, and c, and angle C opposite side c, the Law of Cosines states that `c^2 = a^2 + b^2 - 2ab * cos(C)`.
+For any triangle with sides of length a, b, and c, and angle C opposite side c, the Law of Cosines states that $c^2 = a^2 + b^2 - 2ab\cos(C)$.

 ---

-For any triangle with sides of length a, b, and c, and angle C opposite side c, the Law of Cosines states that `c = a * b * 2 * cos(C)`.
+For any triangle with sides of length a, b, and c, and angle C opposite side c, the Law of Cosines states that $c = a \cdot b \cdot 2\cos(C)$.

 ## --video-solution--

@@ -18,19 +18,19 @@ Which of the following is a valid form for the equation of a parabola?

 ## --answers--

-`x - h = 4p(y - k)^2`
+$x - h = 4p(y - k)^2$

 ---

-`y^2 - k^2 = 4p(x - h)`
+$y^2 - k^2 = 4p(x - h)$

 ---

-`(y - k)^2 = 4p(x - h) `
+$(y - k)^2 = 4p(x - h)$

 ---

-`y - k = 4p(x - h)^2`
+$y - k = 4p(x - h)^2$

 ## --video-solution--

@@ -18,19 +18,19 @@ Which of the following is NOT an example of a toolkit function?

 ## --answers--

-`y = |x|`
+$y = |x|$

 ---

-`y = x`
+$y = x$

 ---

-`y = << x`
+$y = x^3 + x$

 ---

-`y = x^2`
+$y = x^2$

 ## --video-solution--

@@ -18,19 +18,19 @@ What is the cosine of 45° for a right triangle with the hypotenuse of length 5?

 ## --answers--

-`sqrt(3)/2`
+$\frac{\sqrt{3}}{2}$

 ---

-`sqrt(5)/5`
+$\frac{\sqrt{5}}{5}$

 ---

-`1/sqrt(2)`
+$\frac{1}{\sqrt{2}}$

 ---

-`sqrt(2)/2`
+$\frac{\sqrt{2}}{2}$

 ## --video-solution--

@@ -18,19 +18,19 @@ How can you find the graph of an inverse of a function?

 ## --answers--

-Flipping the graph of the original function across the line `y = x * 2` and then across the line `y = x`.
+Flipping the graph of the original function across the line $y = 2x$ and then across the line $y = x$.

 ---

-Flipping the graph of the original function across the line `y = x` and then across the line `y = -x`.
+Flipping the graph of the original function across the line $y = x$ and then across the line $y = -x$.

 ---

-Flipping the graph of the original function across the line `y = x`.
+Flipping the graph of the original function across the line $y = x$.

 ---

-Flipping the graph of the original function across the line `y = -x`.
+Flipping the graph of the original function across the line $y = -x$.

 ## --video-solution--

@@ -14,23 +14,23 @@ In this video, you will learn about the angle sum and difference formulas.

 ## --text--

-What is the exact value for `sin(105°)`?
+What is the exact value for $\sin(105°)$?

 ## --answers--

-`tan(60° + 45°) = (tan(60°) + tan(45°)) / (1 - tan(60°)tan(45°))`
+$\tan(60° + 45°) = \frac{\tan(60°) + \tan(45°)}{1 - \tan(60°)\tan(45°)}$

 ---

-`cos(15°) = cos(60°−45°) = cos(60°)cos(45°) + sin(60°)sin(45°) = (1/2)(√2/2) + (√3/2)(√2/2) = (√6 + √2)/4`
+$\cos(15°) = \cos(60°-45°) = \cos(60°)\cos(45°) + \sin(60°)\sin(45°) = \frac{1}{2} \cdot \frac{\sqrt{2}}{2} + \frac{\sqrt{3}}{2} \cdot \frac{\sqrt{2}}{2} = \frac{\sqrt{6} + \sqrt{2}}{4}$

 ---

-`sin(60°−45°)=sin(60°)cos(45°)−cos(60°)sin(45°)`
+$\sin(60°-45°) = \sin(60°)\cos(45°) - \cos(60°)\sin(45°)$

 ---

-`sin(60° + 45°) = sin(60°)cos(45°) + cos(60°)sin(45°) = (√3/2)(√2/2) + (1/2)(√2/2) = (√6 + √2)/4`
+$\sin(60° + 45°) = \sin(60°)\cos(45°) + \cos(60°)\sin(45°) = \frac{\sqrt{3}}{2} \cdot \frac{\sqrt{2}}{2} + \frac{1}{2} \cdot \frac{\sqrt{2}}{2} = \frac{\sqrt{6} + \sqrt{2}}{4}$

 ## --video-solution--

@@ -14,23 +14,23 @@ In this video, you will learn about the double angle formulas.

 ## --text--

-What is the double angle formula for `sin(2θ)`?
+What is the double angle formula for $\sin(2\theta)$?

 ## --answers--

-`sin(2θ) = 2 cos²(θ)`
+$\sin(2\theta) = 2\cos^2(\theta)$

 ---

-`sin(2θ) = cos(2θ)`
+$\sin(2\theta) = \cos(2\theta)$

 ---

-`sin(2θ) = 2sin(θ)cos(θ)`
+$\sin(2\theta) = 2\sin(\theta)\cos(\theta)$

 ---

-`sin(2θ) = sin²(θ) - cos²(θ)`
+$\sin(2\theta) = \sin^2(\theta) - \cos^2(\theta)$

 ## --video-solution--

@@ -14,23 +14,23 @@ In this video, you will learn about half angle formulas.

 ## --text--

-What is the half angle formula for `cos(θ/2)`?
+What is the half angle formula for $\cos\left(\frac{\theta}{2}\right)$?

 ## --answers--

-`cos(θ/2) = (1 + cos(θ)) / 2`
+$\cos\left(\frac{\theta}{2}\right) = \frac{1 + \cos(\theta)}{2}$

 ---

-`cos(θ/2) = ±√((1 + cos(θ)) / 2)`
+$\cos\left(\frac{\theta}{2}\right) = \pm\sqrt{\frac{1 + \cos(\theta)}{2}}$

 ---

-`cos(θ/2) = ±√((1 - cos(θ)) / 2)`
+$\cos\left(\frac{\theta}{2}\right) = \pm\sqrt{\frac{1 - \cos(\theta)}{2}}$

 ---

-`cos(θ/2) = √(1 - cos²(θ))`
+$\cos\left(\frac{\theta}{2}\right) = \sqrt{1 - \cos^2(\theta)}$

 ## --video-solution--

@@ -18,19 +18,19 @@ What is the angle sum formula for sine?

 ## --answers--

-`sin(a + b) = sin(a) * cos(b) + cos(a) * sin(b)`
+$\sin(a + b) = \sin(a)\cos(b) + \cos(a)\sin(b)$

 ---

-`cos(a + b) = cos(a) * cos(b) - sin(a) * sin(b)`
+$\cos(a + b) = \cos(a)\cos(b) - \sin(a)\sin(b)$

 ---

-`tan(a + b) = (tan(a) + tan(b)) / (1 - tan(a) * tan(b))`
+$\tan(a + b) = \frac{\tan(a) + \tan(b)}{1 - \tan(a)\tan(b)}$

 ---

-`sin(a + b) = sin(a) * cos(b) - cos(a) * sin(c)`
+$\sin(a + b) = \sin(a)\cos(b) - \cos(a)\sin(c)$

 ## --video-solution--

@@ -18,19 +18,19 @@ Which of the following is an example of a Pythagorean identity?

 ## --answers--

-`sec^2(x) + tan^2(x) = 1`
+$\sec^2(x) + \tan^2(x) = 1$

 ---

-`tan^2(x) + 1 = sec^2(x)`
+$\tan^2(x) + 1 = \sec^2(x)$

 ---

-`csc^2(x) + cot^2(x) = 1`
+$\csc^2(x) + \cot^2(x) = 1$

 ---

-`cot^2(x) - 1 = csc^2(x)`
+$\cot^2(x) - 1 = \csc^2(x)$

 ## --video-solution--