=Paper=
{{Paper
|id=Vol-1956/GHItaly17_paper_09
|storemode=property
|title=Sustaining Cultures of Participation by Fostering Computational Thinking Skills through Game-Play
|pdfUrl=https://ceur-ws.org/Vol-1956/GHItaly17_paper_09.pdf
|volume=Vol-1956
|authors=Daniela Fogli,Federico Danesi,Alessio Malizia,Tommaso Turchi,David Bell
|dblpUrl=https://dblp.org/rec/conf/chitaly/FogliDMTB17
}}
==Sustaining Cultures of Participation by Fostering Computational Thinking Skills through Game-Play==
https://ceur-ws.org/Vol-1956/GHItaly17_paper_09.pdf
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.