Project 5 - Team Project

Multiuser Interactive, Visually Creative, Web Application Project
Multi user web game


  1. Project concept proposal and team formation Nov 26
  2. Metaphoric User Interface design and prototype Nov 30
  3. System Architure and design Dec 5
  4. Working Prototype Demo, Dec 12
  5. Final System, Dec 14
  6. Public System Presentation, Dec 20
Screen_Shot_2018-11-12_at_9.27.14_AM.png TTT.png 10.jpg


The goal is to create a web based program that allows two people to interact live through a web page. The idea is to have the web pages talk to a server program that's keeps a common game state. This can be achieved either through a node,js program, or a C++ program talking to a SQL database that maintains the state of the interactions. In the latter methind the two (or more) web pages interact by writing state information to database table(s), and then by periodically checking the current system state in the database.

A major component of this project is the creative aesthetics of the user interface. You are to (once again) explore the metaphoic aspects of the functions and interfaces of the system, and creatively design a user interface that utilizes a creative, even artistic approach to these common tasks. This could mean, for example, that battleship becomes instead a game of placing solar farms across a map the USA. The opponents take turns selecting where there is cloud cover to try to maximize the solar power generation for their solar farm, hoping to out perform the locations of their opponent. Or, for Tic Tac Toe, the game might involve placing farms so that the same river can provide hydration for all three farm. Or chatting might involve a database of literature quotes that you must choose from to attempt to get you message across (it could even become a game). Once the system theme is determined, the task is to contrive visual aesthetics that communicate the application concepts effectively, and even beautifully.

Your programs can involve either static or dynamic graphincs.. If you want to do animation I am suggesting the Konva platform Some examples are given here for graphical programs using Konva. Another example by my daughter: ShapeGame.

Also consider: 28 of the best JavaScript drawing libraries?

The basic idea is to design a program to allow two users to interact through the MySQL Database. Normally a web page is not automatically updated. However, a script can be written to call the server on a regular basis to get updated information. An example of a web pages with a simple function that gets called every second is here. There is also a project that displays processes dynamically on the cslab server. Try it here: The project is in github here:

You are to keep this version of the system simple at first - focus on basic functionality. Only two users should be supported in the first phase, you can add more in phase 2.

You will be required to use GIT for all files in this project. This will be introduced in class. For milestones turn in the current github reference.


  1. Project concept proposal and team formation - Start by choosing a general program class from above. Then divide into groups based on the program class. In the group brainstorm on metaphoric representations for your program, and then subdivide into project teams of 2 or 3 people. In the (final) team group think carefully about your metaphoric concepts. Put together initial conceptual design for this step, turning in as a digital proposal. Also create a Github project for your team, and invite your professor to the project. (Due April 17)
  2. Metaphoric User Interface design and prototye and use scenario: (Due April 21) Your team will need to decide what kind of project to do, design a good user interface, and list the major user features (requirements from the users perspective). This should include a visual mockup. If you are doing anything that requires interactive graphics you will need to prove that you are able to do this by turning in a simple mockup that does runs. You can use LucidChart for your drawings. Turn in:
    • The User interface mock up (from LucidChart)
    • A bulleted list of user requirements (should be short, 2-5 features)
    • A user story (scenario) - a paragraph describing what steps a user will go through as they use the system.

  3. Architectural Design and Communication Protocol: (Due April 26) You will design the archtecture of your program. Below is a sample architecture created with LucidChart:
    The goal here is to think trough ALL components, and create a drawing showing the components. Then write a short narrative that describes the purpose and fuctions of each component, and the data or control that the lines between the components means.

    Communications protocol: The second goal is to design the form and syntax of how the components talk to each other. You will need to explain how messages are formatted to be unambigous, and how they will provide the necessay information to allow the system to work. More about protocol design here: Communication Protocols

  4. System working prototype and Demo: The goal of this step is to demonstrate good progress toward the projects success.

  5. Complete Project and Demo: You will turn in and demonstrate your working program. The program should be fully functional, with well designed, formatted, and commented code. All files should be turned in.

  6. Final System Public Presentation: Your team will give a final public 20 minute demonstration of your system. You will also give a presentaiton, with slides, explaining the operation, design, and architecture of your system. You will also talk about the lessons learned (project management, technical, and lessons learned).


