Popcorn: Understanding the parts

1. The checkbox input stores whether the toggle is on or off.
2. The track (slider) is the visible part that changes appearance.
3. The question about .switch cannot be answered exactly from the paste because that selector’s definition is missing. In the OCS version, ocs__toggle is the wrapper for the input, track, and label.
4. border-radius makes the track rounded.
5. ::before is a pseudo-element, not a class. It creates the moving knob and can define its shape and appearance.

The input owns the checked state; the track displays that state. JavaScript reads .checked as a Boolean.

Popcorn Hack: Fix the Missing Track

I added ocs__toggle-track to the missing span and kept it decorative with aria-hidden="true". The visible label names the native checkbox, and the live output now reports the notification setting. This example changes local UI text; it does not request browser notification permission.

Challenge

Popcorn Hack: Fix the Missing Track

Lines: 1 Characters: 0

UI Output

Homework: Interactive Study Settings

My three toggles independently control study tips, a worked example, and study reminders. They all use the OCS toggle grammar and have distinct labels, IDs, and controlled sections. Tips start enabled; the other two start disabled. Every change updates both visibility and the enabled count. Settings reset when the runner is run again.

Challenge

Homework: Interactive Study Settings

Lines: 1 Characters: 0

UI Output

How the logic works

Each input supplies a Boolean condition. Selection decides whether to count it, and Boolean negation sets the matching section’s hidden state. Iteration applies the same logic to all three settings. The settings collection pairs each control with its target instead of maintaining three separate change handlers.

The track is decorative, while the nested checkbox supplies the accessible control and keyboard behavior. aria-controls identifies each controlled section. The count is an output with polite live announcements, so it can report changes without moving focus.

Test cases

Toggle state (tips, steps, reminders)	Expected count	Expected visible sections
On, off, off (initial)	1 of 3	Tips
Off, off, off	0 of 3	None
Off, on, off	1 of 3	Worked steps
Off, off, on	1 of 3	Reminders
On, on, off	2 of 3	Tips and worked steps
On, off, on	2 of 3	Tips and reminders
Off, on, on	2 of 3	Worked steps and reminders
On, on, on	3 of 3	All three

Browser checks still needed: press Run, activate each switch with mouse and keyboard, confirm the corresponding section changes, and check narrow and wide layouts. The examples rely on the site’s shared toggle styling. No stylesheet or application files are changed for this homework.

Reflection

A toggle should control a visible feature rather than only change color. I connected each switch to a different section and recalculated the total from actual checked states. Calling the update function on startup also prevents the first render from contradicting a prechecked input. The code includes comments explaining Boolean state, negation, counting, and initialization.