Get Set Up

1. Open your fork of quiz-game on GitHub
2. Code → Codespaces → click your existing Codespace (or Create codespace on main)
3. Confirm Copilot Chat and the Playwright MCP server are ready

If your Codespace was deleted, your work is safe — it's pushed to your fork on GitHub.

The Spaghetti Problem

What happens when everything is tangled together?

Imagine This...

Your entire quiz is one giant file — questions, scoring, colors, and HTML all mixed together.

Your task: Make wrong answers show up in red.

Think It Through

• Where do you even start looking?
• What if "red" is set in three different places?
• What if the color code is inside the scoring function?
• How do you know your change didn't break the score?

What Goes Wrong

• Changing one thing breaks something else
• Hard to find where the problem is
• Everything depends on everything

Separation of Concerns

Each part of your code should have one job.

The LEGO Analogy

• Each LEGO brick does one thing
• You can swap a brick without rebuilding everything
• You can find the brick you need quickly
• Your code should work the same way

Our 4 Concerns

• Data — the questions and answers
• Display — the HTML structure
• Logic — scoring and answer checking
• Styling — colors, fonts, and layout

Identify each concern in your code.

Break

Stretch, grab water, and come back ready to refactor.

Think About...

If you could only change one part of your quiz, what would it be?

Refactor Round 1

Extract the question data.

The Prompt

"Move the questions array into a separate file called questions.js. Don't change anything else."

The Process

1. Ask AI to make one change
2. Run the code
3. Test with Playwright: does it still work?
4. If yes: move on. If no: fix only the broken connection.

Refactor Round 2

Separate logic and styling.

Step 1: Extract Logic

"Extract the score tracking and answer checking into their own functions. Don't change the questions or the HTML."

Test with Playwright after.

Step 2: Extract CSS

"Move all the CSS from the style tag into a separate style.css file. Don't change any functionality."

Test with Playwright after.

The Contrast

What happens if you ask AI to "refactor everything at once"?

One at a Time vs. All at Once

• One at a time: you know what changed and can test it
• All at once: if something breaks, where do you even look?

Our New File Structure

quiz-game/
  index.html      ← display
  style.css       ← styling
  questions.js    ← data
  app.js          ← logic
					

Each file has one job.

Save and Publish

git add .
git commit -m "Refactored quiz into separate concerns"
git push
					

Your live site at github.io/quiz-game/ updates within a minute.

Wrap-Up

What We Learned

• Separation of concerns = each part has one job
• Change one thing, test one thing
• Refactoring changes structure, not behavior
• Playwright verifies nothing broke

Coming Up Next

Save Points

Now that your code is organized, we'll learn to save our progress before experimenting — so we can always go back.