Core 2: Interaction

Overview

This course serves as a complement to Core 2: Interaction Studio within the BFA Communication Design program. The assignments are built to work in tandem with the projects students are developing in the studio class. The lab is designed around a series of small workshops that teach beginning and intermediate interaction design through a hands-on engagement with HTML, CSS and JavaScript.

This website serves as our class hub and will be continuously updated throughout the semester. Lectures, agendas, projects, and any other class material will be posted here.

Quick Links

Sessions

Unit 1: Interaction with Type

Unit 2: Interaction with Data

Unit 3: Interaction with Time

Community

Class Policies

Community Agreements

Below are the community agreements we have collectively agreed upon. Depending on our needs and circumstances, these agreements are subject to change throughout the semester.

We will make “I” statements.
We have a commitment to learn from each other.
We will not demean, devalue, or “put down” people.
We acknowledge that people are trying their best.
Challenge the idea and not the person.
Practicing active listening.
Understand your own and others’ privilege.

On Open Source

You are encouraged to help each other out with programming, but unless otherwise specified you must turn in your OWN work.

Copying/pasting and reusing code is a key part of the programming process. You often learn best by modifying working examples rather than starting from scratch. We stand on the shoulders of giants; that’s the essence of open-source philosophy. However, there is a very important caveat: any open-source code you borrow and/or modify must be labeled as such.

On Crediting Code

Crediting ChatGPT for Assistance

When ChatGPT helps you with JavaScript code or explanations, follow these steps to give proper credit:
1. Acknowledgment: Begin your code or documentation by acknowledging that you received assistance from ChatGPT in crafting your solution or understanding the problem.
2. Describe ChatGPT's Role: Explain how ChatGPT contributed to your solution. Did it provide code snippets, algorithm insights, or debugging tips?
3. Original Code: If ChatGPT provided code, make sure to rephrase and adapt it to fit your assignment's requirements. Avoid directly copying and pasting code.
```
// Acknowledgment: ChatGPT provided insights and helped debug this code.
// The following function calculates the factorial of a number.

function calculateFactorial(n) {
	// Your implementation here.
}
```
Using JavaScript Tutorials

Incorporating JavaScript tutorials into your assignments? Follow these guidelines:
1. Cite the Tutorial: Mention the tutorial's title, author, publication date, and provide a link if available.
2. Specify Sections: If you used specific sections or code examples from the tutorial, clearly indicate which parts were referenced.
3. Add Your Own Code: Always add your unique code, and ensure your assignment reflects your understanding of the material.
```
// I followed the tutorial "Introduction to JavaScript Functions" by John Doe (Published on September 1, 2023, at www.example.com).

// In this assignment, I applied the concepts from the tutorial to create custom JavaScript functions:

// Your code here.
```
Utilizing Code Examples

When integrating code examples from the web or documentation, adhere to these principles:
1. Source Attribution: State the source of the code example by providing the URL, author, and publication date if available.
2. Explanation: Include an explanation of how the code works in your assignment and why you chose to use it.
3. Modifications: If you modify the code example, specify the changes made and the reasons behind them.
```
// I found the following code snippet on www.examplecode.com, posted by John Smith on July 15, 2023.

// I used this code as a foundation for my project with the following modifications:

// Your modified code here.
```
Collaborating with Others

In collaborative JavaScript assignments, ensure proper credit to collaborators:
1. Acknowledgment: Mention the names of your collaborators and their specific contributions to the project.
2. Collaboration Details: Provide information about how you worked together, whether through pair programming, code reviews, or other methods.
```
// Collaboration Credit: I collaborated with Jane Doe on this JavaScript project.

// Jane contributed to the user interface design and helped troubleshoot issues.

// Your code and explanations here.
```
Referring to Open Source Projects

When leveraging open-source JavaScript libraries or code, follow these steps:
1. Project Reference: Clearly state the name of the open-source project or library you used.
2. License Compliance: Ensure that you adhere to the project's license requirements, including proper attribution if necessary.
```
// I integrated the "Chart.js" library (licensed under MIT) for data visualization in this project.

// The library can be found at www.chartjs.org.

// Your code utilizing the library here.
```

Colophon

I'd like to thank Xin Xin, Michael Fehrenbach, and Jackie Liu, whose pedagogy and class websites have inspired much of the structure and syllabus of this course.

This website was hand-coded using HTML, CSS, and vanilla JavaScript.

This website is set in Plus Jakarta Sans, an open source typeface by Tokotype.