Acknowledgments Naval Postgraduate Mentors: Dr. Zachary Peterson, and Dr. Mark Gondree. Hartnell College STEM: Andy Newt

1. CustomizableCardCreator for Educational Games Juan A HernandezComputer Science, Hartnell College, Salinas, CA 93908 Dr. Zachary Peterson, Assistant Professor, Computer Security Laboratory Client Abstract Educational Activities 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 “cloud-based” 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. 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. 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. 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 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. During game play, there was a lot of excitement and kids showed genuine interest for the network security concepts that d0x3d had to offer. Elements of a Card Introduction Acknowledgments Naval Postgraduate Mentors: Dr. Zachary Peterson, and Dr. Mark Gondree. Hartnell College STEM: Andy Newton, Joe Welch, and Pat McNeill. 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. Server PHP Class Hierarchy 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. 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. 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. 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. 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 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). Figure 4: The picture above shows the PHP class 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. 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. 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.