JCloze – Αναπτυσσόμενη λίστα με διαφορετικές επιλογές

Θα παρατηρήσατε πως οι επιλογές στις αναπτυσσόμενες λίστες αποτελούνται από το σύνολο των σωστών απαντήσεων για όλα τα κενά. Αυτό δεν είναι επιθυμητό πάντοτε.

Τι θα κάνετε στην περίπτωση που θέλετε να έχετε για κάθε κενό διαφορετικές επιλογές;

ΟΔΗΓΙΕΣ

Τι θα χρειαστείτε:

• Μια άσκηση συμπλήρωσης κενών φτιαγμένη με το JCloze σε μορφή html (ιστοσελίδα)
  [οδηγίες στη σελίδα JCloze – Τα βασικά]
• Ένα πρόγραμμα επεξεργασίας ιστοσελίδων (όπως το Frontpage) ή ακόμη κι έναν απλό επεξεργαστή κειμένου (όπως το Σημειωματάριο των Windows – OXI, το MSWORD!!!)
  [προτείνω τον εξαιρετικό επεξεργαστή κειμένου NotePad++ που υποστηρίζει ελληνικά και προσφέρεται για επεξεργασία κώδικα html]
• Προσοχή στην επεξεργασία του κώδικα …

Δυσκολία

Απαιτούμενος χρόνος

5-10 λεπτά (ανάλογα με το μέγεθος της άσκησης)

Τι πρέπει να κάνετε;

Εάν χρησιμοποιήσετε το MSFrontpage.

• Κάντε δεξί κλικ στην ιστοσελίδα και επιλέξτε Άνοιγμα με [Open with] με το Microsoft Office FrontPage.

• Στο κάτω μέρος της σελίδα υπάρχει η καρτέλα Κείμενο HTML [Code]. Κάντε κλικ και θα εμφανιστεί ο κώδικας της ιστοσελίδας.

• Αναζητήστε (με το εργαλείο αναζήτησης) τον κώδικα:

<option value=””></option>

• Παρατηρήστε: Οτιδήποτε βρίσκεται στις ετικέτες παραπάνω είναι οι επιλογές που θα έχουμε σε κάθε αναπτυσσόμενο μενού.

• Η ένδειξη

<span class=”GapSpan” id=”GapSpan0″><select id=”Gap0″>

μας δείχνει πού βρίσκεται το 1ο κενό.

Ομοίως η ένδειξη

<span class=”GapSpan” id=”GapSpan1″><select id=”Gap1″>

μας δείχνει πού βρίσκεται το 2ο κενό.

Η ένδειξη

<span class=”GapSpan” id=”GapSpan2″><select id=”Gap2″>

πού βρίσκεται το 3ο κενό κ.ο.κ.

• Στο σημείο αυτό θα επεξεργαστούμε τα σημεία με έντονα γράμματα και κόκκινο χρώμα.

Έτσι στο 1ο κενό θα αλλάξουμε το τμήμα:

<span class=”GapSpan” id=”GapSpan0″><select id=”Gap0″>
<option value=””></option>
<option value=”άσκηση“>άσκηση</option>
<option value=”λίστα“>λίστα</option></select></span>

σε …

<span class=”GapSpan” id=”GapSpan0″><select id=”Gap0″>
<option value=””></option>
<option value=”άσκηση“>άσκηση</option>
<option value=”κάτι άλλο“>κάτι άλλο</option></select></span>

Με λίγα λόγια στο αναπτυσσόμενο πλαίσιο δεν θα βγουν οι εξ ορισμού λέξεις “άσκηση” & “λίστα” αλλά οι λέξεις “άσκηση” & “κάτι άλλο“.

ενώ για το 2ο κενό θα αλλάξουμε το τμήμα:

<span class=”GapSpan” id=”GapSpan1″><select id=”Gap1″>
<option value=””></option>
<option value=”άσκηση“>άσκηση</option>
<option value=”λίστα“>λίστα</option></select></span>

σε …

<span class=”GapSpan” id=”GapSpan1″><select id=”Gap1″>
<option value=””></option>
<option value=”λίστα“>λίστα</option>
<option value=”άλλη επιλογή“>άλλη επιλογή</option>
<option value=”μια τρίτη επιλογή“>μια τρίτη επιλογή</option></select></span>

Εδώ πρόσθεσα και μια τρίτη επιλογή, ενώ άλλαξα τη δεύτερη σε κάτι διαφορετικό.

Εάν χρησιμοποιήσετε επεξεργαστή κειμένου θα κάνετε ακριβώς τα ίδια βήματα με τη διαφορά πως θα εργαστείτε κατευθείαν πάνω στον κώδικα [δεν υπάρχει εδώ καρτέλα “Code“].

Εάν παρατηρήσετε περίεργους χαρακτήρες κατά τη διάρκεια των αλλαγών, μην ανησυχείτε! Αυτό που φταίει είναι πως δεν ορίσατε ακόμη την κωδικοσελίδα της ιστοσελίδας! (δεν επηρεάζει σε τίποτα την άσκηση πάντως).

Παράδειγμα

Αναπτυσσόμενη λίστα με διαφορετικές επιλογές