Theory and Programming of Interactive Media II

Welcome to STU 5013, Spring 2019 at Teachers College, Columbia University


Duration: 01/23/19 – 05/14/1

Dates: Thursdays 2:50 – 5:00pm

Location: Grace Dodge Hall 449

Instructor: Zhenzhen Qi,

Course Assistant: Yuntong Man,

Feel free to approach us before/after class or through email/Slack any time. 


This course is the second-level course in a sequence beginning with MSTU 5003. Students acquire advanced theoretical and technical knowledge needed to design and develop interactive web-based instructional applications grounded firmly in learning theory and design principles. The course is project-based whereby students delve into specific learning research to produce a theoretical model and well-aligned technical solutions. While the introductory course focuses on basic theory and technical implementation of instructional interactive media, Part II dives deeper into all aspects of the topic.

Media and Learning Theory

Weekly class lectures will cover discussions on theoretical concerns related to digital culture and learning. A curated list of media and learning theories will be selected from the following Publications:

Manovich, L. (2001). The language of new media. Cambridge, Mass: MIT Press.  (Access book from here)

Allison Parrish (2018). Articulations.  120 pp. Counterpath Press, 2018. 

Hito Steyerl, How Not to be Seen: A Fucking Didactic Educational .MOV File, (2013). 

Design Principles

Certain readings/tutorials on design principles will be assigned throughout the semester to help provide guidance and vocabularies to support inClass project critiques and the design phase of the project development process. 

User Experience Design

Visual Flow:

Information Architecture:

Responsive design


With regard to programming, this course is concerned with three areas of software development:

  1. Understanding and utilizing concepts of computational thinking and programming theory
  2. Using learning theories, principles, and evidence to guide software projects
  3. Coding 

Prior knowledge of computer programming is necessary. Students are expected to be competent with HTML/CSS and Javascript. Students should refer to the Part I syllabus for details about requisite understanding.

The primary language that we will use for the programming aspect of the course is JavaScript and HTML/CSS. 

Below is the list of technical learning materials we will refer to: 

Main Resources

Additional Tutorials


Required Tools


Attendance is mandatory. Aside from officially sanctioned and documented reasons for absence, failure to attend will have a negative impact on participation. Please notify me beforehand if you know you cannot attend class. Students are responsible for acquiring all missed materials and lecture notes. Accommodations through various techniques such as video conferencing will be permitted but is not an alternative to attending live and will count as a missed class. All such accommodations will be the sole responsibility of the student and conducted between him/herself and his/her fellow peers.


Students are encouraged to form teams of two to four members when completing projects. When forming teams, it is important that members have similar general interests and aspirations. Chat with your classmates about general issues related to aesthetics, design, interactive media technology, and what he or she consider as knowledge and learning can help inform your decision making. You will quickly find out these are very complex topics that are ladenned with multiple perspectives. While all perspectives have their strength and weakness, they can greatly influence how one sees these ideas being manifested within a specific web design and development context. During team discussions, believe in the value of your own voice while keeping an open mind. Use different voices to help you think, see, and be more. While your fellow classmate is talking or presenting, no one is allowed to use any digital device, except viewing presentation blog or searching for references. 


Exercises are small, open-ended, semi-structured problems that you will need to solve that demonstrate an understanding of the core concepts presented throughout the semester. Exercises are Individual assignment submissions although I encourage everyone to help each other collaboratively on these. These are provided throughout the semester based on the progress made on course learning objectives, regular lectures, interests and topics that arise throughout class discussions. 


There are two major projects for this semester, each scheduled to accompany one of the two major learning components of the semester, riot.js and firebase. Ideation wise, you are encouraged to define project ideas that you are passionate and curious about. Technically, try to use Project as a space to structurally consolidate Exercises in ways that contributes to your high-level ideas. Design wise, draw from the design references listed on the syllabus to guide the visual execution of your projects. Use the design vocabulary to describe your projects in the project proposals. 

Project Management

