project a final
DESCRIPTION
Project A FinalTRANSCRIPT
The Web GuruJoy Gallucci
ITGM 705 - David MeyersProject A: Midterm Project, Non-Digital
Part 1: Proposal
Game Description:
“The Web Guru” is a game designed for 2+ teams. Game includes; A board that has magnetic physical visual web elements (divs, columns, bold text, footers/headers, navigation), a board to track the progress of each team, game pieces to represent each team that is present at the time, and a stack of cards with small blurbs of HTML code. Each team has an allotted amount of time, based on the timer setting chosen. For players with a wider knowledge of the web, the timer is set to “hard”, allowing 2 minutes per team. For players with a more novice knowledge of web design, the timer may be set to “moderate” or “easy”, allowing 4 minutes, or 10 minutes. Draw a card from the pile to begin the team’s turn. The card will have a few lines of HTML on it. Team must discuss and take the allotted minutes to figure out in what way they should arrange the available magnetic visual elements based on the code that is on the card. The back of the card has the correct layout printed for when the team has completed. Points are awarded based on correctly placed visual elements on the board. The board will track game pieces for and gaining points. The first one to reach a certain point level will achieve the title of “web guru” and win the game. A cheat sheet is available with the game for studying before the game or in between turns (depending on the experience of the players).
Design Statement:
The game “The Web Guru” is a game intended for anyone interested in learning about web design. Many students learning web design are required to learn by self-direction, or based on homework assigned to them by an instructor. This game was designed with teamwork and collaboration in mind, allowing team members to help one another and learn from each other in a highly interactive environment, depending on one another’s knowledge.
1
Audience & Context
The audience for “The Web Guru” may vary. Being an educational game, this game was intended for a classroom setting, though is not bound to a classroom, allowing the instructor to temporarily take a backseat in the learning process, and observe his or her students as they interact. Instructor may find this useful, to gain a grasp on which of their students fully comprehend the concepts of the code, and which students are not. Studies show that students learn more efficiently in relaxed environments. “The Web Guru” allows a student to experience competition, teamwork, collaboration, and visual stimulation via the web without using any computing device at all.
Motivation:
My motivation is my personal background in web design. During the time I spent in undergraduate school, I spent countless hours learning HTML and other web languages by self-direction. I created an environment that made it possible to learn web design by choosing a Computer Science degree with a Graphic Design minor, however I had always wished that one of my many teachers had spent time creating a more interactive environment for us to learn in. I learn by visual stimulation, and studying code and syntax straight from a textbook may have doubled the amount of time it would have taken me to learn HTML as if I had spent time interactively learning with my classmates in this type of environment.
2
Part 2: Progress & Visualization
3
4
Part 3: Prototype & Testing
5
6
Testing & Feedback:
Test Subject(s): Coworkers (5), Family (4)
Subject 1 Results (Coworkers)Coworkers who know HTML on a beginner’s level - my coworkers were initially confused by the subject of the game, however I gave them instructions and the cheat sheet, and asked them to figure the game out to the best of their knowledge. Subjects interpreted the game correctly in under 6 min with collaboration from each other. Game was played under supervision as myself as the moderator. 8 rounds were played. First 3 rounds that were played subjects needed the cheat sheet to play correctly. Final rounds played cards were completed in under 10 minutes each by each team. Teams interacted well, and in my observations I did notice a lot of collaboration to find the correct answer, as well as a lot of laughter and competition.
Subject 2 (Family)I had the opportunity to test this product on some family members which I found extremely valuable. Family was very open to learning the game and understanding - and they were very much beginners. I tested the game on 4 family members, 1 of whom had worked with computers and 3 of whom are the classic “computer illiterate”. Game took all but several minutes to explain and understand. Subjects took between 10-15 minutes per card with the cheat sheet to compete in The Web Guru for the first 6 rounds. Final 3 round played were played in under 8 minutes.
Part 4: Final
7
8
9
10
11
Part 4: Final (Up Close)
Instructions
Separate into 2+ teams
Game Includes: Magnetic game board, magnetic web elements, game board for scoring, stack of cards with small blurbs of HTML code
Instructions: Each team has an allotted amount of time, based on the moderators choice. For players with a wider knowledge of the web, allow 2 minutes per team, for players with more novice knowledge allow 6-10 minutes per team.
Draw a card from the pile to begin the team’s turn. The card will have a few lines of HTML on it. Team must discuss and take the allotted minutes to figure out in what way they should arrange the available magnetic visual elements based on the code that is on the card. The back of the card has the correct layout printed for when the team has completed.
Points are awarded based on correctly placed visual elements on the board. The board will track game pieces for and gaining points. The first one to reach a certain point level will achieve the title of “web guru” and win the game. A cheat sheet is available with the game for studying before the game or in between turns (depending on the experience of the players).
12
Cheat Sheet
Basics
<html></html> Begins the document<head></head> Sets the title of the website<body></body> Begins the page
Text & Type
<h1></h1> The largest headline<h6></h6> The smallest headline<b></b> or <strong></strong> Bold text<i></i> Italic text
Links & Images
<a href = “URL”></a> Link text<a href= mail to: “email”></a> E-mail text<img src= “name”> Adds an image
Formatting
<p></p> New paragraph<br> Line break<ol></ol> Numbered list<ul></ul> Bulleted list<li></li> Individual list Item* *Individual list item is always displayed beneath <ul> or <ol><div></div> A block of content, typically containing other elements
Tables
<table></table> Creates a table<tr></tr> Sets of each row in the table<td></td> Sets each cell in that row *contained inside of <tr>
13
Example Cards - Front
<html><head></head><body><b>Hello</b> <i>World</i><a href = www.helloworld.com> Hello World</a></body></html>
<html><head></head><body><b>Hello World</b><a href=mailto:[email protected]>[email protected]</a></body></html>
<html><head></head><body><h1>Hello World</h1><br><b>Hello World</b><br><h2>Hello World</h2><br><i>Hello World<i><br><h3>Hello World</h3></body></html>
<html><head></head><body><h1>Hello World</h1><br><b>Hello World</b><i>Hello World<i><br><h2>Hello World</h2><br><h3>Hello World</h3></body></html>
<html><head></head><body><h6>Hello World</h6><br><h5>Hello World</h5><br><h4>Hello World</h4></body></html>
<html><head></head><body><p><a href=www.helloworld.com>Hello</a>World</p></body></html>
<html><head></head><body><b>Hello World</b><i>Hello World</i><p><a href=www.helloworld.com>Hello</a>World</p></body></html>
<html><head></head><body><a href=mailto:[email protected]>[email protected]</a></body></html>
14
Example Cards - Back
World
Hello World Hello World
Hello World
Hello World
Hello World
Hello WorldHello World
Hello WorldHello World
Hello World
Hello WorldHello World
Hello WorldHello World
Hello World
Hello World
Hello World
Hello
WorldHello
15
Magnets
item item item
item item item
item item item
Hello WorldHello WorldHello World
Hello WorldHello World
Hello World
Hello World
Hello World
16
Project A Conclusion
In conclusion, Project A did not vary much from the original concept. The concept actualy down-sized a bit from the original based on some feedback I received from classmates on how this game would be ideal for a beginner in HTML. I could easily visualize this educational game being used in Web Design classes or Graphic Design classes for beginners. I really enjoyed working on this project, and the biggest challenge I encountered was the idea that none of the project’s foundation was digital.
- Joy Gallucci