Box - checked e unchecked - to show objects

[Marcelo Rodrigues]

Hello everyone, I hope your hearts are full of peace and joy! 

Please, I would like to ask for help with the following question that I don't know how to resolve. 

1- I made a construction in Moode - qtype formula - where the following are shown: 

a) a triangle 

b) the barycenter point 

c) the point of the circumcenter and the circle that has its center and passes through the 3 vertices of the triangle 

2- I would like: 

a) there were two boxes that controlled the appearance of points in the construction. One to control the barycenter and the other to control the circumcenter and the circle that passes through the 3 vertices of the triangle. 

b) thus, when the construction was loaded, the two boxes could appear unchecked and the Barycenter and Circumcenter points and their circle would not be shown. If the student clicked on the box, for example, for the barycenter, then the point would be shown and so would the same operation with the circumcenter. Would this be possible to do? 

3- Is there a website where we can test JSXGRAPH codes? 

Thank you very much to anyone who can help.

Code:

<script type="text/javascript" charset="UTF-8" src="https://cdn.jsdelivr.net/npm/jsxgraph/distrib/jsxgraphcore.js"></script>


<jsxgraph width="480" height="480">var brd = JXG.JSXGraph.initBoard(BOARDID, { boundingbox:[{e}-1,{y}+1,{a}+1,-1], showCopyright:false,keepaspectratio:true, zoom:{pinchHorizontal: false,pinchVertical: false}, pan:{needShift: true,needTwoFingers: true,enabled: true}, axis:true, grid:true, showNavigation:true });

var p1 = brd.create('point', [0,0],{fixed: true, color: '#FF4500'});
var p2 = brd.create('point', [{a},0],{fixed: true, color: '#FF4500'});
var p3 = brd.create('point', [{x},{y}], {fixed: true, color: '#FF4500'});
brd.create('polygon',[p1,p2,p3],{trace:true, name:'', color:'#00FA9A'});
bar = brd.create('point', [(0+{a}+{x})/3, (0+0+{y})/3], {color: '#ff0000', fixed: true});
cir = brd.create('point', [{xcircnovo}, {ycircnovo}], {color: '#ff0000', name: 'E', fixed: true});
var ci1 = brd.createElement('circle',["E",{rcirc}], {strokeColor:'#0000ff',dash:2});


</jsxgraph>

[Wigand Rathmann]

Dear Marcelo,

please find attached a suggestion for your questions. The example at https://idiamath.github.io/JSXGraphExamples/tripleProduct.html might be interesting as an other example to (un)hide objects.

