Unit I Laboratory: First AI-Powered Web Pages

Which version of Node.js should you download from nodejs.org for this course?

a) LTS version b) Current version c) Beta version d) Nightly version

a

Complete the terminal command that verifies Node.js is installed: \_\_\_\_ -v

a) npm b) node c) vite d) npx

b

Complete the terminal command that verifies npm is installed: \_\_\_\_ -v

a) node b) npx c) npm d) yarn

c

Which VS Code extension provides a local development server with instant reload?

a) Live Server b) Prettier c) ESLint d) Live Sass

a

Which VS Code extension is used for automatic code formatting?

a) Live Server b) Prettier c) ESLint d) Beautify

b

What is Vite?

a) A JavaScript library for machine learning b) A CSS framework c) A modern replacement for manually managing script files that gives a dev server with instant reload d) A package manager

c

Complete the command that creates a new Vite project named unit1-app with the vanilla template: npm create \_\_\_\_ unit1-app -- --template vanilla

a) webpack@latest b) vite c) parcel@latest d) vite@latest

d

After cd unit1-app and npm install, which command starts the Vite dev server?

a) npm run dev b) npm start c) npm serve d) npm build

a

Which URL does the Vite dev server usually print for you to open in Chrome?

a) http://localhost:3000 b) http://localhost:5173 c) http://localhost:8080 d) http://localhost:5000

b

What feature on the Vite starter page confirms everything is working?

a) A login form b) A chart c) A working counter button d) A todo list

c

How do you prove that Vite's instant reload is working?

a) Adding a new file updates the browser b) Editing CSS updates the browser c) Editing JavaScript updates the browser instantly d) Editing the heading text in index.html updates the browser instantly without a manual refresh

d

A Windows student's terminal says npm is not recognized after installing Node.js. What is the correct fix?

a) Close and reopen the terminal (or VS Code) so PATH refreshes b) Reinstall Node.js c) Restart the computer d) Run npm install globally

a

Which free API does the Mini App use to fetch random user profiles?

a) jsonplaceholder.typicode.com b) randomuser.me c) api.github.com d) reqres.in

b

Complete the fetch URL so it returns 5 profiles: https://randomuser.me/api/?\_\_\_\_=5

a) count b) limit c) results d) num

c

Complete the code so the response body is parsed into a JavaScript object: const data = await response.\_\_\_\_();

a) text() b) parse() c) data() d) json()

d

What does list.innerHTML = ''; do before appending new profiles?

a) Clears the "Loading…" text from the list element b) Deletes the list element c) Hides the list element d) Empties the network cache

a

Complete the destructuring so first and last are extracted from user.name: const \_\_\_\_ = user.name;

a) [first, last] b) {first, last} c) (first, last) d) first, last

b

What is the template literal in the Mini App used for?

a) Parsing JSON b) Formatting numbers c) Building the display string for each user's name and email d) Sorting the user list

c

Complete the event listener so clicking the button runs loadProfiles: btn.\_\_\_\_('click', loadProfiles);

a) onClick b) on c) listen d) addEventListener

d

Which DevTools tab lets you inspect the actual JSON response from the API?

a) Network b) Console c) Elements d) Sources

a

What does await fetch(...) wait for?

a) JSON parsing to finish b) The HTTP request to complete c) The model to load d) The DOM to render

b

What does await response.json() wait for?

a) The HTTP request to complete b) The model to load c) JSON parsing to finish d) The DOM to render

c

Which property holds each user's photo in the randomuser.me response?

a) user.photo.medium b) user.image.medium c) user.avatar.medium d) user.picture.medium

d

What parameter is used to fetch users from the Philippines only?

a) &nat= b) &country= c) &region= d) &locale=

a

MobileNet is pre-trained on how many object categories?

a) 100 b) 1,000 c) 10,000 d) 80

b

Which approach is used for Activities 3–5 because it is the quickest way to prototype with TensorFlow.js models?

a) Vite projects with npm packages b) React applications c) Simple standalone HTML files with CDN script tags (no build step) d) Node.js servers

c

How is the Activity 3 HTML file launched?

a) npm run dev b) Python HTTP server c) Node.js d) Live Server

d

What concept is illustrated when MobileNet fails to correctly classify a jeepney?

a) Training-data bias b) Overfitting c) Underfitting d) Data leakage

a

According to the instructor note, what does MobileNet typically answer for a jeepney?

a) car, truck, or bus b) minibus, trolleybus, or moving van c) jeep, vehicle, or transport d) van, taxi, or minivan

b

What does the jeepney test concretely demonstrate?

a) A model can recognize any object b) A model can learn new categories automatically c) A model can only recognize what it was trained on d) A model is always biased

c

What is COCO-SSD used for?

a) Classifying 1,000 image categories b) Detecting body keypoints c) Segmenting people from background d) Drawing boxes around detected objects with class labels and confidence

d

Each COCO-SSD prediction has the format:

a) {class: 'person', score: 0.97, bbox: [x, y, width, height]} b) {className: 'person', probability: 0.97, bbox: [x, y, width, height]} c) {label: 'person', confidence: 0.97, box: [x, y, width, height]} d) {class: 'person', score: 0.97, box: [x, y, width, height]}

