A web-based, modular toolkit for developing collaborative and flexible learning environments in Informatics

The CoTinker project addresses the development and design of an open source infrastructure that enables the development of new learning tools within computational thinking (CT) to support collaboration and flexibility in learning environments. The purpose of the CoTinker project is to establish an infrastructure that supports collaboration between researchers and teachers. A collaboration that enables a quick and efficient way to design innovative components for digital learning environments that are adapted to the needs of a Scandinavian learning context in upper secondary school. CoTinker is built on Webstrates and Codestrates. Webstrates is a web-based platform for building real-time collaborative software. Codestrates is a frame- work for building computational media on top of Webstrates

Project aim

CoTinker will contribute to research into the two-pronged strategy of 'integrating CT into subjects' and 'CT as a stand alone subject' in upper secondary education.The aim of the project it to develop an open source toolkit (CoTinker) to support teaching in CT and informatics in high school. The toolkit has been developed on the basis of a Danish didactics with a focus on collaboration, flexibility, creativity and computational expressiveness.

CoTinker

CoTinker is a web-based tool designed to support the facilitation of computational thinking learning activities. The design of CoTinker addresses challenges that arise in scaffolding computational thinking activities, collaboration between students, and technical integration between the different subactivities (coding, running a simulation, documenting work) of learning activities.

CoTinker’s central concept is the learning activity: An interactive digital document or a piece of computational media describing and containing the steps and materials involved in the activity. A master learning activity is created by an instructor and students copy one per group with its own unique URL and share it between them. Each student in a group opens this URL on their respective computers to participate. CoTinker requires the user to use both a phone and a PC simultaneously. When opening the URL for a learning activity on a PC, a QR-code is shown. Scanning this code on a mobile will navigate the browser to the same URL and establish a connection between the mobile and the PC and the student will hereby join the learning activity. If the browser tab is closed on the mobile phone the connection is closed and the PC will return to the screen showing the QR code.

A learning activity contains step-wise instructions accessed on a mobile phone and interactive elements such as editable code and a simulation viewed on a personal computer (PC) contained in slides. Students using the same learning activity will see the same steps at the same time and navigate between them together. Navigation is controlled from the mobile phone. If a student moves to the next step, all other students will be moved to the next step as well. A slide may contain static content (e.g., the front page of a learning activity) or interactive content such as the simulation view and/or editable code. Steps on the phone contain instructions and hyperlinks that, e.g., will highlight particular code in a slide on the PC and means for making short written comments.

Codestrates

Codestrates is a development platform for the Webstrates platform. With Codestrates, you can create dynamic webpages (or webstrates as we call them) that can be edited directly from within the browser — and editing can also be done collaboratively. Codestrates consists of three components: The Webstrates Package Manager, the Execution engine, and the authoring environment Cauldron. Together, the three components create a development platform for Webstrates on top of Webstrates.

Read more about codestrates

A multiplayer tank game implemented using Codestrates v2 and edited through Cauldron.

Webstrates

Webstrates is a platform to explore software as computational media. Webstrates is a webserver where the pages it serves are collaboratively editable. This means that modifications to the Document Object Model (DOM), for instance, using the developer tools of a web browser, are synchronized with the server and with all other clients currently visiting the same webpage. We call such a webpage a webstrate (short for web + substrate). By storing HTML, CSS, and JavaScript in the DOM this enables to create collaborative web applications. To get a quick overview of Webstrates, we recommend reading the blog article “A Brief Overview of Webstrates.”

Read more about webstrates

Contact

Clemens Nylandsted Klokmose
Associate Professor
Department of Computer Science

clemens@cs.au.dk

Line Have Musaeus
Postdoc
Department of Computer Science

lh@cs.au.dk

Thomas Thomsen
Research assistant
Department of Computer Science

thom@cs.au.dk

Project participants

This project is carried out as a collaboration with CAVI, School of Communation and Culture, Aarhus University. CAVI is a research center at the School of Communication and Culture, department of Digital Design and Information Studies, in collaboration with department of Computer Science. CAVI was established in 2001 as an interdisciplinary Human-Computer Interaction research centre across the Department of Information Studies and the Department of Computer Science, Aarhus University.

CoTinker is part of Center for Compuational Thinking and Design (CCTD), Aarhus University. CCTD was founded in 2018 to set the agenda for international research and to develop research-based education with an emphasis on digital technology (TechEd) to strengthen citizens' digital competences and their democratic participation in a digitalized society.

Funding partners

This project is funded by Novo Nordisk Foundation and initially funded by It-vest - networking universities, Aarhus

Papers

Line Have Musaeus, Marianne Graves Petersen, and Clemens Nylandsted Klokmose. 2024. Bringing Teachers and Researchers together through Participatory Design and Cooperative Prototyping in Computing Education. In Proceedings of the 55th ACM Technical Symposium on Computer Science. Link to paper

Nathalie Bressa, Susanne Bødker, Clemens Klokmose, Eva Eriksson. Common Objects for Programming Workshops in Non-Formal Learning Contexts. IFIP Conference on Human- Computer Interaction, Aug 2023, York, United Kingdom. pp.275-296, 10.1007/978-3-031-42280- 5_16 . hal-04377024. Link to paper

Line Have Musaeus, Marie-Louise Stisen Kjerstein Sørensen, Blanka Sára Palfi, Ole Sejer Iversen, Clemens Nylandsted Klokmose, and Marianne Graves Petersen. 2022. CoTinker: Designing a Cross-device Collaboration Tool to Support Computational Thinking in Remote Group Work in High School Biology. In Nordic Human-Computer Interaction Conference (NordiCHI ’22), October 8–12, 2022, Aarhus, Denmark. ACM, New York, NY, USA, 12 pages. https://doi.org/10.1145/3546155.3546709. Link to paper

Musaeus, L. H., Petersen, M. G., Klokmose, C. N., & Iversen, O. S. (2022, March). CoTinker-A Toolkit for Supporting Computational Thinking and Collaboration in High School Education. In Proceedings of the 53rd ACM Technical Symposium on Computer Science Education V. 2 (pp. 1025-1025). Link to paper

Marcel Borowski, Janus Bager Kristensen, Rolf Bagge, and Clemens N. Klokmose. 2021. Codestrates v2: A Development Platform for Webstrates. Technical Report. Aarhus University. https://pure.au.dk/portal/en/ publications/codestrates- v2- a- development- platform- for- webstrates(66e1d4d 9- 27da- 4f6b- 85b3- 19b0993caf22).html. Link to paper

Clemens N. Klokmose, James R. Eagan, Siemen Baader, Wendy Mackay, and Michel Beaudouin-Lafon. 2015. Webstrates: Shareable Dynamic Media. In Proceedings of the 28th Annual ACM Symposium on User Interface Software & Technology (UIST '15). Association for Computing Machinery, New York, NY, USA, 280–290. https://doi.org/10.1145/2807442.2807446. Link to paper