Elemem: Interactive Digital Card Game forChemistry

Paiboon Boonpotjanawetchakit∗ Kansinee Kaweerat † Sirion Vittayakorn‡Faculty of Information Technology

King Mongkut’s Instituteof Technology LadkrabangBangkok, Thailand, 10520

Email: {580700106∗,58070008†}@kmitl.ac.th, sirion@it.kmitl.ac.th‡

Abstract—Games are popular media among youth since theyare not only entertaining but also provide exotic experiencesand establish relationships between players. In this work, wepropose a game-based learning tool for Chemistry called Elememwhich aims to 1) demonstrate the relevance of the periodictable in the context of everyday life in order to improve theunderstanding of the periodic table and its elements, and 2)provide an alternative and attractive learning tool for use bothat school (group-learning) and at home (self-learning). Severalexperiments reveal that Elemem is not only an enjoyable andencouraging self-learning process, but also educational; 79% ofthe students said they will recommend Elemem to their friendsand others.

Index Terms—Game-based learning, Digital card game, Chem-istry, Mobile application, Interactive learning, VuMark

I. INTRODUCTION

Game-based learning and its influence have been main-stream research topics in recent years [1]–[3]. Numerousstudies [4]–[6] demonstrate that game-based learning has apositive effect on the learning process as it increases stu-dents’ motivation for learning, improves the students’ learningachievement and provides them with opportunities to acquirenew knowledge and skills. Although various games weredeveloped or explored during the studies, only 15% of themwere mobile games [7] which is grow explosively in the pastyears due to the drastic change of the mobile phone features.

In 2018, there were approximately 2.2 billion people whoplayed games on their smartphones out of the estimated 7.6billion people living on earth, meaning that almost a third ofthe people on our planet are mobile gamers [8]. The studyconducted on over 12K participants, aged from 18-65 yearsold, reveals that 50% of them had played games in the previousseven days, which makes games the third-most-popular appli-cation category, after social media and shopping applications.The number goes up to 66% among 18-20 year old users wheregames are the second-most-popular application category [9].

There have been several attempts to integrate game-basedlearning with many subjects such as mathematics [2], statistics[4], biology [10], chemistry [11]–[13], etc. However, most ofthese studies focus on the computer games due to the econom-ical reasons. Although mobiles are smarter and cheaper everyyear, computers are still more practical in school, especiallyfor more complicated or expensive computational tasks. Since

students are able to access these games only at school or home,their learning engagement is limited and intermittent.

Moreover, although there are several of mobile applicationsfocus on chemistry. Some of them [14], [15] are not game or[16]–[18] do not support multiplayer mode which intensifiesthe competitiveness and enjoyment.

Thus, in this work we purpose an interactive card gamefor chemistry called Elemem. Elemem mainly consists of 2components: 1) the flash cards of 118 elements and 2) themobile application. Students can use our element cards astypical flashcards as an aid in memorization, anywhere andanytime. To enhance the excitement, students can participatein a speedy quiz via a mobile application. In each game play,students are required to answer questions with their elementcards. The faster they answer the question, the higher theirscore. More excitement comes with the multiplayer modewhere the game supports up to 4 players at a time.

II. BACKGROUND

This section will review previous work relevant to game-based learning, and existing chemistry games.

A. Game-based learning

Game-based learning consists of games where the gamecontent and game play not only enhance understanding andskills acquisition, but also involve problem solving and providea sense of achievement to the players [7].

Numerous studies [4]–[6] have revealed that game-basedlearning is beneficial for students in many ways including 1)increasing students’ motivation for learning, 2) improving thestudents’ learning achievement and 3) providing opportunitiesto acquire knowledge and skills.

B. Image-based marker

An image-based marker is a machine-readable representa-tion that encodes information to a compact visual form thatcan be individually recognized and tracked. The most popularimage-based markers such as QR codes have been widely usedin various domains e.g., detection [19]–[21], security [22]–[24], tracking [25], [26], etc.

In 2016, Vuforia released a new type of marker calledVuMark [27]. VuMark not only encodes data and acts as animage-based marker, but also is constructed in vector graphics

Fig. 1: System overview

designer tools (i.e., Adobe Illustrator) which can make itvisually attractive. Due to its flexibility, VuMark has becomemore practical for many projects [28]–[30].

C. Chemistry educational application

Although there have been several attempts to integrategame-based learning into a chemistry course, they are eithernot mobile applications [12], [13] or not publicly available[11]. Thus, in this work, we explore an educational applicationcalled The Elements Flashcards [16] as our baseline.

