Sustaining Cultures of Participation by Fostering Computational Thinking Skills through Game-Play Daniela Fogli, Federico Danesi Alessio Malizia, Tommaso Turchi, David Bell University of Brescia Brunel University Brescia, Italy London, UK daniela.fogli@unibs.it {alessio.malizia, tommaso.turchi, david.bell}@brunel.ac.uk ABSTRACT for example observed or interviewed; or may become a The adoption of a meta-design approach to system two-way communication in participatory design, where development opens up opportunities for transforming users are given a voice and can actively participate with consumer cultures to cultures of participation. To this end, their ideas in design decisions. In addition, nowadays there meta-design must create the conditions for such is a growing request of hardware and software systems that participation by supporting end users to appropriate the can be easily tailored and extended by end users at the use design skills necessary for system evolution, especially time. This is not only true for traditional information those related to Computational Thinking (CT), in new and systems [7] or spreadsheet-based applications [2], but also engaging modalities. In this paper, we propose a novel personal devices [6][11] and environments (the so-called approach to fostering CT skills that combines Game-Play "smart home") [3][5]. learning with Tangible User Interfaces and Virtual Reality (VR). In the resulting system, called TAPASPlay, two Meta-design has been proposed as a novel approach to players act as alchemists forging swords and shields to fight designing open systems that can progressively evolve in the each other. They build them through a puzzle-based hands of end users, by means of end-user development interaction with a tabletop interface, using smartphones as (EUD) methods and techniques [10]. In this way, meta- tangible objects. Finally, the players can enjoy the battle in design aims at sustaining a cultural transformation, by VR using Google Cardboards. In this way, players can supporting end users to become co-designers and end-user develop analysis, abstraction and problem solving abilities, developers [9]. On the one hand, such a progressive i.e. suitable CT skills for meta-design and supporting transformation from consumer cultures to cultures of cultures of participation. participation [8] is facilitated by current technological innovations, from Web 2.0, to the Internet of Things, to Author Keywords tangible interactive spaces [1][21]; on the other hand, End-user development; meta-design; computational however, not all end users are ready today for such a thinking; game-based learning; tangible interaction. transformation or willing to acquire the new skills ACM Classification Keywords necessary for an effective participation. To this end, meta- H.5.m. Information interfaces and presentation (e.g., HCI): design is also concerned with the creation of the social Miscellaneous. conditions for end-user participation at design and use time, by sustaining end users to appropriate the design culture INTRODUCTION and the technical notions necessary for system evolution User-centered design and participatory design are usually [4]. To create such social conditions, meta-design should advocated as successful approaches to designing systems transfer to the end users those Computational Thinking that properly fit with users' work practices, preferences and (CT) skills [22] that can be useful to sustain cultures of needs. Both approaches foresee user involvement at design participation. time to inform designers about system functional and non- functional requirements. Such an involvement may be CT skills are typical of programmers and software regarded as a one-way communication (from users to designers and, even though a unique definition does not yet designers) in case of user-centered design, where users are exist, we can sum up most of literature attempts to define CT skills in a set comprising abstraction, algorithmic thinking, decomposition, and problem solving. Mastering those skills lowers the learning barrier when approaching a programming activity. For this reason, traditional approaches to teaching CT skills involve visual programming languages, such as Scratch [18], or game design activities, such as AgentSheets [16], properly oriented to teach the concepts underlying imperative GHITALY17: 1st Workshop on Games-Human Interaction, April 18th, 2017, Cagliari, Italy. programming (symbolic representation, conditionals, loops, Copyright © 2017 for the individual papers by the papers' authors. Copying operators, etc.). These “making” activities [14] encourage permitted for private and academic purposes. This volume is published and copyrighted by its editors. to cohesively combine multiple ideas into an organized . process to produce an artifact that solves problems. Indeed, acquiring CT skills the end user would be able to CT skills go beyond programming constructs understand, participate and trust algorithmic solutions and ("conceptualizing, not programming" [22]): in her original thus play a much relevant active role in the meta-design definition, Wing assumes a higher-level perspective, discourse. arguing that CT skills create a new mindset oriented The paper is organized as follows: the following section towards problem solving, thanks to the ability of thinking at contextualizes and compares the approach presented here different levels of abstraction and at decomposing problems with recent literature work; then we describe TAPASPlay into sub-problems [22]. This can bring several benefits in and the phases of the gameplay; finally, the last section everyday life, including, in our opinion, a more effective discusses the main features of the system and draws some participation by end users in the design and development of conclusions. their systems both at design time and use time. GAME-BASED LEARNING Starting from Wing’s ideas, Repenning and colleagues Digital games proved attractive and engaging for all groups modeled computational thinking as an iterative process of people and therefore, Game-Based Learning (GBL) has structured in three stages [17]: 1) problem formulation, been proposed as one pedagogical framework for namely a verbal or diagrammatic conceptualization of the developing CT skills [12]. In order to help acquiring CT problem, where abstraction plays a fundamental role; 2) skills two main approaches have been introduced in GBL: solution expression, when the solution is formulated in a learning through designing games and learning through way that can be understood by a computer (the most game-play. Whilst learning by designing games has been common, but not unique, tool used in this stage is studied quite extensively (e.g. Scratch, Alice and programming); 3) execution and evaluation, i.e. those AgentSheets), the game-play approach is relatively new, activities allowing one to visualize and assess the outcome especially in light of employing it to improve CT skills. of the other two stages. As an example, Program Your Robot [13] is a recent game In this paper, we describe TAPASPlay, an extension of prototype developed to support players in practicing the TAPAS (TAngible Programmable Augmented Surface) five core skills that the authors identified as fundamental [20][21], specifically designed to foster CT skills through a for computational thinking, namely problem solving, game-based learning approach, by favoring the CT iterative building algorithms, debugging, simulation and socializing. process described in [17]. TAPASPlay is based on the It is a puzzle solving game in which the player has to assist alchemist’ metaphor: two players compete to be the best a robot to reach a certain point on a grid. The robot will alchemist and, by applying transformations on metals, they follow very simple instructions given in the form of an forge swords and shields to fight each other. Like TAPAS, algorithm, while the score depends on conditions, for TAPASPlay adopts a puzzle-based interaction with a example if two functions have been declared before being tabletop surface, where a smartphone plays the role of called in the algorithm. It differs from the software tangible object used for dragging and dropping digital applications for game design mentioned before, since those objects that will make up the swords. The final battle is ones can be deemed programming languages to all effects, eventually enjoyed in Virtual Reality (VR) by wearing while Program Your Robot is conceived as a serious game. Google cardboards. But above all, tools like Scratch were designed in order to TAPASPlay has been designed to help bridging the gap teach the basics of programming and to show how fun it between the end user and the designer roles. Ideally, in the can be. Instead, Kazimoglu and his colleagues [13] were meta-design discourse, the user would be able to grasp moved by the goal of creating a game that could explicitly different aspects of the system (from features, to standards, foster CT skills. to usability issues) and actively contribute to the design CTArcade [15] is another serious game designed with the itself. Unfortunately, there are some language and target of boosting computational thinking in players by conceptual barriers that prevent the end-user letting them formalize their tacit knowledge and make a communication with technologists (i.e. software engineers). step towards abstraction. In CTArcade users have to Understanding an algorithmic solution to a problem and implement a set of rules that are observed by a character thus being able to participate in the selection of the right while playing Tic-Tac-Toe. Making these rules explicit is solution by helping modeling the problem is a very relevant considered a very important process, because people often activity in a meta-design approach, but in our opinion apply them in a natural, perhaps unconscious way and requires exactly those CT skills mentioned above. normally there is neither occasion nor reason to transform Furthermore, our everyday life depends more and more on this knowledge into abstract instructions. algorithms [19]: think about how many times a day we These systems use a traditional interaction style based on interact with algorithms, from automatic checkouts in keyboard and mouse; on the contrary, even though supermarkets and e-banking to booking a flight online (and TAPASPlay shares with them the same goal, that is during that same flight as well: in fact, 95% of the whole fostering CT skills through a game-play approach, it journey is flown by an autopilot running an algorithm). By leverages on an interaction style that relies on the use of Forging swords tangible objects and virtual reality. TAPASPlay fits also During the first phase, each half of the tabletop screen is within the realm of Constructionist Video Games [25], available for a player to define three offensive strategies, namely designed computational environments in which which will be visualized as three swords. In order to players construct personally meaningful artifacts to accomplish that, players have to attach transformations, overcome artificial conflicts or obstacles resulting in represented as pieces of a puzzle, to a halo surrounding the quantifiable outcomes. smartphone of the user on the main display. The halo, with its three hilts, follows the movement of the dragged TAPASPLAY smartphone and, when a collision with a puzzle piece is The novelty of TAPASPlay is to combine game-play with detected, such piece is attached to the vertically oriented tangible user interfaces and Virtual Reality to teach CT hilt under some given conditions. The three swords are skills. The game is intended for an audience with little or no defined one at a time. For example, in Figure 1, each player experience in programming, which is trained in such is creating his/her first sword. computational abilities to become able to participate in system design and end-user development activities. TAPASPlay has been developed starting from TAPAS [21], an End-User Programming (EUP) platform for pervasive display repurposing in the wild. Therefore, as for TAPAS the interaction with TAPASPlay requires a pervasive display or a tabletop surface, an RGB camera and a smartphone. The smartphone is used both as a computing device and as a tangible object, and its movements on the display or surface are tracked by the RGB camera that locates the position of a fiducial marker displayed on the phone screen and uses it as reference point. TAPASPlay has been implemented as a web application that is projected on the pervasive display or tabletop surface and is able to interact with the players’ smartphones. Differently from TAPAS, TAPASPlay can be regarded as a constructionist Figure 1. Forging swords through tangible and puzzle-like interaction. video game aimed at satisfying the following requirements: Each strategy is a sequence of transformations taken from a • It must provide both an entertaining and an educational randomly generated set shown on the main display (Fig. 2). experience. The latter has the goal of fostering Computational Thinking skills, while the use of Virtual Reality should boost the players’ engagement. • The game must feature a metaphor suitable to a VR representation, which can be visualized by wearing affordable goggles (e.g. Cardboards by Google). • The interaction with the game should be based on a puzzle metaphor, like the original TAPAS system. This means that TAPASPlay has to communicate the existence of constraints and to support the gameplay through puzzle pieces and their shapes, aiding users whilst giving constraints in their selection process. TAPASPlay is thus a game to be played in a player versus player modality. Players compete to be the best alchemist forging three swords and three shields, made of three different metals. The game features three phases: Figure 2. Defining an offensive strategy: the set of 1. defining the offensive strategies, by means of forging transformations is displayed, as well as the main halo with swords; three hilts and the final piece. 2. defining the defensive strategies, by means of forging A hilt attached to the main halo surrounding the player’s shields; smartphone represents the start of a sequence (Fig. 3(a)), 3. visualizing the representation of a battle in a VR while the final piece has a shape that resembles the tip of a headset. sword (Fig. 3(b)). The initial state of each sword consists of an output shape attached to a hilt on the halo, an amount of force points, and an amount of energy points. The final state is reached when the player is satisfied with its sequence of transformations and decides to – and can – attach the final piece to the sword. This is a special transformation that does not modify force nor energy points, but only suggests the final constraint on the sequence - Fig. 3(b). (a) (b) Figure 3. (a) An example of initial state of the sword, (b) an example of final piece. Each sword is made of a different type of metal, determined by the shape of the final puzzle piece (e.g., in Fig. 3(b) the shape of the final piece is triangular). Every puzzle piece has an input and an output shape. There are three shapes in total, round, square and triangular, which in turn correspond to three types of metal, namely bronze, iron and steel. So, if a puzzle piece has a round input shape and a triangular output shape as in Fig. 4(a), it is equivalent to a transformation that turns bronze into steel. The aim of this first phase is to maximize the force points (a) (b)) of each sword, which can be earned by attaching transformations to the sequence. However, every Figure 4. (a) An example transformation, (b) the energy and transformation consumes an amount of energy points. More force points shown on the smartphone. precisely, a transformation is a tuple of four values: 1) an Forging shields input shape, 2) an output shape, 3) an amount of energy The defensive strategy consists of allocating an amount of points, displayed on the transformation (left half in Fig. defense points into three shields, each one corresponding to 4(a)), and 4) the force points gained, displayed on the a different metal just like the swords, through an interface transformation as well (right half in Fig. 4(a)). displayed on the smartphone. The choice should be based In order to apply a transformation at a certain stage of the on a couple of considerations: how the player guesses the strategy, two conditions need to be fulfilled: 1) the input opponent distributed force points on the different swords shape of the transformation is the same as the output shape and the transformations chosen for building her/his own of the last transformation attached to the sequence (or, if the swords. For instance, if a player struggled to compose the transformation applied is the first of the sequence, the input strategy for the bronze sword, then he/she might consider shape has to be the same as the output shape of the initial allocating most of defense points into the bronze shield, in state); 2) the alchemist must have an amount of energy order to counterpoise her/his weak offensive strategy. points greater or equal than the one showed on the Enjoying the battle in VR transformation. Once a transformation is applied (supported When both the previous game phases terminate, an Android by a "magnetic effect" on the puzzle piece provided by the application showing the resulting Virtual Reality video system), the energy points of the alchemist are decreased by becomes available from the server. By receiving the score the energy points of the transformation, while the force of the game from the web application, the server provides points of the strategy can be increased, decreased or each player with a different video to be played. For multiplied, depending on the operation suggested by the instance, if Player 1, who used the halo with blue hilts, transformation. managed to reach the highest score, the video will show a Players can see a feedback of their operation on their knight wearing a blue armor defeating the opponent dressed smartphone, since force and energy points presented on in red; otherwise a video with reversed roles will be played. their screen are updated according to the values displayed In order to correctly visualize the content of the app, both on the transformation. See for example Fig. 4(b), where the players are asked to wear goggles as Google Cardboard. correspondence between swords and values displayed on The VR video shows two knights armed with sword and the smartphone is given by the cue balls matching the gems shield. At the beginning, a button containing the text “Start” of the hilts showed on the halo. needs to be selected in order to play the animation. A pointer placed at the center of the user’s sight suggests that, to push the button, it is required to gaze at it. After having pressed the button, the two knights approach the center of composition from execution by offering two different the scene and, when they are close enough, they start interaction styles and tools: puzzle-based interaction with a dueling. They exchange a few hits for a little while, then the display/surface where a smartphone is used for composing knight on the left takes a few steps back, runs toward the the strategy (problem solving); whilst, VR is adopted for opponent and launches the decisive blow. The wounded checking solution execution. This mechanism fosters the knight falls on the ground and, while the winner cheers, a design-debug-run stages, three key aspects of Computational text appears on the background, confirming which player Thinking [13], or in other terms, the process of problem won (Fig. 5). formulation-solution expression-execution and evaluation [17]. Analysis, abstraction, decomposition, and automation all come into this game-play. While automation is supported by VR, analysis, abstraction and problem decomposition are types of reasoning that players are supposed to apply when trying to maximize the force points, under the constraints represented by shapes and limited energy points. As a matter of fact, the choice of displaying all transformations together at the start of the game makes deliberately complex for the player to formulate a straightforward solution. On the other hand, if the player is “lazy” and does not want to apply a methodic decomposition process, but merely tries to satisfy the constraints, a solution would be reached, but chances that it is a good one are quite low, in terms of force points. Therefore, the player would try to “fix it” by analyzing it Figure 5. Visualizing the outome of the battle in VR: the duel and identifying the weakest subsequence of transformations. has ended with the victory of Player 1. Hence, the solution would be reformulated by replacing the DISCUSSION AND CONCLUSION poor part with a different sequence of pieces. This process The growing interest in Computational Thinking is also might be repeated several times, inducing the player to witnessed by very recent literature [23], which describes iteratively apply the model of computational thinking how CT is becoming more and more important in student process proposed in [17]. and teacher education. In this paper, we suggest that CT Let us notice that all the above skills are indeed crucial for skills are fundamental to sustain cultures of participation and the end users to play an active role in the algorithmic allow end users to collaborate to system design and solution proposed and discussed with technologists, evolution at use time. For this reason, contrarily to other therefore ultimately unveiling the end users’ inner model of block-based approaches, in TAPASPlay blocks do not the problem scenario tackled by the meta-design approach. represent programming statements (like for example, the "if- Lastly, Kazimoglu et al. [13] add also socialization to CT then" block in Scratch) but remain at a higher level of skills fostered by learning through game play. In abstraction, to promote problem decomposition abilities TAPASPlay, it is reasonable to expect that the gaming rather then programming ones. experience could lead users to socialize by sharing thoughts Like TAPAS, TAPASPlay considers tangible user interfaces about their approaches, thus stimulating cooperative strategy and physical object manipulation as fundamental tools to development useful in co-design processes. make user activities more engaging. Indeed, in a study with TAPASPlay is however a first proposal to fostering CT children aged 5-9, it has been demonstrated that tangible skills in end users. Experiments with domain experts and programming has the potential to help children cultivate industrial designers will be carried out in the next future to skills such as abstraction and problem decomposition [24]. demonstrate the validity of the idea. Furthermore, several Similarly, we would like to demonstrate in the future that extensions of TAPASPlay have been already planned, in end users can more easily acquire CT skills through tangible order to tailor the system to end users' characteristics and interaction, and thus become proficient in end-user introduce different levels of complexity in the game. At the development activities. In addition, TAPASPlay includes moment, only a VR simulation of the battle is available as Game-Based Learning to make the experience engaging and outcome of the game; however, the system could be social. In particular, we would like to contribute to the recent extended adding a more interactive functionality that better research trend that explores learning through game play resembles the debugging activity, in which players can [13], instead of learning through designing systems, as a compare step-by-step how they built their swords and new pedagogical approach to fostering CT skills. eventually see what was the optimal solution. In TAPAS a challenge was observed concerning the duality ACKNOWLEDGMENTS of composing and executing workflows, both requiring the We thank the University of Brescia and Brunel University use of tangible interaction through smartphone assuming London for supporting us in this collaboration with grant two different meanings, as tangible object and as source of “Bando Tesi all’estero 2016-2017” DR-291-2016. data [21]. On the contrary, TAPASPlay detaches REFERENCES 13. C. Kazimoglu, M. Kiernan, L. Bacon, L. MacKinnon,. 1. E. G. Arias, H. Eden, G. Fischer. The Envisionment Learning Programming at the Computational Thinking and Discovery Collaboratory (EDC): Explorations in Level via Digital Game-Play. Procedia Computer Human-Centered Informatics. San Rafael, California: Science, 9, pp. 522-531, 2012. Morgan & Claypool Publishers, 2016. 14. D. Kotsopoulos, L. Floyd, S. Khan, I.K. Namukasa, S. 2. M. Burnett. What is End-User Software Engineering Somanath, J. Weber, C. Yiu. A Pedagogical and Why Does It Matter? In: V. Pipek, M. B. Rossen, Framework for Computational Thinking, Digital B. deRuyter & V. Wulf (Eds.), End-User Development Experiences in Mathematics Education, pp.1-18, 2017. (pp. 15-28). Heidelberg: Springer, 2009. 15. T. Y. Lee, M. L. Mauriello, J. Ahn, B. B. Bederson, 3. F. Cabitza, D. Fogli, R. Lanzilotti, A. Piccinno. Rule- CTArcade: Computational thinking with games in based Tools for the Configuration of Ambient school age children, Int. Journal of Child-Computer Intelligence Systems: a Comparative User Study. Interaction 2, pp. 26-33, 2014. Multimedia Tools And Applications, 76(4), pp. 5221– 16. A. Repenning. AgentSheets®: an Interactive 5241, 2017. Simulation Environment with End-User Programmable 4. F. Cabitza, D. Fogli, A. Piccino. Fostering participation Agents. Interaction 2000, Tokyo, Japan, 2000. and co-evolution in sentient multimedia systems. 17. A. Repenning, A. Basawapatna and N. Escherle. Journal of Visual Languages and Computing, 25(6), Computational Thinking Tools. In Proceedings of pp. 684-694, 2014. IEEE Symposium on Visual Languages and Human- 5. J. Coutaz, J. L. Crowley. A First-Person Experience Centric Computing (VL/HCC 2016), pp. 218-222, with End-User Development for Smart Homes. IEEE 2016. Pervasive Computing, April-June, pp. 26-39, 2016. 18. M. Resnick, J. Maloney, A. Monroy-Hernández, N. 6. J. Donado, F. Paternò. Puzzle: A mobile application Rusk, E. Eastmond, K. Brennan, A. Millner, E. development environment using a jigsaw metaphor. Rosenbaum, J. Silver, B. Silverman, Y. Kafai. Scratch: Journal of Visual Languages and Computing, 25(4), programming for all. Communications of the ACM, pp. 297-315, 2014. 52(11), pp. 60-67, 2009. 7. C. Dörner, J. Heß, V. Pipek. Improving Information 19. B. Shneiderman, C. Plaisant, M. Cohen, S. Jacobs, N. Systems by End User Development: A Case Study. In Elmqvist, N. Diakopoulos. Grand challenges for HCI Proc. European Conference on Information Systems researchers. Interactions, pp. 24-25, 2016. (ECIS), St. Gallen, Switzerland, pp. 783-794, 2007. 20. T. Turchi, A. Malizia. Fostering computational 8. G. Fischer. Understanding, fostering, and supporting thinking skills with a tangible blocks programming cultures of participation. Interactions, 18(3), pp. 42-53, environment. In Proceedings of IEEE Symposium on 2012. Visual Languages and Human-Centric Computing 9. G. Fischer, D. Fogli, A. Piccinno. Revisiting and (VL/HCC 2016), pp. 232-233, 2016. Broadening the Meta-Design Framework for End- 21. T. Turchi, A. Malizia, A. Dix. TAPAS: A tangible User Development. In: F. Paternò and V. Wulf (Eds.), End-User Development tool supporting the repurposing New Perspectives in End-User Development, Springer, of Pervasive Displays. Journal of Visual Languages in press. and Computing, 2016, 39, pp. 66-77, 2016. 10. G. Fischer, E. Giaccardi. Meta-Design: A Framework 22. J. M. Wing. Computational thinking. Communications for the Future of End User Development. In H. of the ACM, 49(2), pp. 33-35, 2006. Lieberman, F. Paternò, V. Wulf (Eds.), End User 23. A. Yadav, C. Stepheson, H. Hong. Computational Development (Vol. 9, pp. 427-457). Dordrecht, The Thinking for Teacher Education. Communications of Netherlands: Springer, 2006. the ACM, 60(4), pp. 55-62, 2017. 11. R. Francese, M. Risi, G. Tortora, M. Tucci. Visual 24. D. Wang, T. Wang, Z. Liu. A Tangible Programming Mobile Computing for Mobile End-Users. IEEE Tool for Children to Cultivate Computational Transactions on Mobile Computing, 15(4), pp. 1033- Thinking. The Scientific World Journal, vol. 2014, 1046, 2016. Article ID 428080, 2014. 12. D. Holbert, N. R. Horn, M. S. Wilensky. 25. D. Weintrop, N. Holbert, M.S. Horn, U. Wilensky. Computational Thinking in Constructionist Video Computational thinking in constructionist video Games. International Journal of Game-Based Learning, games. International Journal of Game-Based Learning 6(1), pp. 1-17, 2016. (IJGBL), 6(1), pp.1-17, 2016.