It’s important to consider the general scope of the project. A project with two team members should have a smaller project scope than one completed by four members. It is important that all members of a team participate in the entire project development cycle:  ideation, design, and development. The ideation phase should welcome, respect and carefully consider all team members’ voices. The final direction of the project should reflect a collective vision of all individuals. Then, this vision should be translated into design and development tasks. Each team member should be assigned clear responsibilities and tentative deadlines. Individual interest should also be considered during project management process. Certain member might feel passionate about a specific phase of the project and contribute more time. Be mindful about balancing between gaining exposure of the entire process versus developing an individual focus. Use tools like Google Slides to communicate storyboard(webgame) and wireframe(website). Use Github to communicate code development. All teams are expected to clearly state individual contribution, and prototyping iteration process during the project critique session. 

Code Repository

All exercises should be documented on personal github account. For group project, one team member should open a new repo and add the rest of the team members as the contributor of this repo. Each group member should be responsible for pulling, merging and pushing his or her own code. 


All assignments are to be submitted on time. If you foresee a conflict, it is your/team’s responsibility to discuss the matter with the instructor beforehand. Only under rare circumstances will late assignments be accepted and penalties may be incurred. This will be determined at the discretion of the instructor on a case-by-case basis.
Breakdown of the final grade calculation is as follows:

Exercises 30%

Project One 20%

Project Two 20%

Effort and Participation  30%

Course Synopsis

Please refer to the timetable below for the weekly breakdown of the semester. Depending on the progress made by all attending students, this schedule is subjected to change. 

Week 01Jan 24Introduction / SyllabusAtom.ioTerminalNodeJS (watch-http-server)
Environment setup. Watch Github Tutorial.
Week 02Jan 31RiotJS I- Initializing- SyntaxExercise
Week 03Feb 07RiotJS II- Events- Control FlowExercise
Week 04Feb 14RiotJS III- LifecycleFinal Project Proposal
Week 05Feb 21RiotJS Tags AdvancedProject One Development
Week 06Feb 28RiotJS ReviewProject One Development
Week 07Mar 07Firebase I- Introduction- BasicsEnvironment setup.
Week 08Mar 21Spring BreakClass Cancelled.
Week 09Mar 28Firebase II- Reading Data- Writing DataExercise
Week 10Apr 04Firebase III- Querying Data- Indexing DataExercise
Week 11Apr 11Firebase IV- Authentication- AuthorizationFirebase mini-project
Week 12Apr 18Firebase ReviewFinal Project Development
Week 13Apr 25WorkshopFinal Project Development
Week 14May 02WorkshopFinal Project Development
Week 15May 09Final Project PresentationFinal Project Critique

Weekly Notes


Game Play and Critique: (start this game right away in your browser)


inClass exercise: 

Setting up riot and mounting your first tag

Homework Assignment: 

  1. Based on your learning style, review professor Kuwata’s text or video tutorial



  1. Set up riot+compiler on a sample web project of your choice. Mount a simple tag of your choice. 
  2. Based on your learning style, complete Codeacademy tutorial on github the four free lessons or review github video tutorial from Lynda:
  3. Skim through the following short reading: what is a web framework 

Week 2


Web as Play

Web as Computational Poetics

Web as autonomy and intelligence


Web as Collective Voice and Identity

WebCam Venus

Digital Interactivity + Spatiality

Zach Libberman

inClass exercise: 

Riot syntax: A Little Mnste 

Homework Assignment: 

  1. Review text and/or
  2.  o video tutorial on riot syntax:



2. Make a simple digital pet/creature/fairy/friend/yourself/alien/deity/god/ghost of your choice. 

  • Collaborate with a friend or work alone
  • Think creatively about the static property and dynamic behavior of your creation. 
  • Draw from your favorite cartoon/novel/rock band/movie/internet meme/family member/friends/elements you’ve encountered in your life that really spoke to you

3. Play at least one of these video games of your choice. Some of of them are longer that the others. Finish however much you can. Playing with these interactive experiences can be very helpful to help you think expansively about interactive media during the early project brainstorming stage: 

Week 3:

Topic overview

  • Homework presentation
  • Brief recap of the first two weeks of class. General feedback, reflect, and discuss learning methods towards coding, and riot. 
  • Plan towards the first project critique due in three weeks. 
  • Mindmap exercise
  • Group proposal brainstorming

