DTC 477: Spring 2021: Major Project

Your final project will build on the skills and projects that you’ve practiced throughout the semester.  There are a range of projects to work on, and you have the option of working alone or in teams of 2-3 students.

There are some common requirements for all the projects, as well as distinct requirements for each project. Furthermore, each project has a set of basic requirements if you are doing the project alone, and additional requirements if you are completing it as a team, as detailed below.

This page is divided into the following sections:

Deliverables and Deadlines

  • By class on Monday, April 19: you should choose a project — and a team, if you’re working together — and present it informally.
  • By Friday, April 23: your initial Planning Document is due to the instructor via Blackboard. (See Unit 3, Lesson 11, for more background.)
  • By midnight on the evening of Wednesday, May 5: the final working project must be submitted to the instructor via Blackboard, with these deliverables:
    • The final Planning Document as a Microsoft Word or PDF document (exported from Google Docs if necessary).
    • The URL to the home page of your project.
    • The URL to the Debuggr file in your project, with the password you’ve set.
    • The URL to your Github project, to which the instructor should have been added as a collaborator.

Common Requirements

  1. All projects must draft a Planning Document prior to coding, and finalize it before turning it in. Feel free to start with a copy of the sample document provided by the instructor. (The instructor’s small demo project from Unit 3, Lesson 11, included this demo planning document.)
  2. All projects require use of HTML, CSS, and JavaScript. Some projects and project options may further require AJAX, PHP, or MySQL, though you are free to add use of those to any project that does not already require them.
  3. All projects are expected to generally look good and operate correctly, without errors. However, intentional outputs to error logs, such as console.log(), are not only acceptable, but encouraged, so that you can track how your code is working.
  4. All code is expected to be written neatly and include useful comments. Feel free to regularly apply the “Beautify” feature in Codeanywhere.
  5. All projects should have the Debuggr file in their root directory, and its password shared with your instructor, so he can review your server-side code.
  6. You are free to find and adapt code from online sources such as Stack Overflow, PHP.net, etc. However, if you adapt more than three of lines of code from a source, or a complete function, you need to reference the source URL in a comment; e.g. “// adapted from [URL]”. Furthermore, per the syllabus, no more than 25% of your code can be from adapted sources (not including any frameworks or libraries you might use).
  7. You will use Git (through GitHub) for code version control. Your instructor will devote a lesson to setting up Git/GitHub with your Reclaim Hosting and CodeAnywhere. This will be especially important for team projects, but is required for all projects. One member will set up the project, and then add team members and your instructor as Collaborators.
  8. For projects involving a database: it must be pre-populated with sufficient data to test the interface, though the nature of this data will vary considerably depending on the specific project.
  9. For team projects, you must choose a method of communicating about the project. For example, you can set up a Slack channel. You will add your instructor to that channel (or communication method). If you would like to use Blackboard’s group feature, your instructor can set that up for your group.
  10. For team projects involving a database, one member will create and host the database, and configure shared remote access for the other member(s) to utilize the same database.

Note About Online Tutorials

There are countless tutorials online for projects similar to the ones described here. If you follow one, then from the perspective of your instructor, you may run the risk of looking like you plagiarized your code. As a result, here are the conditions if you want to follow a tutorial for your project:

  • In your planning document and in your code comments, you must clearly state which tutorial you are following, and include a link to it.
  • You must take the project beyond the tutorial by customizing aspects of it, and clearly explaining this customization in your planning document and code comments. For example, you could:
    • Completely redesign the visual style.
    • Alter or add different types of user interface elements.
    • Change key aspects of the project (for example, how fast something moves, or change how it accesses files).

Ask your instructor if you are not sure about this.

Project Options

Choose one of the following projects, and whether you complete it individually or in a team of 2-3 students.

Project: Interactive Timeline

Develop an interactive timeline that allows the user to scroll through a chronological sequence of events and click on individual events/elements to open additional panels of information and details.

