Merge pull request #1592 from microsoft/softchris-pedagogy

fixing broken diagrams

2-js-basics/1-data-types/README.md

@@ -338,7 +338,7 @@ flowchart TD
     A --> D["Template Literals"]
     
     B --> B1["'Hello World'"]
-    C --> C1['"Hello World"']
+    C --> C1["\"Hello World\""]
     D --> D1["`Hello \${name}`"]
     
     E["String Operations"] --> F["Concatenation"]
@@ -509,7 +509,7 @@ graph TD
     C --> C1["42, 3.14, -5"]
     C --> C2["+ - * / %"]
     
-    D --> D1["'quotes' or \"quotes\""]
+    D --> D1["'quotes' or \\\"quotes\\\""]
     D --> D2["`template literals`"]
     
     E --> E1["true or false"]

2-js-basics/2-functions-methods/README.md

@@ -40,14 +40,14 @@ mindmap
   root((JavaScript Functions))
     Basic Concepts
       Declaration
-        function name() {}
+        Traditional syntax
-        const name = () => {}
+        Arrow function syntax
       Calling
-        functionName()
+        Using parentheses
         Parentheses required
     Parameters
       Input Values
-        function(param1, param2)
+        Multiple parameters
         Default values
       Arguments
         Values passed in

2-js-basics/4-arrays-loops/README.md

@@ -42,7 +42,7 @@ mindmap
   root((Data Processing))
     Arrays
       Structure
-        [ ] square brackets
+        Square brackets syntax
         Zero-based indexing
         Dynamic sizing
       Operations
@@ -50,9 +50,9 @@ mindmap
         shift/unshift
         indexOf/includes
       Types
-        Numbers [1,2,3]
+        Numbers array
-        Strings ["a","b"]
+        Strings array
-        Mixed [1,"a",true]
+        Mixed types
     Loops
       For Loops
         Counting iterations

3-terrarium/1-intro-to-html/README.md

@@ -400,29 +400,22 @@ Insert this markup above the last `</div>` tag (before the closing tag of the pa
 > 🤔 **Notice Something?**: Even though you added this markup, you don't see anything new on the page! This perfectly illustrates how HTML provides structure while CSS provides appearance. These `<div>` elements exist but have no visual styling yet – that's coming in the next lesson!
 
 ```mermaid
-gitgraph
+flowchart TD
-    commit id: "HTML Document"
+    A[HTML Document] --> B[Document Head]
-    branch head
+    A --> C[Document Body]
-    checkout head
+    B --> D[Title Element]
-    commit id: "<title>"
+    B --> E[Meta Charset]
-    commit id: "<meta charset>"
+    B --> F[Meta Viewport]
-    commit id: "<meta viewport>"
+    C --> G[Main Heading]
-    checkout main
+    C --> H[Page Container]
-    branch body
+    H --> I[Left Container with 7 plants]
-    checkout body
+    H --> J[Right Container with 7 plants]
-    commit id: "<h1>My Terrarium</h1>"
+    H --> K[Terrarium Structure]
-    branch containers
+    
-    checkout containers
+    style A fill:#e1f5fe
-    commit id: "<div id='page'>"
+    style B fill:#fff3e0
-    commit id: "Left Container (7 plants)"
+    style C fill:#e8f5e8
-    commit id: "Right Container (7 plants)"
+    style H fill:#f3e5f5
-    commit id: "Terrarium Structure"
-    checkout body
-    merge containers
-    checkout main
-    merge head
-    merge body
-    commit id: "Complete HTML Page"
 ```
 
 ### 🔄 **Pedagogical Check-in**

5-browser-extension/1-about-browsers/README.md

@@ -271,20 +271,6 @@ Before beginning development, let's gather the required resources and dependenci
 
 Understanding the project structure helps organize development work efficiently. Like how the Library of Alexandria was organized for easy knowledge retrieval, a well-structured codebase makes development more efficient:
 
-```mermaid
-fileStructure
-    project-root
-        dist
-            manifest.json
-            index.html
-            background.js
-            main.js
-        src
-            index.js
-        package.json
-        webpack.config.js
-```
-
 ```
 project-root/
 ├── dist/                    # Built extension files
@@ -292,8 +278,10 @@ project-root/
 │   ├── index.html           # User interface markup
 │   ├── background.js        # Background script functionality
 │   └── main.js              # Compiled JavaScript bundle
-└── src/                     # Source development files
+├── src/                     # Source development files
-    └── index.js             # Your main JavaScript code
+│   └── index.js             # Your main JavaScript code
+├── package.json             # Project dependencies and scripts
+└── webpack.config.js        # Build configuration
 ```
 
 **Breaking down what each file accomplishes:**

6-space-game/2-drawing-to-canvas/README.md

@@ -85,14 +85,14 @@ The canvas uses Cartesian coordinates with an x-axis (horizontal) and y-axis (ve
 ```mermaid
 quadrantChart
     title Canvas Coordinate System
-    x-axis Left --> Right (X increases)
+    x-axis Left --> Right
-    y-axis Top --> Bottom (Y increases)
+    y-axis Top --> Bottom
     quadrant-1 Quadrant 1
     quadrant-2 Quadrant 2  
     quadrant-3 Quadrant 3
     quadrant-4 Quadrant 4
     
-    Origin (0,0): [0.1, 0.1]
+    Origin Point: [0.1, 0.1]
     Hero Center: [0.5, 0.8]
     Enemy Formation: [0.3, 0.2]
     Power-up: [0.7, 0.6]

9-chat-project/README.md

@@ -220,7 +220,6 @@ client = OpenAI(
     api_key=os.environ["GITHUB_TOKEN"],
 )
 
-```python
 response = client.chat.completions.create(
     messages=[
         {
@@ -378,8 +377,8 @@ quadrantChart
     Documentation Bot: [0.2, 0.3]
     Customer Service: [0.4, 0.4]
     General Assistant: [0.7, 0.5]
-    Creative Writer: [1.1, 0.9]
+    Creative Writer: [0.9, 0.9]
-    Brainstorming Tool: [1.3, 0.8]
+    Brainstorming Tool: [0.8, 0.8]
 ```
 
 **Understanding why these parameters matter**: Different applications need different types of responses. A customer service bot should be consistent and factual (low temperature), while a creative writing assistant should be imaginative and varied (high temperature). Understanding these parameters gives you control over your AI's personality and response style.