Merge pull request #1592 from microsoft/softchris-pedagogy

fixing broken diagrams

Author: softchris

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() {}
-        const name = () => {}
+        Traditional syntax
+        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,17 +42,17 @@ mindmap
   root((Data Processing))
     Arrays
       Structure
-        [ ] square brackets
+        Square brackets syntax
         Zero-based indexing
         Dynamic sizing
       Operations
         push/pop
         shift/unshift
         indexOf/includes
       Types
-        Numbers [1,2,3]
-        Strings ["a","b"]
-        Mixed [1,"a",true]
+        Numbers array
+        Strings array
+        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
-    commit id: "HTML Document"
-    branch head
-    checkout head
-    commit id: "<title>"
-    commit id: "<meta charset>"
-    commit id: "<meta viewport>"
-    checkout main
-    branch body
-    checkout body
-    commit id: "<h1>My Terrarium</h1>"
-    branch containers
-    checkout containers
-    commit id: "<div id='page'>"
-    commit id: "Left Container (7 plants)"
-    commit id: "Right Container (7 plants)"
-    commit id: "Terrarium Structure"
-    checkout body
-    merge containers
-    checkout main
-    merge head
-    merge body
-    commit id: "Complete HTML Page"
+flowchart TD
+    A[HTML Document] --> B[Document Head]
+    A --> C[Document Body]
+    B --> D[Title Element]
+    B --> E[Meta Charset]
+    B --> F[Meta Viewport]
+    C --> G[Main Heading]
+    C --> H[Page Container]
+    H --> I[Left Container with 7 plants]
+    H --> J[Right Container with 7 plants]
+    H --> K[Terrarium Structure]
+    
+    style A fill:#e1f5fe
+    style B fill:#fff3e0
+    style C fill:#e8f5e8
+    style H fill:#f3e5f5
 ```
 
 ### 🔄 **Pedagogical Check-in**

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

@@ -271,29 +271,17 @@ 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
 │   ├── manifest.json        # Extension configuration
 │   ├── index.html           # User interface markup
 │   ├── background.js        # Background script functionality
 │   └── main.js              # Compiled JavaScript bundle
-└── src/                     # Source development files
-    └── index.js             # Your main JavaScript code
+├── src/                     # Source development files
+│   └── 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)
-    y-axis Top --> Bottom (Y increases)
+    x-axis Left --> Right
+    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]
-    Brainstorming Tool: [1.3, 0.8]
+    Creative Writer: [0.9, 0.9]
+    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.