EDT 603 Programming web-based educational media, Spring 2022

<!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 (React) programming language and related web development technologies (HTML5, CSS, SVG) for interactive front-end programming, and Python (Flask) for backend server design, 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, python, Flask, REST

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

Office Hours

Matt Curinga

  • Monday, 11-1:00PM
  • Wednesday, 2:30-4:30PM
  • Thursday, 3-5PM
  • Dr. Curinga’s in person office hours are in the MIXI offices, room 274 of the Addelphi Manhattan Center. 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 regularly. 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. You must install the Slack desktop client to facilitate sharing code and screenshots from your development environment.

The best place to post general course questions and any content-related questions is the #code Slack channel. The instructor 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. This course focuses on the design of multi-tier, networked software applications.

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

Required Software

Online Documentation

Javascript & HTML


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
Self Evaluation 10
Multimedia Resume 20
School Data Report 30
Interactive Data App 40

Self-evaluation (10 points)

At the beginning of week 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 development assignments required for this course.

  1. React/Javascript
    • poor: the code runs with errors, is incomplete, or a very close copy of the example project
    • satisfactory: 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
    • excellent: 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
    • poor: 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
    • satisfactory: data model supports the goals of the specific site, but may not be flexible enough for a different presentation or to handle new data
    • excellent: data model supports the site, and can support other uses without modification to the model, new content can be easily accommodated
  3. HTML
    • poor: content is presented with little structure, or different HTML tags would better describe the content
    • satisfactory: there is a good fit between the tags used and the data they contain
    • excellent: 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
    • poor: little or no styles, styles are defined that are not used or do not take effect because of errors
    • satisfactory: code demonstrates understanding of box-model, color, typography, and/or images
    • excellent: advanced layout are used to interesting effect (flex, grids, etc), code exceeds example projects
  5. User Experience
    • poor: 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
    • satisfactory: site is easy to use and information is well organized, presentation is clear and clean
    • excellent: code, layout, and css combine to create an interesting effect, site has a high quality, professional feel
  6. Risk Taking
    • poor: the project narrowly adapts worked examples and sample code; no evidence of attempts to incorporate ideas not strictly covered in class
    • satisfactory: the project attempts either a novel idea or to integrate sophisticated programming approaches beyond what is covered in class; it’s evident that student is able to read technical documentation and adapt ideas for new purposes. some aspects of the program may not be fully functional or integrated with the rest of the program.
    • excellent: incorporates novel ideas and techniques, as in “satisfactory,” but demonstrates a high level of success with the code and integration.

Multimedia Resume (25 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. Use React component functions to create a program that is modular and easy to change. Your final project must have (at least) two different “looks” which can be swapped live. Your resume program must be separated into multiple source files (.js or .jsx) which are imported into App.js to compose the site.
  3. Create or find any media assets (images, audio, video, etc) necessary for your resume. Your site must contain some images.
  4. Code CSS files to achieve your desired aesthetic and usability goals.

The resume is an individual project

School Data Analysis (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

School Data Analysis (35 points)

For the school data analysis you will become expert in one of the open data sets that are available to us regarding school data. These data sets include school performance, demographics, location, and other interesting data. This live data is often not “cleaned” – meaning that some data is missing, some of it is inconsistent with expected data, and some values may not be understood intuitively. Further, the documentation accompanying this data is often sparse or non-existent. Raw test scores will be included without any details of how tests are scored, the range of values, etc. Lastly, the data is most useful when it can be connected and compared to other data sets. However “keys” can be used inconsistently (school names, address fields, identifiers).

For this project, you will write a program that cleans the data and outputs it in useful formats. You will study the data and use your research skills to understand what the data means. For example, students are identified as current_ELL, ever_ELL or never_ELL to indicated if they were still learning English while in the school system. Your job would be to provide some qualitative information about how and when students are placed in and out of these categories. Lastly, you will explore the data and build a series of graphical reports with descriptive statistics that will make it easier for other researchers and programmers to work with these data sets. For example, you will want to provide ranges, and averages (mode, mean, median) for numerical data. For categorical data, you will want to enumerate and describe each of the categories. If you had to make assumptions in “cleaning” your data, you will detail the process and describe any potential problems. You will consider all of the unique identifiers in your data and describe how they might be used to connect your data set to other sets of data.

Once you have a strong understanding of your data, you will create a sample report where you analyze one aspect of the data and present it as a web page that contains both quantitative output as well as written analysis.

This project will use Python, PANDAS, and Jupyter Notebooks to clean and analyze the data. Jupyter will output any necessary files (.json, SVG images, etc) that can be displayed on the web. You will use React/Javascript to build a mini website that describes your data and hosts your report.

This is a “team” project that you will work on with one other member of the class.

Web Application

The web application will build on the work of the Data Analysis project. In this project we will build interactive tools where users can click buttons, fill out forms, drag-and-drop, and interact with our program in various ways. The “front-end” will be programmed in Javascript with React, and the live backend will be written with Python running in the Flask server. We will test and prototype the Python code in Jupyter Notebook, but it will run live from Flask.

I will encourage everyone to continue working with open school data, so that we have a host of data interactions by the end of the term. However, if you have your own interesting projects, you will have the opportunity to pursue them instead.

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

Books and online resources

Documentation & Reference websites


Python, PANDAS, and Data science Tutorials

Javascript, HTML, and CSS

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, 11. January 2023 01:17PM