From a728840a007a79ccd21904158c496a2ef4b903a4 Mon Sep 17 00:00:00 2001
From: Fernando Belmonte Archetti
<110430578+farchettiensis@users.noreply.github.com>
Date: Wed, 19 Nov 2025 10:52:44 -0300
Subject: [PATCH] refactor: workshop game settings panel step order (#63884)
Co-authored-by: majestic-owl448 <26656284+majestic-owl448@users.noreply.github.com>
---
.../68e9a4a47d8a9802cba886b7.md | 68 ++-----------------
.../68ee86e3ee07b01626a392cc.md | 37 +++++++---
.../68f29dbf9125476b4808d6fb.md | 64 ++++++++++++-----
3 files changed, 81 insertions(+), 88 deletions(-)
diff --git a/curriculum/challenges/english/blocks/workshop-game-settings-panel/68e9a4a47d8a9802cba886b7.md b/curriculum/challenges/english/blocks/workshop-game-settings-panel/68e9a4a47d8a9802cba886b7.md
index 9200798ce11..029948505ce 100644
--- a/curriculum/challenges/english/blocks/workshop-game-settings-panel/68e9a4a47d8a9802cba886b7.md
+++ b/curriculum/challenges/english/blocks/workshop-game-settings-panel/68e9a4a47d8a9802cba886b7.md
@@ -7,70 +7,16 @@ dashedName: step-4
# --description--
-Now that the body has been styled, you are going to create a container card for the Game Settings panel. To start, create a class selector for `settings-card`.
+Now that the body has been styled, you are going to create a container card for the Game Settings panel.
-This will be where all of your formatting for the container will go. Set the `max-width` to `250px` to define the overall size of your container.
-
-Next, set your `padding` to `20px` so that your content has space between it and the border of the container.
-
-After this, create a rounded edge by setting your `border-radius` to `10px`.
-
-Then set a `box-shadow` with the values of `0 2px 6px rgba(0,0,0,0.2)`. This will create a subtle "lifted" look that will create depth for the container.
+To start, add a class of `settings-card` to your `div` element.
# --hints--
-You should have a class selector in your css for `settings-card`.
+Your `div` should have a class of `settings-card`.
```js
-assert.exists(new __helpers.CSSHelp(document).getStyle(".settings-card"));
-```
-
-You should add `max-width` property to the `.settings-card` class selector.
-
-```js
-assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle(".settings-card")?.maxWidth);
-```
-
-You should have a `max-width` property with a value of `250px`.
-
-```js
-assert.strictEqual(new __helpers.CSSHelp(document).getStyle(".settings-card")?.maxWidth, "250px");
-```
-
-You should add a `padding` property to the `.settings-card` class selector.
-
-```js
-assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle(".settings-card")?.padding);
-```
-
-You should have a `padding` property with a value of `20px`.
-
-```js
-assert.strictEqual(new __helpers.CSSHelp(document).getStyle(".settings-card")?.padding, "20px");
-```
-
-You should add a `border-radius` property to your `.settings-card` class selector.
-
-```js
-assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle(".settings-card")?.borderRadius);
-```
-
-You should have a `border-radius` property with a value of `10px`.
-
-```js
-assert.strictEqual(new __helpers.CSSHelp(document).getStyle(".settings-card")?.borderRadius, "10px");
-```
-
-You should add a `box-shadow` property to your `.settings-card` class selector.
-
-```js
-assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle(".settings-card")?.boxShadow);
-```
-
-You should have a `box-shadow` with the value of `0 2px 6px rgba(0,0,0,0.2)`.
-
-```js
-assert.strictEqual(new __helpers.CSSHelp(document).getStyle(".settings-card")?.boxShadow, "rgba(0, 0, 0, 0.2) 0px 2px 6px");
+assert.strictEqual(document.querySelector("div")?.className, "settings-card");
```
# --seed--
@@ -87,7 +33,9 @@ assert.strictEqual(new __helpers.CSSHelp(document).getStyle(".settings-card")?.b
+--fcc-editable-region--
+--fcc-editable-region--
Game Settings
@@ -104,8 +52,4 @@ body {
background-color: #f0f0f0;
text-align: center;
}
-
---fcc-editable-region--
-
---fcc-editable-region--
```
diff --git a/curriculum/challenges/english/blocks/workshop-game-settings-panel/68ee86e3ee07b01626a392cc.md b/curriculum/challenges/english/blocks/workshop-game-settings-panel/68ee86e3ee07b01626a392cc.md
index d1699a70192..46c548468a2 100644
--- a/curriculum/challenges/english/blocks/workshop-game-settings-panel/68ee86e3ee07b01626a392cc.md
+++ b/curriculum/challenges/english/blocks/workshop-game-settings-panel/68ee86e3ee07b01626a392cc.md
@@ -7,14 +7,36 @@ dashedName: step-6
# --description--
-Now it is time to add your newly created class `settings-card` class to your `div` element.
+Within your `.settings-card` selector set the `margin` property to `auto`.
+
+Setting the `margin` property to `auto` automatically adjusts the margins of an element to evenly distribute the remaining space in its container, commonly used to center block-level elements horizontally.
+
+And last, set a `text-align` property with the value of `left`. This will align the inline content, such as text, to the left side of its containing element.
# --hints--
-Your `div` should have a class of `settings-card`.
+You should add a `margin` property to the `settings-card` class selector.
```js
-assert.strictEqual(document.querySelector("div")?.className, "settings-card");
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle(".settings-card")?.margin);
+```
+
+You should have a `margin` property with a value of `auto`.
+
+```js
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle(".settings-card")?.margin, "auto");
+```
+
+You should add a `text-align` property to the `settings-card` class selector.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle(".settings-card")?.textAlign);
+```
+
+You should have a `text-align` property with a value of `left`.
+
+```js
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle(".settings-card")?.textAlign, "left");
```
# --seed--
@@ -31,9 +53,7 @@ assert.strictEqual(document.querySelector("div")?.className, "settings-card");
---fcc-editable-region--
-
---fcc-editable-region--
+
Game Settings
@@ -56,7 +76,8 @@ body {
padding: 20px;
border-radius: 10px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
- margin: auto;
- text-align: left;
+--fcc-editable-region--
+
+--fcc-editable-region--
}
```
diff --git a/curriculum/challenges/english/blocks/workshop-game-settings-panel/68f29dbf9125476b4808d6fb.md b/curriculum/challenges/english/blocks/workshop-game-settings-panel/68f29dbf9125476b4808d6fb.md
index c9910bcea29..6fba3afec46 100644
--- a/curriculum/challenges/english/blocks/workshop-game-settings-panel/68f29dbf9125476b4808d6fb.md
+++ b/curriculum/challenges/english/blocks/workshop-game-settings-panel/68f29dbf9125476b4808d6fb.md
@@ -7,36 +7,70 @@ dashedName: step-5
# --description--
-Within your `.settings-card` set the `margin` property to `auto`.
+Now it is time to style the `settings-card` container. Create a class selector for `settings-card`.
-Setting the `margin` property to `auto` automatically adjusts the margins of an element to evenly distribute the remaining space in its container, commonly used to center block-level elements horizontally.
+This will be where all of your formatting for the container will go. Set the `max-width` to `250px` to define the overall size of your container.
-And last, set a `text-align` property with the value of `left`. This will align the inline content, such as text, to the left side of its containing element.
+Next, set your `padding` to `20px` so that your content has space between it and the border of the container.
+
+After this, create a rounded edge by setting your `border-radius` to `10px`.
+
+Then set a `box-shadow` with the values of `0 2px 6px rgba(0,0,0,0.2)`. This will create a subtle "lifted" look that will create depth for the container.
# --hints--
-You should add a `margin` property to the `settings-card` class selector.
+You should have a class selector in your css for `settings-card`.
```js
-assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle(".settings-card")?.margin);
+assert.exists(new __helpers.CSSHelp(document).getStyle(".settings-card"));
```
-You should have a `margin` property with a value of `auto`.
+You should add `max-width` property to the `.settings-card` class selector.
```js
-assert.strictEqual(new __helpers.CSSHelp(document).getStyle(".settings-card")?.margin, "auto");
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle(".settings-card")?.maxWidth);
```
-You should add a `text-align` property to the `settings-card` class selector.
+You should have a `max-width` property with a value of `250px`.
```js
-assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle(".settings-card")?.textAlign);
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle(".settings-card")?.maxWidth, "250px");
```
-You should have a `text-align` property with a value of `left`.
+You should add a `padding` property to the `.settings-card` class selector.
```js
-assert.strictEqual(new __helpers.CSSHelp(document).getStyle(".settings-card")?.textAlign, "left");
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle(".settings-card")?.padding);
+```
+
+You should have a `padding` property with a value of `20px`.
+
+```js
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle(".settings-card")?.padding, "20px");
+```
+
+You should add a `border-radius` property to your `.settings-card` class selector.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle(".settings-card")?.borderRadius);
+```
+
+You should have a `border-radius` property with a value of `10px`.
+
+```js
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle(".settings-card")?.borderRadius, "10px");
+```
+
+You should add a `box-shadow` property to your `.settings-card` class selector.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle(".settings-card")?.boxShadow);
+```
+
+You should have a `box-shadow` with the value of `0 2px 6px rgba(0,0,0,0.2)`.
+
+```js
+assert.strictEqual(new __helpers.CSSHelp(document).getStyle(".settings-card")?.boxShadow, "rgba(0, 0, 0, 0.2) 0px 2px 6px");
```
# --seed--
@@ -53,7 +87,7 @@ assert.strictEqual(new __helpers.CSSHelp(document).getStyle(".settings-card")?.t
-