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

client/src/templates/Challenges/components/multiple-choice-questions.tsx

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

client/src/utils/math-jax.ts

@@ -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([
+  document.querySelectorAll('.mathjax-support').forEach(el => {
-    'Typeset',
+    MathJax.Hub.Queue(['Typeset', MathJax.Hub, el]);
-    MathJax.Hub,
+  });
-    document.querySelector('.mathjax-support')
-  ]);
 };
 
 export const initializeMathJax = (mathJaxChallenge = true) => {

curriculum/challenges/english/blocks/advanced-trig-conics/law-of-cosines-video.md

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

curriculum/challenges/english/blocks/advanced-trig-conics/parabolas-vertex-focus-directrix-video.md

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

curriculum/challenges/english/blocks/function-basics/toolkit-functions-video.md

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

curriculum/challenges/english/blocks/right-triangle-trigonometry/sine-cosine-special-angles-video.md

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

curriculum/challenges/english/blocks/trig-graphs-inverses/inverse-trig-functions-video.md

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

curriculum/challenges/english/blocks/trig-identities-formulas/angle-sum-and-difference-formulas-video.md

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

curriculum/challenges/english/blocks/trig-identities-formulas/double-angle-formulas-video.md

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

curriculum/challenges/english/blocks/trig-identities-formulas/half-angle-formulas-video.md

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

curriculum/challenges/english/blocks/trig-identities-formulas/proof-of-the-angle-sum-formulas-video.md

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

curriculum/challenges/english/blocks/trig-identities-formulas/pythagorean-identities-video.md

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