The Elements Flashcards is a memory aid application, witha high rating score (4.8 out of 5), for students who wantto review their knowledge about the periodic table of theelements.

Although the game is informative and feasible, it stillhas some limitations. Unlike our proposed application, theElements Flashcards 1) does not support a multi-player mode,2) lacks the excitement provided by a time constraint and 3)has an unreliable scoring method.

III. DATASET

In this work, we collect a novel dataset called the Elememdataset. This dataset consists of 1) information about the 118elements in the periodic table and 2) corresponding questionsabout each element.

In this dataset, the element information includes elementname, atomic number, element symbol, atomic weight, group,period, series, phase at standard temperature and pressure(STP), density, melting point, boiling point, and a shortdescription. Moreover, 3-5 questions about each element arecollected, resulting in more than 700 questions in our dataset.These questions are further classified into 3 difficulty levels:easy, medium and hard.

IV. SYSTEM SCENARIO

Elemem is designed as an alternative game-based learn-ing application for elements and periodic table. The systemoverview is shown in Fig.1. First, players need to set up thegame as instructed, where the instructions will be displayed inthe first page of the application. Then, players can select thequestion topics and difficulty level from the screen (multipleselection is allowed). To make the game more challenging, up

(a) Front (b) Back (c) Player card

Fig. 2: An example of a) the front of the element card, b) theback of the element card and c) the player card

to 4 players are allowed in the game play. Each game play has20 questions randomly picked from the dataset. Players have60 seconds to answer the question. To answer the question,the player has to show the correct element card together withhis/her own player card to the camera.

Each player has 1000 points at the start of each question.The longer the player takes to answer the question, the lowertheir score, calculated as score = 1000 ×

(t−0.5tres

t

)where

tres is the response time of the player to answer the question(seconds) and t is the time limit for each question; the defaultis 60 seconds. Moreover, to discourage random answers fromthe players, a hundred extra points will be granted for everyconsecutive correct answer, up to 500 points. Finally, theplayer with the maximum score will be declared the winner.

V. ELEMEM

There are 3 mains components of Elemem: 1) the chemicalelement cards 2) the player cards and 3) the iOS application,described as follows:

A. Chemical element cards

There are 118 element cards of size 5 × 7 cm where eachcard represents a chemical element of the periodic table. Onthe front of the card, there are 1) an image of the element inthe context of everyday life, and its name in the center of thecard, 2) a unique bar code [27] in the top-left and bottom-rightcorners of the card and 3) a chemical symbol in the top-rightand bottom-left corners of the card (Fig. 2a).

The background color of the element image and a smallcolor spot under under the chemical symbol also representone of 10 different element groups in the periodic table e.g.,noble gases are purple while alkali metals are greenish.

The element description together with basic informationincluding atomic number, group, symbol, period, melting andboiling points, phase at STP, series, and density are shown onthe back of the card (Fig.2b). Students can use these elementcards, by themselves, as an aid to memorization.

B. Player cards

There are 4 distinct player cards of size 5 × 7 cm whichrepresent individual players in the game. An example of a

(a) Instructions (b) Player settings (c) Difficulty levels

(d) Game play (e) Correct answer (f) Leaderboard

Fig. 3: Elemem pipeline

player card is shown in Fig.2c. To earn points from eachquestion, the player card is required to be shown at the sametime as the element card.

C. Elemem application

In order to maximize the user experience of a game, we alsopropose an iOS application called Elemem. First, instructionson how to set up the game and how to play the game will bedemonstrated to the user (Fig.3a). After the game is set up,up to 4 players are allowed to join in the game play (Fig. 3b).Next, players choose the question difficulty levels from: easy,medium and hard (Fig.3c). The game starts when 20 questionsare sampled from the database and shown to the players. Theplayers have to show the right element card and their playercard to the camera (Fig.3d). The faster the correct answer issubmitted, the higher the score for the player (Fig.3e). Aftergame play ends, a leaderboard will be shown (Fig.3f) and theplayer with the highest score will be declared the winner ofthe game.

VI. EXPERIMENTAL RESULTS

We believe that one crucial key to maximize the userexperience of Elemem is that the system should be able todetect every element card, or marker, in a real time mannerwith minimum error. To achieve that goal, we explored severaldesigns of the element card as follows:

