XERTE TUTORIAL - ΣΗΜΕΙΩΣΕΙΣ ΕΡΓΑΣΤΗΡΙΟΥ ΘΜΕΛ ΣΤ. ΔΗΜΗΤΡΙΑΔΗΣ Xerte Interaction – Διάδραση Θεωρίες Μάθησης & Εκπαιδευτικό Λογισμικό Σημειώσεις Εργαστηρίου.

Παρουσίαση με θέμα: "XERTE TUTORIAL - ΣΗΜΕΙΩΣΕΙΣ ΕΡΓΑΣΤΗΡΙΟΥ ΘΜΕΛ ΣΤ. ΔΗΜΗΤΡΙΑΔΗΣ Xerte Interaction – Διάδραση Θεωρίες Μάθησης & Εκπαιδευτικό Λογισμικό Σημειώσεις Εργαστηρίου."— Μεταγράφημα παρουσίασης:

1 XERTE TUTORIAL - ΣΗΜΕΙΩΣΕΙΣ ΕΡΓΑΣΤΗΡΙΟΥ ΘΜΕΛ ΣΤ. ΔΗΜΗΤΡΙΑΔΗΣ Xerte Interaction – Διάδραση Θεωρίες Μάθησης & Εκπαιδευτικό Λογισμικό Σημειώσεις Εργαστηρίου -- Αρχείο 2

2 XERTE TUTORIAL - ΣΗΜΕΙΩΣΕΙΣ ΕΡΓΑΣΤΗΡΙΟΥ ΘΜΕΛ ΣΤ. ΔΗΜΗΤΡΙΑΔΗΣ Διάδραση Interaction

3 XERTE TUTORIAL - ΣΗΜΕΙΩΣΕΙΣ ΕΡΓΑΣΤΗΡΙΟΥ ΘΜΕΛ ΣΤ. ΔΗΜΗΤΡΙΑΔΗΣ Οι διαδράσεις που ακολουθούν παρουσιάζονται στο αρχείο xerteInteractions-1.rlo

4 XERTE TUTORIAL - ΣΗΜΕΙΩΣΕΙΣ ΕΡΓΑΣΤΗΡΙΟΥ ΘΜΕΛ ΣΤ. ΔΗΜΗΤΡΙΑΔΗΣ Τι είναι μια «διάδραση» στην οθόνη Είναι μια δυνατότητα που προσφέρεται στο χρήστη: (α) να κάνει μια ενέργεια στην οθόνη (να «διαδράσει») και (β) να δει το αποτέλεσμα της ενέργειάς του στην οθόνη Δηλ. να δει την ανάδραση (feedback) από το λογισμικό στην ενέργεια που έκανε Το ζευγάρι «Ενέργεια – Ανάδραση» είναι μια Διάδραση που προσφέρει η σχεδίαση της διεπαφής

5 XERTE TUTORIAL - ΣΗΜΕΙΩΣΕΙΣ ΕΡΓΑΣΤΗΡΙΟΥ ΘΜΕΛ ΣΤ. ΔΗΜΗΤΡΙΑΔΗΣ Παράδειγμα Στην παρακάτω οθόνη ο χρήστης μπορεί: (α) Ενέργεια: Να επιλέξει να πατήσει ένα από τα δύο πλήκτρα «ΣΩΣΤΟ» ή «ΛΑΘΟΣ» (β) Ανάδραση: Να δει το μήνυμα που εμφανίζει το λογισμικό ανάλογα με το πλήκτρο που πάτησε

6 XERTE TUTORIAL - ΣΗΜΕΙΩΣΕΙΣ ΕΡΓΑΣΤΗΡΙΟΥ ΘΜΕΛ ΣΤ. ΔΗΜΗΤΡΙΑΔΗΣ Επομένως για να δημιουργήσουμε μια διάδραση στην διεπαφή σχεδιάζουμε: (Α) Τα Στοιχεία Διάδρασης Πχ. Πλήκτρα (Buttons), Hot Spots, Drag-n-Drop items κλπ. (B) Την Ανάδραση (Feedback) από το λογισμικό …που θα εμφανιστεί στην οθόνη όταν ο χρήστης χρησιμοποιήσει κάποιο Στοιχείο διάδρασης

