Abstract
Image-text conversion for web-based drawing involves mental activities of reification which sometimes leads students fluent in graphical hand skills to find it difficult to learn program code drawing. 35 people completed experiments on Topics 1 and 2 and 30 people completed experiments on Topics 1 to 3 on webpage design. A pretest and posttest determined their learning style (visual or verbal), basic programming ability, and cognitive abilities (including logical reasoning, figural flexibility, and spatial perception—orientation and measurement). Statistical analyses and semi-structured interviews examined student performance. Students with different learning styles and different cognitive abilities displayed significant differences in the three topics. K-means clustering demonstrated the originality, aesthetic sophistication, and level of interaction to be critical yardsticks in measuring programming learning achievement. This research demonstrates factors that influence the learning of web-based drawing and offers new opportunities for understanding how front-end engineer novices can apply computational thinking skills to implement webpage design. Specifically, mental models may be integrated by graphical, heuristic, abstract, and sequential thinking in turn to solve problems in web-based drawing.






Similar content being viewed by others
Explore related subjects
Discover the latest articles, news and stories from top researchers in related subjects.Data availability
Data is available on request due to privacy or other restrictions. The data that support the findings of this study are available on request from the corresponding author KC Wu. The data are not publicly available due to them containing information that could compromise research participant privacy/consent.
References
Abrahamson, D., & Abdu, R. (2021). Towards an ecological-dynamics design framework for embodied-interaction conceptual learning: The case of dynamic mathematics environments. Educational Technology Research and Development, 69, 1889–1923. https://doi.org/10.1007/s11423-020-09805-1
Allsop, Y. (2019). Assessing computational thinking process using a multiple evaluation approach. International Journal of Child-Computer Interaction, 19, 30–55.
Argüero, M. E., & Rojas, R. (2004). Learning algorithms with an electronic chalkboard over the web. In: Liu W., Shi Y., Li Q. (eds) Advances in Web-Based Learning – ICWL 2004. ICWL 2004. Lecture Notes in Computer Science, 3143. Springer, Berlin, Heidelberg. https://doi.org/10.1007/978-3-540-27859-7_1
Arora, A. S., Leseane, R., & Raisinghani, M. S. (2011). Learning and teaching styles for teaching effectiveness: An empirical analysis. International Journal of Web-Based Learning and Teaching Technologies (IJWLTT), 6(1), 1–13.
Atun, H., & Usta, E. (2019). The effects of programming education planned with the TPACK framework on learning outcomes. Participatory Educational Research, 6(2), 26–36. https://doi.org/10.17275/per.19.10.6.2
Baker, L. M. (2006). Observation: A complex research method. Library Trends, 55, 171–189.
Banic, A., & Gamboa, R. (2019). Visual design problem-based learning in a virtual environment improves computational thinking and programming knowledge. Paper presented at the 2019 IEEE Conference on Virtual Reality and 3D User Interfaces (VR), 1588–1593.
Baukal, C. E., Jr., & Ausburn, L. J. (2017). Working engineers’ multimedia type preferences. Australasian Journal of Engineering Education, 22(2), 63–72.
Biederman, I. (1987). Recognition-by-components: A theory of human image understanding. Psychological Review, 94(2), 115–147. https://doi.org/10.1037/0033-295X.94.2.115
Bosse, Y., Redmiles, D., & Gerosa, M. A. (2019). Pedagogical content for professors of introductory programming courses. Paper presented at the 2019 ACM Conference on Innovation and Technology in Computer Science Education.
Bruce, K. B., & Foster, J. N. (2004). Looj: Weaving loom into java. ECOOP.
Burrows, A., Lima, F., Pessoa, R., José, R., & Trigueiros, P. (2022). Growing Knowledge Across Boundaries: Lessons from a Multi-Actor Design Project. In Perspectives on Design and Digital Communication III (pp. 375–391). Springer, Cham.
Çakiroğlu, Ü., & Çevik, İ. (2022). A framework for measuring abstraction as a sub-skill of computational thinking in block-based programming environments. Education and Information Technologies. https://doi.org/10.1007/s10639-022-11019-2
Cetin, I., Sendurur, E., & Sendurur, P. (2014). Assessing the impact of meta-cognitive training on students’ understanding of introductory programming concepts. Journal of Educational Computing Research, 50(4), 507–524.
Chandrasegaran, S. K., Badam, S. K., Kisselburgh, L. G., Peppler, K. A., Elmqvist, N., & Ramani, K. (2017). VizScribe: A visual analytics approach to understand designer behavior. International Journal of Human-Computer Studies, 100, 66–80.
Chang, H.-Y., Lin, T.-J., Lee, M.-H., Lee, S.W.-Y., Lin, T.-C., Tan, A.-L., & Tsai, C.-C. (2020). A systematic review of trends and findings in research employing drawing assessment in science education. Studies in Science Education, 56(1), 77–110.
Colby, C. L. (2009). Spatial cognition. Encyclopedia of Neuroscience, 165–171. https://doi.org/10.1016/B978-008045046-9.01120-7
Connolly, P., & Maicher, K. (2005). The development and testing of an interactive web based tutorial for orthographic drawing instruction and visualization enhancement. Paper presented at the 2005 Annual Conference, Portland, Oregon. https://doi.org/10.18260/1-2--14512
Cooper, M. M., Stieff, M., & DeSutter, D. (2017). Sketching the invisible to predict the visible: From drawing to modeling in chemistry. Topics in Cognitive Science, 9(4), 902–920.
Creswell, J. W., & Creswell, J. D. (2017). Research design: Qualitative, quantitative, and mixed methods approaches (4th ed.). Sage.
Cueva, R., Calderón, J., Salazar, D., & Grijalva, G. (2018). Learning style analysis of engineering and technology freshmen. Paper presented at the 2018 IEEE Integrated STEM Education Conference (ISEC).
Davis, N., Hsiao, C.-P., Singh, K. Y., Li, L., Moningi, S., & Magerko, B. (2015). Drawing apprentice: An enactive co-creative agent for artistic collaboration. Paper presented at the Proceedings of the 2015 ACM SIGCHI Conference on Creativity and Cognition.
Demirkan, H. (2016). An inquiry into the learning-style and knowledge-building preferences of interior architecture students. Design Studies, 44, 28–51.
Deshpande, A., Esfahani, E. T., & Rai, R. (2014). Geons and non-accidental relations in 2d shape abstraction: a bci study. In International Design Engineering Technical Conferences and Computers and Information in Engineering Conference Vol. 46285. American Society of Mechanical Engineers.
Dou, Q., Zheng, X. S., Sun, T., & Heng, P. (2019). Webthetics: Quantifying webpage aesthetics with deep learning. International Journal of Human-Computer Studies, 124, 56–66.
Ekstrom, R. B., & Harman, H. H. (1976). Manual for kit of factor-referenced cognitive tests. Educational Testing Service.
Ericsson, K. A., & Simon, H. A. (1993). Protocol analysis: Verbal reports as data. the MIT Pres.
Evagorou, M., Erduran, S., & Mäntylä, T. (2015). The role of visual representations in scientific practices: From conceptual understanding and knowledge generation to ‘seeing’ how science works. International Journal of STEM Education, 2(1), 1–13.
Eysenck, M. W., & Keane, M. T. (2020). Cognitive psychology: A student’s handbook. Psychology press.
Feijs, L. M. (2019). A program for Victory Boogie Woogie. Journal of Mathematics and the Arts, 13(3), 261–285.
Felder, R. M., & Silverman, L. K. (1988). Learning and teaching styles in engineering education. Engineering Education, 78(7), 674–681.
Felder, R. M., & Soloman, B. A. (1991). Index of learning styles. North Carolina State University.
Garofalo, S. G., & Farenga, S. J. (2021). Cognition and spatial concept formation: Comparing non-digital and digital instruction using three-dimensional models in science. Technology, Knowledge and Learning., 26, 231–241. https://doi.org/10.1007/s10758-019-09425-6
Gomes, A., Areias, C., Henriques, J., & Mendes, A. J. (2008). Aprendizagem de programação de computadores: dificuldades e ferramentas de suporte. Revista Portuguesa de Pedagogia, 42(2), 161–179. https://doi.org/10.14195/1647-8614_42-2_9
Hansen, S. M. (2019). Assessing Graphic Designers’ Learning Style Profile to Improve Creative Coding Courses. In M. Tarini, & E. Galin (Eds.). The Eurographics Association. Eurographics 2019- Education papers 40, 41–44. https://doi.org/10.2312/eged.20191027
Hegarty, M., Montello, D. R., Richardson, A. E., Ishikawa, T., & Lovelace, K. (2006). Spatial abilities at different scales: Individual differences in aptitude-test performance and spatial-layout learning. Intelligence, 34(2), 151–176.
Hill, F., Tomkinson, B., Hiley, A., & Dobson, H. (2016). Learning style preferences: An examination of differences amongst students with different disciplinary backgrounds. Innovations in Education and Teaching International, 53(2), 122–134.
Hiort af Ornäs, V., & Keitsch, M. (2013). Teaching design theory: Scaffolding for experiential learning. Paper presented at the DS 76: Proceedings of E&PDE 2013, the 15th International Conference on Engineering and Product Design Education, Dublin, Ireland, 05–06.09. 2013.
Hooimeijer, F. L., Bricker, J., Pel, A. J., Brand, A. D., Van de Ven, F. H. M., & Askarinejad, A. (2022). Multi-and interdisciplinary design of urban infrastructure development. Proceedings of the Institution of Civil Engineers-Urban Design and Planning, 1–33.
Huang, Y.-C., Chan, J. Y.-H., & Hsu, J. (2018). Reflection before/after practice: Learnersourcing for drawing support. Paper presented at the Extended Abstracts of the 2018 CHI Conference on Human Factors in Computing Systems.
Hummel, J. E., & Biederman, I. (1992). Dynamic binding in a neural network for shape recognition. Psychological Review, 99(3), 480.
Jain, A. K., & Dubes, R. C. (1988). Algorithms for clustering data. Prentice-Hall Inc.
Jamshed, S. (2014). Qualitative research method-interviewing and observation. Journal of Basic and Clinical Pharmacy, 5(4), 87.
Jeon, M. P., Fiebrink, R., Edmonds, E. A., & Herath, D. C. (2019). From rituals to magic: Interactive art and HCI of the past, present, and future. International Journal of Human-Computer Studies, 131, 108–119.
Jørgensen, A. H. (1990). Thinking-aloud in user interface design: A method promoting cognitive ergonomics. Ergonomics, 33(4), 501–507.
Katai, Z. (2015). The challenge of promoting algorithmic thinking of both sciences- and humanities-oriented learners. Journal of Computer Assisted Learning, 31(4), 287–299. https://doi.org/10.1111/jcal.12070
Keefe, J. W. (1988). Profiling and utilizing learning style. National Association of Secondary School Principals.
Keefe, J. W. (1979). Learning style: An overview. NASSP's Student learning styles: Diagnosing and proscribing programs (pp. 1–17). Reston, VA. National Association of Secondary School Principle. Retrieved December 12, 2013.
Kodinariya, T. M., & Makwana, P. R. (2013). Review on determining number of Cluster in K-Means Clustering. International Journal, 1(6), 90–95.
Kolb, D. A. (2014). Experiential learning: Experience as the source of learning and development. Pearson FT Press.
Kuri, N. P., & Truzzi, O. M. S. (2002). Learning styles of freshmen engineering students. Paper presented at the Proceedings, 2002 International Conference on Engineering Education.
Lai, C.-F., Jeng, Y.-L., & Huang, S.-B. (2020). Improving programming skills: The use of learning style theory and the instant response supplement tool. Library Hi Tech. https://doi.org/10.1108/LHT-03-2020-0059
Laksana, D. N. L., Dasna, I. W., Degeng, I., & Sudana, N. (2019). The effects of inquiry-based learning and learning styles on primary school students’ conceptual understanding in multimedia learning environment. Journal of Baltic Science Education, 18(1), 51–62.
Lazonder, A. W., & Rouet, J.-F. (2008). Information problem solving instruction: Some cognitive and metacognitive issues. Computers in Human Behavior, 24(3), 753–765.
Lewis, C. (1982). Using the" thinking-aloud" method in cognitive interface design. IBM TJ Watson Research Center.
Liu, E. Z. F., & Lin, S. S. (2007). Relationship between peer feedback, cognitive and metacognitive strategies and achievement in networked peer assessment. British Journal of Educational Technology, 38(6), 1122–1125.
Liu, P. (2011). The Influence of Computer Technology in Modern Design Education. Paper presented at the International Conference on Information and Business Intelligence.
Mantziou, O., Papachristos, N. M., & Mikropoulos, T. A. (2018). Learning activities as enactments of learning affordances in MUVEs: A review-based classification. Education and Information Technologies, 23, 1737–1765. https://doi.org/10.1007/s10639-018-9690-x
Mason, J. (2002). Linking qualitative and quantitative data analysis. In Analyzing qualitative data (pp. 103–124). Routledge.
Mattson, M. P. (2014). Superior pattern processing is the essence of the evolved human brain. Frontiers in Neuroscience, 8, 265. https://doi.org/10.3389/fnins.2014.00265
McBride, D. M., & Dosher, B. A. (2002). A comparison of conscious and automatic memory processes for picture and word stimuli: A process dissociation analysis. Consciousness and Cognition, 11(3), 423–460.
Meier, M., Haschke, R., & Ritter, H. (2012). Reification through perceptual grouping. In 2012 12th IEEE-RAS International Conference on Humanoid Robots (Humanoids 2012) (pp. 612–617). IEEE.
Meng, S. (2020). Noise Elimination and Contour Detection Based on Innovative Target Image Contour Coding Algorithm. Shock and Vibration. https://doi.org/10.1155/2020/8895000
Miles, M. B., Huberman, A. M., & Saldaña, J. (2018). Qualitative data analysis: a methods sourcebook (4th ed.). Sage publications Inc.
Mitchelmore, M. C., & White, P. (1995). Abstraction in mathematics: Conflict, resolution and application. Mathematics Education Research Journal, 7(1), 50–68. https://doi.org/10.1007/BF03217275
Mix, K. S., & Cheng, Y.-L. (2012). The relation between space and math: Developmental and educational implications. Advances in Child Development and Behavior, 42, 197–243.
Morelli, T., & Egbert, D. (2007). Game teleporter: A development tool for everyone. Paper presented at the 2007 37th Annual Frontiers In Education Conference-Global Engineering: Knowledge Without Borders, Opportunities Without Passports.
Morgan, D. (1994). The rise and fall of abstraction in eighteenth-century art theory. Eighteenth- Century Studies, 27(3), 449–478. https://doi.org/10.2307/2739364
Moskal, A. C. M., Gasson, J., & Parsons, D. (2017). The'art'of programming: Exploring student conceptions of programming through the use of drawing methodology. Paper presented at the Proceedings of the 2017 ACM Conference on International Computing Education Research.
Nouri, J., Zhang, L., Mannila, L., & Norén, E. (2020). Development of computational thinking, digital competence, and 21st-century skills when learning to program in K-9. Education Inquiry, 11(1), 1–17. https://doi.org/10.1080/20004508.2019.1627844
Ovesen, N. (2014). Accommodating Different Learning Styles: Bridging Math and Form. Paper presented at the Design Education & Human Technology Relations: Proceedings of the 16th International Conference on Engineering and Product Design Education.
Paivio, A. (1990). Mental representations: A dual coding approach. Oxford University Press.
Paivio, A. (1991). Dual coding theory: Retrospect and current status. Canadian Journal of Psychology/revue Canadienne De Psychologie, 45(3), 255.
Paivio, A. (2013). Imagery and verbal processes. Psychology Press.
Pedersen, S., & Liu, M. (2003). Teachers’ beliefs about issues in the implementation of a student-centered learning environment. Educational Technology Research and Development, 51(2), 57.
Peña-Ayala, A. (2015). Metacognition: Fundaments, applications, and trends. Springer.
Polat, E., & Yilmaz, R. M. (2022). Unplugged versus plugged-in: Examining basic programming achievement and computational thinking of 6th-grade students. Education and Information Technologies. https://doi.org/10.1007/s10639-022-10992-y
Quillin, K., & Thomas, S. (2015). Drawing-to-learn: a framework for using drawings to promote model-based reasoning in biology. CBE—Life Sciences Education, 14(1), es2.
Quinn, M. M., Smith, T., Kalmar, E. L., & Burgoon, J. M. (2018). What type of learner are your students? Preferred learning styles of undergraduate gross anatomy students according to the index of learning styles questionnaire. Anatomical Sciences Education, 11(4), 358–365.
Raptis, G. E., Fidas, C. A., & Avouris, N. M. (2016). Using eye tracking to identify cognitive differences: A brief literature review. Paper presented at the Proceedings of the 20th Pan-Hellenic Conference on Informatics.
Rum, S. N. M., & Ismail, M. A. (2017). Metocognitive support accelerates computer assisted learning for novice programmers. Journal of Educational Technology & Society, 20(3), 170–181.
Selby, C. C. (2015). Relationships: computational thinking, pedagogy of programming, and Bloom's Taxonomy. Paper presented at the Proceedings of the Workshop in Primary and Secondary Computing Education.
Sengupta, P., Farris, A. V., & Wright, M. (2012). From agents to continuous change via aesthetics: Learning mechanics with visual agent-based computational modeling. Tech Know Learn, 17, 23–42. https://doi.org/10.1007/s10758-012-9190-9
Sharma, K., Mangaroska, K., Berkel, N. V., Giannakos, M., & Kostakos, V. (2021). Information Flow and Cognition affect each other: Evidence from Digital Learning. International Journal of Human-Computer Studies, 146, [102549]. https://doi.org/10.1016/j.ijhcs.2020.102549
Shikata, Y., Jyo, G., & Takahashi, Y. (2009). Visual web-based communication system using database of minute segments. Proceedings of the IADIS International Conference on WWW/Internet. WWW/Internet 2009. 52–56. IADIS. ISBN:978-972-8924-93-5
Sinico, M. (2021). Scientific phenomenology in design pedagogy: The legacy of walter gropius and gestalt psychology. International Journal of Art & Design Education, 40(1), 99–107.
Stamouli, I., & Huggard, M. (2006). Object oriented programming and program correctness: the students' perspective. Paper presented at the Proceedings of the Second International Workshop on Computing Education Research.
Suhartono, S., Mulyanti, D., Purwadhi, Agusiady, R., Dwi Jayanti Suhandoko, A., & Hanafi (2020). The integration of science material, technology and society from dual coding theory’s perspective in distance education module. International Journal of Advanced Science and Technology, 29(05), 4649–4659. http://sersc.org/journals/index.php/IJAST/article/view/13793
Sun, L., Guo, Z., & Zhou, D. (2022). Developing K-12 students’ programming ability: A systematic literature review. Education and Information Technologies. https://doi.org/10.1007/s10639-022-10891-2
Teng, C.-H., Chen, J.-Y., & Chen, Z.-H. (2018). Impact of augmented reality on programming language learning: Efficiency and perception. Journal of Educational Computing Research, 56(2), 254–271.
Umapathy, K., Ritzhaupt, A. D., & Xu, Z. (2020). College students’ conceptions of learning of and approaches to learning computer science. Journal of Educational Computing Research, 58(3), 662–686.
Wagner, R. K., & Sternberg, R. J. (1984). Alternative conceptions of intelligence and their implications for education. Review of Educational Research, 54(2), 179–223.
Wallace, S., Le, B., Leiva, L. A., Haq, A., Kintisch, A., Bufrem, G., & Huang, J. (2020). Sketchy: Drawing inspiration from the crowd. Proceedings of the ACM on Human-Computer Interaction, 4(CSCW2), 1–27.
Wang, L., & Li, J. (2019). Development of an innovative dual-coded multimedia application to improve reading comprehension of students with imagery deficit. Journal of Educational Computing Research, 57(1), 170–200.
Wileman, R. E. (1993). Visual communicating. Educational Technology.
Wright, J. (2017). Drawing links within dental education. Technology, Knowledge and Learning, 22, 173–184. https://doi.org/10.1007/s10758-016-9295-7
Xu, Z., Ritzhaupt, A. D., Umapathy, K., Ning, Y., & Tsai, C.-C. (2021). Exploring college students’ conceptions of learning computer science: A draw-a-picture technique study. Computer Science Education, 31(1), 60–82.
Yang, F. C., & Lynch, R. (2015). The relationship between learning style preference for computer drawing and learning outcomes in a computer aided design course at a computer training center in Taiwan. Scholar: Human Sciences, 6(2). Retrieved from http://www.assumptionjournal.au.edu/index.php/Scholar/article/view/648
Yang, C., & Yu, Q. (2021). Invariant multiscale triangle feature for shape recognition. Applied Mathematics and Computation, 403, 126096.
Yeh, H.-Y., Tsai, Y.-H., Tsai, C.-C., & Chang, H.-Y. (2019). Investigating students’ conceptions of technology-assisted science learning: A drawing analysis. Journal of Science Education and Technology, 28(4), 329–340.
Yunus, S.R., Tawil, M., Muhiddin, N.H., Muhiddin, S., & Alim, M.H. (2021). Describing Representation Ability of Prospective Science Teacher Based on Learning Style. Journal of Physics: Conference Series, 1899.
Zhang, J., Taarnby, R., Liapis, A., & Risi, S. (2015). DrawCompileEvolve: Sparking interactive evolutionary art with human creations. Paper presented at the International Conference on Evolutionary and Biologically Inspired Music and Art.
Zhong, B., Xia, L., & Su, S. (2022). Effects of programming tools with different degrees of embodiment on learning Boolean operations. Education and Information Technologies. https://doi.org/10.1007/s10639-021-10884-7
Zuberu, M.B., Gunu, I.M., & Alimatu, I.C. (2019). Choice of learning styles among tertiary students in the Tamale metropolis. Universal Journal of Educational Research, 7(6), 1347–1355. https://www.hrpub.org/download/20190530/UJER2-19513172.pdf
Author information
Authors and Affiliations
Corresponding author
Ethics declarations
Conflicts of interest
The authors have no affiliations with or involvement in any organization or entity with any financial interest (such as honoraria; educational grants; participation in speakers' bureaus; membership, employment, consultancies, stock ownership, or other equity interest; and expert testimony or patent-licensing arrangements), or non-financial interest (such as personal or professional relationships, affiliations, knowledge or beliefs) in the subject matter or materials discussed in this manuscript.
The authors have no affiliation or involvement in an organization or entity with a financial or non-financial interest in the subject matter or materials discussed in this manuscript.
The authors did not involve the participation of human participants and/or animals, which are normal teaching research in natural situations. (such as uses the methods of observation, intervention, interaction, or the use of personal data that has been de-identified with the consent of the individual, and conducts systematic investigations related to the individual or group or knowledge exploration activities in professional disciplines).
Additional information
Publisher's note
Springer Nature remains neutral with regard to jurisdictional claims in published maps and institutional affiliations.
Rights and permissions
Springer Nature or its licensor (e.g. a society or other partner) holds exclusive rights to this article under a publishing agreement with the author(s) or other rightsholder(s); author self-archiving of the accepted manuscript version of this article is solely governed by the terms of such publishing agreement and applicable law.
About this article
Cite this article
Wang, CH., Wu, KC. & Jiang, WT. Web-based drawing for students with different learning styles and cognitive abilities. Educ Inf Technol 28, 9049–9079 (2023). https://doi.org/10.1007/s10639-022-11542-2
Received:
Accepted:
Published:
Issue Date:
DOI: https://doi.org/10.1007/s10639-022-11542-2