TableLayoutExample with 100 squares


	links to this page:

Last updated at 5:33 am UTC on 24 April 2022

 | container |

 container := Morph new.
 container width: 500.
 container height: 500.

 container layoutPolicy: TableLayout new.
 container listDirection: #leftToRight.
 container wrapCentering: #topLeft.
 container wrapDirection: #topToBottom.

 
 1 to: 100 do:  [:i |  cell := Morph new. 
                   cell height: 50. 
                   cell color: Color white. 
                   cell width: 50. 
                   cell borderWidth: 1.
                   cell addMorph: (StringMorph contents: i printString).
                   container addMorphBack: cell
                 ].

 container openInWorld.

Version 2: TableLayoutExample with 100 squares - v2

See also 100 calculi

The code may serve as a starting point to create exercises with the Montessori 100 board.
http://www.montessorialbum.com/montessori/index.php?title=Hundred_Board
https://www.teachervision.com/blank-100-grid

Note if you do that you need to create a morph with a larger extension so that if you export it as a PNG file the resolution is sufficient. (for printing)

Better position of numbers:

 | container s |

 container := Morph new.
 container width: 500.
 container height: 500.

 container layoutPolicy: TableLayout new.
 container listDirection: #leftToRight.
 container wrapCentering: #topLeft.
 container wrapDirection: #topToBottom.

 
 1 to: 100 do:  [:i |  cell := Morph new. 
                   cell height: 50. 
                   cell color: Color white. 
                   cell width: 50. 
                   cell borderWidth: 1.
                   cell addMorph: (s := StringMorph contents: i printString).
                   s position: cell position + (4@4).
                   container addMorphBack: cell
                 ].

 container openInWorld.