7 XERTE TUTORIAL - ΣΗΜΕΙΩΣΕΙΣ ΕΡΓΑΣΤΗΡΙΟΥ ΘΜΕΛ ΣΤ. ΔΗΜΗΤΡΙΑΔΗΣ Παράδειγμα Στοιχεία Διάδρασης: τα Πλήκτρα «ΣΩΣΤΟ» & «ΛΑΘΟΣ» Ανάδραση (Feedback): τα Μηνύματα που εμφανίζονται στο χώρο δεξιά όταν πατηθεί το αντίστοιχο πλήκτρο – επίσης και το βέλος που δείχνει ποιο πλήκτρο πατήθηκε

8 XERTE TUTORIAL - ΣΗΜΕΙΩΣΕΙΣ ΕΡΓΑΣΤΗΡΙΟΥ ΘΜΕΛ ΣΤ. ΔΗΜΗΤΡΙΑΔΗΣ Πώς δημιουργείται μια διάδραση; Εικονίδιο Interaction -- 1 Στο Xerte μια Διάδραση δημιουργείται ΠΑΝΤΟΤΕ με ένα εικονίδιο Interaction Το οποίο τοποθετούμε μέσα σε εικονίδιο σελίδας Στο παράδειγμα το εικονίδιο interaction i1 έχει τοποθετηθεί στη σελίδα p1

9 XERTE TUTORIAL - ΣΗΜΕΙΩΣΕΙΣ ΕΡΓΑΣΤΗΡΙΟΥ ΘΜΕΛ ΣΤ. ΔΗΜΗΤΡΙΑΔΗΣ Πώς δημιουργείται μια διάδραση; Εικονίδιο Interaction -- 2 Για να δημιουργήσω ένα Στοιχείο Διάδρασης: Πατώ Δεξί κλικ στο εικονίδιο Interaction και επιλέγω από τον κατάλογο Στο παράδειγμα επιλέγω το στοιχείο διάδρασης “Button”

10 XERTE TUTORIAL - ΣΗΜΕΙΩΣΕΙΣ ΕΡΓΑΣΤΗΡΙΟΥ ΘΜΕΛ ΣΤ. ΔΗΜΗΤΡΙΑΔΗΣ Πώς δημιουργείται μια διάδραση; Εικονίδιο Interaction -- 3 Όταν επιλέγω ένα Στοιχείο Διάδρασης αυτό εμφανίζεται ενσωματωμένο μέσα στο αντίστοιχο εικονίδιο Interaction Στο παράδειγμα το στοιχείο διάδρασης “Button” εμφανίζεται μέσα στο εικονίδιο Interaction i1 Καθορίζω την ετικέτα (label) για το button b1

11 XERTE TUTORIAL - ΣΗΜΕΙΩΣΕΙΣ ΕΡΓΑΣΤΗΡΙΟΥ ΘΜΕΛ ΣΤ. ΔΗΜΗΤΡΙΑΔΗΣ Πώς δημιουργείται μια διάδραση; Εικονίδιο Interaction -- 4 Με παρόμοιο τρόπο εισάγω ένα ακόμη button (b2) στο εικονίδιο interaction i1 Και καθορίζω την ετικέτα του σε «ΛΑΘΟΣ»

12 XERTE TUTORIAL - ΣΗΜΕΙΩΣΕΙΣ ΕΡΓΑΣΤΗΡΙΟΥ ΘΜΕΛ ΣΤ. ΔΗΜΗΤΡΙΑΔΗΣ Πώς δημιουργείται μια διάδραση; Εικονίδιο Interaction -- 5 Το αποτέλεσμα αυτού του κώδικα είναι η εμφάνιση δύο στοιχείων διάδρασης τύπου Button στην οθόνη Με ετικέτες «ΣΩΣΤΟ» & «ΛΑΘΟΣ» Μπορείτε να ρυθμίσετε το ακριβές μέγεθος των πλήκτρων από τις τιμές των ιδιοτήτων: w, h Ενώ η θέση μπορεί να καθοριστεί αρχικά οπτικά στην οθόνη Επιλέξτε το εικονίδιο i1 και πατήστε Shift-Ctrl-F5 για επεξεργασία …και στη συνέχεια με μικρο-ρυθμίσεις των x, y