When using C++ don't forget to put in the following line as the first cout in your CGI program:

cout << "Content-Type: text/plain\n\n";


The examples below can be used as a starting point.

Simple Animation


Ball Equilibrium Experiment

Very Simple Bouncing Balls

Bounching Balls
Web Chat Examples:

Github Project:

Pong Example:

Tic Tac Toe Example:

Space Invader


Project 3 Team Assignments

Team Name Team Members Project and Link
Team 1    
Team 2    
Your team may submit a name of you own.

Grading Rubric

Criteria Excellent Acceptable Unacceptable
Documented & Maintainable
(The program is well-documented with appropriate names and comments making it easy to understand.)
  • all naming conventions are followed
  • both in-line and header comments are included and clearly explain the what the code accomplishes and how
  • white space is used well
  • most naming conventions are followed
  • some comments are confusing or missing
  • white space is used well in most places
  • poor or no use of naming conventions
  • too few or too many comments are used and they are unclear or inaccurate
  • poor use of white space
Adaptable & Reusable
(The program is modular, using abstraction well and any limitations are clearly specified.)
  • all interfaces between objects are clear
  • appropriate utility functions are used and well-documented
  • most code can be reused
  • most object interfaces are clear
  • some appropriate utility functions are used and documented
  • some code can be reused
  • poor object interface definitions
  • few or no utility functions
  • no code can be reused
Robust & Correct
(The program provides the correct output for all possible input.)
  • the program works completely as expected
  • the output is displayed to specification for all valid input
  • the program responds appropriately for all invalid input
  • the program works as expected for most input
  • there may be minor errors in output formatting for valid input
  • not all invalid input is handled reasonably
  • the program does not produce correct output for even the sample input
  • the program fails to handle invalid input
  • exceptions are not caught
Efficient & Elegant
(The program uses both time and space on the computer effectively, without losing source code clarity.)
  • no extra variables or definitions are used
  • the code is small, efficient yet still easily understood
  • extra variables do not make the code harder to understand
  • brute-force problem solving approach
  • extra variables are pervasive and confusing
  • the code is unnecessarily long and patched together
  25-20% 19-11% 10-0%

Grading Results

Criteria Comments Grade (25-0)
Documented & Maintainable    
Adaptable & Reusable    
Robust & Correct    
Efficient & Elegant    
Topic attachments
I Attachment History Action Size Date Who Comment
JPEGjpg 10.jpg r1 manage 17.3 K 2017-11-10 - 20:43 JimSkon  
HTMLhtml BattleShio.html r1 manage 49.5 K 2017-11-10 - 19:21 JimSkon  
JPEGjpeg Chat.jpeg r1 manage 8.9 K 2017-11-03 - 14:17 JimSkon  
SVG (Scalable Vector Graphics)svg File-Battleship_game_board.svg r1 manage 41.1 K 2017-11-10 - 19:04 JimSkon  
PNGpng NamesWebArchtecture.png r1 manage 58.1 K 2017-11-03 - 17:40 JimSkon  
PNGpng Screen_Shot_2018-11-12_at_9.27.14_AM.png r1 manage 9.2 K 2018-11-12 - 14:27 JimSkon  
PNGpng TTT.png r1 manage 9.8 K 2017-11-03 - 14:17 JimSkon  
PNGpng pong.png r1 manage 1.7 K 2017-11-03 - 14:18 JimSkon  
Edit | Attach | Watch | Print version | History: r17 < r16 < r15 < r14 < r13 | Backlinks | Raw View | Raw edit | More topic actions
Topic revision: r17 - 2018-11-30 - JimSkon
This site is powered by the TWiki collaboration platform Powered by PerlCopyright © 2008-2019 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding TWiki? Send feedback