Εργαστήριο 11: Συνδυαστικές και Επαναληπτικές Ασκήσεις
Άσκηση 1
Φτιάξτε μια σελίδα HTML / Javascript η οποία θα υλοποιεί το παρακάτω παιχνίδι.
Αρχικά θα εμφανίζει ένα κουμπί για την εκκίνηση ενός γύρου παιχνιδιού και 1 κενός πίνακας 5Χ5.
Όταν ο χρήστης κάνει κλικ στο κουμπί θα επιλέγεται τυχαία ένας αριθμός από 3 έως 9 που θα εμφανίζεται πάνω από τον πίνακα και θα γεμίζει τα κελιά του πίνακα με τυχαίους αριθμούς από 1εώς 100. Τέλος θα εμφανίζεται ένα χρονόμετρο που θα μετράει αντίστροφα για 30 δευτερόλεπτα.
Ο χρήστης θα ψάχνει να βρει πολλαπλάσια του πρώτου τυχαίου αριθμού από 1-9 στους αριθμούς του πίνακα. Όταν κάνει κλικ σε αριθμό πολλαπλάσιο τότε το χρώμα του κελιού γίνεται πράσινο ενώ αλλιώς κόκκινο. (το υπόλοιπο διαίρεσης 2 αριθμών υπολογίζεται με “%” π.χ. 20 % 2)
Στο τέλος του χρόνου των 30 δευτερολέπτων θα εμφανίζει το σκορ του χρήστη. Το σκορ θα το υπολογίσετε ως (Σωστές προσπάθειες/Συνολικό πλήθος σωστών αριθμών)-(Λάθος Προσπάθειες/ (5*5 - Συνολικό πλήθος σωστών αριθμών)).
Εκτιμώμενος χρόνος λύσης : 45 λεπτά
Άσκηση 2
Να δημιουργήσετε μία σελίδα στην οποία:
Θα υπάρχει αρχικά ένα button «προσθήκη» με το οποίο θα προστίθεται δυναμικά μία γραμμή σε ένα πίνακα (που θα υπάρχει κάτω από το button). H κάθε γραμμή θα αποτελείται από τρία κελιά. Στο πρώτο κελί θα υπάρχει ένα textbox όπου ο χρήστης θα μπορεί να βάλει το url από μία φωτογραφία. Στο δεύτερο κελί θα υπάρχει ένα button «φόρτωση εικόνας» το οποίο όταν ο χρήστης θα το πατήσει θα εμφανίζεται η εικόνα στο τρίτο κελί.
Εμπλουτίστε την σελίδα με δυο buttons “start” και “stop”. Με το “start” θα ξεκινάει ένα slideshow με τις φωτογραφίες που είναι φορτωμένες στην σελίδα και με το stop θα σταματάει.
Εκτιμώμενος χρόνος λύσης: 30 λεπτά
Ασκηση 3
Φτιάξτε μια σελίδα HTML / Javascript η οποία θα υλοποιεί το παρακάτω παιχνίδι:
Η σελίδα αρχικά θα εμφανίζει ένα κουμπί «Έναρξη» και ένα κενό κίτρινο πίνακα 5X5. (Προσοχή: Ο πίνακας θα προϋπάρχει στην σελίδα σαν κώδικας HTML και ΔΕΝ θα δημιουργείται δυναμικά με κώδικα Javascript)
Όταν ο χρήστης πατάει το κουμπί «Έναρξη» θα γίνονται τα παρακάτω:
Το κουμπί «Έναρξη» θα απενεργοποιείται.
Τα κελιά του πίνακα θα γεμίζουν με τυχαίους αριθμούς 0-9 και θα χρωματίζονται επίσης τυχαία με πράσινο ή κόκκινο φόντο.
Όταν ο χρήστης κάνει κλικ σε κάποιο κελί, αν το κελί είναι κόκκινο τότε ο αριθμός στο κελί θα μειώνεται κατά ένα αλλιώς θα αυξάνετε κατά ένα. Παράλληλα, θα αλλάζει και το χρώμα του κελιού στο αντίθετο. (πχ. Αν ήταν 3 και κόκκινο τότε θα γίνεται 2 και πράσινο).
Όταν ο χρήστης κάνει κλικ σε 10 κελιά θα συμβαίνουν τα παρακάτω:
Το κουμπί «Έναρξη» θα ενεργοποιείται.
Εμφανίζεται ένα μήνυμα με τον μέσο όρο από τους αριθμούς που περιέχονταν στα κελιά που έκανε κλικ ο χρήστης. (πριν την αλλαγή τους)
Εκτιμώμενος χρόνος λύσης: 45 λεπτά
Ασκηση 4
Να δημιουργήσετε μία σελίδα στην οποία θα υπάρχει μία φόρμα εισαγωγής στοιχείων δημοσιεύσεων.
Στην σελίδα να υπάρχει αρχικά ένα textarea για τον τίτλο της δημοσίευσης ένα textbox για τους συγγραφείς, ένα textbox (read only) θεματικές ενότητες και ένα button «Προσθήκη θεματικής ενότητας» για την προσθήκη θεματικών ενοτήτων. Όταν ο χρήστης πατήσει στην «Προσθήκη θεματικής ενότητας» τότε θα εμφανίζεται ένα div που θα έχει ένα dropdownlist με θεματικές ενότητες, ένα button «προσθήκη» και ένα button «κλείσιμό». Όταν ο χρήστης πατήσει «προσθήκη» τότε το θεματική ενότητα θα προστίθεται στο textbox των θεματικών ενοτήτων, ενώ όταν πατάει κλείσιμο το div θα εξαφανίζεται.
Η σελίδα να εμπλουτιστεί με ένα button «Υποβολή» στο τέλος. Όταν ο χρήστης πατήσει το button υποβολή τότε στο τέλος της σελίδας να εμφανίζονται τα στοιχεία της δημοσίευσης που αποτελούνται από τα ονόματα των συγγραφέων και τον τίτλο της δημοσίευσης και τις θεματικές ενότητες.
Εκτιμώμενος χρόνος λύσης: 30 λεπτά
Άσκηση 5
Φτιάξτε μια σελίδα HTML / Javascript η οποία θα υλοποιεί το παρακάτω παιχνίδι:
Η σελίδα αρχικά θα εμφανίζει ένα κουμπί «Έναρξη» και ένα κενό πίνακα 4X4.
Όταν ο χρήστης πατάει το κουμπί «Έναρξη» θα γίνονται τα παρακάτω:
Το κουμπί «Έναρξη» θα απενεργοποιείται.
Τα κελιά του πίνακα θα γεμίζουν με τυχαίους αριθμούς 0-9
Κάτω από τον πίνακα θα ξεκινάει να μετράει αντίστροφα ένα χρονόμετρο 10 δευτερολέπτων.
Όταν ο χρήστης κάνει κλικ σε κάποιο κελί, αν το νούμερο που έχει το κελί είναι μεγαλύτερο του 5 τότε το κελί θα γίνετε πράσινο αλλιώς θα γίνετε κόκκινο.
Μόλις τελειώσει ο χρόνος των 10 δευτερολέπτων θα συμβαίνουν τα παρακάτω:
Το κουμπί «Έναρξη» θα ενεργοποιείται.
Σταματάει το χρονόμετρο κάτω από τον πίνακα.
Εμφανίζεται ένα μήνυμα με το πόσα έγιναν πράσινα και πόσα κόκκινα.
Εκτιμώμενος χρόνος λύσης: 45 λεπτά
Άσκηση 6
Φτιάξτε μια σελίδα HTML / Javascript η οποία θα υλοποιεί ένα slideshow 6 φωτογραφιών με μπάρα μικρογραφιών. Πιο συγκεκριμένα:
Η σελίδα θα περιέχει επάνω από την κεντρική φωτογραφία 3 μικρογραφίες φωτογραφιών ένα κουμπί «Επόμενη» και ένα «Εκκίνηση».
Με την φόρτωση της σελίδας θα ξεκινάει το slideshow που αρχικά θα εμφανίζει τις 3 πρώτες εικόνες σε μικρογραφίες 50Χ50 και κάθε ένα δευτερόλεπτο θα αλλάζει την κεντρική εικόνα στην επόμενη κάνοντας ταυτόχρονα την αντίστοιχη μικρογραφία σε διαστάσεις 80Χ80. Όταν τελειώσουν οι πρώτες 3 φωτογραφίες, οι μικρογραφίες θα αλλάζουν στις 3 επόμενες και η διαδικασία θα επαναλαμβάνεται με τον ίδιο τρόπο.
Όσο το slideshow τρέχει από μόνο του τα κουμπιά θα είναι απενεργοποιημένα. Μόλις ο χρήστης κάνει κλικ οπουδήποτε στη σελίδα το slideshow θα σταματάει και τα κουμπιά θα ενεργοποιούνται.
Με το κουμπί «Εκκίνηση» θα ξαναξεκινάει η αυτόματη λειτουργία του slideshow και θα απενεργοποιούνται τα κουμπιά.
Με το κουμπί «Επόμενη» θα εμφανίζεται η επόμενη εικόνα από το slideshow και θα μεγαλώνει σε 80Χ80 η αντίστοιχη μικρογραφία.
Σημείωση: το υπόλοιπο διαίρεσης 2 αριθμών υπολογίζεται με “%” π.χ. 5 % 3 = 2
Εκτιμώμενος χρόνος λύσης: 45 λεπτά
Άσκηση 7
Να δημιουργήσετε μία σελίδα στην οποία θα υπάρχει ένα button «Δημιουργία» ένας κενός πίνακας (χωρίς γραμμές και κελιά) και μία κενή παράγραφος (p).
Όταν ο χρήστης πατήσει το button «Δημιουργία» τότε θα γεμίζει δυναμικά o πίνακας με 25 κελιά (5X5) με τυχαίους ακέραιους μεταξύ 10 και 99.
Όταν ο χρήστης κάνει 3 φορές click σε τρία διαφορετικά κελιά τότε στην παράγραφό θα δημιουργείται ένα div. Το χρώμα που θα έχει το div θα ισούται με την συνένωση των τριών αριθμών από τα τρία κελιά που έχει κάνει click ενώ ως περιεχόμενο θα έχει την συνένωση τον τριών αριθμών.(Παράδειγμα αν ο χρήστης έχει κάνει click στα κελιά που περιέχουν τους αριθμούς 45, 34, 21 τότε το χρώμα του div θα είναι το #453421 και θα έχει ως περιεχόμενο το 453421). Να λυθεί με την χρήση events (Firefox Mozilla)
Η σελίδα να εμπλουτιστεί με ένα ακόμα button «start» το οποίο όταν πατηθεί από τον χρήστη να εναλλάσσει ανά 3 δευτερόλεπτα το χρώμα της σελίδας ανάλογα με τα χρώματα των divs.
Εκτιμώμενος χρόνος λύσης: 45 λεπτά
Άσκηση 8
Να δημιουργήσετε μία σελίδα στην οποία θα υπάρχει πίνακας με 4 κελιά (πίνακας 1) που σε καθένα από αυτά υπάρχει μία φωτογραφία και ένας πίνακας(πίνακας 2) με μία γραμμή (χωρίς κελιά).
Όταν ο χρήστης πατήσει σε μία από τις φωτογραφίες τότε αυτή θα εξαφανίζεται από τον πίνακα 1 και θα δημιουργείται ένα νέο κελί στον πίνακα 2 και μέσα σε αυτό η φωτογραφία που επιλέχθηκε.
Η σελίδα να εμπλουτιστεί με ένα ακόμα button «return pics» το οποίο όταν πατηθεί από τον χρήστη να μεταφέρει της φωτογραφίες από το πίνακα 2 στον πίνακα 1 μία-μία ανά τρία δευτερόλεπτα.
Εκτιμώμενος χρόνος λύσης: 30 λεπτά
Ασκηση 9
Να δημιουργήσετε μία σελίδα αγοράς προϊόντων e-shop. Τα δεδομένα των προϊόντων βρίσκονται στον πίνακα (javascript array) products στο αρχείο
το οποίο θα καλέσετε ως reference στην σελίδα σας. Ο πίνακας products (δισδιάστατος) έχει τρεις στήλες που περιέχουν το όνομα του προϊόντος, την πηγή της φωτογραφίας του και την τιμή του.
Κατά την φόρτωση της σελίδας να γεμίζει ένα HTML table με τα προϊόντα (όνομα, μικρογραφία φωτογραφίας και τιμή).
Να εμπλουτιστεί το HTML table με μία επιπλέον στήλη που θα εμφανίζεται για κάθε γραμμή ένα button «προσθήκη» το οποίο θα προσθέτει το προϊόν στο καλάθι αγορών. Το καλάθι αγορών θα υλοποιηθεί με την χρήση ενός δεύτερου HTML table ο οποίος θα περιέχει ως στήλες το ID του προϊόντος το όνομα του την τιμή, την ποσότητα και το μερικό σύνολο. Το καλάθι αγορών θα βρίσκεται σε ένα div στο δεξί επάνω άκρο της σελίδας (top:0px; right:0px).
Εκτιμώμενος χρόνος λύσης: 45 λεπτά