Document Version: 2018-06-26 1 / 44
SIT120
> /unitchair "Henry Larkin"
> /topic "Introduction to Responsive Web Apps"
> /build web apps
SIT120
Document Version: 2018-06-26 2 / 44
SIT120
Table of Contents
Overview.............................................................................................................................. 3
Assessment ........................................................................................................................ 11
Plagiarism Advice ....................................................................................................................13
Presentation............................................................................................................................13
#1: Project 1................................................................................................................................14
Topic .......................................................................................................................................14
Required Sections....................................................................................................................15
Marking...................................................................................................................................16
#2: Project 2................................................................................................................................20
Platform..................................................................................................................................20
Project Directory .....................................................................................................................20
Minimum Requirements..........................................................................................................21
Marking...................................................................................................................................22
#3: Portfolio................................................................................................................................26
Required Sections....................................................................................................................27
Marking...................................................................................................................................27
Submission..............................................................................................................................29
Game Ideas ........................................................................................................................ 30
Sample Apps...............................................................................................................................31
SIT120
Document Version: 2018-06-26 3 / 44
Overview
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.
SIT120
Document Version: 2018-06-26 11 / 44
Assessment
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
learning commitments.
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.
SIT120
Document Version: 2018-06-26 13 / 44
Plagiarism Advice
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.
Presentation
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.
SIT120
Document Version: 2018-06-26 14 / 44
#1: Project 1
Critical Information Summary
Weight 30%
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:
1. SIDxxxxxxxx-A1.html
2. SIDxxxxxxxx-A1.css
3. images/
4. fonts/
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.
Topic
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.
SIT120
Document Version: 2018-06-26 15 / 44
Required Sections
This Project Plan is worth 30% of your grade. It is expected that students spend around 8-12
hours researching & writing this plan.
1. Marking Justification: The initial section in your HTML file details the grade you are
aiming for, and evidence for each individual rubric. Make this a table, with the first
column as the criteria, the second column as the grade you want, the third column
containing a bullet-point list of your justifications.
2. Overview: An overview of the app you’ll develop. Generally, you will write this section
after you complete the competitor analysis, so that you know what apps are already
out there in your field, what they are like, and thus what kind of app you want to
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
minimum of 150 words per review to pass, 200+ words for higher grades. It is up to
SIT120留学生作业代做、代做Web Apps课程作业、代写HTML, CSS,JavaScript编程语言作业
you to decide what you think is relevant, but I would expect a minimum of: app name,
app price / monetisation, core features, most common good comments (summarised),
most common bad comments (summarised), and a screenshot of the most common
user interface within the app (so you know what the look & feel is, what the colour
themes are, etc.).
4. Features: A feature list split into two sections, Primary “must have” features, and
Secondary “would like” features that your app may include. Each section can be a
simple bullet-point list or table, first naming your feature, then explaining it with
approximately 3-4 sentences. For an app of this level, assume each customer will pay
$30 for your app. What does your app need to contain, and how professional does it
need to look & feel, for you to justify a $30 asking price?
5. Milestones: A list of milestones (weekly targets), ordered and structured, such that
your natural progression in your app is highly likely to follow the milestone order
exactly. Can be a simple bullet-point list per week with sub-bullet-points for items.
Each item should have at the end how long you expect it to take [4 hours]. As a general
rule in IT, however long you expect it to take, always double it. So, if you think it’ll take
4 hours, write [8 hours].
6. Design: Wireframe / simple mockup of the visual screens your app will have. You may
use any software you want for this.
7. Game Data: A description of your static (unchanging) game data used for your app
(e.g. each game level map layout, data lists, word lists, etc.). This will be loaded into
memory when your game loads, but won’t be user-editable (usually). You must
present both an explanation of the structure (as a table or bullet-point list) AND have
a significant example (~200 words) of the data structure in JSON format.
8. Global Variables: These are your global user variables used to track your game state
(in-memory variables, such as user score, current level, current progress through
current level). What dynamic “information” will you need to know throughout your
game, that will change as the user uses your app. This should be presented as a table
or bullet-point list, outlining: (a) the name you’ll give your variable, (b) the data type,
(c) an explanation of what it is used for.
SIT120
Document Version: 2018-06-26 16 / 44
9. Resources Required (optional): A list of any external images / sounds you plan to
source. Can be a simple bullet-point list with items such as “images for autumn,
winter, summer, spring scenery”
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. For example, if
you want a Credit, then you need to meet everything down the credit column, and
everything down the Pass column.
If you miss even one criteria for that grade, you cannot get that grade.
In other words, your grade will be the lowest grade of any one criteria.
Additional marking explanations:
• Overall content:
o This is pure word count of your actual content (not including references or
marking justification).
• Explanation:
o Paragraph structure means: topic sentence, supporting sentences, conclusion
sentence.
o ELI5 means “Explain Like I’m 5 (years old)”, as in, imagine you are explaining
an introductory sentence or paragraph of a section to a 5-year-old child. How
would you use language, analogies, and generally express your idea so that a
5-year-old would understand the gist of your point?
• Milestones:
o Pass: In IT in general, it’s usual to double the estimate of hours required, as
we always underestimate how long it takes to overcome unforeseen bugs.
o Credit: Dependencies of a milestone are the previous milestones (and any
additional smaller factors such as software installs, API access, etc.) that need
to be completed before this milestone can be begun.
o Distinction: For user-testing, write “[release]” in a milestone title if it can be
released for user testing. This means that the milestones to this point must
leave the app in a workable state. This is a good habit to get into when
planning, such that if you run out of time, you can submit the last “[release]”
of your app and end-users can buy it and use it without issue. This must be
justifiable. E.g. you couldn’t write “[release]” on a server-side script, or a
client that needs a server and doesn’t yet have server connectivity, as the app
wouldn’t “work” in any realistic sense to the end-user. So, this isn’t simply a
matter of writing “[release]” anywhere, but requires you to think about the
shortest number of milestones necessary to achieve each
“[release]” copy. To achieve a Distinction, I must agree that the “[release]”
items are realistic and appropriate to an end-user getting valid use out of the
app at that release point.
• Game Data / Global Variables:
o Data types include: String, Number, Boolean, Array
(and say what the array contains, is it Strings, or Numbers, or Objects, etc),
Object (and say what the main keys of the object will be, as well as what data
types they will be, as well as an explanation of what that key within an object
will be used for).
SIT120
Document Version: 2018-06-26 20 / 44
#2: Project 2
Critical Information Summary
Weight 40%
Due Friday Week 10, 5pm
Individual / Group Individual
Submission via Unit Site Assessment Dropbox
Required Files Zip file
Filename: SIDxxxxxxxxx-A2.zip
You will individually create a fully complete web game using the web app design skills shown
in class (from the theory + lab content). You will submit your completed application‘s project
folder as a zip file. You also need to re-upload your completed zip file at the end of every week
that you work, so that we can see your progress over the entire trimester.
For the final submission, you will also present your completed educational game during our
Week 12 class. This will be an approximately 5-minute presentation, presented in any way
you choose. Your presentation will detail what your game does, how you created it, and the
challenges faced and overcome.
This is an individual project.
Platform
The platform must be strictly HTML, CSS, and JavaScript. No other libraries or languages can
be used.
Project Directory
Your Project Folder/Directory must contain the following structure:
• js/ (all your application-code JavaScript files will go here). Examples:
o app.js
o utilityFunctions.js
o ui.js
o gameElements.js
o game.js
o menu.js
o settings.js
• data/ (all your game data will go here, even though they’re JavaScript files, they’re
data). Examples:
o gameLevel1.js
SIT120
Document Version: 2018-06-26 21 / 44
o gameLevel2.js
o wordbank.js
o vocab.js
o characterDetails.js
o config.js
• 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"
Minimum Requirements
1. The game must be educational / learning. Kids learning games are usually easiest.
2. The game must only use: HTML, CSS, and JavaScript. No other libraries or languages
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
taught.
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.
4. All data should be logically separated in separate JavaScript files. Your game data
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
declaration:
// ensure the global gameLevels variable exists, or create it
window.gameLevels = window.gameLevels || [];
// now add the data for this level
gameLevels.push( {
"levelName" : "Basic Verbs 1",
"wordList" : [
"run", "eat", "sleep"
],
"pastTense": {
"run": "ran",
"eat": "ate",
SIT120
Document Version: 2018-06-26 22 / 44
"sleep": "slept"
}
"difficulty": 4
} );
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
new material.
• 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).
• Data Structures: It is mandatory that all your data is in separate JavaScript files
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
version.
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
level.
SIT120
Document Version: 2018-06-26 26 / 44
#3: Portfolio
Critical Information Summary
Weight 30%
Due Friday Week 8, 5pm
Individual / Group Individual
Submission via Unit Site Assessment Dropbox
Rolling weekly submission (keep uploading
the latest copy of your doc each week)
Required Files MS Word Doc or PDF
Filename: SIDxxxxxxxxx-A3-Portfolio.docx
The Portfolio (which I like to refer to as the "Unit Summary Report") is where you create your
notes about this entire unit, week by week. You will also demonstrate that you have
accomplished all of the practical exercises (with screenshots as evidence). We have this
Portfolio instead of an exam, so keep in mind that you need to demonstrate your
understanding equivalent to if you were sitting an exam.
In this Portfolio, you will create a reflective summary of the class notes and answers to
practical lab exercises for every topic from every week within our unit.
You are required to present a written report of each week’s topic, analysing and discussing
how the topic relates to developing web applications. You will also include a screenshot of
the output of each week’s practical exercise, along with any significant learning notes.
Appropriate formatting required.
Note, this is due before the Project 2 assessment, because you must have covered all
concepts to be able to complete the Project 2. Thus, this earlier due date somewhat forces
you to make sure you cover all theory + practical labs before you can finish the Project 2.
SIT120
Document Version: 2018-06-26 27 / 44
Required Sections
• Marking Justification: A cover page detailing the grade you are aiming for, and
evidence for each individual rubric.
• Week 1:
o Notes
o Lab Exercise Answers
• Week 2:
o Notes
o Lab Exercise Answers
• Week 3:
o Notes
o Lab Exercise Answers
o Project Progress
• Week 4:
o Notes
o Lab Exercise Answers
o Project Progress
• etc…
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.
Criteria Pass Credit Distinction HD
Weekly updates You have
uploaded a copy
of your Portfolio
every week until
final submission.
You have completed
all exercises by the
end of each week
(Friday 5 pm) of
that week.
Presentation Your doc has
consistent styling,
title page,
headers/footers,
heading styles,
and has been spell
Your doc uses Styles
for all main
formatting.
Your work would pass
as a professional
document, both when
read online and when
printed.
SIT120
Document Version: 2018-06-26 28 / 44
checked &
grammar checked.
Rich text You write in
mostly plain text.
You include some
bullets / lists / tables /
images to explain your
ideas.
Your doc has an equal
mix of text, tables, and
images or diagrams.
Your doc uses
Style padding and
margins to
maximise clarity
through white
space.
Explanation You have fair
spelling &
grammar, have
appropriate
paragraph
structure.
Your explanation and
analysis are easy to
understand, such that
you could give your
doc to any first year IT
student, and they
would learn from your
report.
Your ideas are both
easy to understand
and read, while
simultaneously cover
enough detail for a
team of developers to
learn from it.
Note Summary You‘ve completed
every week‘s
lecture note
summary (at least
100 words),
summarising all
main points.
Each week’s notes
would be at least 500
words in length, and
additionally usually
contain at least 5 code
snippets. Your notes
link each week‘s
points back to
previous weeks‘
learning.
Your notes also ask
questions or reflects
when you see
something that isn‘t
answered, or that
you‘ve become
curious about. E.g. "I
wonder if pixel density
relates to those blocky
pixels I see in videos
w
Document Version: 2018-06-26 30 / 44
Game Ideas
Here is a random list of topic areas that you should consider, ranging from kid’s games, to
school games, to adult education. All of these ideas are allowable and meet the criteria for
the Project.
1. Sorting objects into buckets as quickly as possible. E.g. dragging a list of items into
relatable circles, such as colours, shades of colour, word types (e.g. past tense /
present tense), object types (modes of transport such as car/bus/bicycle vs types of
buildings vs types of people), etc. Sorting objects into a sequence. Sequences can be
numerical, size-based objects, side-based (e.g. number of sides on a shape), mathbased,
word-based (e.g. from lightest weighting of a word, such as “kind” to the
heaviest weighting, such as “benevolent”), etc. Could also sort patterns involving
multiple objects.
2. Listen to word (Text-to-Speech API) and then select which image it is, and pick
alternative (incorrect) image options that are very similar in their sound. The learning
language can be English or something else.
3. Identify the incorrectly spelled words in a sentence. Have a small data-bank of
common incorrect sequences, to find and replace in any word from the word list (e.g.
“ou” and “oo” sound pairs, “au” and “uo” sound pairs).
4. Identify incorrect grammar (e.g. tense) sentence within a randomly-generated
paragraph.
5. Convert sentences between tenses or pronouns (from first-person to third-person).
6. Banking transactions / maths / loans / credit card simulation to learn about credit /
banking / interest rates / supply & domain.
7. Diagnose simple health conditions on a body image, selecting which test to perform
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
SIT120
Document Version: 2018-06-26 31 / 44
score decreases each incorrect response. Could also do the same for trains, “Take the
Lilydale for 4 stops, then switch to platform 3 and take the next train for 2 stops, then
platform 8 for 1 stop, and exit via the North exit and find me there (tap the correct
person to meet).
15. Randomised messy house of items (as images/icons), and need to, as quickly as
possible (timed), drag items to their correct location (cupboard, kitchen counter,
bathroom, etc.).
16. Age of discovery sailing game. Can navigate between locations (and learn about
them), where each location may have some, but not all, required items for the
continuation of a journey (e.g. food / water / fuel). Each item may have different
bartering amounts, or may not be tradable at all, at different ports.
17. History: give clues as to what time period a time traveller is in, and the player has to
guess the period from a given list of periods, e.g. 1600AD London, 1300AD (no location
given), etc.
Sample Apps
This section contains a selection of screenshots from educational games (mostly from Peak,
Elevate and Lumosity). You don’t need to specifically know how any of these games operate.
Rather, use these as inspiration for the kinds of educational games you can create. Especially
focus on how the interface is responsive, and is extremely easy to use on a touch-based
device.
因为专业，所以值得信赖。如有需要，请加QQ：99515681 或邮箱：[email protected]
微信：codehelp
原文地址：https://www.cnblogs.com/clga/p/11604308.html