Read the Requirements
  • Basic requirements as an individual project:
    • Technology requirements: HTML, CSS, JavaScript, AJAX.
      • The timeline can load the initial display through HTML, CSS, and JavaScript, but additional panels/details must be loaded through AJAX from the server without reloading the whole page; however, you are not required to use PHP or a database.
    • The timeline should document an occasion, person, discovery, or other event that has occurred or existed in your lifetime, ideally something that is important to you or has affected your life in some way.
    • The event can be political, environmental, scientific, or something else that was likely to be in the news. It can be global or national (U.S. or elsewhere). It can also be a personal event/experience from your own experience.
    • The timeline needs a beginning point, an end point, and at least 10 timeline steps between them that can be explored for additional info.
    • The timeline scope can be long, such as key events over decades that led up to a major event; or short, such as a minute-by-minute account of a brief but important political event.
  • Additional requirements for a team project:
    • Technology requirements: HTML, CSS, JavaScript, AJAX, PHP, MySQL.
      • The extra events loaded by AJAX need to be stored in a MySQL database table and loaded through PHP.
    • Develop extra interfaces so an author/administrator can list and edit the individual panels of extra information in the database.
  • Comments:
    • The timeline can scroll horizontally, vertically, or in some other dimension.
    • Think of the additional panels as cards of information that need to be populated.
    • The additional info can be text, photos, graphics, embedded video… any supporting information.

Project: Interactive Narrative

Develop a narrative with screens or panels of content that offer readers/users clickable choices for how to continue to the next step in the story, like a “choose your own adventure” story that branches out multiple possible outcomes.

