Project Example - Table Tennis

Criterion A - Design Brief - Table Tennis App

TASK

Write a description of the task that you are going to undertake. Include what you are going to create, its purpose and who will benefit from the outcome.

I going to develop a web application that will allow table tennis users or umpires to track the score during a table tennis match. The application will have a clear user interface to indicate the score and whose turn it is to serve, along with keeping track of the sets and will determine the winner. Players and umpires will benefit from my app as they will not forget the score during the match so easily.

CONSTRAINTS

What are the boundaries or limitations for this project?

· The task needs to be developed using HTML, CSS and JS

· The application needs to be finished by Week 7 Term 2

· The application needs to keep the score up to 21 and best of 3 sets

PROPOSED OUTCOME

What will the program look like and be able to do?

· The application will have buttons to control the input of data

· The application will display data in large font to make it easy to read

· The application will calculate when a set and match is won

· The application will keep track of the service (who turn its is to serve)

Criterion B - Design Specifications - Table Tennis App

Idea Development

Idea 1:

The application will be designed to have players side by side with the score for the current set displayed under their name. The set score will sit in a horizontal section under the players. Buttons will be used to change the score and reset the set.

Idea 2:

The application will be designed to have the player scores stacked on top of each other with the set score displayed underneath. in addition a little icon will appear next to the serving player. A button for next set will be set up to start a new set more easily.

Flow Chart Example for a Table Tennis Scoring App

First player to score 11 Points. You must win by 2 points
First player to win 2 out of 3 sets

Pseudo Code for Table Tennis

START TableTennis

SET score_A =0

SET score_B=0

SET set_count =1

SET sets[]

END TableTennis

START AddScore(player)

IF player == A

SET score_A++

UPDATE score_A

ELSE

SET score_B++

UPDATE score_B

END IF

IF score_A >=11

IF score_A – score_B >=2

PRINT Player A Wins

SET score_array

END IF

IF score_B >=11

IF score_B – score_A >=2

PRINT Player B Wins

SET score_array

END IF

END addScore()

START checkWIn()

SET a =0

SET b = 0

SET i =0

FOR i in sets

IF sets[i].a >b

a++

ELSE IF sets[i].b>a

b++

END IF

END FOR

IF A == 2 OR B ==2

PRINT Game Finished

END IF

END CheckWin()

Variable List

score_a (int) - store score for player a for each set
score_b(int) - store score player b for each set
set_count (int) - keep record of sets played
score_array (array) - will store an object with score of player a and b {a:11, b:9}

References to HTML elements

pa (const) - store html area for player a score display
pb (const) - store html area for player b score display
setBut (const) - store location of new sets button to hide and show at end of new set
playerAscoreBut(const) - store location of player a score button
playerBscoreBut (const) - store location player b score button
sets (const) - store location of html table for displaying set scores
output (const) - store location of html table for displaying end of match text

Wire Frame for Table Tennis - Final Design

In your design include as much detail as possible. Include:

annotations and details about the id of each element.
Specific css styling elements like colours and margins etc
Areas for text to display like output

Criterion C Journal Example

Finished Product

Outcomes:

Electronically keep record of table tennis scores during competition including points for each set. First to 11 points. You must win by 2.
Calculate the winner of each set and record in an easy to read way
Data needs to be stored in an array of objects