EDT 603 Programming web-based educational media, Spring 2019

<!DOCTYPE html>
                          Anyone who has lost track of time when
                          using a computer knows the propensity
                          to dream, the urge to make dreams come
                          true and the tendency to miss
                          <strong>Tim Berners-Lee,</strong>
                          <em> inventor of the world wide web</em>

Description: In this course students learn techniques of web programming to develop interactive, educational media. Using the Javascript programming language and related web development technologies (HTML5, CSS, SVG), students gain practice in the programming and design of interactive software.

Key words: computer science, web development, mobile web, interaction design, html, html5, css, javascript, OOP, mobile first, React, Bootstrap

Course website: https://canvas.instructure.com/courses/1519530

Office Hours

Matt Curinga, online & Alumnae Hall, Room 226A

  • Monday, 11-1:00PM
  • Tuesday, 2:30-4:30PM
  • Thursday, 3-5PM
  • office hours by appointment

Course Communications

Participants in this course must actively participate in our suite of online communications tools, including Slack (https://auedtech.slack.com), Adelphi email, and the course website.

You must check your Adelphi email and the #code channel on Slack at least once a day. It is highly recommended that you install the Slack mobile client and an email client on your mobile phone so that you receive “push notifications” of course announcements.

The best place to post general course questions and any content-related questions is the #code Slack channel. The instructor and course assistant, as well as other students and alums monitor this channel and often provide immediate support. You are encouraged to contact the instructor at any time via email () or direct message on Slack to @mxc.

Goals and Objectives

This course builds on CSC 602 to move beyond basic programming concepts; students will gain expertise in building more complex computer programs, over several iterations. At the end of the course, students will be able to design educationally sound web-based learning media, solve moderately complex problems using object oriented and functional programming paradigms, and collaborate on team programming projects.

Specific teaching and learning goals include:

  • designing web-based interactions and multimedia to support learning
  • coding effective user interfaces for learning
  • implementing Universal Design goals for accessible web sites
  • identifying effective methods for teaching more advanced programming concepts and web design skills

Specific software development goals include:

  • modeling real world problems with software
  • iterative software development
  • testing and debugging
  • Object oriented programming concepts:
    • Abstraction
    • Encapsulation
    • Objects & Classes
    • Composition
    • Inheritance
    • Polymorphism

Course textbook

Curinga, M. Peter Wentworth, P., Elkner, J., Downey, A, and Meyers, C. (2018). Think Javascript. [free open textbook]

Online Documentation

Required Software/Online Accounts


Module Topic Due
0 Getting Ready for Web Programming
1 Structure, Data, Style, and Logic
2 Mobile First, Styles, & Bootstrap
3 Advanced CSS Multimedia Resume Due
4 Routes & Navigation
5 Forms & storage
6 Objects & React State
7 Studio
8 Mini App UX Testing Mini App Due
9 1:1 meetings Self-eval Due
10 Design Thinking
11 Async Calls & Remote Data
13 Authentication & Authorization
14 Studio
15 App Reviews Web Application Due

Assignments & Grading

There are 4 graded assignments for this course. From week to week there may be other required, non-graded assignments posted on the course website.

Assignment Points
Multimedia Resume 30
Mini App 30
Self Evaluation 10
Web Application 30

Self-evaluation (10 points)

At the beginning of module 9, you will complete a self-evaluation. During your one-on-one meeting with the instructor, you will discuss your self-evaluation in order to make sure you get the most out of the remainder of the class.

Software Project Evaluation Rubric

This marking guide will be used to evaluate the three software project assignments required for this course.

  1. React/Javascript (10 points)
    • 1-3 points: the code runs with errors, is incomplete, or a very close copy of the example project
    • 4-7 points: code is organized into functions and uses parameters, code is well organized and well styled, can be improved by writing more general/reusable functions and parameters, being more flexible, or using Javascript idioms efficiently and correctly
    • 8-10 points: code is well thought out and reusable functions create core parts of the site, functions are organized so that changes and new features can be easily implemented, code meets our style guides and clear/accurate names are given to all identifiers (variables, functions). It is clear that the program goes beyond the example project.
  2. Data modeling (5 points)
    • 1-2 points: most content is hard-coded in the Javascript code, model is an exact copy of example, and/or model does not support the goals of the site
    • 3-4 points: data model supports the goals of the specific site, but may not be flexible enough for a different presentation or to handle new data
    • 5 points: data model supports the site, and can support other uses without modification to the model, new content can be easily accommodated
  3. HTML (5 points)
    • 1-2 points: content is presented with little structure, or different HTML tags would better describe the content
    • 3-4 points: there is a good fit between the tags used and the data they contain
    • 5 points: there is a good fit between the tags used and the data they contain and the code correctly and appropriately uses tags that were not part of the example code
  4. CSS (5 points)
    • 1-2 points: little or no styles, styles are defined that are not used or do not take effect because of errors
    • 3-4 points: code demonstrates understanding of box-model, color, typography, and/or images
    • 5 points: advanced layout are used to interesting effect (flex, grids, etc), code exceeds example projects
  5. User Experience (5 points)
    • 1-2 points: site is hard to read, understand, and use; labels and text are not well edited, items are not clearly organized, essential information is missing, and/or the design significantly impedes the usability of the site
    • 3-4 points: site is easy to use and information is well organized, presentation is clear and clean
    • 5 points: code, layout, and css combine to create an interesting effect, site has a high quality, professional feel

Multimedia Resume (30 points)

This first assignment is designed to get you up and running with the key technologies we will use this semester. You will create a data-driven web page as your own online resume or portfolio.

For this project, you will:

  1. Keep all of the data for your resume in .json data files. These files will contain the lists of your work experience, education background, technical skills, and other relevant information.
  2. Code Javascript source files using the React framework and HTML5 to structure your web page.
  3. Create or find any media assets (images, audio, video, etc) necessary for your resume.
  4. Code CSS files to achieve your desired aesthetic and usability goals

The portfolio site will be hosted on repl.it and the link to your final project will be submitted through the course website.

Your project will be assessed both on the quality of your code and the success of the project, using the following criteria:

The resume is an individual project

Mini-app (30 points)

The mini app is a data driven web application. It is “mini” because it has a constrained, singular focus. This application stands alone – it does not need any networked resources. It goes beyond the resume project, though, in that it’s interactive. Buttons, text boxes, and other form elements enable the user to alter data and the way the app functions. Data created is either stored locally (in the user’s client) or only exists during the session.

Successful projects will use React state and React life cycle functions to achieve their results.

This mini-app is an individual project

Web application (30 points)

For the final project, you will work in a team to create a fully functional web application. You will learn how to save data in a remote data store and how to handle user authentication and authorization to create a secure, multi-user app.

This web application is a group project. All team members will receive the same grade.

Books and online resources

Documentation & Reference websites


Tutorial websites & online learning

Design, accessibility, UX

Online Tools

Media Resources

Academic Assistance for Students with Disabilities

As the instructors of this course, we are responsible to do everything within reason to actively support a wide range of learning styles and abilities. This course has been designed according to principles of Universal Design for Learning. Feel free to discuss your progress in this course with us at any time.

If you have a disability that may significantly impact your ability to carry out assigned coursework, please contact the Student Access Office, (formerly the Office of Disability Support Services) located in Post Hall, First Floor, 516-877-3145, sao@adelphi.edu.

The staff will review your concerns and determine, with you, appropriate and necessary accommodations. When possible, please allow for a reasonable time frame for requesting ASL Interpreters or Transcription Services; a minimum of four (4) weeks prior to the start of the semester is required.

Writing Center https://writing.adelphi.edu/

The Writing Center is a free service available to all Adelphi University undergraduate and graduate students. We can assist students in all disciplines to become more effective and confident writers, and to hone the craft of critical thinking in approaching the writing process.

Learning Center https://learning.adelphi.edu/

The Learning Center promotes not only academic success, but also an enriched scholastic experience. We foster critical thinking and the development of creative strategies, and offer a springboard into the intellectual world beyond college.

University Statement on Academic Integrity

You are expected to behave with the highest level of academic integrity. Cheating and other forms of dishonesty will not be tolerated and will result in the proper disciplinary action from the university. Classroom behavior that interferes with the instructor’s ability to conduct the class or ability of students to benefit from the instruction will not be tolerated. All beepers and cellular phones should be turned off while class is in session. You are expected to come to class prepared - this means having read and studied the assigned chapters before class. By having prepared in this manner, you will be able to maximize your time spent in class.

Adelphi University demands the highest standards of academic integrity. Proper conduct during examinations, the proper attribution of sources in preparation of written work, and complete honesty in all academic endeavors is required. Submission of false data, falsification of grades or records, misconduct during examinations, and plagiarism are among the violations of academic integrity. Students who do not meet these standards are subject to dismissal from the University.

Use of Candidate Work

All teacher education programs in New York State undergo periodic reviews by accreditation agencies and the state education department. For these purposes samples of students’ work are made available to those professionals conducting the review. Student anonymity is assured under these circumstances. If you do not wish to have your work made available for these purposes, please let the professor know before the start of the second class. Your cooperation is greatly appreciated.

Creative Commons License
Programming web-based educational media was created by: This work is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License.
Based on a work at https://github.com/mcuringa/adelphi-ed-tech-courses.

Last modified: Wednesday, 27. January 2021 03:33PM