Designing Instructions

The ideas is based on Freudenthal Institute for Science and Mathematics Education ( http://www.fisme.science.uu.nl/toepassingen/00724/ ). The application is based on the pedagogical research of Educational Technology Lab ( Department of Secondary Education NKUA ) and it was developed with the guidance of Prof. Chronis Kynigos. The contribution of Dr Maria Latsi and Mr Vangelis Fakoudis was really helpful as they proposed new ideas and they participated in debugging and in improving the functionality and the aesthetics of the application.

The application was developed in JavaScript / html5 and it is based on WebGL (http://www.khronos.org/ ), which is a JavaScript API of OpenGL ES 2.0 for the web. The http://threejs.org/ framework was used. The design desicions of the application were made according to the following criteria:

·         Software technology developments and market trends.

·         Accessible technology web,without further installations or adds on needed( addons ).

·         Free and open scource software.

The aim of the application was to provide all teachers with an authoring tool for developing micro-experiments for spatial abilities and concepts.

There are several options for customizing the application. By using them you can easily create your own experiment and post it online.

In the folder js there is the file model.js. You can open and edit it with any text editor, such as windows notepad

After the comment TEXT DATA there are 3 variables: titleText, problemText και authorText. These are the title of the micro-experiment (top of the window), activity description (down left) and your name (down). The title must be 200 characters max,the description 500 characters max and your name 70 characters max.

Then there is the comment COLOR, after which you can find the coloure table colors and the variablewireFrame. In the table you can set the την παλέτα 9 colour pallete that are used by the application. The table includes 10 elements. The first, that has the number 0 is reserved. The rest, with the numbers 1 to 9, can be edited. The color values are in decahexadical system,indicated by the number 0x. The wireFrame variable determines the visibility of white acmes in the cubes. When the variable is true they are visible, otherwise it should have the value false.

After the comment DIMENSIONING there is the variablegridDimension. This must be a multiple of 50 that is the cube acme (this should remain stable).For instance by setting the variable to 400, there will be a 8 x 8 grid.

Below the comment COUNTERS,there are 4 variables that determine the visibility of cube counters.

·         init_show  = true;           // number of cubes on the canvas

·         usr_show   = true;           // number of cubes added by the student

·         rare_show  = true;           // number of cubes deleted by the student

·         tot_show   = true;             // current sum of cubes

After the comment CAMERAS there are 4 variables: planeView, redView, blueView και greenView. Their values are span lang=EN-US style='font-family: "Courier New"'>true or false and they determine if the cameras are activated for the top view and for the other 3 views accordingly.

After the comment MODEL DATA there is the variable modelGeometry. It is a 3 dimensional table that keeps the data of the model, namely the construction that appears in the views 0 value represents a void while 1 to 9 values represent a cube of the respective color. The table arrangement is: row, line, tower. That is, the first set of values represents the first tower of the firs row of the first column. For instance for a 2 x 2 grid, a possible construction could be:

modelGeometry =

[

     [

           [1,0],

           [0,0]

     ],

     [

           [0,1],

           [2,2]

     ]

];

The red values are those that you must change. The brackets, commas and questionmarks are part of the javascript syntax.

The variablecanvasGeometry, below the comment CANVAS DATA, represents a «half-baked» (unfinished) construction on canvas. You can edit the table in the same way as described for the modelGeometry. You may use this variable for cases that you want your students to complete or correct a given construction .

Feel free to experiment. You can send any questions by email to e-mail.

 

Thomas Papadopoulos

thomasdpapadopoulos@gmailcom

2018 Application Update & Translation by Marianthi Grizioti

email: mgriziot@ppp.uoa.gr