• Image-based marker: a square image-based marker ofsize 3× 3, 4× 4 and 5× 5 cm corresponding to designs#1, #2 and #3. The marker consists of atomic number,element name, element symbols, atomic weight, andphase at STP as shown in Fig.4a.

Design # Average time (secs) Design # Average time (secs)1 28.75± 5.45 5 17.63± 12.752 6.78± 10.64 6 13.00± 12.433 5.38± 9.32 7 1.60± 1.204 23.30± 8.68 8 1.27± 0.86

TABLE I: The average detection time (secs) of each design.

• Image-based marker with unique pattern: inspired bythe QR code pattern, we believe that the additional uniquepattern at the bottom of the image-based marker mightincrease the detection performance. Thus, we create amarker of size 4 × 4 cm and explore several uniquepatterns as:

– Design #4: a unique circle shaped pattern (Fig.4b).– Design #5: a unique circle shaped pattern with the

finder pattern at the top-left and bottom-right corners(Fig.4c).

– Design #6: a unique square shaped pattern (Fig.4d).• QR code marker: by ignoring the appearance of the

element card, we also explore the QR code based markerof size 4 × 4 cm as shown in Fig.4e as design #7. Dueto the size of the QR code, only the atomic number andelement name are shown here.

• VuMark marker: to take advantage of the VuMark[27] which allows design freedom while simultaneouslyencoding data, we proposed design #8 as fully describedin sec.V-A and shown in Fig.4f.

To identify the best element card design for Elemem, weexplore both the speed and accuracy of marker detection foreach design.

A. Timing experiment

In this experiment, we choose 20 markers from each designas our test samples. All of these samples are placed, 25 cmaway, perpendicularly to the 8MP camera of a 9.7-inch iPad2018 and the time that the camera requires to detect eachmarker is recorded. The average time of 20 markers from eachdesign is shown in Table I and the detection time distributionsof each design are shown in Fig.5.

The results from Table I demonstrate that:• Marker size and detection speed are inversely propor-

tional, as the system takes more time (28.75 ± 5.45secs) to detect the small marker, design #1, comparedto the bigger ones of the same design: 6.78± 10.64 and5.38± 9.32 seconds for marker #2 and #3, respectively.

• More complex markers require more detection time thansimple ones (of the same size), as markers #4-#6 takemore time than marker #2.

