Assess the difficulty of embedding Vue.js widgets in Mathigon UI from a dev point of view

[delapuente]

Part of Qiskit/qiskit.org#782

Explore the official way of creating and embedding custom widgets. If there is no official way to do it, think of an extension mechanism enabling us to implement our requirements with reuse in mind. Explore how would it be to run Python code in Mathigon.

• [x] Qiskit/qiskit.org#940
• [x] Qiskit/qiskit.org#937

[korgan00]

There are two ways to create Widgets without modifying the parser.

The first and "most" official is to use their tooling to draw SVGs using GeoPad or Q&A and simple interactions with blanks (input fields), buttons, and dropdowns. If you need something with more complex behavior, you have to write a function at the functions.ts.

The second option is to put some HTML-Markdown code such as div.my-component and use a document.queryElement to fill the component and make the bindings. I consider that this is the best way to use Vue.js components.

Every section should have an id:

## Drawing Triangles

> section: triangles
> id: triangle-inequality
> goals: s0 s1 s3 s5

[...]

This id should be used to name the function that controls the state of the widgets.

In the functions.ts should appear something like this:

export function triangleInequality($step: Step) {
  ...
}

The $step contains all the information about the section that can be used to manage the state of the widget.

For example, the buttons can use actions and the event should be managed using $step.name.actionName = () => { ... }

[vabarbosa]

part of this assessment was to make running Qiskit Python code possible in Mathigon. this can be achieved by adding and configuring thebelab library in the Mathigon templates.

code blocks can then be added in the custom Mathigon format. for example,

    pre(data-executable="true" data-language="python").
      from qiskit_textbook.widgets import binary_widget
      binary_widget(nbits=5)

this gets properly rendered and because runnable in the page.