Document Version: 2018-06-26 1 / 44
> /unitchair "Henry Larkin"
> /topic "Introduction to Responsive Web Apps"
> /build web apps
Document Version: 2018-06-26 2 / 44
Table of Contents
Document Version: 2018-06-26 3 / 44
Welcome!! I’m very happy you have chosen to enrol in SIT120. Below is a summary of how
assessment is handled within this unit:
1. This unit covers beginner-to-intermediate programming in 10 short weeks.
2. All the content-heavy stuff is in the first 6/7 weeks, afterwards the weekly material is
more focused on improving the design aspect of web applications..
3. There are weekly (rolling)submission requirementsfor the Portfolio (your record of
exercise + learning) beginning week 1 and ending week 8.
With that said, by the end of the unit you’ll be able to make your own apps... whether they be
on websites, desktops, mobile devices, or servers. The 3 core technologies taught can be
used to program apps for all device types.
Most of the information required for the entire unit is ready for you now, available in this
document and the SIT120 Theory + Exercise Booklet. The Unit Chair also provides video
content for further study outside of class, so you can learn how to program, and more
importantly how to overcome problems by using the examples provided by the Unit Chair.
This is an intensive unit. In just 10 weeks, I’ll be pushing you to go from zero to making a
complete web app. That means each week you’ll need to keep pushing ahead, making sure
you not only cover all theory material and complete all lab exercises, but also write up
your summaries and lab answers into your Portfolio document each week, and most
importantly, be working on your Projects each week.
At a minimum, you will need at least 10 hours of study each week for this unit - 4 hours
from the weekly classes, and an additional 6 of self study. Each week will also build upon the
previous weeks' topics, so it's very important that you do not fall too far behind.
This unit can feel fast paced, especially early on, but it is incredibly rewarding to learn the
skills that not only form the foundation of how we typically use the Web, but also how we can
use those same skills to build software applications.
Document Version: 2018-06-26 11 / 44
There are 3 items of assessment that you need to complete in this unit:
1 Project 1 30% Week 4, Friday 5pm
2 Project 2 40% Week 12, Friday 5pm
3 Portfolio / Unit Summary 30% Week 8, Friday 5pm
Assessment is always due on a Friday at 5pm for this unit, and it is recommended that
students add that into a weekly study planner so that it's easier to manage with your other
Note: The Portfolio assessment item must be submitted weekly (by Friday 5pm) to show
regular progress being made. If students do not upload their Portfolio each week they will
be notified of a late assessment; multiple weeks missed may result in a loss of marks
towards the final Portfolio grade.
Document Version: 2018-06-26 13 / 44
All work must be your own from your own mind, created new for this trimester. You cannot
use any previous assignments you've done in the past, or for other units. Everything must
be your own work, and must be new work, created during this trimester.
You're allowed to use small parts of code from other sources (e.g. stackoverflow), but you
must attribute (credit) them before the block of code. E.g.
/* This idea to sort in reverse is from a user zimbaba at URL_HERE */
… code …
/* end zimbaba's idea*/
Likewise, you're allowed to use images / sounds that are licensed for commercial reuse
with modifications, or images / sounds that are in the public domain, provided you list
them in the app in an About page under a section called Legal, as well as in a separate
licenses.txt file, to credit everything you use.
Please make your work look amazing. The look (and feel) of any document / web app has
been proven again and again to be the biggest influencer in success. Always use MS Word
styles for document consistency. Always apply Colour Theory to your app colour choices.
Marks are allocated towards the look and feel of your assessments, so plan ahead, and get
feedback from your teacher and other students if you're not sure if a set of colours or a
certain design looks good.
Document Version: 2018-06-26 14 / 44
#1: Project 1
Critical Information Summary
Due Friday Week 4, 5pm
Individual / Group Individual
Submission via Unit Site Assessment Dropbox
Required Files 1000 – 2500+ word report in a HTML file.
Zip file (SIDxxxxxxxx-A1.zip), containing:
Topic See below.
You are to create an app proposal document in preparation of your Project, detailing an
idea for an app, its justification, and an appraisal of similar apps within the app store. This is
an individual student assignment.
This document does not have to be strictly adhered to for your Project 2. In fact, you can
change your Project 2 completely if you wish (a completely different direction / features /
even topic is acceptable). But this document should be as accurate as possible, to help you
move quickly through the Project. Without a step-by-step plan on what to do each day you
work on your Project, you’ll feel lost and unsure where to start or what to do next.
The topic of your project (and thus also the topic of this Project Plan), is an educational game
/ brain-training game (see section “Game Ideas” at the end of this document for examples).
You want to pick a problem-solving / brain-training idea that interests you.
The idea you pick cannot be the exact same as other students' ideas (i.e. you and a friend
can't develop your Projects using the same idea) but they can be similar. If you're not sure
about your idea, talk to your teacher during class time and they can determine whether
the idea is unique enough.
Note that it’s important to narrow down what kind of game and/or subject area you feel like
creating first. Then, you should look at the competitor analysis, to see what similar games are
in your specific area, to see if you are still comfortable with your chosen area. Then you can
write the rest of your Project Plan. So: (1) pick a topic, (2) competitor analysis, and repeat
step 1 if necessary, (3) write the Project Plan.
create and improve on. It’s fine to copy app concepts. So you can make the same type
of game. You just can’t use anyone’s artwork / text / proprietary character names, etc.
3. Competitor Analysis: An analysis of 10 competitors, either web app, mobile app,
website, or traditional brick & mortar (physical business) competitors. Generally, a
This is an individual project.
Your Project Folder/Directory must contain the following structure:
Document Version: 2018-06-26 21 / 44
• images/ (all your images are in here)
• sounds/ (all your sound files go in here)
• index.html (the file I open in Google Chrome to run your app)
• licenses.txt / .csv (one line per image / sound file you use)
• changelog.txt / .md (a list of days you worked and what you achieved)
• readme.txt / .md (details of yourself, and an overview of your project)
• Marking Justification.docx (A cover page detailing the grade you are aiming for, and
evidence for each individual rubric)
• Demonstration.mp4 (An approximately 5-minute long demonstration video of your
project, and the features you wish to be graded for)
If you create your own graphics, put them in a folder: "raw sources"
1. The game must be educational / learning. Kids learning games are usually easiest.
can be used, as otherwise we cannot assess what you have learned from the content
in this unit. The purpose of this project is to demonstrate that you have learned the
concepts covered in this unit, so it's important that you demonstrate what has been
3. The game must use only a single index.html file. No other html files allowed.
o The index.html file will have a blank <BODY>, and simply load CSS and JS files
through the <HEAD>, which then load and run the game.
should never be “hard-wired” into your application code, but should be in separate
files so that a non-programmer would be able to change them without really knowing
anything about programming. E.g. data/gameLevel1.js would contain a single, large
// ensure the global gameLevels variable exists, or create it
window.gameLevels = window.gameLevels || ;
// now add the data for this level
"levelName" : "Basic Verbs 1",
"wordList" : [
"run", "eat", "sleep"
Document Version: 2018-06-26 22 / 44
Marking Rubric (University)
To achieve a particular grade, you must meet all criteria for that grade, as per the
table below. Each higher grade requires all features of the previous grade as well.
Additional marking explanations:
• Weekly Progress (Changelog.txt / .md): A file within your project directory of the
progress you make each day you work.
• Code quality: Code quality means both indentation (TAB key) and comments. A
method signature means each of the parameters, as well as the return type.
• Legal: You must include a licenses.txt / .xls file in your project’s root directory. Every
externally-sourced item must be legal for you to use for commercial purposes, and
you must have one row per item, recording:
o Item name: image/sound filename you have renamed it to, or
method/function/class where the code is found.
o License type: (Public Domain / CC-BY / CC0 / GPL / MIT / Apache / BSD)
o Author / Attribution: (name of author)
o Source Website: (original website of the content, as per the author’s wishes)
• Playable Levels: A level’s duration must be a minimum of 10 minutes.
• Playability: Playability is the length of time an average player would be able to play
your game and get enjoyment out of it. Some games can be “finished” (e.g. all levels
complete) in only a few hours, whereas others may take weeks or months. Note, this
should not involve lots of “grinding” nor repeat questions, where the user is doing
repetitive (and usually boring) tasks, but where the player is continually engaged with
• UI Layout: Each layout and orientation will be tested using Google Chrome when we
mark your work.
• Code Structure: A new UI component is any function that creates and returns a
HTML element (such as a DIV) that contains other elements within it (e.g.
createSearchBar() would create a DIV containing a textbox for the search text, AND a
button to enable the search).
specifically for data (those files do not contain program code). This is to create a
logical separation between program code and data, such that a non-programmer
could edit and expand the game’s data and your program would adapt automatically.
For example, you would never create 3 buttons for 3 levels in program code
manually, but would use a loop to generate the number of buttons, based on the
number of levels that are in the data. This way levels can be added without any
changes to program code.
• Presentation: Note that the presentations will be held during our week 12 class
time, but students can continue to work on their Project after their presentation
and submit their assessment at the end of the week. For the presentation, students
must present what they have completed so far, but it does not have to be the final
Note that there is no HD rubric for Weekly Progress, Code Quality, Data Structures, UI
Layout, Bugs, and Demonstration Video. If you get a Distinction category, this also counts for
High Distinction. Legal does not have a Credit rubric, so a Pass level also counts as a Credit
and see what output comes out (based on a start-of-game computed scenario).
8. Travel the world in a plane by calculating fuel required for each leg of the trip (while
simultaneously covering geography topics).
9. Learn-to-type exercises, measuring speed and accuracy of each set of exercises.
10. Memory match: tap to reveal up to two cards at any time, and when they are a match
then they stay revealed. The player will remember positions of cards to try and match
all cards in the fewest steps possible. The board size varies automatically per level (e.g.
2x2 tiles, 3x3 tiles, 4x4 tiles, etc.), each game randomly selecting a different set/topic
of tile pieces.
11. Crossword puzzles (computer-generated each time).
12. Any of hundreds of math-type lessons (where one taps the answer, not types it, to
make it mobile-friendly).
13. Be given (computer-randomised) weather reports, and match what clothes will
minimise discomfort (e.g. if a raincoat but no rain pants, and it’s raining with wind,
then discomfort level of legs would lower player’s score).
14. Be given text set of directions for memorisation, then be shown a computergenerated
map and have to remember the journey, from the player’s position
(different each game), to find some location on the map. E.g. player is given “Turn left
at first intersection, right at 4th intersection, travel past 3 shops, and click the shop on
the left”. The user can keep clicking location boxes if they get it incorrect, but their