• The VuMark marker (#8) and QR code marker (#7)outperform other image-based markers in this task withaverage detection times of 1.27 ± 0.86 and 1.60 ± 1.20seconds, respectively, due to their simplicity. Althoughthe QR code pattern seems complicated for humans, onlythree of the four corners called position detection patternsare used for the detection task. Similarly, the VuMark

(a) Design #1-#3 (b) Design #4 (c) Design #5 (d) Design #6 (e) Design #7 (f) Design #8

Fig. 4: Example of element card (or marker) designs.

Fig. 5: The detection time distributions of each marker design.

Design #7 Design #8Detection rate (%) 93 97Detection accuracy (%) 77 100Average time (secs) 3.8 2.3

TABLE II: Detection results of QR code marker (#7) comparedwith VuMark marker (#8).

marker uses only the top-right and bottom-left corners toperform the detection task.

B. Detection accuracy

Based on the previous experiment, we further explore thedetection accuracy of both the QR code marker (#7) andthe VuMark marker (#8). In this experiment, we sample 100markers as our test set and use a front camera (1.2MP) of9.7-inch iPad 2018 for the following tasks:

• Detection rate (%): the percentage of the markers thatare successfully detected within 3 seconds.

• Detection accuracy (%): the percentage of the mark-ers that are successfully detected within 3 seconds andcorrectly recognized.

• Average time (seconds): the average time (seconds) thatthe system requires to detect and recognize the individualmarker.

All the experiments are repeated 3 times and their resultsare shown in Table II. Similar to the previous experiment,

The Elements ElememFlashcards

The application is straightforward. 4.76 3.28The application is attractive andencourages the self-learning process. 4.04 4.57It is enjoyable and exciting tolearn with this application. 3.27 4.05The learning process is smooth and flawless. 4.95 3.87The questions are diverse and informative. 3.16 4.88Average score 4.04 4.13

TABLE III: Degree of satisfaction scores of the ElementsFlashcards (the baseline) compared with Elemen.

the VuMark marker (#8) outperforms the QR code marker(#7) in all aspects including higher detection rate (+4%) andaccuracy (+33%) while requiring detection and recognitiontime of (−1.5 secs).

Based on both detection rate and accuracy, the VuMarkmarker (#8) is selected as our final design, resulting 118unique element cards integrated with the VuMark marker [27]as shown in Fig. 2a and 2b.

C. Degree of satisfactionA total of 45 students (29 males and 16 females) whose

average age was 18 participated in the evaluations. While20 students were freshmen at the Department of Chemistry,Faculty of Science, others were twelfth grade students from aScience - Mathematics program in Thailand.

Several experiments were conducted to evaluate the perfor-mance of Elemem compared to the baseline The ElementsFlashcards [16] as follows:Single player: in this experiment, we first give a shortdescription of both Elemem and the Elements Flashcards tothe students. Each student is required to answer 20 questionsabout ‘Name Symbol’ from Elemem and ‘Name’ or ‘Symbol’from the Elements Flashcards.Multiple players: in this task, a group of students (2-4 people)are required to finish another 20 questions in the any categorywhich is different from their previous experiment.

After students finish their tasks, a series of questions areasked to measure their attitudes toward Elemem and thebaseline by rating each question on a scale from 1-5 where1 means ‘Strongly Disagree’, 2 means ‘Disagree’, 3 means‘Undecided’, 4 means ‘Agree’ and 5 means ‘Strongly Agree’.A total of 5 questions and the corresponding degree ofsatisfaction is shown in Table III.

The results demonstrate that the Elements Flashcards out-perform Elemem in two aspects due to its simplicity. WhileElemem requires multiple steps to set up the game play, thereare only 3 steps in the Elements Flashcards: 1) select the mode(e.g., quiz or drag & drop), 2) select the number of questions(e.g., 20, 40, 118) per game and the topic (e.g., name, symbol,group or picture) and 3) answer the question. These steps aresimple and familiar to everyone. Thus, the baseline is easierto use, and its learning process is smoother than Elemem witha 29.6% and 21.6% higher degree of satisfaction.

However, the complication in Elemem also enhances the at-tractiveness of the game and encourage students to experiencethe new self-learning process since we archive a 10.6% higherdegree of satisfaction than the baseline.

We also believe that the time limitation during the singleplayer mode and the competition between multiple playersplay an important role in magnifying the enjoyment andexcitement of the learning process, where Elemem achievesa 15.6% higher degree of satisfaction than the baseline.

Since both applications aim to serve as alternative learningtools for students, the most important question is how muchknowledge will the students gain from using the application.And the result reveals that questions in Elemem are morediverse and informative than the baseline with a 34.4% higherdegree of satisfaction.

Finally, 82% of the students confirm that Elemem improvestheir memorization and 79% of them will recommend Elememto their friends.

VII. CONCLUSIONS

In this work, we propose a game-based learning platformfor Chemistry called Elemem which consists of 2 maincomponents: 1) flash cards of the 118 elements and 2) amobile application. These element cards can used as typicalflashcards as an aid in memorization, anywhere and anytime.Moreover, to amplify the excitement, a speedy quiz is providedvia a mobile application in both single-player and multi-player modes. Experimental results demonstrate that Elememoutperforms the baseline in terms of usage excitement andenjoyment, informative contents, application attractiveness,and self-learning encouragement.

REFERENCES

[1] F. Ke, “A qualitative meta-analysis of computer games as learningtools,” in Gaming and Simulations: Concepts, Methodologies, Tools andApplications, 2011.

[2] M. Kebritchi, A. Hirumi, and H. Bai, “The effects of modern math com-puter games on learners’ math achievement and math course motivationin a public high school setting,” BJET, 2008.

[3] J. J. Vogel, D. S. Vogel, J. Cannon-Bowers, C. A. Bowers, K. Muse, andM. Wright, “Computer gaming and interactive simulations for learning:A meta-analysis,” Journal of Educational Computing Research, 2006.

[4] E. A. Boyle, E. W. MacArthur, T. M. Connolly, T. Hainey, M. Manea,A. Karki, and P. van Rosmalen, “A narrative literature review of games,animations and simulations to teach research methods and statistics,”Computers Education, 2014.

[5] T. M. Connolly, E. A. Boyle, E. MacArthur, T. Hainey, and J. M. Boyle,“A systematic literature review of empirical evidence on computer gamesand serious games,” Computers Education, 2012.

[6] G.-J. Hwang, L.-Y. Chiu, and C.-H. Chen, “A contextual game-basedlearning approach to improving students’ inquiry-based learning perfor-mance in social studies courses,” Computers & Education, 2015.

[7] M. Qian and K. R. Clark, “Game-based learning and 21st century skills:A review of recent research,” Computers in Human Behavior, 2016.

