JSXGraph issue

[Dmfama20]

Hi,

at our university we have a JSXGraph issue:
We have a STACK question as attached
quiz-RzS SoSe24-99 Gerade zeichnen (Kopie)-20240418-1016.xml.zip

When the question is opened in preview mode and "fill in correct responses" is clicked the corresponding JSXGraph does not change. The correct behavior would be that an adapted line is displayed which solves the given question. Moreover, when opening the browser's console we got the error
Uncaught TypeError: doc.querySelector(...) is null
About our system:

• STACK 4.5.0 (2024012900)
• Moodle 4.3.3+ (20240315)

The same question behaves as expected on another system

• STACK 4.4.2 (2023010400)
• Moodle 4.1.9+ (20240315)
  (Though, we have an error when opening the browser's console, too :
  Uncaught TypeError: questionDiv.querySelector(...) is null
  So, I'm not sure if the error is causing the wrong behavior of the question)

TIA!

[aharjula]

This is basically #1017.

Since STACK 4.4.3 [[jsxgraph]]-blocks have been executing in separate sandbox iframes for security reasons. You simply cannot directly access elements of the VLE page from them directly. All access to elements/inputs outside the graphs needs to go through the provided routes, i.e. the old [[jsxgraph input-ref-...="..."]], references or through STACK-JS functions.

Basically, to function, things need to be rewritten to match the new constraints:

• doc.querySelector('[id*="_ans1"]') -> [[jsxgraph input-ref-ans1="ans1Ref"]] + doc.getElementById(ans1Ref) (or by using stack_js.request_access_to_input("ans1") which is a bit more complicated route) the key thing to note that here the "doc" is the document of the sandbox and that document will only contain input elements that have been specially brought over there by requesting them to be brought over.
• Also, when you set the value of that input in code like that, you will need to dispatch a change event from the input to make it sync with that actual input outside the sandbox.
• doc.querySelector("p.stack-variables")-> that element that one fetched needs to have an id so that one can use stack_js.get_content(id) and one needs to deal with the fact that that returns a Promise that will resolve to the innerHTML of the element that has that id (but only if that element is inside a question on the VLE page)