Customizable Card Creator for Educational Games
Juan A Hernandez
Computer Science, Hartnell College, Salinas, CA 93901
Dr. Zachary Peterson, Assistant Professor, Computer Security Laboratory
Abstract
The project is to develop a web-based “card-creator” tool
used to create custom game pieces for d0x3d, a board
game that teaches network security concepts in a fun and
collaborative way. Specifically, the goal is to develop a
framework for a game card creator which can be robust and
expandable to accommodate other, similar educational card
games. Using the d0x3d card creator, players will be able
to create their own cards online giving them the ability to
expand the game play experience. The web application is
being developed using HTML, CSS, JavaScript, Jquery,
Ajax, and PHP. HTML and CSS make up the user interface
while JavaScript, Jquery, and Ajax take care of the user
interface logic which allows the client application to
communicate with a server. Once communications to the
server are established, PHP is used to create an image of a
game card using the GD Library. The image is created and
sent back for the user interface to display. The current
client-server application works and allows for a “cloudbased” implementation for creating new cards for the
d0x3d board game. The project was successful in creating
a framework for the card creator that in the ‘cloud’
computing model with a browser communicating with a
remote server via the internet.
Introduction
A “cloud-based” application was desired for mobility and easier
application expansion. With the base framework, anyone can
implement a template for their own educational card game and allow a
user to create custom game cards very quick and easy without any
installation of software on their machine.
Educational Activities
Upcoming 8th graders from different middle schools
around Salinas get to play a prototype of d0x3d
during the first run of the Cyber Adventurers
computer summer camp.
Client
Everything that the user sees on their internet browser is handled
by HTML code, CSS code, and sometimes JavaScript and Jquery
code. HTML forms are used to get user input. Text input could be
used to customize a title, flavor text, text in a description box, and
more.
The color picker is implemented a little differently.
JScolor is a color picker written in JavaScript using the Jquery library. To be
able to use it, one must first link both the Jquery and JScolor files to the HTML
file. Once that is done, a color picker can be created using HTML forms.
Figure 2: Dr. Mark Gondree explains how each role token has a
different ability.
Using a Jquery plug-in, one can implement an upload form for uploading
pictures.
Figure 5: The image above shows a demo of the user interface
During game play, there was a lot of excitement and
kids showed genuine interest for the network security
concepts that d0x3d had to offer.
for the d0x3d card creator. The application displays a template and
gives the user the ability to create and customize their own role
card for use in the game. Customizable elements in this demo
include the title text, main image, main image border color, and
description box text.
Elements of a Card
Out of the creation of d0x3d, there came a
need for designing and creating custom cards.
Before programming, elements of a card had to
be identified.
Server
PHP Class Hierarchy
The magic happens on the server. This
is where PHP, with its companion, the
GD library, creates dynamic images and
merges them all together to create a
very cool looking game card.
Naval Postgraduate Mentors:
Dr. Zachary Peterson, and Dr. Mark Gondree.
Hartnell College STEM:
Andy Newton, Joe Welch, and Pat McNeill.
Using object oriented programming
concepts, a PHP class was developed
for every type of element in a card. Text
elements, for example can have a
background and a border, therefore the
text class will inherit code already
available in the frame class. This saves
time and gets rid of having unnecessary
duplicate code.
Cyber Adventurers:
Allison Kerr, Sue Higgins, Anne Gallenson,, and
Angelica Meza.
This internship was funded by the Hartnell
College Title V College to university Success
Program.
Each element is a layer in a card. Once
the elements are created, a PHP
function will merge all the layers and
return the final playing card image.
For further
information
Figure 4: The picture above shows the PHP class
Figure 1: These diagrams demonstrate how the main five components that
make up the card creator work together. Depending on the computer language,
processes will either occur on either the client machine or the server machine.
Figure 3: The picture above shows the different
elements that make up a game card. Designs may vary,
but they are created using a combination of these
elements.
Acknowledgments
hierarchy with the Frame class at the base. Image and
Text classes inherit all properties of a Frame and have
additional functions to their own respective purpose. The
classes in red inherit all properties from the parent
classes in green and blue.
For more information on the future of d0x3d and
the card creator application, you are welcome to
contact Dr. Zachary Peterson
(znpeters@nps.edu), Dr. Mark Gondree
(mgondree@nps.edu), or Juan Hernandez
(juhernandez@csumb.edu).