Project 2 (Responsive Web App: Implementation and Demonstration)

Assessment Summary Title: Project 2 (Responsive Web App: Implementation and Demonstration) Group:☐ Individual:☒ Graded out of: 90 Weight: 40% (30% project + 10% oral presentation) Due date: Week 11 8:00 pm on Friday Submission: Online:☒ Hardcopy:☐ Instructions: • Final project submission – students submit using the submission tool located under the week 11 section of Moodle. • Oral presentation date – Week 12, during class time • NOTE: students cannot change their project theme in project 2, it is mandatory that you read and understand both project 1 and project 2 requirements before you start planning your project 1. Relevant Content Weeks & ULOs ☒Week 1 ☒Week 2 ☒Week 3 ☒Week 4 ☒Week 5 ☒Week 6 ☒Week 7 ☒Week 8 ☒Week 9 ☒Week 10 ☐Week 11 ☐Week 12 ☒ULO1 ☒ULO2 ☐ULO3 Apply knowledge of responsive web analysis and design skills to create responsive applications. Apply knowledge of app development frameworks such as Vue and application software to create a responsive web app solution. Develop a portfolio that demonstrates evidence of emerging skills in web apps technologies for professional practice. Please read the full assessment details that follow. Summary: In this assessment, you will demonstrate your understanding of the coding concepts and skills developed throughout this trimester in a creative context. Using robust platform such as Vue framework, you will use HTML, CSS and JavaScript to create a responsive web application. You are free to think, design and implement imaginative behaviours and actions for the components in your project 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. In project 2, you will be implementing based on your project proposal in project 1. Your lecturer will be happy to hear your ideas and provide feedback. Submission: Each student must submit one .zip file including the following files using the Project 2 submission link prior to the due date. Your submission must include: 1. Written report as an HTML file. This report (maximum 5 pages, may be shorter) should explain your implementation, design and reasoning behind your code and system, include the following information: • Overall description of design challenges and system. • Explanation of how each of the below listed coding concept requirements have been fulfilled in a creative manner (screenshots of blueprints, diagrams may also be useful here!). 2. Project in a .zip archive. Make sure to zip the entire project directory (the folder containing the project file and all other relevant folders such as images, fonts, js etc.). 3. PowerPoint presentation of your oral presentation visual aid. In addition, you will present your power point slides in week 12 during class time. This oral presentation should include the following information: • Short summary of the project goals including target audience. • 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, UI/UX, create asset lists, etc). • Highlights of key features and how the coding concepts you have learned were applied to these. • Demonstration of the functional project. • 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! Tasks: You are welcome to take suggestions on your project 2 design and implementation from your classmates and/or lecturer. However, you must develop your web application based on your Project 1 Proposal. You are free to improve or modify MINOR changesfrom your project 1 proposal during the development stage, however it is subject to approval from your lecturer. Using your Project Proposal (Project 1) as a guide, you should apply coding using Vue framework to your designed components in order to demonstrate a range of coding concepts in a creative manner. During the implementation stage, the following effective coding practices (available in the table on the NEXT PAGE) should be demonstrated by your implementation: Coding Practices 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 application satisfies each of these requirements is up to your design. Your submission of the project 2 must be presented as a single zip archive. Marking Rubric for Project 2 Student should read the following marking rubric and understand the requirement of the project 2. If you have any questions, please feel free to ask your lecturer. Project & Written Report Rubric (30%) CRITERIA FAIL PASS CREDIT DISTINCTION HIGH DISTINCTION <2.5 POINTS 2.5 POINTS 3.5 POINTS 4 POINTS 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 ofthe 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. Variables Functions (e.g. inside Methods, Computed and Watchers Property) Declarative rendering and Input bindings (e.g. v-model) Conditional rendering (e.g. v-if) and List rendering (e.g. v-for) Handling user inputs(e.g. v-on) and event handling Components and props Transitions and Animation Routing Class and Style bindings (to apply style) CODING PRACTISES (15 points) Documentation (Code commenting) 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 (Coding standard) 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 issuesor some left at default. Generally understandable after examination. Blueprints may not be very neat or require close examination to read. 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 formatted with care to be neat and highly readable. Structure (Code organization) 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, screenshots and charts (For each coding concept) May be largely or completely absent or have major issues. Supporting diagrams, screenshots or charts included but may be somewhat simplistic or not used effectively. Supporting diagrams, screenshots or charts are included and provide some additional insights into the coding. Supporting diagrams, screenshots or 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, screenshots or 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 (Consistent looking feel) 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 responsive web. May not be fit for identified target audience. Demonstrates some elements of creativity, although some may not be fully realized or fit for purpose. Demonstrates creativity in some aspects of the project and expands upon the base concept of a responsive web. Design is appropriate for the target audience. Demonstrates thorough creativity in most aspects of the project and clearly expands upon the base concept of a responsive web by taking it in a more creative direction. Design is effective for the target audience. Demonstrates exceptional creativity in most aspects of the project and expertly 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 points 46 to 63 points 64 to 72 points 73 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. 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. 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 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 made 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: 50 points, converted to 10%) <20 points 21 to 25 points 26 to 30 points 31 to 35 points 36 to 50 points