update the readme

README.md

@@ -1,70 +1,109 @@
-# MakeCode Skill Map Sample
+# Activity 1: Click the Emotion Game
 
-This is an example skill map that contains three separate learning paths.You can view the content here:
-https://arcade.makecode.com/skillmap#github:microsoft/pxt-skillmap-sample/skillmap.md
 
-Github-hosted skill maps are loaded in the same manner as tutorials, with a URL fragment
-formatted as follows:
+## Introduction
+In this tutorial, you'll create a simple **Emotion Game** using **MakeCode Arcade** with Python. You'll learn about:
 
-`#github:[organization name]/[repository name]/[markdown file name]`
 
-## Syntax
+- **Variables**:
+  - `None` variable types to initiage an empty variable
+  - `Sprite` variables for character images
+  - `Integer` variables for score
+  - `String` variables for emotions
+- **Conditionals** (`if`, `elif`, `else`) to change game logic
+- **Functions** (`def`) to organize your code
 
-The skill map definition can be found in the `skillmap.md` file. Metadata about the skill
-map itself can be found under the top-level heading:
 
-- `id`: The string after the heading (eg `# sample`). Cannot contain spaces.
-- `name`: The title of your skill map. This will be displayed in the banner on the page.
-- `description`: A description of the map contents. This is also shown in the banner.
-- `infoUrl` (optional): A URL to a page with additional educator information
+### Hint
+In this game, pressing **Up** when the emotion is "happy" gives you a point. Otherwise, you lose a point. The emotion changes in a loop between "happy", "sad", and "angry."
 
-### Learning Paths
 
-A skill map consists of one or more "paths", each path being an ordered sequence of activities.
-The first activity in each path is unlocked, and completing an activity unlocks the next one.
+---
 
-A learning path is defined by a level two heading (`##`) has has the following properties:
 
-- `id`: The string after the heading (eg `## interface`). Must be unique within this skill map.
-- `name`: The title of the path, displayed above the linked activities.
-- `description`: Additional details (not currently displayed).
-- `completionUrl`: URL to a certificate, displayed when a user has completed the entire path.
+## **Step 1: Set the Background**
+We will use a pre-made background that matches our game. From the toolkit, Click on `Scene` and click and drag the `Set Background Image to img`
 
