Join the CS Collaboration Center in
Microsoft Teams
Download Visual Studio Code and FileZilla.
IMPORTANT NOTE: The following schedule is a draft, based on previous quarters. It should give you a general idea of the pace and timing of the class. THIS SCHEDULE WILL CERTAINLY CHANGE AS THE QUARTER PROGRESSES.
A summary of the quizzes and written assignments you will hand in is provided in this summary.
Getting Ready (Before Quarter Begins)
Follow the instructions in the Before Classes Start: Getting Set Up document to be ready for the start of the term.
- Ask Aaron Smith in IS to set up student.cs.kzoo.edu accounts! (and add the group comp102-1-2024wi to the ftp access group)
- Create a first draft of student_websites.html in Kit to make Th1 class go more smoothly.
- Add students to Kit (could wait until Th1 or even 5th Week, unless using it for attendance and/or syllabus quiz)
- Looking Ahead: CLEAR ART GALLERY of broken or offensive material (clearEntry.php in labs/ArtGallery). Do not clear out the whole gallery, since it is a way for students to easily find artwork for Art Catalog lab series. Use php anonymizeEntries.php to remove names of students from previous terms.
Skip directly to Week 1 | Week 2 | Week 3 | Week 4 | Week 5 | Week 6 | Week 7 | Week 8 | Week 9 | Week 10
| DAY | BEFORE CLASS | IN-CLASS TOPICS/ACTIVITIES |
|---|---|---|
|
Week 1
Tuesday
(Tu1) |
Set up your work environment:
(See Getting Ready section above.)
Skim this page
to get a sense of the pace of assignments in this course.
|
What is Programming?
(slide)
Video version — 3.5 min
(the first 1.5 min are repeated from COMP 101 video on
What is Computer Science?)
What is Kit?
Talk about value of reading
feedback in Kit!
Complete setting up work environment: Visual Studio
Code, FileZilla, Teams
Make sure everyone joins the Collaboration Center team and turns on notifications for the General channel! |
|
Thursday (Th1) |
HTML: The Language of Web Pages
Video:
A Quick
Look at HTML (7.5 min)
SIDE NOTE:
"Markup" languages, like HTML, include extra
formatting information (meta-information).
"Markdown" is another, even simpler markup language.
Uploading Web Pages to a Server
Video:
Watch Alyce Use FileZilla to Upload
Files (8 min)
NOTE:
You will use the
student.cs.kzoo.edu server instead of
peopleftp.kzoo.edu, but
everything else is still valid.
Should update this video one of these days. Refers to
cs105, people.kzoo.edu, and web page development
happening "in the first three weeks" of the term.
|
Activity 1: Download and Upload a
draft web page:
Send a chat message to your instructor saying what your
K userid is (e.g.,
k21ab01 or
k21ab05).
Practice downloading a sample HTML file and
uploading a file to the course web server using
these instructions.
|
| DAY | BEFORE CLASS | IN-CLASS TOPICS/ACTIVITIES |
|
Week 2
Tu2
|
More HTML
Reading: "The World Wide Web" - Chap. 10, sect. 10.1 and 10.2 (pp. 181-185).
w3schools HTML tutorial
(Read first page - HTML Introduction)
Video:
More HTML and an Example Similar to
Class Activity (19 min)
(slides)
SIDE NOTE:
The video uses Brackets in the examples, but VS Code would
look almost exactly the same except it doesn't have the
"lightning bolt" and "wand" icons.
More About FileZilla
2nd Video
on FileZilla covers renaming file on server to
index.html, re-uploading and replacing files on server,
and the difference between file names for local files
and files on the internet (8 min)
Remember:
peopleftp.kzoo.edu is now
student.cs.kzoo.edu.
|
Class Activity:
Create a Web Page
Start by skimming the entire class activity so you know what
the structure and scope of it is.
After uploading your finished web page, view it on
student.cs.kzoo.edu, to test it.
You may find it useful to include the full set of future
programming assignments on your web page, as
in the template home page. You'll be able to watch
your progress as each list item becomes a link to a new
page.
|
| Thursday (Th2) |
Due on Server:
First Web Page
(Upload to
student.cs.kzoo.edu)
Intro to Programming in JavaScript:
Video:
A Quick
Look at JavaScript (7 min)
Video:
A Quick
Look at JavaScript Variables (4.5 min; sorry
for the slightly fuzzy background noise)
Companion notes for videos:
Reading: "Learning to Program" - Chap. 7, sect. 7.1, 7.2, and 7.3 (pp. 115-119).
(You might find this easier to read after doing the
class activity; it's your choice.)
Optional: Read the
Wikipedia
article on MadLibs
|
Class Activity: Numbers and
Strings, Part I (Getting Started with
JavaScript)
Class Activity: Mad Libs
After Class:
Complete both web pages & upload to server.
Remember to update your main page to
include links to the new assignment pages, and upload the
modified main page to the server also.
Outside Assignments Due
Before Tuesday:
|
| DAY | BEFORE CLASS | IN-CLASS TOPICS/ACTIVITIES |
|
Week 3
Tu3
|
Due on Server:
(upload to student.cs.kzoo.edu)
Last Thursday Assignments
(Numbers and Strings, Part I and
Mad Libs)
Updated main page with links to these assignments
JavaScript Objects
Video:
JavaScript
Objects (3 min)
|
Class Activity:
JavaScript Objects (Updating Mad Libs)
Outside Assignment Due Before
Thursday:
|
| Th3 |
Due on Server:
(upload to server)
Updated main page with links to these assignments
Want to look ahead?
Video for Thursday of Week 4:
Functions that Modify Java
Object Properties
(8 min)
(view the page)
Looking Ahead: For VP PP, maybe having students toggle display between none and inherited would be better than toggling visibility property. |
Class Activity:
Lucky Number
Outside Assignment Due Before
Tuesday:
Virtual Pet: Initial Design
Assignment
(Here is a
Markdown template for
indicating states.)
(Don't know Markdown? Intro to Markdown in plain text or Markdown format; you can edit a Markdown file in VS Code.) |
| DAY | BEFORE CLASS | IN-CLASS TOPICS/ACTIVITIES |
|
Week 4
Tu4
|
Due:
Lucky Number
(uploaded to server)
Virtual Pet: Initial Design
Assignment
(bring design to class and submit
state table to Kit)
If Statements:
Video:
A Quick
Look at If Statements (9 min)
(view the
If example page and the
If/Else example page)
w3schools:
JavaScript If...Else Statements
Reading: "Loops and Conditionals" - Chap. 7, sect. 7.4 (pp. 120-122).
(You might find this easier to read after doing
today's class activity; it's your choice.)
|
Check VP designs quickly to see that they have OK states
and indicators before they get much further.
Class Activity:
Creating a Starter Virtual Pet
(Here's a
nice video on how to debug web
pages.)
|
| Th4 |
Due on Server:
More on
User-Defined Functions:
Video:
Functions that Modify Java
Object Properties
(8 min)
(view the page)
Video:
Song Example (8 min)
Image Replacement Example
(html)
|
Quiz 1: Basic HTML and JavaScript
LINK
Class Activity:
Puzzle
|
| DAY | BEFORE CLASS | IN-CLASS TOPICS/ACTIVITIES |
|
Week 5
Tu5
|
Due on Server:
|
Class Activity:
Catch up on overdue work
OR
|
| Th5 |
More Complex Conditions:
Video:
Boolean
Operations
— Just watch the first 3 min and 5 seconds, until
it switches gear to Truth Tables (a COMP 101 topic).
(related slides)
Looking Ahead: CLEAR ART GALLERY of broken or offensive material (clearEntry.php in labs/ArtGallery). Do not clear out the whole gallery, since it is a way for students to easily find artwork for Art Catalog activities. Use php anonymizeEntries.php to remove names of students from previous terms. |
Class Activity:
Puzzle Improvement
REMIND STUDENTS TO STUDY FOR OR TAKE IF STATEMENT QUIZ AND DO VIRTUAL PET DESIGN! Outside Assignment Due Before
Tuesday:
— Next design phase:
Virtual Pet: State Transition Design
Assignment
|
| DAY | BEFORE CLASS | IN-CLASS TOPICS/ACTIVITIES |
|
Week 6
Tu6
|
Due:
Updated Puzzle (published to server)
Virtual Pet: State Transition Design
Assignment
(bring state diagram to class)
Skim today's class activity so you know what will
be expected
Timer-Driven Activity:
w3schools:
JS Timing (Under "JS Advanced")
View the Page (and right-click to view the
Page Source) for the
Timing Sample Page
|
Class Activity:
Virtual Pet Improvement: Changing State
(Reminder: Here's the
video on how to debug web pages.)
Outside Assignments:
Class Entrance Assignment: Find 10
Art Images (due Thursday of Week 6)
Programming Project: Virtual Pet
Enhancements
(due Tuesday of Week 7)
This might be a good time to clarify the grading scheme. Virtual Pet PP raises a letter grade but is not necessarily required to get a CR or C- grade (if students do well on required assignments). |
| Th6 |
Due on Server:
Creating Your Own Object
Types
Optional: Review videos on
JavaScript objects and functions from Week 3.
w3schools:
JavaScript Objects
Art Catalog
Preparation:
Read the "detour" example in
Art Catalog (Getting Started)
and do Exercise 1.
Optional video:
Watch Alyce program and describe
today's class activity
(15 min;
The first 1.5 minutes provide a preview of what you
will have after completing the full series of Art
Catalog activities. The rest covers this class
activity in detail.)
|
Class Activity:
Art Catalog (Getting Started)
Outside Assignment:
Edit your art gallery entries to
include the title of each artwork and the medium.
If you don't have at least 10 entries
in your Art Catalog, add more entries so that you
have at least 10 entries, not all by the same
artist.
|
| DAY | BEFORE CLASS | IN-CLASS TOPICS/ACTIVITIES |
|
Week 7
Tu7
|
Due Before Class:
Virtual Pet Enhancements PP
(publish web page and submit updated state diagram to Kit)
Week 6 was intense (and F6 might be break day), so this due date for VP PP might be too early. For Loops:
Video:
A Quick
Look at For Loops, Part I (7 min)
Video:
Part II: Using
For Loops to Step through Arrays (6 min)
(final
version of the page)
w3schools:
JavaScript For Loop
Read the background info ("The For Loop"
and "Example: Simple Loop") in today's class
activity
so you know what will be expected.
|
Class Activity:
Printing the Art Catalog
|
| Th7 |
Class Activity:
Continue with Art Catalog
After Class:
All art catalog class activities should be completed and the
updated art catalog page
accessible from your published web page
|
|
| DAY | BEFORE CLASS | IN-CLASS TOPICS/ACTIVITIES |
|
Week 8
Tu8
|
Before Class:
Working with
Arrays:
Video:
Swapping Entries in an Array
(4 min)
(slide)
Video:
Finding the Minimum Value
in an Array
(4.5 min)
(slides)
|
Class Activity:
Swap and Minimum
(Reminder: Here's the
video on how to debug web pages.)
|
| Th8 |
Sorting:
Video:
Selection Sort Algorithm
—
Watch the animation of the algorithm (up to 3:14
timestamp). This is review if you are in or have taken
COMP 101. (Different video but similar content.)
Skip the last 1.5 minutes, which is for the
Data Structures class.
Skim today's class activity so you know what to expect
CLEAR (or clean) OUT ART GALLERY! (php clearArtGallery.php or clearEntry.php in labs/ArtGallery) Use php anonymizeEntries.php to remove names of students from previous terms. |
Class Activity 1:
Implementing Selection Sort
Class Activity 2:
Sorting the Art Catalog
After Class:
Updated art catalog should be
accessible from your published web page
Outside Assignment:
PP 3:
Art Catalog Enhancements
(due Tuesday of 10th Week)
This might be a good time to clarify the grading scheme. This PP raises a letter grade but is not necessarily required to get a CR or C- grade (if students do well on required assignments). |
| DAY | BEFORE CLASS | IN-CLASS TOPICS/ACTIVITIES |
|
Week 9 Tu9 |
Due on Server:
Art Catalog
(all in-class activities completed through
Sorting by Name)
|
Class Activity:
Catch up on overdue work
OR
PP 3:
Art Catalog Enhancements
(due Tuesday of 10th Week)
|
| Th9 |
HTML Forms (Before
Class!):
w3schools:
HTML Forms and Input
View the Page Source for the
Page with Sample Form
to see what HTML tags can be used inside a
<form></form> block.
Video:
Looking at the attributes of Radio
Buttons and Checkboxes (3 min)
View the Page Source for the
Skeleton Art Entry Form
and test what happens when you enter data on the
page.
Skim today's class activity so you know what to expect
|
Class Activity:
Forms/Events (Art Entry Form)
|
| DAY | BEFORE CLASS | IN-CLASS TOPICS/ACTIVITIES |
|
Week 10 Tu10 |
Due on Server:
|
Class Activity:
Continue with
Forms/Events (Art Entry Form)
Start on Final
Reflection (due by midnight Sunday)
|
| Th10 |
Due on Server:
|
Wrap up
|
| Exam Week | No Exam
Good idea from Pam: Read autobiographies and final
reflections together to see their growth.
|
|