13 XERTE TUTORIAL - ΣΗΜΕΙΩΣΕΙΣ ΕΡΓΑΣΤΗΡΙΟΥ ΘΜΕΛ ΣΤ. ΔΗΜΗΤΡΙΑΔΗΣ Πώς δημιουργείται μια διάδραση; Εικονίδιο Interaction -- 5 Το αποτέλεσμα αυτού του κώδικα είναι η εμφάνιση δύο στοιχείων διάδρασης τύπου Button στην οθόνη Με ετικέτες «ΣΩΣΤΟ» & «ΛΑΘΟΣ» Μπορείτε να ρυθμίσετε το ακριβές μέγεθος των πλήκτρων από τις τιμές των ιδιοτήτων: w, h Ενώ η θέση μπορεί να καθοριστεί αρχικά οπτικά στην οθόνη Επιλέξτε το εικονίδιο i1 και πατήστε Shift-Ctrl-F5 για επεξεργασία …και στη συνέχεια με μικρο-ρυθμίσεις των x, y

14 XERTE TUTORIAL - ΣΗΜΕΙΩΣΕΙΣ ΕΡΓΑΣΤΗΡΙΟΥ ΘΜΕΛ ΣΤ. ΔΗΜΗΤΡΙΑΔΗΣ Η ανάδραση -- 1 Η ανάδραση δημιουργείται πάντοτε τοποθετώντας τα εικονίδια ανάδρασης «μέσα» στο εικονίδιο του στοιχείου διάδρασης Στο παράδειγμα παρακάτω δύο εικονίδια (κειμένου και σχεδίασης βρίσκονται μέσα στο εικονίδιο button

15 XERTE TUTORIAL - ΣΗΜΕΙΩΣΕΙΣ ΕΡΓΑΣΤΗΡΙΟΥ ΘΜΕΛ ΣΤ. ΔΗΜΗΤΡΙΑΔΗΣ Η ανάδραση -- 2 Όταν πατηθεί το Button «ΣΩΣΤΟ» τότε εμφανίζεται στην οθόνη το κείμενο της ανάδρασης (περιλαμβάνεται στο εικονίδιο κειμένου) και το λευκό βέλος (περιλαμβάνεται στο εικονίδιο σχεδίασης)

16 XERTE TUTORIAL - ΣΗΜΕΙΩΣΕΙΣ ΕΡΓΑΣΤΗΡΙΟΥ ΘΜΕΛ ΣΤ. ΔΗΜΗΤΡΙΑΔΗΣ ΆΣΚΗΣΗ -- 1 Δημιουργήστε μια διάδραση στην οθόνη τύπου button Τοποθετήστε και ένα λευκό πλαίσιο στο οποίο θα εμφανίζεται η ανάδραση Ο τίτλος του button είναι «ΕΠΙΛΟΓΗ» και με το πάτημά του θα πρέπει να εμφανίζεται το κείμενο «ΑΝΑΔΡΑΣΗ» καθώς και το λευκό βέλος Παρακάτω βλέπετε τον κώδικα εικονιδίων και την οθόνη Εξηγείστε ποιο εικονίδιο παράγει ποια λειτουργία/πληροφορία Εξηγείστε την αλληλένδετη λειτουργία των εικονιδίων i1 – b1 – t1

17 XERTE TUTORIAL - ΣΗΜΕΙΩΣΕΙΣ ΕΡΓΑΣΤΗΡΙΟΥ ΘΜΕΛ ΣΤ. ΔΗΜΗΤΡΙΑΔΗΣ ΆΣΚΗΣΗ -- 2 (α) Δημιουργήστε μια οθόνη με 4 Επιλογές τύπου button όπως φαίνεται παρακάτω στην οθόνη

18 XERTE TUTORIAL - ΣΗΜΕΙΩΣΕΙΣ ΕΡΓΑΣΤΗΡΙΟΥ ΘΜΕΛ ΣΤ. ΔΗΜΗΤΡΙΑΔΗΣ ΆΣΚΗΣΗ -- 2 συνέχεια (β) Γράψτε κώδικα ώστε όταν ο χρήστης πατά το button «ΈΝΑ» να εμφανίζεται η ανάδραση κειμένου ‘ΕΠΙΛΟΓΗ «ΈΝΑ»’ στο λευκό πλαίσιο όπως φαίνεται παρακάτω Εξηγείστε τη λειτουργία του κώδικα που γράψατε

19 XERTE TUTORIAL - ΣΗΜΕΙΩΣΕΙΣ ΕΡΓΑΣΤΗΡΙΟΥ ΘΜΕΛ ΣΤ. ΔΗΜΗΤΡΙΑΔΗΣ Διάδραση τύπου Hot Spot - 1) σε Κείμενο Η διάδραση τύπου Hot Spot σας επιτρέπει να κάνετε ενεργά (“hot”) όποια σημεία στην οθόνη επιθυμείτε Στο παράδειγμα βλέπετε τον κώδικα που δημιουργεί ένα HotSpot πάνω στο κείμενο «ΚΛΙΚ ΕΔΩ»