a

Complete the code that styles the bounding-box outline in COCO-SSD: ctx.strokeStyle = '\_\_\_\_'; ctx.lineWidth = 3;

a) red b) lime c) blue d) green

b

What is MoveNet used for?

a) Object detection b) Image classification c) Detecting 17 body keypoints (x, y, score) d) Face landmark detection

c

Complete the code so the webcam stream is requested: video.srcObject = await navigator.mediaDevices.\_\_\_\_({ video: true });

a) getCamera b) getWebcam c) getVideo d) getUserMedia

d

Complete the code so a MoveNet detector is created: const detector = await poseDetection.\_\_\_\_(poseDetection.SupportedModels.MoveNet);

a) createDetector b) loadDetector c) createModel d) initDetector

a

Complete the line that estimates poses from the video each frame: const poses = await detector.\_\_\_\_(video);

a) detectPoses b) estimatePoses c) getPoses d) predictPoses

b

Complete the condition so only confident keypoints are drawn: if (kp.\_\_\_\_ > 0.4) { ... }

a) confidence b) probability c) score d) value

c

Complete the function that creates a real-time loop: \_\_\_\_(renderLoop);

a) setInterval b) setTimeout c) requestFrame d) requestAnimationFrame

d

Why is real-time pose detection only possible with on-device AI and not a cloud API?

a) Latency — a cloud API pays network delay, which is unusable for frame-by-frame video b) Cost — cloud APIs are too expensive c) Privacy — cloud APIs cannot process video d) Accuracy — cloud APIs are less accurate

a

Webcam permission is denied on a page opened as a file:// path. Why?

a) The webcam must be enabled in system settings b) Browsers block camera access on plain files; the page must be served from http://localhost c) The browser must be Chrome d) The video element must have autoplay

b

A black canvas appears in the MoveNet activity. What is the fix?

a) await video.load() runs before the loop b) canvas width/height are set to 640x480 c) Make sure await video.play() runs before the loop, and canvas width/height match the video d) video element has controls

c

Complete the command that logs the active backend: console.log(tf.\_\_\_\_());

a) getBackend b) backend c) currentBackend d) activeBackend

a

What is the URL for Teachable Machine?

a) teachablemachine.withgoogle.com b) teachablemachine.google.com c) tm.withgoogle.com d) teachablemachine.com

a

What is the minimum number of webcam samples per class recommended for Activity 5?

a) 20 b) 25 c) 30 d) 50

c

What should vary across the samples captured per class?

a) Lighting, color, size b) Time, location, person c) Camera, resolution, format d) Angle, distance, background

d

Which button is clicked in Teachable Machine to train the model?

a) Train Model b) Start Training c) Train d) Begin Training

a

If one class is often confused during testing, what should you do?

a) Delete the class b) Add more varied samples and retrain c) Start over d) Use a different model

b

Which export option produces a shareable TensorFlow.js model URL?

a) Export Model → Tensorflow.js → Download b) Export Model → Tensorflow Lite → Download c) Export Model → Tensorflow.js → Upload (shareable link) d) Export Model → ONNX → Download

c

Complete the code that loads the exported Teachable Machine model: model = await tmImage.\_\_\_\_(URL + 'model.json', URL + 'metadata.json');

a) import b) fetch c) open d) load

d

Complete the code that makes a prediction on the webcam canvas: const prediction = await model.\_\_\_\_(webcam.canvas);

a) predict b) classify c) detect d) estimate

a

After exporting a Teachable Machine model, where does training happen vs. where does inference happen?

a) Training in your page; inference in the Teachable Machine web app b) Training in the Teachable Machine web app; inference in your page, in the browser, on-device c) Both happen on a server d) Both happen in the browser

b

Complete the script tag in the Mini App HTML that tells the browser it is an ES module: <script \_\_\_\_ src="/main.js"></script>

a) async b) defer c) nomodule d) type="module"

d

Which attribute on <input type="file"> restricts the picker to images?

a) accept="image/" b) filter="image/" c) type="image/*" d) restrict="image"

a

Complete the line that turns the chosen file into a URL the <img> can display: photo.src = URL.\_\_\_\_(upload.files[0]);

a) toData b) createObjectURL c) readFile d) makeURL

b

Complete the line that runs MobileNet on the loaded image: const predictions = await model.\_\_\_\_(photo);

a) detect b) predict c) classify d) estimate

c

The following are Web AI libraries used across this unit, EXCEPT:

a) TensorFlow.js b) MediaPipe Tasks c) Transformers.js d) jQuery

d

Pages using fetch(), the camera, and type="module" must be run with Live Server because those features only work when served over http://.

True

Opening an HTML file directly with file:// still allows full webcam access.

False

MobileNet can correctly classify a jeepney because it was trained on Filipino images.

False

On lab PCs without a GPU, TensorFlow.js falls back to CPU/WASM and this is expected behavior.

True

Teachable Machine requires you to write training code before exporting a model.

False

After export, inference happens in your page, in the browser, on-device.

True

The two await calls in the MobileNet example wait for the same operation.

False

A model can recognize any object, not just what it was trained on.

False