SIT120 - Assignment 2 (Individual task)
Responsive Web App: Implementation and Demonstration

Worth: 40% of your grade (30% project, 10% presentation)
• Final project due date - 11:59 pm Sunday 2nd February 2020(week 12)(Firm Deadline)
• Presentation date – Week 12, during class (presentation schedule will be available
on Moodle before one week)















Introduction
In this assignment you will demonstrate your understanding of the coding concepts and skills developed throughout
this trimester in a creative context. Using robust Vue platform, you will use HTML, CSS and JavaScript to create a
responsive web application. You are free to design and think of imaginative behaviors and actions for the
components in your aquarium that satisfy the requirements below in a creative manner.
As an individual, your project should demonstrate the use of multiple components in a larger system of both
autonomous and interactive elements. The purpose and format of your project is up to you. For example, you may
choose to focus on a realistic simulation, a game-like experience, a virtual toy, a digital performance, etc. Your lecturer
will be happy to hear your ideas and provide feedback.

Tasks
You may work in a group helping each other, however, you should be based on Assignment 1 Proposal and develop
the web application. You are free to improve or modify from this plan during development. Using your Project
Proposal as a guide, you should apply coding using Vue framework and components system to your components in
order to demonstrate a range of coding concepts in a creative manner. All must be included in your project.
Additionally, the following effective coding practices should be demonstrated by your implementation:
Coding Practises Requirement
Documentation and Basics Effective commenting inside codes to allow easy understanding of the purpose of different
aspects of your code. Efficient use of some of the following basic ideas.
• Computed Properties and Watchers
• Class and Style Bindings
• Conditional Rendering
• List Rendering
• Event Handling
• Form Input Bindings
• Components Basics
Components in depth • Component Registration
• Props
• Custom Events
• Slots
• Dynamic & Async Components
• Handling Edge Cases
Transitions and Animations
Reusability & Composition
Tooling and Scaling Up
• Enter/Leave & List Transitions
• State Transitions
• Mixins
• Custom Directives
• Render Functions & JSX
• Plugins
• Filters
• Single File Components
• Unit Testing
• TypeScript Support
• Production Deployment
• Routing
• State Management

The way in which your web satisfies each of these requirements is up to your design. Your submission of the
assignment must be presented as a single zip archive.
















Submission


Written Report
An accompanying written report (maximum 5 pages, may be shorter) should explain your implementation,
design and reasoning behind your code and system, include the following information:
1. Overall description of design challenges and system.
2. Explanation of how each of the above listed coding concept requirements have been fulfilled in a creative
manner (screenshots of blueprints, diagrams may also be useful here!).

Oral Presentation
During your classes in Week 12 you will present an oral presentation which includes the following information:

• Short summary of the project goals including target audience.
• Demonstration of the functional project.
• Discussion of the process you took to implementing the features (e.g., how did you translate your ideas into
the functional result? Did you use user stories, UX/UI, create asset lists, etc).
• Highlights of key features and how the coding concepts you have learned were applied to these.
• Discussion of the major obstacles and challenges encountered during the course of this project and how you
solved them or made changes. Be honest – coding is challenging and your approach to problem solving and
demonstration of how you have learned from this are very important!
A PowerPoint presentation or visual aid is recommended and should be submitted with your project.