20 XERTE TUTORIAL - ΣΗΜΕΙΩΣΕΙΣ ΕΡΓΑΣΤΗΡΙΟΥ ΘΜΕΛ ΣΤ. ΔΗΜΗΤΡΙΑΔΗΣ Διάδραση τύπου Hot Spot - 2) σε Εικόνα Διαδράσεις Hot Spot μπορούν εύκολα να τοποθετηθούν πάνω σε εικόνα και να δημιουργήσουν πολλά ενεργά σημεία πάνω στην ίδια εικόνα Στο παράδειγμα βλέπετε τον κώδικα που δημιουργεί ένα HotSpot πάνω στην εικόνα του John και εμφανίζει με κόκκινο χρώμα το όνομά του Αντίστοιχη διάδραση έχει δημιουργηθεί και για τον Paul

21 XERTE TUTORIAL - ΣΗΜΕΙΩΣΕΙΣ ΕΡΓΑΣΤΗΡΙΟΥ ΘΜΕΛ ΣΤ. ΔΗΜΗΤΡΙΑΔΗΣ Οι διαδράσεις που ακολουθούν παρουσιάζονται στο αρχείο xerteInteractions-2.rlo

22 XERTE TUTORIAL - ΣΗΜΕΙΩΣΕΙΣ ΕΡΓΑΣΤΗΡΙΟΥ ΘΜΕΛ ΣΤ. ΔΗΜΗΤΡΙΑΔΗΣ Διάδραση τύπου Radio Button Η διάδραση τύπου Radio Button σας επιτρέπει να δημιουργήσετε Radio Buttons στην οθόνη Σημαντική: η ιδιότητα group Όσα radio buttons έχουν ίδια τιμή group (στο παράδειγμα ‘grp’) ανήκουν στο ίδιο group και επιλέγονται αποκλείοντας αμοιβαία τα υπόλοιπα της ίδιας ομάδας

23 XERTE TUTORIAL - ΣΗΜΕΙΩΣΕΙΣ ΕΡΓΑΣΤΗΡΙΟΥ ΘΜΕΛ ΣΤ. ΔΗΜΗΤΡΙΑΔΗΣ Διάδραση τύπου Check Box Παρόμοια είναι και η διάδραση τύπου Check Boxμε τη διαφορά ότι τα buttons τύπου check box είναι ανεξάρτητα μεταξύ τους (δεν υπάρχει ιδιότητα group) Επομένως: Χρησιμοποιούμε Radio Button όταν θέλουμε να επιτρέψουμε ΜΙΑ και ΜΟΝΑΔΙΚΗ επιλογή στο χρήστη (πχ. σε ερωτήσεις πολλαπλών επιλογών) Χρησιμοποιούμε Check Box όταν ο χρήστης μπορεί να επιλέξει ΠΕΡΙΣΣΟΤΕΡΕΣ από ΜΙΑ επιλογές (πχ. σε ερωτήσεις πολλαπλών απαντήσεων)

