JSXGraph and JessieCode

[D. Brian Walton]

As I'm reactivating my PreTeXt skills, I was revisiting some preliminary work I had started in 2019 about incorporating JessieCode as a mode to create interactive elements.

Background:

JSXGraph is a javascript-based tool for interactive graphics, in my mind a lot like what GeoGebra does, just without requiring a separate server. JessieCode is a simple scripting language supported by JSXGraph to implement a significant subset of the power of JSXGraph without requiring full javascript mucking around.

Link to JessieCode documentation: 

https://jsxgraph.uni-bayreuth.de/wp/docs_jessiecode/

JessieCode scripts are plain text and are likely to include < and > because property objects are encoded with << ... >> patterns. Also, there are conditionals allowed so inequalities and boolean expressions like && might appear.

Observation: I discovered that JSXGraph has recently been updated to version 1.00 from 0.99.

New Development Idea:

I have implemented the XSL necessary to inject JessieCode to create an interactive using a 'JSXGraph' interactive and a slate whose surface is declared as 'jessiecode', such as the following example XML fragment:

    <figure xml:id="jessie-demo-fig">
      <caption>Will this work?</caption>
      <interactive xml:id="jessie-1" platform="jsxgraph" width="75%">
          <slate xml:id="jessie-1-slate" surface="jessiecode">
            A = point(2,1);
            C1 = circle(A,2);
            B = point(-1,2);
            B.glide(C1);
            P = point(0,0);
            C2 = circle(B,P);
          </slate>
          <instructions>
              <p>Move the points to change the circles.</p>
          </instructions>
      </interactive>
    </figure>

See this live in Example 1.1.1:

http://educ.jmu.edu/~waltondb/DEMO/section-sample.html

Minor Issue: Something is up with the size of the interactive so that scroll bars are added around the iframe.

Question 1: Does this structure make sense?

Question 2: (2-part) For more complex figures, the JessieCode program might be better as a separate text file (maybe using a .jc suffix). 

Q 2a) Would it make sense for the slate element to have an attribute for the source?

Q 2b) Because this isn't JavaScript, the browser won't automatically load the source like it does for other script files. Has anyone already implemented loading and a separate text file using a URL? I think I know what is needed, but would follow precedent if it is already implemented.

Thanks,

- Brian

[David Farmer]

There is an ongoing discussion about what objects should be in an
iframe and what should not.

This one is.

I think we need a general discussion about how to create the
contents of an iframe. Many of the examples in the sample
article have scroll bars, which are undesirable:

https://pretextbook.org/examples/sample-article/html/section-interactive-authored.html

I thought that was fixed at some point?

One of the contributing factor for the scroll bars is several
nested objects, all with the same hard-coded absolute dimensions.

I don't have any comment right now about this example,
except that it worked fine for me :)

> --
> You received this message because you are subscribed to the Google Groups "PreTeXt development"
> group.
> To unsubscribe from this group and stop receiving emails from it, send an email to
> pretext-dev...@googlegroups.com.
> To view this discussion on the web visithttps://groups.google.com/d/msgid/pretext-dev/CAH7VRoJDdoh5hXJCfwj4Wuqsh%2BhGjSsVUm%2B%2BduMnCW-
> qf-qJiQ%40mail.gmail.com.
>
>

[Rob Beezer]

Dear Brian,

In order, and perhaps a bit terse.

Minor Issue. The scrollbars are a perpetual annoyance. I thought we got rid of
them at some point (as David has observed). Should not slow anybody down, we'll
get it sorted out eventually.

Question 1. Source markup looks great. Could a slate with Jessie code and a
slate with pure-JSXGraph "talk" to each other? Be "wired up together"? That is
part of the motivation of slates.

Question 2. The "xinclude" mechanism allows a @parse attribute that can have
value "text". I think it is demo'ed in the sample book, and is documented in
The Guide. The beauty of this is that the "<" and "&" will not need any special
protection. Unclear what will happen if you need/want some HTML in that code.
So at the moment, I'd say a @source attribute might not be necessary?

2b: Here's where my ignorance shows, since I'm not sure I understand the
question. So perhaps theis means the answer is "no"?

As David has said, "iframe" are part of this discussion (generally). The
motivation there, born of hard-earned personal experience from early work with
JSXGraph, is to sandbox one interactive from another.

Your rendered example looks great, though I did not look at the underlying HTML.
Do you think you will be able to contribute a PR for this? Put that example
into the sample article for regular testing?

Rob

On 5/25/21 7:46 AM, D. Brian Walton wrote:
> As I'm reactivating my PreTeXt skills, I was revisiting some preliminary work I
> had started in 2019 about incorporating JessieCode as a mode to create
> interactive elements.
>

> *Background:*