Submission
One must submit the following files to the Assignment 2 link prior to the due date and time. Your submission must
include:
1. Written report as a HTML file.
2. Project in a .zip archive. Make sure to zip the entire project directory (i.e., the folder containing the project
file and all other folders and contents contained within).
3. PowerPoint presentation of your oral presentation visual aid.
Marking Rubric for Assignment 2
Project & Written Report Rubric (30%)
CRITERIA FAIL PASS CREDIT DISTINCTION HIGH DISTINCTION
<2.5 POINTS 2.5 POINTS 3 POINTS 3.5 POINTS 4-5 POINTS
CODING CONCEPTS (45 points)
Rubrics on right apply to the
requirements for each coding
concept below.
Not implemented or may
not fulfill the coding
concept requirements in its
implementation. May not
be applied in a functional
manner or contains serious
issues.
Satisfies coding concept
requirements in a basic
manner that is functional
within the project. May
have minor issues or lack
thorough integration with
the rest of the system. May
not go beyond what has
already been
demonstrated in class.
Satisfies coding concept
requirements in a simple
manner that is functional
within the project. Could use
some more thorough
demonstration or better
integration with the rest of the
project. May not go beyond
what has already been
demonstrated in class.
Satisfies coding concept
requirements effectively with
creative or interesting
functionality. Used effectively
as a part of the larger system
with logical implementation.
Evidence of implementation
beyond what has been
demonstrated in class.
Exceeds coding concept
requirements effectively
and/or demonstrates highly
creative or interesting
functionality. Sophisticated
integration demonstrates
thorough understanding of the
concept. Clear evidence of
functionality beyond what has
been demonstrated in class.
Functions
Variables
Loops
State change
Component creation
Handling user inputs Animation
Reusability
Composition
Scaling Up
CODING PRACTISES (15 points)
Documentation Commenting may be
absent from the project
blueprints, have serious
errors or used ineffectively.
Commenting is present in
project blueprints although
may be very simplistic or
used inconsistently. May
still have some issues for
someone unfamiliar with
the project to understand.
Commenting is present
throughout project blueprints
and provides acceptable
readability of the code for
someone unfamiliar with the
project.
Commenting is present and
thorough throughout project
blueprints. The code is highly
readable for a user unfamiliar
with the project. Consistency
is maintained in labels and
comments.
Commenting is present,
thorough and sophisticated
throughout without
overwhelming the project. The
code is very easily readable for
a user unfamiliar with the
project. Consistency is
maintained in labels and
comments.
Components and Functions Components for functions
and variables may appear
random, inconsistent or
incorrectly named. May use
default labels. Blueprints
may be very messy or
difficult to read.
Components for functions
and variables present with
some consistency issues or
some left at default.
Generally understandable
after examination.
Blueprints may not be very
Components for functions and
variables present. May still not
be as effective as possible in
choice of naming or may not
be consistent. Generally,
indicate purpose. Blueprints
are generally neat and tidy.
Components for functions and
variables present with valid
and appropriate naming
throughout. Generally
consistent names that indicate
purpose. Blueprints are neat
and readable.
Components for functions and
variables present with highly
relevant naming that clearly
communicates purpose.
Consistency maintained
throughout. Blueprints are
neat or require close
examination to read.
formatted with care to be neat
and highly readable.
Structure Code may be very
inefficient in structure or
have numerous repetitious,
unfinished or broken
elements.
Code is generally
structured appropriately
but may have some
unfinished elements or
unnecessary repetition of
elements that could be
made modular as
functions.
Code is structured
appropriately and makes use
of functions to modularize
some repeated elements.
Code is structured well and
makes good use of functions
to avoid repetition.
Code is structured with
sophistication and makes
thorough use of functions to
avoid repetition. Code is highly
modular to allow easy
additions or expansion.
WRITTEN REPORT (20 points)
Content Some or all sections of the
written report may be
missing significant required
content.
All major sections of the
written report are provided
with some omissions or
overly simplistic minor
details.
All major sections of the
written report are provided
but may be lacking some
minor details or contain minor
errors.
All sections and required
contents of the written report
are provided. Some minor
inconsistencies in detail.
All sections and required
contents of the written report
are provided without
omission.
Coding concept explanations
(Functions, variables, loops, state
changes, components, user inputs,
reusability etc)
Missing or largely
unfinished.
Most coding concept
implementations may be
explained at a basic level.
May not demonstrate
thorough thought or
consideration.
All coding concept
implementations explained
but may be somewhat basic or
not demonstrate thorough
thought or consideration.
All coding concept
implementations explained
with demonstrated of clear
thought and planning.
All coding concept
implementations explained
with thorough demonstration
of thought, planning and
creative choices.
Supporting diagrams and charts May be largely or
completely absent or have
major issues.
Supporting diagrams or
charts included but may be
somewhat simplistic or not
used effectively.
Supporting diagrams and
charts are included and
provide some additional
insights into the coding.
Supporting diagrams and
charts are included that
effectively demonstrate the
code and choices made.
Supporting materials are
referred to within the written
portions of the report.
Detailed supporting diagrams
and charts are included that
very effectively demonstrate
the code and choices made.
Supporting materials are all
referred to within the written
portions of the report.
Presentation May have numerous and
significant spelling,
grammatical or formatting
errors.
Some spelling, grammatical
or formatting errors
throughout. Additional
proof-reading is required.
Some minor spelling,
grammatical or formatting
errors throughout. Some
additional proof-reading is
required.
Very few minor spellings,
grammatical or formatting
errors throughout.
Presentation is professional
and polished.
No notable spelling,
grammatical or formatting
errors. Presentation is
thoroughly professional and
polished.
OTHER FACTORS (10 points)
Polish Project may have serious
polish issues. May appear
unfinished, rushed or
contain serious cohesion
issues.
Project is generally
cohesive but lacking some
polish. May not appear to
fully represent a singular
work due to some
inconsistencies or have
parts that don’t fit
together effectively.
Project is generally cohesive
with satisfactory polish and
general lack of inconsistencies.
Makes an effective functional
whole and most parts fit
together well.
Project is cohesive with
excellent polish and lack of
inconsistencies. Makes an
effective functional whole.
Project is thoroughly cohesive
with excellent polish and lack
of inconsistencies. Makes an
effective, fully functional
whole greater than the sum of
its parts.
Creativity & Purpose Does not demonstrate
creativity or expand upon
the base concept of a
Demonstrates some
elements of creativity,
although some may not be
Demonstrates creativity in
some aspects of the project
and expands upon the base
Demonstrates thorough
creativity in most aspects of
the project and clearly
Demonstrates exceptional
creativity in most aspects of
the project and expertly
responsive web. May not
be fit for identified target
audience.
fully realized or fit for
purpose.
concept of a responsive web.
Design is appropriate for the
target audience.
expands upon the base
concept of a responsive web
by taking it in a more creative
direction. Design is effective
for the target audience.
expands upon the base
concept of a responsive web
by taking it in a highly creative
direction as a new product.
Design is deeply integrated
with the target audience and
purpose.
OVERALL TOTAL
(max: 90 points, converted to 30%)
<45 points 45 to 53 points 54 to 62 points 63 to 71 points 72 to 90 points

