Проєктування навчальної системи візуалізації роботи алгоритмів
Анотація
Розглянуто особливості проектування навчальної системи для студентів спеціальності 121 "Інженерія програмного забезпечення" У межах дисципліни "Алгоритми і структури даних". Мета системи – полегшити процес вивчення основних принципів роботи алгоритмів через динамічну візуалізацію їх кроків та подання інформаційної складової (покроковий опис алгоритму та загальна інформація про нього) до кожного з них. Проведено дослідження візуалізації як методу навчання. Виявлено основні проблеми студентів під час вивчення теоретичного матеріалу. Проаналізовано сучасні засоби візуалізації покрокової роботи алгоритмів, які можна використовувати у навчальному процесі. Встановлено основні завдання системи і розроблено основні вимоги до програмного продукту. На основі виконаних досліджень спроєктовано архітектуру системи, яка є гнучкою до змін у сфері навчання. Побудовано структуру компонент програмного додатку, діаграму розгортання, діаграму прецедентів, діаграму класів і діаграму станів системи. Систему реалізовано як статичний веб-сайт для зручного способу доступу до ресурсів. Для реалізації системи використано React-бібліотеку для створення графічних інтерфейсів. Для графічної візуалізації використовувався примітив html canvas, що дає змогу зображати 2D графіку на веб-сторінці. Усі алгоритми в системі розбиті на категорії, а саме: сортування, пошуку стрічки, пошуку шляху та алгоритми на деревах. Для зручності кожна категорія представлена окремою веб-сторінкою. Загалом розглянуто 24 алгоритми. Користувач має змогу виконувати алгоритми покроково або автоматично, коли система сама здійснює наступний крок із певним заданим користувачем часовим інтервалом. Реалізована можливість виконання алгоритму у зворотному напрямку, Також користувач може згенерувати вхідні дані алгоритму або задати їх вручну. Розроблений веб-сайт є самодостатнім ресурсом для дистанційного вивчення дисципліни "Алгоритми і структури даних".
Завантаження
Посилання
Auden, E., Toutain, T., & Zharkov, S. (2007). eSDO algorithms, data centre and visualization tools. Astronomical Notes, 328(3-4), 356–361. https://doi.org/10.1002/asna.200610742
Carlos, A. S., Oliveira, Panos, M. Pardalos, & Prokopyev, O. A. (2007). Data Structures and Algorithms. Wiley Encyclopedia of Computer Science and Engineering. https://doi.org/10.1002/9780470050118.ecse097
Craig, Larman, & Kent, Beck. (2004). Applying UML and Patterns: An Introduction to Object-Oriented Analysis and Design and Iterative Development, 3rd edition. Great Britain: Pearson, 736. [In English].
Donald, Knuth. (2021). Art of Computer Programming, Volume 3: Sorting and Searching. Kyiv: Dialektyka, 832. [In Ukrainian].
Evergreen, S., & Metzner, C. (2013). Design Principles for Data Visualization in Evaluation. New Dir. Eval. 2013(140), 5–20. https://doi.org/10.1002/ev.20071
Frits, H. Post. (2011). Data Visualization: Featuring Interactive Visual Analysis. Computer Graphics Forum, 30(2). https://doi.org/10.1111/j.1467-8659.2011.01911.x
Kukharenko, V. M. (2020). Development of a modern e-learning system in the university. Ukrainian Journal of Information Technologies, 2(1), 95–102. https://doi.org/10.23939/ujit2020.02.095
Linsiya, Patrao. (2019). Needs and Benefits of Data Visualization. Edureka! Ebook (New). Data Visualization with Tableau. Retrieved from: https://www.edureka.co/blog/needs-and-benefits-of-data-visualization/
Miles, R., & Hamilton, K. (2006). Learning UML 2.0: A Pragmatic Introduction to UML. California: OReilly Media, 290. [In English].
Peter, Brown, Henry, Roediger, & Mark, McDaniel. (2019). Make it stick. The Science of Successful Learning. Kyiv: Nash Format, 240. [In Ukrainian].
Scott, Berinato. (2022). Good Charts Workbook: Tips, Tools, and Exercises for Making Better Data Visualizations. Kyiv: ArtHuss, 288. [In Ukrainian].
Shakti, Gawain. (2010). Creative Visualization: Use the Power of Your Imagination to Create What You Want in Your Life. California: New World Library, 192. [In English].
Website. (2022). Algoexpert.io. Streamlined platform for learning algorithms. Retrieved from: https://www.algoexpert.io/product. [In English].
Website. (2022). An example of visualization of algorithms. Retrieved from: https://algorithm-visualizer.org. [In English].
Website. (2022). An example of visualization of algorithms. Retrieved from: https://clementmihailescu.github.io/Pathfinding-Visualizer/. [In English].
William, Lidwell, Kritina, Holden, & Jill, Butler. (2010). Universal Principles of Design: 125 Ways to Enhance Usability. Cummings Center: Rockport Publishers, 280. [In English].
Zac, Gordon, Mikall, Angela, Hill, & Robbie, Adair. (2019). React Explained: Your Step-by-Step Guide to React. Independently published, 366. [In English].
Авторське право (c) 2018 http://creativecommons.org/licenses/by/4.0
Ця робота ліцензується відповідно до Creative Commons Attribution 4.0 International License.
