From 0dc64305b940605cadddd1e55ae77e867f4a6331 Mon Sep 17 00:00:00 2001
From: Jack Li <113951848+lijack04@users.noreply.github.com>
Date: Fri, 19 Dec 2025 09:05:59 -0500
Subject: [PATCH] fix(curriculum): reorder heart icon workshop steps to show
heart sooner (#64424)
Co-authored-by: majestic-owl448 <26656284+majestic-owl448@users.noreply.github.com>
---
.../686daa7ed79ceacd0b264e7d.md | 18 ++---
.../686daa7ed79ceacd0b264e7e.md | 64 +++++------------
.../686daa7ed79ceacd0b264e7f.md | 24 ++++---
.../686daa7ed79ceacd0b264e80.md | 68 ++++++++++++++-----
4 files changed, 89 insertions(+), 85 deletions(-)
diff --git a/curriculum/challenges/english/blocks/workshop-build-a-heart-icon/686daa7ed79ceacd0b264e7d.md b/curriculum/challenges/english/blocks/workshop-build-a-heart-icon/686daa7ed79ceacd0b264e7d.md
index 7b11387f196..15f3ec41b50 100644
--- a/curriculum/challenges/english/blocks/workshop-build-a-heart-icon/686daa7ed79ceacd0b264e7d.md
+++ b/curriculum/challenges/english/blocks/workshop-build-a-heart-icon/686daa7ed79ceacd0b264e7d.md
@@ -7,24 +7,17 @@ dashedName: step-2
# --description--
-The next step is to set the `width` and `height` attributes for the `svg` element. As you are creating an icon, both values should be set small.
+You should nest one `path` element inside your `svg` element to give the image shape.
-Set both values to `24`.
+Create a `path` element.
# --hints--
-Your `svg` element should have a `width` attribute of `24`.
+You should have a `path` element nested inside of your `svg` element.
```js
-const svg = document.querySelector('svg');
-assert.strictEqual(svg.getAttribute('width'), '24');
-```
-
-Your `svg` element should have a `height` attribute of `24`.
-
-```js
-const svg = document.querySelector('svg');
-assert.strictEqual(svg.getAttribute('height'), '24');
+const path = document.querySelector('svg path');
+assert.exists(path);
```
# --seed--
@@ -41,6 +34,7 @@ assert.strictEqual(svg.getAttribute('height'), '24');
--fcc-editable-region--
--fcc-editable-region--
diff --git a/curriculum/challenges/english/blocks/workshop-build-a-heart-icon/686daa7ed79ceacd0b264e7e.md b/curriculum/challenges/english/blocks/workshop-build-a-heart-icon/686daa7ed79ceacd0b264e7e.md
index d2ba01652fd..15210636914 100644
--- a/curriculum/challenges/english/blocks/workshop-build-a-heart-icon/686daa7ed79ceacd0b264e7e.md
+++ b/curriculum/challenges/english/blocks/workshop-build-a-heart-icon/686daa7ed79ceacd0b264e7e.md
@@ -7,64 +7,31 @@ dashedName: step-3
# --description--
-You are getting closer, now look at this example:
+The `path` element needs its shape defined. That is where the `d` attribute comes in. It is used to create a series of command letters and numbers that draw a shape.
-```html
-
-```
+These letters represent commands like move to, draw line, and close, while the numbers represent coordinates.
-The `viewBox` attribute controls what part of the image is visible inside the SVG.
-
-- The first two numbers (`0 0`) set the starting position of the `viewBox` — the top-left corner (x and y).
-- The next two numbers (`50 50`) define the `viewBox`'s width and height.
-
-Set the `viewBox` attribute to `0 0 24 24`.
+Set the heart shape's `d` attribute to `M12 21s-6-4.35-9.33-8.22C-.5 7.39 3.24 1 8.4 4.28 10.08 5.32 12 7.5 12 7.5s1.92-2.18 3.6-3.22C20.76 1 24.5 7.39 21.33 12.78 18 16.65 12 21 12 21z`.
# --hints--
-You should have a `viewBox` attribute.
+You should have a `d` attribute on your `path` element.
```js
-const svg = document.querySelector('svg');
-const viewBox = svg.getAttribute('viewBox');
-assert.exists(viewBox);
+const path = document.querySelector('path');
+const d = path.getAttribute('d');
+assert.exists(d);
```
-You should set the `viewBox` x position to 0.
+You should set the `d` attribute to `M12 21s-6-4.35-9.33-8.22C-.5 7.39 3.24 1 8.4 4.28 10.08 5.32 12 7.5 12 7.5s1.92-2.18 3.6-3.22C20.76 1 24.5 7.39 21.33 12.78 18 16.65 12 21 12 21z`
```js
-const svg = document.querySelector('svg');
-const viewBox = svg.getAttribute('viewBox');
-const x = viewBox?.trim().split(' ')[0];
-assert.strictEqual(x, '0');
-```
-
-You should set the `viewBox` y position to 0.
-
-```js
-const svg = document.querySelector('svg');
-const viewBox = svg.getAttribute('viewBox');
-const y = viewBox?.trim().split(' ')[1];
-assert.strictEqual(y, '0');
-```
-
-You should set the `viewBox` width to 24.
-
-```js
-const svg = document.querySelector('svg');
-const viewBox = svg.getAttribute('viewBox');
-const width = viewBox?.trim().split(' ')[2];
-assert.strictEqual(width, '24');
-```
-
-You should set the `viewBox` height to 24.
-
-```js
-const svg = document.querySelector('svg');
-const viewBox = svg.getAttribute('viewBox');
-const height = viewBox?.trim().split(' ')[3];
-assert.strictEqual(height, '24');
+const path = document.querySelector('path');
+const d = path.getAttribute('d');
+assert.strictEqual(
+ d,
+ 'M12 21s-6-4.35-9.33-8.22C-.5 7.39 3.24 1 8.4 4.28 10.08 5.32 12 7.5 12 7.5s1.92-2.18 3.6-3.22C20.76 1 24.5 7.39 21.33 12.78 18 16.65 12 21 12 21z'
+);
```
# --seed--
@@ -80,7 +47,8 @@ assert.strictEqual(height, '24');
--fcc-editable-region--
-