The attached file shows you possible way to test JSXGraph programs locally. The first section defines variables used in the JSXGraph construction. This can be replaced by the transfer of informations from the question variables in STACK (var rcirc = {#rcirc#}).

To debug the code I'm using vscode + Firefox/Chrome JS debugger. Or you can use jsfiddle.net.

Best,

Wigand

[Cleon Teunissen]

Hi Marcelo,

The following is a JSfiddle that shows a way of implementing a checkbox

https://jsfiddle.net/Cleonis/ekyapf45/

On stackoverflow:

2021 answer by Alfred Wasserman about toggling visibility

(The choice of implementation matters for the readability of the code. When there are multiple checkboxes in a diagram I prefer to organize the code such that the checkboxes are together in a dedicated section, rather than the checkbox declaration being grouped with the graphical element that it toggles. )

Also:

Link to the JSXGraph documentation for the 'checkbox' element:

https://jsxgraph.org/docs/symbols/Checkbox.html

To the JSXGraph team:

Documentation request:

The current documentation for the 'checkbox' element offers three examples, but the third example doesn't do anything. I recommend replacing that one with an example of using a checkbox to toggle visibility

Cleon Teunissen

[Marcelo Rodrigues]

Dear Wigand,

I hope you and your family are well and healthy!

Thank you very much for your explanations and for the example file you sent me.

Worked perfectly!

I've been really confused about how to make the jsfiddle.net codes work in Moodle.

I will use this model you sent me as a reference!

It's really cool, what you did with the barycenter and the circumcenter and their circle! Wonderful!

Thank you very much for taking the time to teach us and for your patience!

Thank you very much!

Marcelo.

--
You received this message because you are subscribed to the Google Groups "JSXGraph" group.
To unsubscribe from this group and stop receiving emails from it, send an email to jsxgraph+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/jsxgraph/372c9730-7eca-46c5-b5c6-a15fd88e6da3n%40googlegroups.com.

[Marcelo Rodrigues]

Dear Cleon, 

I hope your heart is full of joy and I wish you a day full of peace! 

Thank you very much for your feedback and guidance. 

I also prefer that the checkboxes are all together in a different space in the construction. 

Our friend Wigand showed me that I can use buttons to have the same effect as checkboxes. 

I will try to create a dedicated section to place the checkboxes/buttons. 

Thank you very much for your precious help! 

Thank you very much! 

Marcelo.

--
You received this message because you are subscribed to the Google Groups "JSXGraph" group.
To unsubscribe from this group and stop receiving emails from it, send an email to jsxgraph+u...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/jsxgraph/CAN61gCOY%2Bgv7oVsm8%3D83e88fs%3DrA34QDEhg8CAyJ3%3Dy9RXvg7w%40mail.gmail.com.

[Cleon Teunissen]

Our friend Wigand showed me that I can use buttons to have the same effect as checkboxes.

Yes and no.

There are user interface conventions.

It is worthwhile to follow those conventions; it will make the diagram feel nice.

(Conversely, if the user interface is at odds with what people are accustomed to then the diagram will feel clunky.)

In a user interface:

buttons are used to set things in motion (or to halt motion)

The obvious example: for a diagram that supports animation: buttons for 'Play', 'Pause', 'Stop' and 'Reset'. In the case of a form: the command to submit the form (cannot be reversed) is always implemented with a button.

The use case of checkboxes: 

to toggle something that can be reversibly toggled.

A checkbox shows its status: checked/unchecked; the information is right there.

When a button is used for toggling: the button does not show the status of what is toggled. 

With a button: the only way to know/verify what the status is to use the button user has to toggle the state.

Cleon Teunissen

[Marcelo Rodrigues]

Dear Wigand,

I wish you and your family a great day!

Thank you very much for your feedback.

About command us
board1.addChild(board2), I've never used it this way.

Do you have an example of this usage?

Yes, I would really like to learn how to do this, so that the student could control the actions in another frame distinct from the main construction.

I don't use STACK . I only work on Moodle, where I'm trying to develop issues with JSX.

Although I have already asked some questions, I still don't fully understand how to use the codes to generate JSX. I see examples with the tags <jsxgraph></jsxgraph> and others using only <script></script>.

So I'm always unsure which one to use. I see other codes that are different from these two that I mentioned above.

Some use (jgxbox) while others use BOARDID... as I'm new to JSX, this is a little confusing for me.

I thought this example you sent me was wonderful: https://idiamath.github.io/JSXGraphExamples/tripleProduct.html

Do you have other examples? How do I access them? This example you sent me, can we access its code?

About the Togglelist function code, I loved it!

I tried to apply it in my code but it gives an error... I tried a lot to adjust it in the code I made, but it didn't work.

The question I created in Moodle is attached.

Dear Wigand, thank you very much for your precious help!

Forgive me for the many questions and the long text.

Thank you for your patience and care in teaching us!

Thank you very much, Marcelo.

Obs.: unfortunately i lost your last message. Would you send me again?

[Marcelo Rodrigues]

Dear Cleon, I hope you are well and at peace, and I wish you a blessed day!

Thank you very much for the explanations on the use of buttons and checkboxes.

I used this in a similar way in Geogebra.

The example you sent me worked perfectly and I was able to reproduce it. Thank you very much!

https://jsfiddle.net/Cleonis/ekyapf45/

But I couldn't get it to work within my code.

Only the points work by combining visibility with the marking of boxes.

I don't know what I'm doing wrong.

I place the checkbox in a section <jsxgraph></jsxgraph> and in another section <jsxgraph></jsxgraph> there is the construction of the circle and this way the checkbox does not work.

I use qtype-formula in Moodle.

Thank you very much for the precious wonderful explanations!

Thank you very much!

Marcelo.

--

You received this message because you are subscribed to the Google Groups "JSXGraph" group.
To unsubscribe from this group and stop receiving emails from it, send an email to jsxgraph+u...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/jsxgraph/CAN61gCM0du9jdahCAvebt96RbX6Lto%2BDm4_X%2BZeranXSzG4ZhA%40mail.gmail.com.

[Marcelo Rodrigues]

Dear friends Wigand and Cleon,

I managed to make the visibility issue work through the checkboxes.

I "cleaned" the code... Moodle gave an error when I corrected something in the Moodle editor itself. So I started using the notepad and things started to work.

Thank you very much for your support and help!

Marcelo.