Oral Presentation Rubric (10%)
FAIL PASS CREDIT DISTINCTION HIGH DISTINCTION
0-4 POINTS 5 POINTS 6 POINTS 7 POINTS 8-10 POINTS
Summary and key features Missing or with significant
omissions in description of
the project and coding
features.
Project and key features
explained but may be
missing information such
as target audience and
purpose.
Project and key features
explained. May have minor
omissions or could be made
clearer.
Project and key features
explained concisely with clear
identification of purpose and
target audience.
Project and key features
explained concisely with clear
links between purpose,
features and the target
audience.
Demonstration of project May not demonstrate
project or may not be
functional.
Project is demonstrated
but may omit some
features or have some
minor issues.
Project is demonstrated and
shows the major features.
Project is demonstrated with
shows the major features with
a clear explanation of each.
Project is demonstrated and
shows all major features with
an effective explanation of
each that demonstrates a
thorough understanding of the
systems.
Discussion of development process May not discuss
development process or
may be overly simplistic.
Development process
discussed but may be
lacking detail or not clearly
identify purpose or goals.
Development process
discussed with identification of
purpose and goals. Some
additional detail or clarity
would be helpful.
Development process
discussed with detail including
clear identification of the
purpose and goals.
Development process
discussed in detail in terms of
purpose and goals with insight
and demonstration of
learning.
Discussion of obstacles and
challenges
May not identify or discuss
obstacles or challenges.
Obstacles and challenges
identified but may lack
detail or not clearly explain
how these were overcome.
Obstacles and challenges
identified with simple
explanation of how these were
overcome.
Obstacles and challenges
identified with clear
explanation of how these were
overcome and the learning
that occurred.
Obstacles and challenges
identified with thorough
explanation of how these were
overcome, the decisions and
the learning that occurred.
Communication Presentation may be clearly
unrehearsed or stilted. May
be missing visual aids.
Presentation includes
visual aids but may be
somewhat stilted or
unprepared.
Presentation makes good use
of visual aids. May have some
minor issues with flow or clear
communication.
Presentation makes very
effective use of visual aids and
appears polished and
rehearsed.
Presentations makes excellent
use of visual aids to support
discussion. Communication is
clear, rehearsed and
professional.
OVERALL TOTAL
(max: 25 points, converted to 10%)
<12.5 points 12.5 to 14.5 points 15 to 17 points 17.5 to 19.5 points 20 to 25 points