From c9071dd6a9fc5d9d19b7243e90486cf1c99818b3 Mon Sep 17 00:00:00 2001 From: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com> Date: Tue, 17 Mar 2026 00:22:31 +0700 Subject: [PATCH] fix(client,curriculum): add MathJax support for Precalculus (#66441) --- .../components/multiple-choice-questions.tsx | 15 ++++++++++++--- client/src/utils/math-jax.ts | 11 +++++------ .../advanced-trig-conics/law-of-cosines-video.md | 9 ++++----- .../parabolas-vertex-focus-directrix-video.md | 8 ++++---- .../function-basics/toolkit-functions-video.md | 8 ++++---- .../sine-cosine-special-angles-video.md | 8 ++++---- .../inverse-trig-functions-video.md | 8 ++++---- .../angle-sum-and-difference-formulas-video.md | 10 +++++----- .../double-angle-formulas-video.md | 10 +++++----- .../half-angle-formulas-video.md | 10 +++++----- .../proof-of-the-angle-sum-formulas-video.md | 8 ++++---- .../pythagorean-identities-video.md | 8 ++++---- 12 files changed, 60 insertions(+), 53 deletions(-) diff --git a/client/src/templates/Challenges/components/multiple-choice-questions.tsx b/client/src/templates/Challenges/components/multiple-choice-questions.tsx index 2a81689b98a..e10f8cf0402 100644 --- a/client/src/templates/Challenges/components/multiple-choice-questions.tsx +++ b/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(0); const [modalQuestionIndex, setModalQuestionIndex] = useState(0); @@ -67,7 +74,9 @@ function MultipleChoiceQuestions({ }; return ( - <> +
1 ? t('learn.questions') : t('learn.question') @@ -191,7 +200,7 @@ function MultipleChoiceQuestions({ answerIndex={modalAnswerIndex} superBlock={superBlock} /> - +
); } diff --git a/client/src/utils/math-jax.ts b/client/src/utils/math-jax.ts index c6bf220feac..b4ffa7663e8 100644 --- a/client/src/utils/math-jax.ts +++ b/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([ - '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) => { diff --git a/curriculum/challenges/english/blocks/advanced-trig-conics/law-of-cosines-video.md b/curriculum/challenges/english/blocks/advanced-trig-conics/law-of-cosines-video.md index cd563636321..3b02461f206 100644 --- a/curriculum/challenges/english/blocks/advanced-trig-conics/law-of-cosines-video.md +++ b/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-- diff --git a/curriculum/challenges/english/blocks/advanced-trig-conics/parabolas-vertex-focus-directrix-video.md b/curriculum/challenges/english/blocks/advanced-trig-conics/parabolas-vertex-focus-directrix-video.md index 2fc3866c088..a08ecaeb746 100644 --- a/curriculum/challenges/english/blocks/advanced-trig-conics/parabolas-vertex-focus-directrix-video.md +++ b/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-- diff --git a/curriculum/challenges/english/blocks/function-basics/toolkit-functions-video.md b/curriculum/challenges/english/blocks/function-basics/toolkit-functions-video.md index e79872b4347..1124c941460 100644 --- a/curriculum/challenges/english/blocks/function-basics/toolkit-functions-video.md +++ b/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-- diff --git a/curriculum/challenges/english/blocks/right-triangle-trigonometry/sine-cosine-special-angles-video.md b/curriculum/challenges/english/blocks/right-triangle-trigonometry/sine-cosine-special-angles-video.md index 5bd4ec81c89..780faed32b3 100644 --- a/curriculum/challenges/english/blocks/right-triangle-trigonometry/sine-cosine-special-angles-video.md +++ b/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-- diff --git a/curriculum/challenges/english/blocks/trig-graphs-inverses/inverse-trig-functions-video.md b/curriculum/challenges/english/blocks/trig-graphs-inverses/inverse-trig-functions-video.md index adbdac00746..accd562f040 100644 --- a/curriculum/challenges/english/blocks/trig-graphs-inverses/inverse-trig-functions-video.md +++ b/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-- diff --git a/curriculum/challenges/english/blocks/trig-identities-formulas/angle-sum-and-difference-formulas-video.md b/curriculum/challenges/english/blocks/trig-identities-formulas/angle-sum-and-difference-formulas-video.md index f2bbe937bc8..f261566d871 100644 --- a/curriculum/challenges/english/blocks/trig-identities-formulas/angle-sum-and-difference-formulas-video.md +++ b/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-- diff --git a/curriculum/challenges/english/blocks/trig-identities-formulas/double-angle-formulas-video.md b/curriculum/challenges/english/blocks/trig-identities-formulas/double-angle-formulas-video.md index df2ff060d17..a68a3d1b647 100644 --- a/curriculum/challenges/english/blocks/trig-identities-formulas/double-angle-formulas-video.md +++ b/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-- diff --git a/curriculum/challenges/english/blocks/trig-identities-formulas/half-angle-formulas-video.md b/curriculum/challenges/english/blocks/trig-identities-formulas/half-angle-formulas-video.md index 962c4d214ec..4d7dff48fc8 100644 --- a/curriculum/challenges/english/blocks/trig-identities-formulas/half-angle-formulas-video.md +++ b/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-- diff --git a/curriculum/challenges/english/blocks/trig-identities-formulas/proof-of-the-angle-sum-formulas-video.md b/curriculum/challenges/english/blocks/trig-identities-formulas/proof-of-the-angle-sum-formulas-video.md index 0793b046e9c..a9cb801ce75 100644 --- a/curriculum/challenges/english/blocks/trig-identities-formulas/proof-of-the-angle-sum-formulas-video.md +++ b/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-- diff --git a/curriculum/challenges/english/blocks/trig-identities-formulas/pythagorean-identities-video.md b/curriculum/challenges/english/blocks/trig-identities-formulas/pythagorean-identities-video.md index 04004ea2df5..a4269d4a6ae 100644 --- a/curriculum/challenges/english/blocks/trig-identities-formulas/pythagorean-identities-video.md +++ b/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--