Οδηγίες για τους εκπαιδευτικούς
Η ιδέα προήλθε από το Freudenthal Institute for Science and Mathematics Education ( http://www.fisme.science.uu.nl/toepassingen/00724/ ). Στηρίχθηκε σε αποτελέσματα έρευνας του Εργαστηρίου Εκπαιδευτικής Τεχνολογίας ( Τομέας Παιδαγωγικής, Φ.Π.Ψ., Φιλοσοφική Σχολή, Ε.Κ.Π.Α. ) και αναπτύχθηκε με την καθοδήγηση του καθηγητή Χρόνη Κυνηγού. Η βοήθεια των συναδέλφων Μαρίας Λάτση και Βαγγέλη Φακούδη ήταν πολύτιμη. Κατέθεσαν ιδέες, συμμετείχαν στην απολαθοποίηση (debugging) και γενικά βελτίωσαν την λειτουργικότητα και την αισθητική της εφαρμογής.
Η εφαρμογή αναπτύχθηκε σε JavaScript / html5 και στηρίζεται στο WebGL (http://www.khronos.org/ ), το οποίο είναι ένα JavaScript API του OpenGL ES 2.0 για το web. Ειδικότερα, χρησιμοποιήθηκε το framework http://threejs.org/ που πρόσφατα έγινε πολύ δημοφιλές. Οι επιλογές του λογισμικού βασίστηκαν σε τρεις βασικούς άξονες:
· Οι εξελίξεις στην τεχνολογία λογισμικού και οι τάσεις της αγοράς.
· Απλή τεχνολογία web, χωρίς την ανάγκη βοηθητικών πρόσθετων εφαρμογών ( addons ).
· Ελεύθερο ή/και λογισμικό ανοικτού κώδικα.
Δόθηκε βαρύτητα ώστε οι εκπαιδευτικοί να αποκτήσουν ένα εργαλείο ανάπτυξης μικροπειραμάτων για την κατανόηση του χώρου.
Υπάρχουν αρκετές δυνατότητες παραμετροποίησης της εφαρμογής. Αν τις χρησιμοποιήσετε μπορείτε εύκολα να δημιουργήσετε το δικό σας μικροπείραμα και να το αναρτήσετε στο διαδίκτυο.
Στον φάκελο js υπάρχει ένα αρχείο model.js. Μπορείτε να το ανοίξετε με οποιονδήποτε text editor, όπως το notepad των windows, για να κάνετε αλλαγές.
Μετά το σχόλιο TEXT DATA υπάρχουν 3 μεταβλητές: titleText, problemText και authorText. Αυτές περιέχουν το κείμενο για τον τίτλο του μικροπειράματος (πάνω μέρος παραθύρου), την περιγραφή της προτεινόμενης δραστηριότητας (κάτω αριστερό μέρος) και το όνομά σας (κάτω μέρος). Ο τίτλος πρέπει να περιέχει το πολύ 120 χαρακτήρες, η περιγραφή το πολύ 500 και το όνομα το πολύ 70.
Ακολουθεί το σχόλιο COLOR, μετά το οποίο υπάρχει ο πίνακας χρωμάτων colors και η μεταβλητή wireFrame. Στον πίνακα μπορείτε να καθορίσετε την παλέτα των 9 χρωμάτων που χρησιμοποιούνται από την εφαρμογή. Ο πίνακας περιέχει 10 στοιχεία. Το πρώτο, που έχει δείκτη 0, είναι δεσμευμένο. Τα υπόλοιπα, που έχουν δείκτες από 1 μέχρι 9, μπορείτε να τα αλλάξετε. Οι τιμές για τα χρώματα είναι στο δεκαεξαδικό σύστημα αρίθμησης και αυτό δηλώνεται από το πρόθεμα 0x. Η μεταβλητή wireFrame καθορίζει την εμφάνιση ή μη των λευκών ακμών στους κύβους. Όταν έχει τιμή true εμφανίζονται, διαφορετικά πρέπει να έχει τιμή false.
Μετά το σχόλιο DIMENSIONING υπάρχει η μεταβλητή gridDimension. Αυτή πρέπει να είναι άρτιο πολλαπλάσιο του 50 που είναι η ακμή των κύβων (αυτό δεν πρέπει να αλλάζει). Αν για παράδειγμα θέσετε την τιμή 400, τότε θα έχετε ένα πλέγμα 8 x 8.
Στη συνέχεια και κάτω από το σχόλιο COUNTERS, υπάρχουν 4 μεταβλητές που καθορίζουν την εμφάνιση ή μη των δεικτών πλήθους των κύβων.
· init_show = true; // πλήθος κύβων που υπάρχουν στον «μισοψημένο» καμβά από τον εκπαιδευτικό
· usr_show = true; // πλήθος κύβων που πρόσθεσε ο μαθητής
· rare_show = true; // πλήθος κύβων που διέγραψε ο μαθητής από αυτούς που υπήρχαν στον αρχικό καμβά
· tot_show = true; // τρέχον σύνολο κύβων
Μετά το σχόλιο CAMERAS υπάρχουν 4 μεταβλητές: planeView, redView, blueView και greenView. Οι τιμές τους είναι true ή false και καθορίζουν εάν θα «δουλεύουν» ή όχι οι κάμερες για την κάτοψη και τις 3 όψεις.
Μετά το σχόλιο MODEL DATA υπάρχει η μεταβλητή modelGeometry. Αυτή είναι ένας πίνακας 3 διαστάσεων και τηρεί δεδομένα για το μοντέλο, δηλαδή την κατασκευή που εμφανίζεται στις όψεις. Η τιμή 0 αντιστοιχεί σε κενό χώρο και οι τιμές 1 έως 9 σε κύβο αντίστοιχου χρώματος. Η διάταξη του πίνακα είναι ορισμένη ως εξής: γραμμή, στήλη, πύργος. Δηλαδή, το πρώτο σετ τιμών αντιστοιχεί στον πύργο της πρώτης γραμμής και πρώτης στήλης. Για παράδειγμα, αν έχετε καμβά 2 x 2 τότε μια πιθανή κατασκευή θα ήταν η εξής:
modelGeometry =
[
[
[1,0],
[0,0]
],
[
[0,1],
[2,2]
]
];
Έχω χρωματίσει κόκκινες τις τιμές που πρέπει να επεξεργαστείτε. Οι αγκύλες, τα κόμματα και το ερωτηματικό στο τέλος είναι μέρος της σύνταξης στην javascript.
Ακολουθεί η μεταβλητή canvasGeometry, κάτω από το σχόλιο CANVAS DATA, που αφορά τυχόν «μισοψημένη» (ημιτελή) κατασκευή στον καμβά. Η λογική της επεξεργασίας του πίνακα είναι πανομοιότυπη με αυτήν για τον modelGeometry. Αυτήν τη μεταβλητή μπορείτε να την χρησιμοποιήσετε στις περιπτώσεις κατά τις οποίες θέλετε οι μαθητές σας να ολοκληρώσουν κάτι.
Με λίγο πειραματισμό θα καταλάβετε πως δουλεύει. Σε οποιαδήποτε περίπτωση μην διστάσετε να μου απευθύνετε ερωτήσεις μέσω e-mail.
Θωμάς Παπαδόπουλος
thomasdpapadopoulos@gmailcom
2018 Update by Marianthi Grizioti
mgriziot@ppp.uoa.gr