🪴 Avril Chen

Search

SearchSearch

CS349 Study Questions

A. Short Answers

1. Interactive Systems

(a) Define user interface.

  • A user interface (UI) is the point of interaction between a user and a digital system or device. It encompasses all elements that enable users to communicate and interact with the system, including graphical elements such as screens, menus, buttons, as well as input methods like keyboards, mice, touchscreens, and gestures. A well-designed user interface enhances user experience by facilitating efficient and intuitive interaction with the system.

(b) What is a mental model? (c) What part of the system do users base their mental model on? (d) What is a user interface? What is interaction? (e) What are two advantages of a graphical user interface (GUI)?

  • Easy to use
  • Rich interaction (f) What are two disadvantages of a graphical user interface (GUI)?
  • resource intensive
  • complex (g) What is the purpose of metaphor in a user interface? Give one example of how graphical user interfaces use metaphor. (h) Explain the difference between a graphical user interface and a command-line interface in terms of recall and recognition. (i) What input device is key to making a graphical user interface possible? Why?
  • mouse, allows users to interact with graphical elements on the screen by moving a cursor and clicking on objects. (j) What output device is key to making a graphical user interface possible? Why?
  • Display monitor or screen, The display monitor serves as the primary medium for presenting graphical elements, text, and visual feedback to the user. Without a screen, users would not have a visual interface through which to interact with the system.
  • gives feedback

2. Web Apps

  1. How does the browser act like an operating system? Describe 3 aspects.
    • handles input, provides canvas for drawing, etc.
    • provides UI toolkit (HTML, CSS)
    • provides “machine code” layer (i.e. JavaScript compiler)
  2. What is the Git staging area?
    • store what will go to your next commit
  3. What is a source code repository?
    • where you keep your code, serves as a version control to track changes over time and facilitates collaboration
  4. What does the git clone command do?
    • you clone a copy of a repo locally
    • retains the complete history of commits from the remote repo
  5. Describe what npm is and explain two ways you used it for your assignments.
    • package manager
    • used for installing simplekit
    • and used it to run on browser our source code
    1. A Node project with one or more installed modules always has these files and directories: package.json, package-lock.json, and node_modules. Which of these (if any) should be committed to a source code repository?
    • package.json and package-loc.json
    • Developers can use the package.json and package-lock.json files to install dependencies locally when cloning or setting up the project.
  7. What are the two main parts of a web browser like Google Chrome?
    • JavaScript Engine and Rendering Engine
  8. In a web browser, is JavaScript code interpreted or compiled?
    • both
    • JIT is interesting, as the interpreter processes the JavaScript code, the engine may identify sections of code that are frequently executed (known as “hot code paths”). Instead of interpreting these sections repeatedly, the engine dynamically compiles them into optimized machine code, which can execute more efficiently on the underlying hardware. This compiled code is then cached and reused for subsequent executions of the same code paths, providing a performance boost.
  9. s a Vite project also a Node project? Explain why or why not.
    • in some way, Vite needs Node.js to provide the runtime environment for executing JavaScript code outside of a web browser
  10. When you setup the project for your first two assignments, you executed npm install simplekit. Explain what files this command changed or added in your assignment directory.
    • package.json
    • package-lock.json
    • node_modules directory
  11. What does “truthy” mean in JavaScript? Give an example to illustrate.
    • in javascript, a value is considered “truthy” if ti evaluates to true when coerced to a boolean value in a conditional context. means that even though the value may not be exactly true, the language treats it as if it were true when evaluating the conditions.

B. Read Code

  1. Consider the following TypeScript code fragment:
class ClassA {  
private counter = 0;  
private pa1: ClassB | null = null;
 
fa1(v: ClassB) { this.pa1 = v; }
 
fa2() { this.pa1?.fb1(); }
 
fa3() { this.counter++; this.fa2();
 
} }
 
class ClassB extends SKContainer { private button: SKButton;
 
constructor(public pb1: ClassA) {  
super();  
this.pb1.fa1(this);  
this.button = new SKButton("A"); this.button.addEventListener("action", () => {
 
this.pb1.fa3(); });
 
this.addChild(this.button); }
 
fb1() { this.button.text = "${this.pb1.counter}"; } }
  • Which class is most like an MVC model and which is most like a view? Explain.
  • Explain what the purpose of the functions fa1, fa2, and fb1 are in this MVC architecture.
  • Which part of the code is considered the MVC controller?
  • Identify a major design flaw in this MVC implementation and describe a solution.

Graph View

Backlinks