> JSXGraph is a javascript-based tool for interactive graphics, in my mind a lot
> like what GeoGebra does, just without requiring a separate server. JessieCode is
> a simple scripting language supported by JSXGraph to implement a significant
> subset of the power of JSXGraph without requiring full javascript mucking around.
>
> Link to JessieCode documentation:
> https://jsxgraph.uni-bayreuth.de/wp/docs_jessiecode/
> <https://jsxgraph.uni-bayreuth.de/wp/docs_jessiecode/>
>
> JessieCode scripts are plain text and are likely to include < and > because
> property objects are encoded with << ... >> patterns. Also, there are
> conditionals allowed so inequalities and boolean expressions like && might appear.
>

> *Observation*: I discovered that JSXGraph has recently been updated to version
> 1.00 from 0.99.
>
> *New Development Idea:*

> I have implemented the XSL necessary to inject JessieCode to create an
> interactive using a 'JSXGraph' interactive and a slate whose surface is declared
> as 'jessiecode', such as the following example XML fragment:
>
>   <figure xml:id="jessie-demo-fig">
>       <caption>Will this work?</caption>
>       <interactive xml:id="jessie-1" platform="jsxgraph" width="75%">
>           <slate xml:id="jessie-1-slate" surface="jessiecode">
>             A = point(2,1);
>             C1 = circle(A,2);
>             B = point(-1,2);
>             B.glide(C1);
>             P = point(0,0);
>             C2 = circle(B,P);
>           </slate>
>           <instructions>
>               <p>Move the points to change the circles.</p>
>           </instructions>
>       </interactive>
>     </figure>
>
> See this live in Example 1.1.1:
> http://educ.jmu.edu/~waltondb/DEMO/section-sample.html

> <http://educ.jmu.edu/~waltondb/DEMO/section-sample.html>
>
> *Minor Issue*: Something is up with the size of the interactive so that scroll

> bars are added around the iframe.
>

> *Question 1*: Does this structure make sense?
>
> *Question 2*: (2-part) For more complex figures, the JessieCode program might be

> better as a separate text file (maybe using a .jc suffix).
>
> Q 2a) Would it make sense for the slate element to have an attribute for the source?
>
> Q 2b) Because this isn't JavaScript, the browser won't automatically load the
> source like it does for other script files. Has anyone already implemented
> loading and a separate text file using a URL? I think I know what is needed, but
> would follow precedent if it is already implemented.
>
> Thanks,
> - Brian
>

> --
> You received this message because you are subscribed to the Google Groups
> "PreTeXt development" group.
> To unsubscribe from this group and stop receiving emails from it, send an email
> to pretext-dev...@googlegroups.com

> <mailto:pretext-dev...@googlegroups.com>.

> To view this discussion on the web visit
> https://groups.google.com/d/msgid/pretext-dev/CAH7VRoJDdoh5hXJCfwj4Wuqsh%2BhGjSsVUm%2B%2BduMnCW-qf-qJiQ%40mail.gmail.com

> <https://groups.google.com/d/msgid/pretext-dev/CAH7VRoJDdoh5hXJCfwj4Wuqsh%2BhGjSsVUm%2B%2BduMnCW-qf-qJiQ%40mail.gmail.com?utm_medium=email&utm_source=footer>.

[D. Brian Walton]

Rob,

I took some time to find a solution for loading a script from either the XML source or by adding a JavaScript handler to access a URL-defined script and import it from there.

I have made a pull-request to include this as well as two examples in the sample-article. I added a separate subsection after JSXGraph, although it might make as much sense to have this inside the JSXGraph subsection.

Regarding multiple slates inside the same interactive, I'm confident that a regular JSXGraph script at the interactive level could gain access to a board (slate) defined by JessieCode, but the reverse does not appear to be available. JessieCode itself appears to only know about items defined within the script itself and on the same board. I think that if an author is at the level of trying to coordinate multiple slates, they would be better off doing it all in full JavaScript.

I haven't played with it yet, but it appears JSXGraph can also import GeoGebra files (.ggb or base64).

- Brian

To unsubscribe from this group and stop receiving emails from it, send an email to pretext-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/pretext-dev/b2e8a989-42be-bb8c-3054-16ccb14b2d9e%40ups.edu.

[David Farmer]

If the scroll bars keep showing up, I have a partial fix for the current
examples in the sample article, so don't worry about that for now.

David

> To view this discussion on the web visithttps://groups.google.com/d/msgid/pretext-dev/CAH7VRo%2BiOhgk5X6E%2Bmz_5sj5iPZu4QP47_aoMpkp0j%3DXTCo56Q%40m
> ail.gmail.com.
>
>

[Alex Jordan]

Perhaps the same as David, but I find that if I put:
box-sizing:border-box;
on the div.jxgbox, that is enough to get Brian's example scroll bar free.

> To view this discussion on the web visit https://groups.google.com/d/msgid/pretext-dev/alpine.LRH.2.21.2106011711220.11920%40li375-150.members.linode.com.

[Rob Beezer]