24 XERTE TUTORIAL - ΣΗΜΕΙΩΣΕΙΣ ΕΡΓΑΣΤΗΡΙΟΥ ΘΜΕΛ ΣΤ. ΔΗΜΗΤΡΙΑΔΗΣ Ρυθμίσεις Ιδιοτήτων μέσω Script - 1 Κάθε στοιχείο διάδρασης στο Xerte υλοποιείται προγραμματιστικά ως Αντικείμενο (object) Έτσι συνοδεύεται από τις δικές του Μεθόδους (Methods) και Ιδιότητες (Properties) Η απόδοση τιμών στις Ιδιότητες μπορεί να γίνει –όπως έχουμε δει ως τώρα- στο Properties Panel των εικονιδίων Αλλά μπορεί να γίνει και μέσω κατάλληλου κώδικα script που προσδίδει δυναμικότητα στη συμπεριφορά της εφαρμογής καθώς μπορεί να μεταβάλει τις τιμές των ιδιοτήτων κατά την εκτέλεση της εφαρμογής Θα δούμε στη συνέχεια παραδείγματα ρύθμισης των τιμών Ιδιοτήτων για τα Buttons της εφαρμογής μέσω απλών εντολών script

25 XERTE TUTORIAL - ΣΗΜΕΙΩΣΕΙΣ ΕΡΓΑΣΤΗΡΙΟΥ ΘΜΕΛ ΣΤ. ΔΗΜΗΤΡΙΑΔΗΣ Ρυθμίσεις Ιδιοτήτων μέσω Script - 2 Στα εικονίδια check box προσθέστε την ιδιότητα rs και δώστε της την τιμή rscb1 Αντίστοιχα στο check box cb2 καταχωρήστε rs  rscb2 Η ιδιότητα rs (από το resource) σας δίνει τη δυνατότητα να προσδιορίζετε το συγκεκριμένο στοιχείο διάδρασης όταν γράφετε κώδικα Επίσης προσθέστε την ιδιότητα enabled και δώστε την τιμή 0 Αντίστοιχα στο check box cb2: enabled  0

26 XERTE TUTORIAL - ΣΗΜΕΙΩΣΕΙΣ ΕΡΓΑΣΤΗΡΙΟΥ ΘΜΕΛ ΣΤ. ΔΗΜΗΤΡΙΑΔΗΣ Ρυθμίσεις Ιδιοτήτων μέσω Script - 3 Η τιμή enabled  0 καθορίζει ότι τα check boxes θα εμφανίζονται απενεργοποιημένα Στο παράδειγμα θα δημιουργήσουμε ένα button το οποίο θα ενεργοποιεί τα check boxes με χρήση απλών εντολών script Στην ίδια σελίδα και στο ίδιο interaction icon δημιουργήστε ένα button και εισάγετε στον κλάδο ανάδρασής του ένα εικονίδιο script Στο script panel γράψτε τις εντολές: rsb1.setEnabled(1); rsb2.setEnabled(1);

27 XERTE TUTORIAL - ΣΗΜΕΙΩΣΕΙΣ ΕΡΓΑΣΤΗΡΙΟΥ ΘΜΕΛ ΣΤ. ΔΗΜΗΤΡΙΑΔΗΣ Ρυθμίσεις Ιδιοτήτων μέσω Script - 4 Δώστε στο button το label  ENABLE Η αρχική οθόνη θα περιλαμβάνει τα 2 ανενεργά check boxes και το Button ‘ENABLE’ Το πάτημα του Button ‘ENABLE’ θα πρέπει να ενεργοποιεί τα 2 check boxes

