Category Archives: Computer Science

Quarter 4 Project

Objective: To create a complex, industry level, project that builds off the skills we learned this year. You must learn at least one new technology . Your grade will be based on the level of complexity of your final project. I have listed some examples of technologies to learn and rated their general complexity. Ultimately, complexity will be evaluated by me and you are welcome to ask for feedback on where the complexity of your project will land you.

Projects from last class

Links and Resources for learning Phaser

Note: I am not familiar with many of the technologies below.  The purpose here is for you to learn something, yourself, as web developers are often forced to do in the real world. If you think you will need help, I suggest going with Phaser because most students will do it and you can help each other . I have limited knowledge of Phaser.


Phaser ( The most popular 4th quarter project topic is to create phaser games housed in a bootstrap based website). There is a great range in complexity that using Phaser allows for

Example Projects, probable complexity and grade.

The table below lists technologies you can use and provides a general guideline for its complexity and likely grade outcome. If something is classified as an “add-on,” then it is a way to increase complexity but should not, in and of itself, be considered complex enough on its own.

Often the grades are a “range” because it depends on what, ultimately your project does. Take “vue” for instance. This is a very popular, very modern javascript framework so it can be quite complex, but ultimately it depends on what your program actually does that will determine the final grade.

Technology Complexity Complexity lvl Grade
Phaser (meh) Edits one of the pre-built games on, nothing much new very low C
Phaser (moderate) Creates one new game, but it is relatively simple (asteroids) and submits 1 page website that uses bootstrap Moderate B-
Phaser (good) Creates completely new complex game (maybe uses physics or other unique coding) moderate-high B+/ A
Node.js/Gulp   Learns how to use nodejs and employs Gulp to improve workflow Moderate add on
 Remote git Learns how to push and pull from remote git repo on github low add-on
 Vue Learns how to use the vue.js framework for javascript development high B /A-
Foundation Learn a bootstrap alternative and create several web pages moderately low C+
Angular Creates a multi page website with the angular .js framework high B/A
Mathjax Learns how to integrate the Mathjax math library for rendering professional looking mathematics low add-on
Vim Consistently edits with Vim . I will quiz you on how to use VIM and I will expect to see you editing with VIM during class moderate add on

List of other utitlites and libraries to use:


Notes: these can be combined to add complexity and professionalism. For instance, you can create a multipage website based on Vue and some of the pages can house phaser games that you create. This has the potential of an A+, assuming the Phaser games are original.

Not comfortable with Programming? Here is a multi technology example that will get a B:

This is an example that will get people who are not very comfortable with programming into the “B” range: Learn how to use Foundation, or another bootstrap alternative, and also how to integrate Mathjax to display math equations. You can create a multi page math website full of equations. You could add using remote git or Gulp to get the grade up even a bit more.

Javascript framework comparisons :

Phaser 3 Links

Phaser  ( Where you should start)

Medium To Advanced Level Links (not to start, but once you have a clue)

  • Emmanuele Feronato – amazing blog about game dev and lots of phaser stuff here .
  • Ourcade Co – great, albeit advanced and very professional, tutorials/tips on phaser dev – here .

Great YouTube Videos

  • Zeneva
    • – Setting up Phaser, local server, files, creating scenes . Does not use Classes so easier for most to understand


Bootstrap Presentation


  1. PPT highlight and explaining the most important parts, screenshots showing the code, and what it does ( ie. a screenshot also from the web page)
  2.  Use codepen to create demos illustrating the key elements of your topic . Pro tip- do not wait until the last minute to try to figure out codepen.

I have been asked “How many examples should I have”?

And there is no one answer. You should convey the “major important” aspects. Absolute bare minimum is 5 code examples but there is no need to kill us with redundant code that only has small changes.

bootstrap.topics.txt (


Your First Git – Tips


  1. setting up your name and email:
  2.  bat file to automatically change directory and run git status

Create a new  text file and add the code below. Then rename the file  so that is a batch file. (ie. that its file extension is “.bat” instead of .txt) .


SUPA Web 2020-21


Important Links

Live Reload


Tip and tricks for git


Bootstrap 4

Quarter 3

Quarter 4


2018-19 Version


Bootstrap Based Tip Calculator UX


Microbit Firia Lab Concepts

  1. Unit 1
    1. Datatypes (scroll vs show())
  2. Unit 2
    1. Variables (delay= 1000)
    2. Roman Translator Standalone Assign
  3. Unit 3
    1. while loop
  4. Unit 4
    1. break statement
  5. Unit 5
    1. Intro to lists
  6. Unit 6
    1. Lists
    2. len function
    3. random index from list (Answer Bot)
  7. Unit 7
    1. Probability Lab
  8. Unit 8
    1. def() using functions
  9. Unit 9