Το παρακάτω διαδραστικό παράδειγμα παρουσιάζει έναν απλό Live Text Editor, δηλαδή ένα περιβάλλον όπου ο χρήστης μπορεί να τροποποιήσει κείμενο HTML και να δει άμεσα το αποτέλεσμα στο διπλανό «Live Preview» πλαίσιο.

Η διάδραση βασίζεται στην έννοια του άμεσου οπτικού ανατροφοδοτήματος (immediate visual feedback): κάθε αλλαγή στο αριστερό πεδίο κειμένου ενημερώνει αμέσως το περιεχόμενο στο δεξί πλαίσιο.

See the Pen Live Editor Example by Marios-Stephanidhs (@Marios-Stephanidhs) on CodePen.

Στόχος του παραδείγματος

Να γίνει κατανοητό πώς η άμεση ανατροφοδότηση και η τροποποίηση διεπαφής σε πραγματικό χρόνο ενισχύει τη διάδραση και διευκολύνει τον χρήστη να «πειραματιστεί» χωρίς διακοπή ροής.

Άσκηση

Τροποποιήστε τον κώδικα προσθέτοντας δεύτερο μικρότερο editor κάτω από τον πρώτο (π.χ. στο μισό ύψος) ο οποίος να ενημερώνει άλλο παράθυρο προεπισκόπησης.
Μπορείτε, για παράδειγμα, ο δεύτερος editor να αλλάζει το CSS ή να συμπληρώνει υποτίτλους / σημειώσεις που εμφανίζονται ξεχωριστά.

Ο στόχος είναι να επεκτείνετε το παράδειγμα δημιουργώντας δύο παράλληλες μορφές live-feedback.