inClass exercise: 

Review of riot tag. Loop. review of js dom events. Integrating user feedback(html form) with tag and loop. 

Example: memeLibrary 

Homework Assignment: 

  1. Review RiotJS Tag Hierarchy and Event notes

Video Part 1:

Video Part 2:

Text Part 1 – Events:

Text Part 2 – Control Flow:

Github Repo:

2. Choose from any one of the following options: 

  • Restructure a section of your final project from last semester into tags and mount them on html. Integrate a message board section with riot feedback-form tag. 
  • Expand on inClass Lab to build your own meme library/pet library/fandom library etc. 
  • Expand on digital pet homework by adding a text area that allows sit visitors to “teach” your pet how to speak, or a image URL submission area that allows audience to “feed” your pet, or “offer” new costumes to your pet. 

3. Start a final project blog. Quickly draw down a simple summary and some inspirations. 

Week 4: Loop Advanced

Topic overview: 

  • Loop manipulation
  • Riot refs (comparable to queryselector)
  • Riot show{} (comparable to if statement)
  • Scope: that = this
  • Riot lifecycle: this.update( );

inClass exercise: 

Loop manipulation. Ref. If Statement

Parent Child tag organization demo

Opts: pass js object from parent to child without loop structure

Loop Manipulation + Parent Child tag: meme Library

Homework Assignment: 

  1. Review notes on riot lifecycle 



Github Repo:

2.    Keep optimizing your portfolio/library/pet project. 

  • Create child tags where you see fit. 
  • Use refs to obtain user input data.
  • Allow user to add/delete certain child tags. 
  • Refer to previous note when needed. 

Week 5: Scope and Observable