28 XERTE TUTORIAL - ΣΗΜΕΙΩΣΕΙΣ ΕΡΓΑΣΤΗΡΙΟΥ ΘΜΕΛ ΣΤ. ΔΗΜΗΤΡΙΑΔΗΣ Ρυθμίσεις Ιδιοτήτων μέσω Script - 5 Πώς λειτουργεί το script: Η γενική μορφή της συνάρτησης είναι: rs.setEnabled(Boolean); Όπου: rs η ονομασία του αντικειμένου για το στοιχείο ελέγχου στο οποίο θέλουμε να αλλάξουμε την τιμή της παραμέτρου enabled Boolean: λογική τιμή 0 ή 1 Καθώς στα check boxes έχουμε δώσει rs  rscb1 η εντολή rscb1.setEnabled(1) ενεργοποιεί το πρώτο check box Αντίστοιχα η rscb1.setEnabled(0) το απενεργοποιεί

29 XERTE TUTORIAL - ΣΗΜΕΙΩΣΕΙΣ ΕΡΓΑΣΤΗΡΙΟΥ ΘΜΕΛ ΣΤ. ΔΗΜΗΤΡΙΑΔΗΣ Διάδραση τύπου ComboBox Η διάδραση ComboBox επιτρέπει την επιλογή μέσω Combo Box στην οθόνη Οι διάφορες επιλογές δηλώνονται στην ιδιότητα items με διαχωριστικό το σύμβολο ~

30 XERTE TUTORIAL - ΣΗΜΕΙΩΣΕΙΣ ΕΡΓΑΣΤΗΡΙΟΥ ΘΜΕΛ ΣΤ. ΔΗΜΗΤΡΙΑΔΗΣ Διάδραση τύπου HotObject - 1 Η διάδραση HotObject επιτρέπει την μετατροπή σε ενεργό (hot) αντικείμενο ενός ολόκληρου γραφικού, δηλ. του περιεχομένου σε ένα εικονίδιο τύπου Graphic Το HotObject είναι ιδιαίτερα χρήσιμο όταν θέλουμε να κάνουμε ενεργά αντικείμενα σε διαφορετικά εικονίδια Στο παράδειγμα θα δείξουμε πώς γίνονται HotObject τα εικονίδια ‘John’ και ‘Jigsaw’

31 XERTE TUTORIAL - ΣΗΜΕΙΩΣΕΙΣ ΕΡΓΑΣΤΗΡΙΟΥ ΘΜΕΛ ΣΤ. ΔΗΜΗΤΡΙΑΔΗΣ Διάδραση τύπου HotObject - 2 Για να οργανώσετε διάδραση HotObject πρέπει να έχετε σε διαφορετικά εικονίδια Graphic τις εικόνες που θέλετε να κάνετε HotObject Θα χρειαστείτε την ιδιότητα id Δώστε μια τιμή πχ. johnid Και αντίστοιχα jigsawid

32 XERTE TUTORIAL - ΣΗΜΕΙΩΣΕΙΣ ΕΡΓΑΣΤΗΡΙΟΥ ΘΜΕΛ ΣΤ. ΔΗΜΗΤΡΙΑΔΗΣ Διάδραση τύπου HotObject - 3 Για να δηλώσετε το εικονίδιο ‘john’ με id  johnid ως εικονίδιο HotObject αρκεί στη διάδραση HotObject να δηλώσετε rs  johnid Δηλ. να δηλώσετε το id του εικονιδίου που θέλετε να γίνει HotObject Στον κλάδο ανάδρασης του HotObject τοποθετήστε ένα εικονίδιο Text με ένα σχετικό μήνυμα, πχ. ‘Clicked John’

33 XERTE TUTORIAL - ΣΗΜΕΙΩΣΕΙΣ ΕΡΓΑΣΤΗΡΙΟΥ ΘΜΕΛ ΣΤ. ΔΗΜΗΤΡΙΑΔΗΣ Διάδραση τύπου HotObject - 4 Το τελικό αποτέλεσμα στην οθόνη είναι η διάδραση με τα διαφορετικά αντικείμενα – γραφικά

34 XERTE TUTORIAL - ΣΗΜΕΙΩΣΕΙΣ ΕΡΓΑΣΤΗΡΙΟΥ ΘΜΕΛ ΣΤ. ΔΗΜΗΤΡΙΑΔΗΣ ΤΕΛΟΣ XERTE – TUTORIAL ver 2.0