Is it possible to convert text into Latex format by leveraging MathJax within JSXGraph?

I'm having trouble displaying an equation using mathJax in JSXgraph version 0.99.7.

While simple equations like (r^2=(x-h)^2+(y-k)^2) render correctly, more complex forms like functions or fractions such as (1=\frac{(x-h)^2}{a^2}+\frac{(y-k)^2}{b^2}) do not display properly.

Check out this image

Below is the current code snippet I am using to draw an ellipse:

var graph = board.create('ellipse', [A, B, C], {
        id: field,
        fixed: true,
        useMathJax: true,
        withLabel: true,
        name: '',
        strokeColor: color,
        strokeWidth: 2,
        fillColor: shade,
        fillOpacity: 0.3,
        size: 2,
        dash: dashed,
        highlightStrokeColor: 'red',
        highlightStrokeWidth: 3,
        highlightFillColor: shade,
        highlightFillOpacity: op
    });
    graph.on('down', function (e, i) {
        showMaster(this.id); 
        graph.setName('1=\\frac{(x-h)^2}{a^2}+\\frac{(y-k)^2}{b^2}');
    });

Do you have any suggestions to make the equation render correctly?

Answer №1

By default, MathJax content is not parsed within labels. To enable this feature, include

   label: {useMathJax: true, visible: false}

within the ellipse declaration. I also recommend setting the name for the ellipse when creating it and only displaying the label on the down event.

Below is the complete example:

MathJax.Hub.Config({
    extensions: ["tex2jax.js","TeX/AMSmath.js","TeX/AMSsymbols.js"],
    jax: ["input/TeX", "output/HTML-CSS"],
    tex2jax: {
      inlineMath: [ ['$','$'], ["\\(","\\)"] ],
      displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
    },
    "HTML-CSS": { availableFonts: ["TeX"] }
  });

var A = board.create('point', [-2, 0]);
var B = board.create('point', [1, 0]);
var C = board.create('point', [0, 2]);

var graph = board.create('ellipse', [A, B, C], {
    withLabel: true,
    strokeColor: 'black',
    strokeWidth: 2,
    fillColor: '#cccccc',
    fillOpacity: 0.3,
    highlightStrokeColor: 'red',
    highlightStrokeWidth: 3,
    name: '$1=\\frac{(x-h)^2}{a^2}+\\frac{(y-k)^2}{b^2}$',
    label: {useMathJax: true, visible: false}
});
graph.on('down', function (e, i) {
    graph.label.setAttribute({visible: true});
});

View the live demo at http://jsfiddle.net/r3fxcp54/1/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Struggling to properly access an object in EJS template engine

I am encountering an issue with an object I am passing into my EJS template, as I keep receiving an error message stating Cannot read property 'link' of undefined. Below is the object and the corresponding template code. Upon logging the object, ...

Printing the selected value from a drop-down box in HTML with JavaScript

I'm in the process of creating a web page structured like this: <html> <head> <title>Bug UI</title> </head> <body> <script> function myfunc() { //what should I include here?? } </script> <form> ...

What is the best way for ensuring that the test only proceeds after useEffect's update function has been executed?

