fix(curriculum): refine editable region workshop bookstore page (#65965)

2026-05-28 18:26:54 +00:00 · 2026-02-19 22:52:23 +05:30
parent 60ab523cb1
commit 303bdffc7a
18 changed files with 76 additions and 48 deletions
@@ -40,10 +40,12 @@ assert.match(code, /<body>[\s\S]*<h1>[\s\S]*<\/h1>[\s\S]*<\/body>/i);
  <meta charset="UTF-8" />
  <title>XYZ Bookstore Page</title>
 </head>
--fcc-editable-region--
-<body>

-</body>
+<body>
 --fcc-editable-region--
+  
+--fcc-editable-region--
+</body>
+
 </html>
 ```
@@ -43,9 +43,9 @@ assert.exists(document.querySelector('h1 + p'));

 <body>
  <h1>XYZ Bookstore</h1>
-  --fcc-editable-region--
-
-  --fcc-editable-region--
+--fcc-editable-region--
+  
+--fcc-editable-region--
 </body>

 </html>
@@ -40,8 +40,9 @@ assert.exists(document.querySelector('p + div'));
 <body>
  <h1>XYZ Bookstore</h1>
  <p>Browse our collection of amazing books!</p>
+  
 --fcc-editable-region--
-
+  
 --fcc-editable-region--
 </body>

@@ -46,11 +46,12 @@ assert.equal(document.querySelector('div')?.className, 'card-container');
 <body>
  <h1>XYZ Bookstore</h1>
  <p>Browse our collection of amazing books!</p>
--fcc-editable-region-- 
-  <div>
-
-  </div>
+  
 --fcc-editable-region--
+  <div>
+--fcc-editable-region--
+    
+  </div>
 </body>

 </html>
@@ -46,11 +46,12 @@ assert.exists(document.querySelector('.card-container div.card'));
 <body>
  <h1>XYZ Bookstore</h1>
  <p>Browse our collection of amazing books!</p>
- --fcc-editable-region--
+  
  <div class="card-container">
-
-  </div>
 --fcc-editable-region--
+    
+--fcc-editable-region--
+  </div>
 </body>

 </html>
@@ -48,12 +48,13 @@ assert.equal(document.querySelector('.card')?.id, 'sally-adventure-book');
 <body>
  <h1>XYZ Bookstore</h1>
  <p>Browse our collection of amazing books!</p>
+  
  <div class="card-container">
  --fcc-editable-region--
    <div class="card">
-
-    </div>
  --fcc-editable-region--
+      
+    </div>
  </div>
 </body>

@@ -38,12 +38,13 @@ assert.equal(document.querySelector('.card h2')?.innerText.trim(), "Sally's SciF
 <body>
  <h1>XYZ Bookstore</h1>
  <p>Browse our collection of amazing books!</p>
+  
  <div class="card-container">
-  --fcc-editable-region--
    <div class="card" id="sally-adventure-book">
-
+    --fcc-editable-region--
+      
+    --fcc-editable-region--
    </div>
-  --fcc-editable-region--
  </div>
 </body>

@@ -47,13 +47,14 @@ assert.exists(document.querySelector('.card h2 + p'));
 <body>
  <h1>XYZ Bookstore</h1>
  <p>Browse our collection of amazing books!</p>
+  
  <div class="card-container">
-  --fcc-editable-region--
    <div class="card" id="sally-adventure-book">
      <h2>Sally's SciFi Adventure</h2>
-
+    --fcc-editable-region--
+      
+    --fcc-editable-region--
    </div>
-  --fcc-editable-region--
  </div>
 </body>

@@ -51,14 +51,15 @@ assert.equal(document.querySelector('.card button')?.innerText.trim(), 'Buy Now'
 <body>
  <h1>XYZ Bookstore</h1>
  <p>Browse our collection of amazing books!</p>
+  
  <div class="card-container">
-  --fcc-editable-region--
    <div class="card" id="sally-adventure-book">
      <h2>Sally's SciFi Adventure</h2>
      <p>This is an epic story of Sally and her dog Rex as they navigate through other worlds.</p>
-
+    --fcc-editable-region--
+      
+    --fcc-editable-region--
    </div>
-  --fcc-editable-region--
  </div>
 </body>

@@ -43,14 +43,16 @@ assert.exists(document.querySelector('.card + .card'));
 <body>
  <h1>XYZ Bookstore</h1>
  <p>Browse our collection of amazing books!</p>
+  
  <div class="card-container">
-  --fcc-editable-region--
    <div class="card" id="sally-adventure-book">
      <h2>Sally's SciFi Adventure</h2>
      <p>This is an epic story of Sally and her dog Rex as they navigate through other worlds.</p>
      <button class="btn">Buy Now</button>
    </div>
-
+    
+  --fcc-editable-region--
+    
  --fcc-editable-region--
  </div>
 </body>
@@ -39,17 +39,19 @@ assert.equal(cards[1]?.id, 'dave-cooking-book');
 <body>
  <h1>XYZ Bookstore</h1>
  <p>Browse our collection of amazing books!</p>
+  
  <div class="card-container">
    <div class="card" id="sally-adventure-book">
      <h2>Sally's SciFi Adventure</h2>
      <p>This is an epic story of Sally and her dog Rex as they navigate through other worlds.</p>
      <button class="btn">Buy Now</button>
    </div>
+    
  --fcc-editable-region--
    <div class="card">
-
-    </div>
  --fcc-editable-region--
+      
+    </div>
  </div>
 </body>

@@ -39,17 +39,19 @@ assert.equal(cards[1]?.querySelector('h2')?.innerText.trim(), "Dave's Cooking Ad
 <body>
  <h1>XYZ Bookstore</h1>
  <p>Browse our collection of amazing books!</p>
+  
  <div class="card-container">
    <div class="card" id="sally-adventure-book">
      <h2>Sally's SciFi Adventure</h2>
      <p>This is an epic story of Sally and her dog Rex as they navigate through other worlds.</p>
      <button class="btn">Buy Now</button>
    </div>
-  --fcc-editable-region--
+    
    <div class="card" id="dave-cooking-book">
-
+    --fcc-editable-region--
+      
+    --fcc-editable-region--
    </div>
-  --fcc-editable-region--
  </div>
 </body>

@@ -50,18 +50,20 @@ assert.exists(cards[1]?.querySelector('h2 + p'));
 <body>
  <h1>XYZ Bookstore</h1>
  <p>Browse our collection of amazing books!</p>
+  
  <div class="card-container">
    <div class="card" id="sally-adventure-book">
      <h2>Sally's SciFi Adventure</h2>
      <p>This is an epic story of Sally and her dog Rex as they navigate through other worlds.</p>
      <button class="btn">Buy Now</button>
    </div>
-  --fcc-editable-region--
+    
    <div class="card" id="dave-cooking-book">
      <h2>Dave's Cooking Adventure</h2>
-
+    --fcc-editable-region--
+      
+    --fcc-editable-region--
    </div>
-  --fcc-editable-region--
  </div>
 </body>

@@ -55,19 +55,21 @@ assert.equal(cards[1]?.querySelector('button')?.innerText.trim(), 'Buy Now');
 <body>
  <h1>XYZ Bookstore</h1>
  <p>Browse our collection of amazing books!</p>
+  
  <div class="card-container">
    <div class="card" id="sally-adventure-book">
      <h2>Sally's SciFi Adventure</h2>
      <p>This is an epic story of Sally and her dog Rex as they navigate through other worlds.</p>
      <button class="btn">Buy Now</button>
    </div>
-  --fcc-editable-region--
+    
    <div class="card" id="dave-cooking-book">
      <h2>Dave's Cooking Adventure</h2>
      <p>This is the story of Dave as he learns to cook everything from pancakes to pasta, one recipe at a time.</p>
-  
+    --fcc-editable-region--
+      
+    --fcc-editable-region--
    </div>
-  --fcc-editable-region--
  </div>
 </body>

@@ -62,22 +62,25 @@ assert.exists(document.querySelector('p + .btn-container'));
 </head>

 <body>
--fcc-editable-region--
  <h1>XYZ Bookstore</h1>
  <p>Browse our collection of amazing books!</p>
+  
  <div class="card-container">
    <div class="card" id="sally-adventure-book">
      <h2>Sally's SciFi Adventure</h2>
      <p>This is an epic story of Sally and her dog Rex as they navigate through other worlds.</p>
      <button class="btn">Buy Now</button>
    </div>
+    
    <div class="card" id="dave-cooking-book">
      <h2>Dave's Cooking Adventure</h2>
      <p>This is the story of Dave as he learns to cook everything from pancakes to pasta, one recipe at a time.</p>
      <button class="btn">Buy Now</button>
    </div>
  </div>
-
+  
+--fcc-editable-region--
+  
 --fcc-editable-region--
 </body>

@@ -88,24 +88,28 @@ assert.equal(buttons[1]?.innerText.trim(), 'Checkout');
 <body>
  <h1>XYZ Bookstore</h1>
  <p>Browse our collection of amazing books!</p>
+  
  <div class="card-container">
    <div class="card" id="sally-adventure-book">
      <h2>Sally's SciFi Adventure</h2>
      <p>This is an epic story of Sally and her dog Rex as they navigate through other worlds.</p>
      <button class="btn">Buy Now</button>
    </div>
+    
    <div class="card" id="dave-cooking-book">
      <h2>Dave's Cooking Adventure</h2>
      <p>This is the story of Dave as he learns to cook everything from pancakes to pasta, one recipe at a time.</p>
      <button class="btn">Buy Now</button>
    </div>
  </div>
--fcc-editable-region--
+  
  <p>Review your selections and continue to checkout.</p>
+  
  <div class="btn-container">
-
+  --fcc-editable-region--
+    
+  --fcc-editable-region--
  </div>
--fcc-editable-region--
 </body>

 </html>
@@ -38,12 +38,13 @@ assert.match(code, /<\/head>[\s\S]*<body>[\s\S]*<\/body>[\s\S]*<\/html>/i);

 ```html
 <!DOCTYPE html>
--fcc-editable-region--
 <html lang="en">
 <head>
+--fcc-editable-region--
+  
  <title>XYZ Bookstore Page</title>
 </head>

-</html>
 --fcc-editable-region--
+</html>
 ```
@@ -36,12 +36,13 @@ assert.match(code, /<head>[\s\S]*<title>[\s\S]*<\/title>[\s\S]*<\/head>/i);
 ## --seed-contents--

 ```html
-  --fcc-editable-region--
 <!DOCTYPE html>
 <html lang="en">
 <head>
-
+--fcc-editable-region--
+  
+--fcc-editable-region-- 
 </head>
-  --fcc-editable-region-- 
+
 </html>
 ```