Describe LabyrinthJS

[DennisSSDev]

This issue will be used to describe the features and aspects of LabyrinthJS. It is a pretty straight forward activity, but the name is deceiving a little bit so I highly recommend actually running the thing as it's not a maze solving activity as you might have thought.

Prelude: LabyrinthJS is a shape/wireframe activity where you establish connections between text and shapes. It is a JS activity. Link: https://github.com/llaske/sugarizer/tree/master/activities/LabyrinthJS.activity Setup: download the fork and install the dependencies with npm install. Then run the app with npm start. You can then use the search bar to find the activity.

For quick use, install Sugarizer which comes with the activity and test it there.

[ghost]

On Thu, Apr 16, 2020 at 09:21:28AM -0700, Dennis Slavinsky wrote:

It is a JS activity that is to be ported into Python.

We are porting Python activities to JavaScript, but not in the other direction. At least, not this semester.

We will only be describing the JavaScript activities with an eye towards helping someone going from Python to JavaScript understand JavaScript activities.

Sorry for the confusion.

[DennisSSDev]

Thank you for the clarification

[DennisSSDev]

Activity Description

It is a lightweight mind-mapping activity. A mind-map is a diagram used to represent words, ideas, tasks or other items linked to and arranged radially around a central keyword or idea.

How to play

You start by taking a look at the options menu as it allows you to create new cells and items and connections on screen:

• The very first item next to the disc (looks like a black square) will allow you to drop new cells on the screen. Simply have it selected and click on the white space in the screen.
• The second from the square is the connection button. While having that option selected you will be able to establish connections between the cells via lines that will be straight from one cell to another. Unless the cell has a connection to another cell you're trying to make a connection to. In that case, the line will actually create a curve to accommodate for space.
• The last option before the arrow signs simply allows you to delete items from the screen. While having that option selected and clicking on lines and cells will result in their deletion from the screen.

Here is an example view of randomly dropping cells and connections:

Here are also some miscellaneous controls:

• the arrow buttons are basically undo and redo
• the magnifying glass allows you to scale and resize the canvas but also to make the screen focus entirely to fit in all the cells in one view.
• the PNG with an arrow allows you to save the diagram to a physical png file as an image.

A thing to note is that if you have the square selected and you were to click on a cell - it will give a cell customization window that allows to change out the text of the cell, font and colour:

How is this useful to 4th graders

Exercises can be given to establishing connections between numbers or if you want to go even further than that -> whole equations.

Here is an example that I drew that establishes a connection between 3/4, 6/8 and 12/16:

[DennisSSDev]

I'll take a look look at the source to see some of the standout features of the activity like:

• Creating and dragging cells
• Line connections
• Text boxes inside the cells

My immediate assumption is that they are using standard js canvas for drawing + dynamically assigning input bindings

[DennisSSDev]

I've taken a look at the package.json and the dependencies are extremely minimal. The developer used domReady, which is literally just a function with a callback param that gets called once the dom has been loaded. And of course, it also has the sugar-web dependency that makes your life easier with creating certain functionalities inside sugar labs

[DennisSSDev]

Here is the function definition for creating a brand new node on screen.

[DennisSSDev]

You will also see the usage of a variable cy. It is the cytoscape defined here. It provides a lot of the functionality for recording user interaction with the board. I believe it's one of those elements that are provided by the sugar-web dependency

[DennisSSDev]

Undo state functionality, you can also find the function definition for redo right after undo as well

[DennisSSDev]

Update the node's text As well as making connections between the nodes

[DennisSSDev]

A conclusion I've reached is that this activity is completed entirely using a lib by the sugarlabs without any help from third parties. There are also a bunch of networking going on in there, but if you look at a lot of other sugar js activities - it's pretty much just copy pasta

[eza5640]

On top of Dennis's ideas for mathematical usability with fractions, LabyrinthJS could also be used to help 4th grade math students work with times tables. According to the fourth grade math CC curriculum, this is the grade where multiplication tables are reinforced to make the process almost instant.

As a result, Labyrinth JS could be used as a model for representing a single-digit number as 'idea 1' and link it to all other single digit numbers. Students could then create an 'idea' to input the answer to the multiplication from idea 1 to all 10 linked idea 2's.

While this idea is a good idea educationally, I feel as though the developmental limitations of this program would make it relatively tedious. For example, ideas seem to link immediately if you create two ideas without switching to a different setting (ex. go from create idea to link idea and then back to create an unlinked idea), and linking is from the first clicked idea to the second, and then the third one you click will automatically link it to the second, rather than restarting the chain.

[cja1093]

There is a lot of flexibility with this activity in terms of what students can utilize it for conceptually. With regard to 4th grade math, it serves as a useful medium to organize related concepts as Dennis and Matt discussed. However, there are probably better alternatives seeing how the application itself does not introduce any of the curriculum we would like.