function CustomApp() { let [counter, setCounter] = useState(0); useEffect(() => { setCounter(1); }, []); //<-------------------------set a checkpoint here to debug, triggered only once return counter; } // trouble-shooting ...

I want to know the process of increasing the id name of a div and the name of the content stored

I'm struggling to understand how to implement a for loop and increment multiple items. Can anyone offer guidance? Here's my jQuery code: var counter1 = localStorage.getItem('counter1item'); if (counter1 == null){ $("#i1").html(&ap ...

Using JavaScript and HTML to show the current month, date, and year on a webpage

I am looking to display not only the time, but also the month, date and year. My attempted solution involved creating variables for the month, day and year, and then using getElementById. Here is an example of what I tried: var d = date.getDay(); var mn ...

Vue Filtering and Pagination Implementation

In Vue pagination, how can you control the number of array objects to be displayed based on a user-selected amount like 10, 15, or 25? I successfully implemented rendering 10 items per page and it's functioning smoothly. ...

What is the best way to integrate two distinct versions of jQuery simultaneously?

Currently, I am in the process of creating a custom wrapper for Yahoo Web Analytics at my job. The challenge I am facing is that my wrapper includes jQuery 1.5.3, while the webpage where the wrapper needs to be integrated already has jQuery 1.4.3 in place. ...

Angular is unable to successfully send a post request to Node

Whenever I click on the submit button on the frontend, it triggers the upload() function. This is how it is implemented in my app.html: <div class="row" style="padding:10px;"> <button type="submit" class="btn btn-primary" style="margin ...

JavaScript: Exploring Content Inside Headers

Using document.body.innerHTML allows you to search within the body of a webpage. Is there an equivalent method for searching within the "Head" section? I've been looking around but so far, I haven't come across any such function. ...

Issue with Angular Material 2 Autocomplete: mat-option not firing keyup event

I am currently exploring methods to detect when an mat-option within the mat-autocomplete component is clicked or selected using the enter key. The click event binding functions correctly, but surprisingly the keyup.enter or solely the keyup event does no ...

The draw order of the A-Frame cursor is incorrect when using a transparent image

My cursor image is transparent, located as a child of the camera. <a-camera> <a-image position="0 0 -1" width="0.2" height="0.2" transparent="true" src="image.png"> </a-camera> I'm struggling to make it visible above other tra ...

Modify content for slideToggle

Check out this jfiddle link: http://jsfiddle.net/RHbzv/ I'm attempting to change the text from 'See more' to 'See less' when displaying the answer, but I can't seem to make it work. Here's what I've tried: $(&ap ...

What is the reason for the current image being displayed on my HTML5 canvas?

This unique program captures an image from the user's local computer and displays it on a canvas, which is then used for slide puzzle games on various other canvases. function drawImage(event) { if (event.target.files.length <= 0) return; ...

Apexcharts tends to be unreliable upon dashboard loading, frequently appearing and disappearing unpredictably

Having trouble with displaying apexcharts on my dashboard. There are 5 charts on the dashboard and their behavior is acting strange. The charts only show up after reloading the page 3 to 4 times or when inspect element is clicked. Otherwise, only 2 or 3 ch ...

How to retrieve an object of type T from a collection of classes that extend a common base type in Typescript

In my current project, I have a class named Foo that is responsible for holding a list of items. These items all inherit from a base type called IBar. The list can potentially have any number of items. One challenge I am facing is creating a get method in ...

Problem with React Native Camera: Camera display is not functioning correctly - React-Native-Vision-Camera Error

Hey there! I could really use some help with a tricky situation I'm facing in my React Native app, specifically regarding camera integration. Here's the scoop: The Issue: I'm working on a video recording application using React Native that ...

display PHP JSON information using jQuery AJAX

I'm completely new to this subject. I have a Json result that looks like the following : { "span": " 1", "numcard": "12", "chan": " Yes", "idle": "Yes", "level": "idle ", "call": "No ", "name": "" } My goal is to ...

What is the best method for detecting when a user has closed their browser window?

In my application, I am working on implementing a feature that allows me to determine if two users are editing the same document simultaneously. My current approach involves sending data to the backend when a user logs in and out, then checking this inform ...

Relocate the number of records displayed per page next to the pagination controls in datatables

Currently, I am utilizing datatables to create tables effectively using their provided example. However, I am encountering difficulty in moving the "records per page" element, which is contained within a "span6" class of bootstrap. I understand that this ...

JavaScript Canvas - Preserve Image Transparency

I have been trying to download a snapshot of a canvas using the code below: var strMime = "image/png"; var canvas = document.getElementsByTagName('canvas')[0]; var link = document.createElement("a"); link.href = canvas.toDataURL( ...