Read the Requirements
  • Basic requirements as an individual project:
    • Technology requirements: HTML, CSS, JavaScript, AJAX.
      • Each choice by the reader/user leads to a new “page” of content that must be loaded via AJAX, without reloading the whole page. However, you do not need to use PHP or MySQL.
    • Write a story that offers at least 5 decision levels no matter what choices the user makes (though some branches could be more than 5). Think of a “decision level” in the hierarchical tree of decisions like this:
      • The user starts at Decision Level 1, which shows Story Content #1 and offers 2 clickable choices, #1 and #2. So, Decision Level 1 has 2 possible branches.
      • Each choice (#1 and #2) leads to new Story Content with their own 2 clickable choices, but these are both now at Decision Level 2, which has 4 possible branches: #3 and #4, as well as #5 and #6.
      • Each of those choices leads to new Story Content with their own branches to Decision Level 3.
      • And so on, with at least one branch leading down through 5 levels of decisions.
    • Your story should demonstrate some kind of real-world conflict or dilemma.
    • Depending on how you write it, you can re-use steps/content in multiple branches of the decision tree.
  • Additional requirements for a team project:
    • Technology requirements: HTML, CSS, JavaScript, AJAX, PHP, MySQL.
      • Each decision leads to a new “page” of content that must be loaded via AJAX from a MySQL database through PHP, without reloading the whole page.
    • Develop extra interfaces so an author/administrator can list and edit the individual pages of content in the database.
    • Use cookies to save the user’s progress in the narrative and return to it next time they come back.
  • Comments:
    • Think of the narrative in terms of a sequence of pages/screens that offer images and text with at least 2 clickable options on each screen.
    • Think of each page in terms of a multidimensional array or an object to contain the text and the choices.

Project: Color Harmonies and Palettes

Develop a web app that calculates a random color palette based on the user’s choice of color harmony, according to these types: complementary (2 color); split complementary (3 color); analogous (3 color); triadic (3 color); rectangular (4 color); and square (4 color). For reference, see this page on color harmonies.

Read the Requirements
  • Basic requirements as an individual project:
    • Technology: HTML, CSS, JavaScript; optionally, PHP.
    • The user has to be able to choose the harmony, then see the chosen color harmony on a wheel.  
    • The HTML/CSS hexadecimal values of each color should be onscreen in a way that the user can copy.
    • The page’s URL should be dynamically updated to add information about the color harmony and chosen colors so that the URL can be shared. Upon loading, the page should also check for the presence of this information in the URL and adjust its display to match.
  • Additional requirements for a team project:
    • Technology: HTML, CSS, JavaScript, PHP, MySQL.
    • Once a color palette is onscreen, the user should be able to adjust the palette harmony colors (cycle around the wheel, lighten, darken) through some interactive method (click buttons, use arrow keys, etc.).
    • The user’s last color palette should be remembered in a cookie, to be loaded next time they arrive.
    • The user should be able to save palettes (harmony and colors) to the database with their own name and a color palette name, then be able to display a page that lists all their saved palettes.
  • Comments:
    • This project involves a lot of math, including conversion between color models and mathematical modes. For example, it may be helpful to use the HSL color model (hue, saturation, lightness), as it works with angles around a color wheel. However, you will have to convert HSL values to hexadecimal RGB values to display the HTML color codes to users.
    • For the display, the CSS transform property is likely to be helpful.

Project: Two-Player Turn-Based Game

Develop a browser-based version of a two-player turn-based game, such as checkers, chess, Go, backgammon, Connect 4, etc.

Read the Requirements
  • Basic requirements as an individual project:
    • Technology: HTML, CSS, JavaScript.
    • The game can run “locally” in the browser, assuming that both players are sitting in front of the same computer.
    • The game should have a restart function to start a new game.
    • The game should understand basic moves (such as capturing pieces in chess, or jumping multiple pieces in checkers), and prevent illegal moves (such as moving a king into check).
    • The game must enforce turns, so that one player cannot move until the other player has completed their move.
    • The game must look good and be simple to use.
    • You can choose a different two-player turn-based game besides the examples listed, but check with the instructor first.
  • Additional requirements for a team project:
    • Technology: HTML, CSS, JavaScript, AJAX, PHP, MySQL.
    • Instead of running locally with both players in front of the same computer, use a database accessed through AJAX/PHP so players can play remote games by matching up according to a game code. The game code can be saved in a cookie so the player can return later to pick up the game again. This will require a kind of login page.
    • Use AJAX on a timer function to check for new moves.
    • The game should use browser cookies to save the game state so the players can close the window and come back later.
  • Comments:
    • Many 2-player board games are based on rigid structures like grids. Think of these structures in terms of multidimensional arrays.
    • For remote games, think carefully about how you want to transmit the individual game moves to the server.

Project: Inventory System

Develop a database for users to add, delete, and manage an “inventory” according to one of the following:

  • Products in a store,
  • Players on a youth sports team, or
  • Songs in a music library.
Read the Requirements
  • Basic requirements as an individual project:
    • Technology: HTML, CSS, PHP, MySQL; optionally, JavaScript, AJAX.
    • Each inventory item must store at least 5 fields of data about each record (make? Model? Artist? First name, last name? Length? Time?) besides the row’s unique ID.
    • The system must offer interfaces to:
      • Store new records
      • List all records
      • Search records
      • Edit records
      • Delete records
    • Specific inventory systems have specific requirements:
      • The store inventory system must provide a separate interface for customers to order items and, if that quantity is available, have them disappear from the inventory for “successful orders.” Among other things, this means items need prices.
      • The youth sports team rosters must support a specific sport (e.g. soccer) and track field positions of that game (e.g. forward, defender, goalie) with accrued play time for individual players over a season; and provide an interface that can randomly assigns positions to account for equal play time minutes across the positions.
      • The music library should allow the user to rate songs, and should track albums and artists as well as songs, with interfaces to see the music library according to songs, albums, and artists. 
  • Additional requirements for a team project:
    • Technology: identical.
    • Specific inventory systems have specific additional team requirements:
      • The store inventory: every item in the inventory should include a product description and a photo, and support categories of information, such as games, clothes, etc., with an interface to see the categories.
      • The youth sports team rosters: should include an interface that displays a table of players vs. positions and their accumulated time across each position; and should support multiple teams, with an interface to see the team list.
      • The music library: the system should allow the user to create playlists from the songs; not necessarily playable, but at least a way to add songs to additional lists which have their own names.
  • Comments:
    • You should definitely plan out the database fields that you need, and think through the code conceptually, before you start actually coding it.

Project: DIY Framework Project

Develop a project of your own design that uses one of these frameworks/libraries/APIs:

The project must be approved by the instructor. Team-based framework projects are expected to be more complex.

You will have to study the documentation to learn the code yourself.  Your project cannot simply be one of the demo/training projects provided by the frameworks/libraries/APIs, though it can be an extension of those.

Grading Considerations

Projects will be graded according to the following considerations:

  • 30%: how well the site and the Git repository meet the operational description of the project. For the DIY Framework Project, this will depend significantly on your Planning Document.
  • 30%: how well the site look good visually and operates well. Examples: for the Interactive Narrative, how interesting is the story? and for the Interactive Timeline, how comprehensive is the supporting content?
  • 40%: how neat, readable, and well-commented the code is.

In addition, your project on GitHub will provide statistics for the activity of each project developer. In a team-based project, each team member’s apparent contributions to the project will be a factor in the third consideration; if you haven’t contributed much, or if you’ve contributed significantly more than your teammates, that will affect your grade (for worse, or for better).

Extra Credit

When you submit your project, note whether you are applying for either (or both) of the following extra credit opportunities.

You can earn 10% extra credit if your project is responsive: it looks good and works well on mobile browsers, not just desktop browsers.

You can also earn 10% extra credit on this project for each of the following frameworks, libraries, or APIs that you learn and use in your project.

In order to be counted, your use of these has to be correct and useful:

  • Correct: you have to be using it properly, and it has to operate correctly and look good.
  • Useful: you have to actually use the framework/library/API as an important part of your project. E.g. you can’t include the entire jQuery library and then just use it for one or two lines of code.