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 purpos e. 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
