<feat> Add mathjax display of user input whilst typing#14
Merged
JoshdRod merged 11 commits intodev-untestedfrom Dec 22, 2025
Merged
<feat> Add mathjax display of user input whilst typing#14JoshdRod merged 11 commits intodev-untestedfrom
JoshdRod merged 11 commits intodev-untestedfrom
Conversation
Errors that still need to be fixed: inputting subtractions (5-2), does not output correct result (-12+5 instead of 5-2) Displayed expressions should not be normalised - they should be exactly the same as the user's expression!
Owner
Author
|
TODO before merge: Shouldn't normalise expression |
Contributor
There was a problem hiding this comment.
Pull request overview
This PR adds a real-time MathJax preview feature that displays the mathematical interpretation of user input as they type. This helps users understand how their input is being parsed by the application, particularly useful for first-time users.
Key Changes:
- Added a new paragraph element to display the MathJax-rendered user input
- Modified the answer input handler to render MathJax on every keystroke
- Refactored expression tree generation to occur before the Enter key check
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 5 comments.
| File | Description |
|---|---|
| index.html | Added a new paragraph element (userResponseMathJax) to display the real-time MathJax rendering of user input |
| pages/index/script.js | Added DOM reference for the new MathJax display element and modified handleAnswerInputChange() to render MathJax on every keystroke, with expression tree generation moved outside the Enter key conditional |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Negative numbers were previously showing incorrectly due to their representation in the graph as -1n. To fix this, treeToMathJax now parses -1 nodes as '-', so the final representation is -n.
Previously, 1/2 + 3 failed to display correctly. This was because the \over was not being correctly wrapped around its operands.
Dividing by x generated the mathjax n\overx, which would show up as \overx, instead of /x. By adding spaces either side of the \over, we can prevent this. Adding the left space is not needed here, but I'm keeping for good practise.
e.g: sin(x/2) would display as \sin {(x \over 2)}, where the brackets are un-needed. Removed this by replacing brackets with {} when next node is /.
<p /> is not valid in html. Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
The handler functions are executed before the default event is performed. Therefore, the string comparison is done before the new key pressed is actually added to the string. e.g: If user presses backspace, the expression we have to deal with = expression in box - final character. This patch fixes this behaviour.
Without passing this in as a parameter, the event object in the function refers to the non-standard global event variable - which may not work on some browsers. Hence, we pass in the actual event object. https://teamtreehouse.com/community/why-do-we-need-the-event-object-as-parameter-for-the-callback-function
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Currently, it's hard to figure out what your typed expression is interpreted as by the program - especially if it's your first time.
This display alleviates that problem