On 6/1/21 1:25 PM, D. Brian Walton wrote:
> I have made a pull-request to include this as well as two examples in the
> sample-article. I added a separate subsection after JSXGraph, although it might
> make as much sense to have this inside the JSXGraph subsection.

Thanks very much! I'll follow-up on #1489.

> Regarding multiple slates inside the same interactive, I'm confident that a
> regular JSXGraph script at the interactive level could gain access to a board
> (slate) defined by JessieCode, but the reverse does not appear to be available.
> JessieCode itself appears to only know about items defined within the script
> itself and on the same board. I think that if an author is at the level of
> trying to coordinate multiple slates, they would be better off doing it all in
> full JavaScript.

Great, that sounds sensible. Mostly curious what was possible.

> I haven't played with it yet, but it appears JSXGraph can also import GeoGebra
> files (.ggb or base64).

Now *that's* interesting! Licensing for GeoGebra is a bit unusual, so perhaps
JSXGraph will be a less encumbered option.

Rob

[Sean Fitzpatrick]

The source for this example is simple enough to convince me to try this out at some point.

I did notice that the example is not particularly mobile friendly: the slate doesn't fit on the screen with my phone. Not sure if that's because CSS is needed, or if the interactive just doesn't resize that well.

--

[D. Brian Walton]

Sean,

I think the sizing issue is a general issue with interactive elements. The dimensions are created at the time of the xslt processing. At the time of viewing, the web page uses an iframe constrained to be viewed with the size of the device. Maybe the css can scale the iframe contents with an option to view in native size if desired?

I had not tried loading this on a phone until now. Scrolling inside the iframe is very awkward — I had to scroll left/right outside of the actual interactive slate using the figure caption or instructions since the interactive moved the coordinate system if I dragged inside the object. This same thing seems to happen in other interactive elements.

- Brian

--
You received this message because you are subscribed to the Google Groups "PreTeXt development" group.
To unsubscribe from this group and stop receiving emails from it, send an email to pretext-dev...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/pretext-dev/CAH%2BNcPYz%2BzDoEz1aYns_-gzrXQCXHOZD%2BouaFFYVwjvq09p4Hg%40mail.gmail.com.

[Sean Fitzpatrick]

I think there were similar issues with video a year ago that Rob was able to vanquish. Maybe something similar could work with interactive.

[David Farmer]

Maybe I mentioned this before, but something I have seen is
a size indication on the iframe, and that same size on multiple
nested elements inside the iframe. Redundant information like
that is probably useless (at best).

Presumably the inner objects, if they specifiy a width at all,
should just have 100%.

The hard-coded width specification on the iframe should also
be reconsidered.

This may parallel a recent change to bare images: the HTML "img"
tag now has no sizing information. It is contained in a .image-box
which controls the size. CSS sets the "img" to have 100% width
(meaning, the width of its containing .image-box).

> --
> You received this message because you are subscribed to the Google Groups "PreTeXt development" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to
> pretext-dev...@googlegroups.com.

> To view this discussion on the web visithttps://groups.google.com/d/msgid/pretext-dev/CAH%2BNcPbOvckyxbbFoG66rj4maeZkKX%3Dm0TrVhahz%2B6ESTW%3DkyA%4
> 0mail.gmail.com.
>
>

[D. Brian Walton]

Alex,

Thanks for this insight. I was able to track down why this was missing.

- Brian

To view this discussion on the web visit https://groups.google.com/d/msgid/pretext-dev/CA%2BR-jrc87qFJ3TOVg6fD8No0O%2BTZAUXq7FDEN4zEyZZ9%3DXEOuA%40mail.gmail.com.

[Sean Fitzpatrick]

If I remember correctly, for video, we found a way to have the iframe take its width from a containing div, and then use CSS to control the width of the div

[Rob Beezer]

This contribution has been merged at

https://github.com/rbeezer/mathbook/pull/1489

and examples may be exercised at

Subsection 14.5: JessieCode
https://pretextbook.org/examples/sample-article/html/section-interactive-authored.html#subsection-52

Thanks, Brian! Great addition.

Rob

> --
> You received this message because you are subscribed to the Google Groups
> "PreTeXt development" group.
> To unsubscribe from this group and stop receiving emails from it, send an email
> to pretext-dev...@googlegroups.com

> <mailto:pretext-dev...@googlegroups.com>.

> To view this discussion on the web visit

> https://groups.google.com/d/msgid/pretext-dev/CAH%2BNcPacA0kuCt5K8Em6UVKEG3RHe-Dh3gb3F0TJX%2BOFGMmbJA%40mail.gmail.com
> <https://groups.google.com/d/msgid/pretext-dev/CAH%2BNcPacA0kuCt5K8Em6UVKEG3RHe-Dh3gb3F0TJX%2BOFGMmbJA%40mail.gmail.com?utm_medium=email&utm_source=footer>.