Topic overview: 

  • Accessing parent function from child. Demo: child button delete parent data 
  • Local vs. global scope (revisit demo: digitPet_2_loopManipulation
    • Use console.log to investigate which js object calls setInterval function inside the monster tag
    • Single out each joke into an external tag called singlejoke. Test and makes sure the delete button still works. 
  • Listening to events + pass data between sibling tags (riot observable demo: cat and dog)
    • Init global js observable object in html file: 

var observable = riot.observable();

  • Embed trigger inside tag function you want to listen to

observable.trigger(‘string’, param1, param2…);

  • In a different tag, subscribe to this event trigger

observable.on(‘string’, function(passedData){ = passedData;




inClass exercise: gigi and mimi (download exercise file from HERE)

Homework Assignment: 

Review lesson note from professor Kuwata – Riot Advanced 


Video 1 – Tag Structure Advanced Properties:  

Video 2 – Keyword THIS and why it can be sneaky: 

Video 3 – Passing data around RiotJS

Keep optimizing your portfolio/library/pet project. 

  • Design and implement a structure that requires events to be detected (and data to be passed) between sibling tags (JS objects)
    • A Tamagochi app that allows human(sibling one) to collect and feed food to a pet(sibling two), and pet respond by how much it likes/dislikes to the human action? 
    • A quiz app that requires user to answer a set of questions(sibling one) and get an image/sound award(sibling two) depending on how well the quiz was answered? 
    • A single chapter of an adventure game, where users choose from a set of scenarios(sibling one) and it in turn 
  • Design and implement a structure that requires data to be passed between parent and child tags(JS objects) – review from last week
    • A scoreboard (parent) that needs to collect how many creatures are alive(child)? 
    • A library checkout board (parent) that counts how many digital memes have been submitted by users? 
    • A message board (parent) that counts how many fan messages have been left on the message board?

Week 6: Guest Lecture – Designers Who Code, Coders Who Design

Today, it is becoming increasingly common for designers to do hands-on coding based prototype and coders to involve in visual, UI and UX design. It is also becoming increasingly common for hybrid designer coders to apply well-rounded skillsets to work for corporate/commercial clients of various scopes, while at the same time taking on their own independent career, or working on their own personal passion projects. Let’s hear from three designer coders about how they applied their skills and passion to shape their own professional and independent careers in technology and video game industry. Use their personal journey to gain insights about developing your own professional and personal interests.

Tianyu Wu, Product Manager, Spotify

Tianyu is a product designer who has solid background in User Experience Design, digital media and engineering, She strives to create simple and delightful product to help people solve problems. She also works with code and data visualization. Speciality: UX | UI design, Fast 1Prototyping, Wireframing, User Research, data visualization, Interaction Design.

Youjin Shin, Graphics Reporter, Washington Post 

Youjin is a Graphics Reporter at the Washington Post, where she works as a designer, developer, researcher to visually present the news. Previously, she was a Multimedia Editor at the Wall Street Journal and worked as a research fellow at the MIT SENSEable city lab specializing in data visualization for various urban planning projects. 

Samuel Eng, Independent Game Developer, Snowhydra

Samuel Eng is an independent game developer. He specializes in Unity, having created many free experimental titles from scratch, and has recently released a highly-reviewed multiplayer shooter game Zarvot. Sam spends the rest of his time teaching numerous highly-rated Unity workshops and meetups. Check out his work at @snowhydra.

Homework Assignment: 

Review the following UI/UX design documentation guide. Use this to produce a visual documentation to help with your riot project. Review the following riot project guide. Keep developing your riot mini project and get ready for a casual sharing/critique session next week. 

Week 7 – Firebase Intro

Review: riot + aniemejs integration  

Informal critique: Riot mini project 

Lecture: internet and firebase 

inClassLab: firebase initialization (

  • Download exercise file from HERE
  • Completed example for referent HERE  


  1. Review firebase intro notes and or video from professor Kuwata: 


Video 1 – Prologue:

Video 2 – Initialization and starting a Firebase Database 

  1. Initialize one of your previous homework into firebase. Practice using Set and Push command to write to your firebase database.

Helpful resources: 

Refer to official firebase documentation guide at 

For next week’s class:

Firebase – Querying and Indexing Data


Video 1:

Video 2: 

Week 8  – Firebase basics, write, read

Recap: nvm, node.js and firebase installation note 

Brainstorming final project proposals

Lecture: firebase basics, firebase write read 

inClass Lab: firebase read and write. Refer to finished example HERE


  1. Review Reading and Writing Data Turial:


Video 1 – Thinking Data:

Video 2 – Writing Data:

Video 3 – Reading Data Part I

Video 4 – Reading Data Part II

2. Select one of your own previous front end web homeworks, initialize a firebase realtime database, write and read data dynamically between database and your site. 

3. Gather technical tutorials, and relevant content. Build a simple web prototype of your final project and document next steps on your group final project proposal. 

Week 9  – Firebase basics review

Lecture: firebase basics, firebase write read 

inClass Lab: riot routing. firebase read and write. Refer to finished example HERE


1. Select one of your own previous frontend web homeworks, initialize a firebase realtime database, write and read data dynamically between database and your front-end site. 

2. (optional) Instead of using your own frontend project, you can also use an exercise version of our memelibrary example, and complete the admin.tag read and write functions.  There is already some comment on admin.tag to help you get started. 

3. (optional)Preview lecture on Query and Index Data:


Video 1:

Video 2: 

Github Repo:

Week 10  Firebase Query

Homework Critique

Announcement and discussion: 

Programmed at Whitney Museum: 

Babycastles & Babycastles Academy 


Devotion: an indie video game about asian spirituality, child developmental psychology, intergenerational communication. Momo, condom snorting, and internet hoax directed against young audience. 

A Chatroom that charges a penny for every word you type 

Concept Review: 

Dynamic web: realtime data retrieval from firebase js object to javascript array


Router  firebase deploy firebase data query 

inClass Lab: firebase routing, query

Firebase deployed site: 

exercise file 

finished file 


  1. Review notes on firebase query

[03: Querying and Indexing Data]


Video 1:

Video 2: 

Github Repo:

  1. Turn one of your previous homeworks into a website with internal routing, datawrite, dataread, data sort and query. 
  2. Continue to make progress towards group final project. 
  3. (Optional) preview notes on firebase authentication.

– [04: Authentication and Authorization]

Video 1 – Authentication: 

Video 2 – Atomic Updates

Video 3 – Authorization:

Github Repo:

Week 11  Routing, Firebase Authentication 

Software development and social impact: Loophole4all, Farm, chatroom that charges a penny per word you say


Router  firebase authentication 

inClass Lab:

Firebase authentication: 

Deployed site here:

tinker file:


  1. Review lecture notes

Video 1 – Authentication: 

Vidoe 2 – Atomic Updates

(optional) Video 3 – Authorization:

Github Repo:

2. Implement user login on a site of your choice

3. Work towards final project

Week 12  Firebase Authorization and Review

inClass Lab: github for team work(led by Yuntong Man) 


concept conclusion: dynamic user input

Firebase Authroization Review 

inClass lab file: 

Source code:  

Firebase hosted site address: 

Firebase database location: 


Option 1: Download this exercise file,  consult with Firebase Review notes to reconstruct a functional meme library project. If there is more time, make adjustments and customization to alter it into your own project idea, for example, a to-do list, a simple personal blog etc. 

Option 2: Use one of your own front end frameworks, integrate the following firebase functionalities: 

  1. data read
  2. data write
  3. order
  4. filter
  5. Authorization
  6. Authentication  

Continue to work on your final group project

Week 13 – Guest Speaker

GuestSpeaker: Vidcode

The Vidcode team is made up of talented educators, graphic programmers and interactive artists. We have offices in New York City and San Francisco. Vidcode was built on a mission to solve the problem of the lack of women and girls in the field of computer science. Vidcode was co-founded by female developers who met at a Hackathon in New York City. Each one had found computer science coming from a different background including math, fine art and design. They teamed up with a shared mission to build a rigorous and creative online coding platform that appeals as strongly to girls as boys. Today, Vidcode is used in over 20,000 schools by over 1 million students.  Vidcode’s mission is to teach 10 million girls to code by 2020. We are committed to working with schools, volunteers, parents and institutions to provide delightful, inclusive and rigorous computer programming curriculum to students everywhere. Vidcode collaborates with school districts, non-profits, grant providers and 3rd party researchers to test and build a powerful and easy to use coding tool for any teacher to leverage.

Group Project Independent Working Session


Continue to work towards your final project

Week14 – Guest Speaker

Yu-Ting Feng  comes from an island nation called Taiwan and now lives in Manhattan, another island. She has a BA from Yuan Zen University of Taiwan, and a diploma from the Chinese Film Association. Yu-Ting holds MPS in interactive telecommunications from NYU Tisch; she focuses on nontraditional interactive storytelling, specifically works that evoke poetic moments in public spaces. She is trained as a filmmaker, with an academic background in communications, technology, and art.

She worked with a number of international non-profit and art-related organizations and participated in events such as Reduce the Digital Divide in Africa, India, and Nepal; Post-Actitud Exhibition in Mexico; International Folk Festival in Italy; and off Avignon Festival in France. Her works have screened at film festivals in Beijing, Kaohsiung and Taipei. Yu-Ting is also the co-founder of and 5406 Ltd.. Additionally, she has taught at both national and private universities. Her script “Seven Days After A Son’s Death” won Best Screenplay Award in Taiwan in 2012. In 2014, her interactive installation – Dear Deer got selected by New York Dumbo Art Festival, and MTA in Grand Central terminal as part of the MTA Arts for Transit Springfest. In 2015, she got invited by Hetrick-Martin Institute to create giant immersive video art piece donated by American Eagle outfitters. She received artist fellowship from INST-INT festival. Yu-Ting’ work was featured in Time square, New York Times, Performance Journal, Adweek, CNA news and Taipei Times. She worked on Vank Pavilion in Milano World Expo 2015 inRalph Appelbaum Associates. She is an immersive designer at ESI design now.

Week15 – Guest Speaker

Ted Hayes is an artist, musician and product designer based in NYC. More broadly, he invents experiences of all sorts: interactive installation & sound art, music, software and more. Ted’s works range from a group of language-inventing robots to a mythological city-founding ritual for soprano and string quartet, and is a graduate of NYU’s Interactive Telecommunications Program. Ted has spoken on the subject of Research Art and Language Machines at TEDxGallatin, Crossing Arts Gallery and Dorkbot, and his work has been shown and performed at Devotion Gallery, Grounds for Sculpture, TEDxBrooklyn, The Chelsea Hotel, ISSUE Project Room, NYCAMS Gallery, 319 Scholes Gallery, Theatrelab, Monkeytown and Brooklyn Bridge Park. See more of Ted’s work at He has a deep love of physics and hopes to imbue that love to his two daughters.


Academic Integrity

Students who intentionally submit work either not their own or without clear attribution to the original source, fabricate data or other information, engage in cheating, or misrepresentation of academic records may be subject to charges. Sanctions may include dismissal from the college for violation of the TC principles of academic and professional integrity fundamental to the purpose of the College. 

Citing Code

As a programmer, tutorials, screencasts, documentations and it can be difficult deciding how to credit online learning resources when citing code. In general, 


The College will make reasonable accommodations for persons with documented disabilities. Students are encouraged to contact the Office of Access and Services for Individuals with Disabilities (OASID) for information about registration. You can reach OASID by email at, stop by 163 Thorndike Hall or call 212-678-3689. Services are available only to students who have registered and submit appropriate documentation. 

As your instructor, I am happy to discuss specific needs with you as well. Please report any access related concerns about instructional material to OASID and to me as your instructor. 

Incomplete Grades

The grade of Incomplete is to be assigned only when the course attendance requirement has been met but, for reasons satisfactory to the instructor, the granting of a final grade has been postponed because certain course assignments are outstanding. If the outstanding assignments are completed within one calendar year from the date of the close of term in which the grade of Incomplete was received and a final grade submitted, the final grade will be recorded on the permanent transcript, replacing the grade of Incomplete, with a transcript notation indicating the date that the grade of Incomplete was replaced by a final grade.  For the full text of the Incomplete Grade policy please refer to Grades

Student Responsibility for Monitoring TC email account

Students are expected to monitor their TC email accounts. For the full text of the Student Responsibility for Monitoring TC email account please refer to Responsibility for Monitoring TC Email Account Teachers College Course Syllabi Policy 

Religious Observance

It is the policy of Teachers College to respect its members’ observance of their major religious holidays.  Where academic scheduling conflicts prove unavoidable, students will not be penalized for absences due to religious reasons, and course instructors will work with students on alternative means for satisfying academic requirements.  If students and instructors cannot reach a suitable arrangement, they should consult the appropriate Program Director or Department Chair. If necessary, students or instructors may take the matter to the Office of the Provost for additional appeal. Some of the major holidays occurring during the academic year are:  Good Friday, Id al Adha, Id al Fitr, Passover (first two and last two days), Rosh Hashanah, Shemini Atzeret, Shavuoth, Simchat Torah, Succoth (first two days) and Yom Kippur. Jewish and Islamic holy days begin at sundown of the preceding day. For the full text of the Religious Observance policy, please refer to 

Sexual Harassment and Violence Reporting

Teachers College is committed to maintaining a safe environment for students. Because of this commitment and because of federal and state regulations, we must advise you that if you tell any of your instructors about sexual harassment or gender-based misconduct involving a member of the campus community, your instructor is required to report this information to the Title IX Coordinator, Janice Robinson. She will treat this information as private, but will need to follow up with you and possibly look into the matter. The Ombuds officer for Gender-Based Misconduct is a confidential resource available for students, staff and faculty. “Gender-based misconduct” includes sexual assault, stalking, sexual harassment, dating violence, domestic violence, sexual exploitation, and gender-based harassment. For more information, see 

Emergency Preparedness

TC is prepared for a wide range of emergencies. After declaring an emergency situation, the President/Provost will provide the community with critical information on procedures and available assistance. If travel to campus is not feasible, instructors will facilitate academic continuity through Canvas and other technologies, if possible. 1. It is the student’s responsibility to ensure that they are set to receive email notifications from TC and communications from their instructor at their TC email address. 2. Within the first two sessions of the course, students are expected to review and be prepared to follow the instructions stated in the emergency plan. 3. The plan may consist of downloading or obtaining all available readings for the course or the instructor may provide other instructions.