OIM3690 - Web Technologies

2025 Spring

Session 18 (4/01)

contain

Today's Agenda

  • Welcome/News/Announcements
  • Introduction to Project
  • Review/Quick Quiz
  • Quiz - JavaScript

Welcome/News/Announcements

  • Project
    • Product Requirements Document (PRD): Due 4/12
  • Communications:
    • Meet with me in person during office hours at least once this semester.
    • Email - specify course # in subject title, e.g., "OIM3690: GitHub settings"
    • Use Slack/GitHub when asking code-related questions
  • Questions?

Project

  • Two Roles
    • PM: Write Product Requirements Document (PRD) + wireframe
    • Dev: Build someone else's website
  • Key Deadlines
    • 4/12: PRD
    • 4/22: First version (tag v1.0)
    • 4/25: PM–Dev Communications (via GitHub Issues)
    • 5/03: Final version (tag final) + reflections
  • Collaboration
    • Use GitHub repo (PM creates, Dev joins)
    • At least 2 GitHub Issues to show real discussion

What we have learned so far...

  • HTML: basic tags, image, link, list, id, class, div, span, table, form, multimedia, ...
  • CSS: syntax, internal vs. external vs. inline, selectors, flexbox, grids, ...
  • Website: design, ...
  • JavaScript
    • Event, element
    • Variables
    • Functions
    • Conditional statements
    • Access form elements

Quick Quiz

  • Is JavaScript case sensitive?
  • How do we add a comment in JavaScript?
  • For element <p id="demo">This is a demonstration.</p>
    • How do we change font size?
    • How do we add/change border color?
  • How do we make the element disappear using JavaScript?
  • How do we turn N minutes into hours and minutes?
  • How do we access user's input value? <input id="num" type="text"/>

Q & A

  • Any Question from past exercises, assignments, etc.
  • Issues on GitHub

Quiz3 - JavaScript

  • You cannot (and do not need to) modify the existing HTML code.
  • Write your JavaScript inside the <script> tags already provided.
  • Use DOM methods like document.querySelector() and addEventListener().
  • Add comments or pseudocode to explain your logic—this can earn partial credit.

Quiz3 - JavaScript (in VSCode, 40%)

  • Create quiz3-1.html, quiz3-2.html, and quiz3-3.html inside WebTech folder.
  • Copy the following starter code: quiz3-1.html, quiz3-2.html, quiz3-3.html
  • Put away your pen. Transcribe and refine your answers to Q1 and Q2, then complete Q3 in VSCode.
  • Notes:
    • You may use class notes, your past code, and online resources.
    • AI tools are allowed, but clearly comment and explain any AI-generated code.
    • Be prepared to explain your code if asked.
    • Do not collaborate with others.
  • Submit by committing and pushing to GitHub before time is up.

Coding Quiz Grading Rubric

Score Description
100 Code is fully correct and runs without any issues.
80~90 Code is mostly correct and functional, with only minor mistakes that are easy to understand and fix.
50~60 Code has significant issues or bugs but shows a clear attempt with useful pseudocode or comments.
20~30 Submission is incomplete or lacks enough effort to be considered a valid attempt.
0 No submission or absent.