[8] M. Iqbal. App download and usage statistics (2019). [Online]. Available:https://www.businessofapps.com/data/app-statistics/#2

[9] S. Bosman. Betting on billions: Unlock-ing the power of mobile gamers. [Online].Available: https://newzoo.com/insights/articles/betting-on-billions-how-brands-and-advertisers-can-unlock-the-power-of-mobile-gamers/

[10] T. D. Sadler, W. L. Romine, D. Menon, R. E. Ferdig, and L. Annetta,“Learning biology through innovative curricula: A comparison of game-and nongame-based approaches,” Science Education, 2015.

[11] S. Wardani, L. Lindawati, and S. Kusuma, “The development of in-quiry by using android-system-based chemistry board game to improvelearning outcome and critical thinking ability,” Jurnal Pendidikan IPAIndonesia, 2017.

[12] C. A. Knudtson, “Chemkarta: A card game for teaching functionalgroups in undergraduate organic chemistry,” Journal of Chemical Edu-cation, 2015.

[13] T. W. Stringfield and E. F. Kramer, “Benefits of a game-based reviewmodule in chemistry courses for nonmajors,” Journal of ChemicalEducation, 2013.

[14] R. S. of Chemistry. Periodic table. [Online]. Available:https://apps.apple.com/us/app/periodic-table/id1019468967

[15] N. Chernykh. Periodic table 2020 (chemistry). [On-line]. Available: https://apps.apple.com/us/app/periodic-table-2020-chemistry/id1451726577

[16] T. P. Inc. The elements flashcards: Test your chemistryknowledge. [Online]. Available: https://apps.apple.com/us/app/the-elements-flashcards/id835885718

[17] ——. The elements by theodore gray. [On-line]. Available: https://apps.apple.com/us/app/the-elements-by-theodore-gray/id364147847

[18] ——. The elements in action. [Online]. Available:https://apps.apple.com/us/app/the-elements-in-action/id739281034

[19] P. Nazemzadeh, D. Fontanelli, D. Macii, and L. Palopoli, “Indoorlocalization of mobile robots through qr code detection and deadreckoning data fusion,” ASME Transactions on Mechatronics, 2017.

[20] S. Nalintipwong, T. Tasarika, C. Ruksomya, S. Vittayakorn, and T. Num-nonda, “Concurrent self-identification applying qr code to record classattendance (qrclass),” in ICEIEC, 2019.

[21] P. Reuksupasompon, M. Aruncharathorn, and S. Vittayakorn, “Ar devel-opment for room design,” in JCSSE, 2018.

[22] I. Tkachenko, W. Puech, C. Destruel, O. Strauss, J.-M. Gaudin, andC. Guichard, “Two-level qr code for private message sharing anddocument authentication,” IEEE Transactions on Information Forensicsand Security, 2015.

[23] P.-Y. Lin, “Distributed secret sharing approach with cheater preventionbased on qr code,” IEEE Transactions on Industrial Informatics, 2016.

[24] S. Zhao, L. Wang, W. Liang, W. Cheng, and L. Gong, “High perfor-mance optical encryption based on computational ghost imaging withqr code and compressive sensing technique,” Optics Communications,2015.

[25] Y. G. Kim and E. Woo, “Consumer acceptance of a quick response(qr) code for the food traceability system: Application of an extendedtechnology acceptance model (tam),” Food Research International, 2016.

[26] Z. Li, G. Liu, L. Liu, X. Lai, and G. Xu, “Iot-based tracking and tracingplatform for prepackaged food supply chain,” Industrial Management &Data Systems, 2017.

[27] Vuforia. Vumark. [Online]. Available:https://library.vuforia.com/articles/Training/VuMark.html

[28] M. Esteves, F. Miranda, J. Machado, and A. Abelha, “Mobile collabo-rative augmented reality and business intelligence: A system to supportelderly people’s self-care,” in Trends and Advances in InformationSystems and Technologies, 2018.

[29] M. Antonijevic, S. Sucic, and H. Keserica, “Augmented reality applica-tions for substation management by utilizing standards-compliant scadacommunication,” Energies, 2018.

[30] A. Boccaccio, G. Cascella, M. Fiorentino, M. Gattullo, V. Manghisi,G. Monno, and A. Uva, “Exploiting augmented reality to displaytechnical information on industry 4.0 p&id,” in Advances on Mechanics,Design Engineering and Manufacturing II, 2019.