-### Activities
+```python
+scene.set_background_image()
+```
+![Set background image code to drag into the editor space](https://raw.githubusercontent.com/PomPomMom/Images/refs/heads/main/set%20background%20image%20python%20makecode%20arcade.png)
 
-Each learning path has multiple activities, defined by level three headings (`###`). Currently,
-an "activity" is simply a MakeCode tutorial, and has the following properties:
 
-- `id`: The string after the heading (eg `### space-activity1`). Must be unique within this skill map.
-- `name`: The title of the activity. Displayed on the activity card.
-- `type`: The type of activity. Must be `tutorial` currently.
-- `description`: Details about the activity, displayed on the back of the card.
-- `tags`: Descriptive tags displayed on the bottom of the activity card.
-- `url`: Link to the tutorial. See the [MakeCode Tutorial Documentation](https://makecode.com/writing-docs/user-tutorials) for details on tutorial authoring and link formatting.
-- `imageUrl`: URL for the image displayed on the front of the activity card.
+## **Step 2: Set the Image for the Background**
+Next to the first line of code there should be a paint palate icon. Click onthe icon. In the window that pops up, click `My Assets` at the top. Choose the direction image for the background. 
 
-## Forking
+![Palate icon appears next to the set background code](https://raw.githubusercontent.com/PomPomMom/Images/refs/heads/main/background%20image%20python.png)
 
-If you fork this repo, be sure to change all URL references to https://github.com/microsoft/pxt-skillmap-sample to your forked repo's URL. Otherwise you won't see your changes.
 
-## Contributing
+## **Step 3: Set up a score variable**
+This game will keep score for every time the player makes the correct choice. Let's set a variable to keep score.
+We will set this as an info type so it will be displayed on the screen.
 
-This project welcomes contributions and suggestions.  Most contributions require you to agree to a
-Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us
-the rights to use your contribution. For details, visit https://cla.opensource.microsoft.com.
+```
+info.set_score(0)
+```
+## **Step 4: Set Up Sprite Variables**
+Now let's create the necessary **global variables**. We will have 3 emotion sprites and a variable called `currentEmotion` so the program can keep track of which emotion is showing.
+Choose a name for each variable. One for happy, one for sad, and one for angry
+```python
+happy: Sprite = None
+sad: Sprite = None
+angry: Sprite = None
+currentEmotion = "angry"
+```
+A **global variable** is a vairable that can be used anywhere in your code. This is different from **local variables** which can only be used in a section of the code.
 
-When you submit a pull request, a CLA bot will automatically determine whether you need to provide
-a CLA and decorate the PR appropriately (e.g., status check, comment). Simply follow the instructions
-provided by the bot. You will only need to do this once across all repos using our CLA.
+### Hint
+`happy`, `sad`, and `angry` are Sprite image variables.
+`currentEmotion` is a string variable that tracks the emotion.`
 
-This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/).
-For more information see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or
-contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments.
+## **Step 5: Create the nextEmoji() Function**
+Now, let's define a function to update the emotion and display the correct sprite. 
+We will use the `def` keyword to define the function, and we will call the function nextEmoji
 
-## Trademarks
+```def nextEmoji(): ```
 
-This project may contain trademarks or logos for projects, products, or services. Authorized use of Microsoft
-trademarks or logos is subject to and must follow
-[Microsoft's Trademark & Brand Guidelines](https://www.microsoft.com/en-us/legal/intellectualproperty/trademarks/usage/general).
-Use of Microsoft trademarks or logos in modified versions of this project must not cause confusion or imply Microsoft sponsorship.
-Any use of third-party trademarks or logos are subject to those third-party's policies.
+Anything included in this function must be indented beneath it.
+
+## **Step 6: Add a sprite variable to your function**
+In Makecode Arcade, you must call a sprite with the `variable name`, Arcade `call code`, an `image`, and a `type`.
+- Name the sprite `happy`
+- Make it equal to the Arcade call code: `sprites.create`
+- In parentheses, add a pre-made image by calling `"""happy"""`
+- after a comma, make the sprite a player kind by adding `SpriteKind.player`
+When you begin typing the call code `sprites.create` indented in the nextemoji() function, a popup should allow you to click to finish the code.
+![Sprite initializing with popup to complete the code.](https://raw.githubusercontent.com/PomPomMom/Images/5d7ea68c31ab68517b403e690cee94b6c796d8ee/Create%20sprite%20python%20makecode%20arcade.png)
+
+
+```python
+    def nextEmoji():
+
+    happy = sprites.create(assets.image(""" happy """), SpriteKind.player)
+ ```
+
+## **Step 7: Add an Image to your Sprite Variable.**
+When you have initialized your sprite, a paint palate icon will appear next to your code. Click on it.
+![Paint palate icon next to sprite code](https://github.com/PomPomMom/Images/blob/5d7ea68c31ab68517b403e690cee94b6c796d8ee/Image%20chooser.png?raw=true)
+
+At the top, choose "My Assets" and pick the happy face emoji. Then click Done in the bottom left corner.
+```happy = sprites.create(assets.image("""Happy"""), SpriteKind.player)```
+
+
+## **Step 8: Add two more sprites**
+Add two more sprites using the same procedure as before, but give `sad` the `sad` image and `angry` the `angry` image.
+
+```
+    sad = sprites.create(assets.image("""
+        sad
+    """), SpriteKind.player)
+    angry = sprites.create(assets.image("""
+        angry
+    """), SpriteKind.player)
+```
+## **Complete!**
+You have started your emoji game and learned about variables! Continue in the next activity to add conditionals to your game.
+
+```python
+scene.set_background_color(0)
+````

Skillmap-details

@@ -0,0 +1,72 @@
+{
+  "name": "Emotion Game",
+  "description": "Learn about variables in MakeCode Arcade by creating a game where a character's face changes emotions.",
+  "metadata": {
+    "usePython": true
+  },
+  "activities": [
+    {
+      "name": "Create Emotion Sprites",
+      "type": "tutorial",
+      "description": "Create sprite images for Happy, Sad, and Angry emotions.",
+      "url": "https://arcade.makecode.com/#tutorial:emotion-game-step1",
+      "tags": ["variables", "sprites"],
+      "editor": "arcade",
+      "reward": 10
+    },
+    {
+      "name": "Create Variables",
+      "type": "tutorial",
+      "description": "Set up variables to track the current emotion and the score.",
+      "url": "https://arcade.makecode.com/#tutorial:emotion-game-step2",
+      "tags": ["variables", "data"],
+      "editor": "arcade",
+      "reward": 10
+    },
+    {
+      "name": "Show Only One Emotion",
+      "type": "tutorial",
+      "description": "Use a function to display only the correct emotion sprite.",
+      "url": "https://arcade.makecode.com/#tutorial:emotion-game-step3",
+      "tags": ["functions", "visibility"],
+      "editor": "arcade",
+      "reward": 15
+    },
+    {
+      "name": "Cycle Through Emotions",
+      "type": "tutorial",
+      "description": "Write a function that changes the emotion in a set order.",
+      "url": "https://arcade.makecode.com/#tutorial:emotion-game-step4",
+      "tags": ["logic", "functions"],
+      "editor": "arcade",
+      "reward": 15
+    },
+    {
+      "name": "Add Button Controls",
+      "type": "tutorial",
+      "description": "Use A and B buttons to check answers and update score.",
+      "url": "https://arcade.makecode.com/#tutorial:emotion-game-step5",
+      "tags": ["input", "events"],
+      "editor": "arcade",
+      "reward": 20
+    },
+    {
+      "name": "Test Your Game!",
+      "type": "tutorial",
+      "description": "Run your game and check if everything works as expected.",
+      "url": "https://arcade.makecode.com/#tutorial:emotion-game-step6",
+      "tags": ["testing", "debugging"],
+      "editor": "arcade",
+      "reward": 20
+    },
+    {
+      "name": "Challenge: Add a New Emotion",
+      "type": "tutorial",
+      "description": "Extend the game by adding a new emotion and updating logic.",
+      "url": "https://arcade.makecode.com/#tutorial:emotion-game-challenge",
+      "tags": ["challenge", "creativity"],
+      "editor": "arcade",
+      "reward": 30
+    }
+  ]
+}