Subcategories

• ---

• Tutorials

  Step-by-step guide for building mini-projects

  120 152
  120 Topics

  152 Posts

  I

  Image Formats: Vector vs Bitmap   In Scratch, a costume image can be a “bitmap” or a “vector” format: Bitmap images are stored as a matrix of small square boxes called “pixels” Vector images are stored as a few shapes, where each shape is represented by its outline and fill colors. You can easily tell the difference when you zoom in an image: [image: 69160a5a-651a-467a-8dac-1cef327aa777.gif]   There are several important benefits when we use a vector image: First, vector images will always look the same when you scale them up, but bitmap images look worse due to lower resolution when you switch to full screen mode. Second, a vector image’s file size is usually much smaller than a bitmap for the same content. For example, imagine we need to draw a big square. In bitmap format, we need to specify every pixel’s color, but in vector format we only need to specify the edge length and one color. Therefore, if your project would run faster and smoother when you use vector images Third, vector images are much easier to modify. Since it is composed of individual shapes, you can move/resize/recolor each shape without affecting other parts of the image.   Note that the vector format is not always better. If the image has a lot of details, then the bitmap format should used. For example, if almost every pixel in the image has different colors, then there is no easy way to describe it using simple shapes in the vector format, and we should just store each pixel’s information using the bitmap format. In summary, choose the vector format if the image is made of a few simple shapes in uniform or gradient colors.     How to Generate a Vector Image Using AI   On MIT Scratch, there are only a limited number of vector images from the library. On CreatiCode, you can use AI to generate new vector images based on your project. The basic idea is to generate a bitmap image using AI, then convert it to a vector format using another AI tool. Below are the steps:     Step 1 - Generate a bitmap image   As shown, you can start by selecting the “AI” tool for adding a sprite. [image: 0d8336f7-f298-4ad4-b8a6-31b62582b5fc.png]   In the input box, describe the object, specify it is a vector image, and then click “generate”. For example: [image: 3e7286b6-f4de-4f53-b220-8a9c3bacf6fa.png]   Important notes: This AI tool can only generate images in the bitmap format, even if our prompt says “vector image”. It will try to generate an image that looks like a typical vector image (a few shapes of simple colors) The prompt must contain the keyword “vector” to ensure the AI generates an image in this style. You can add additional instructions to further emphasize this, such as “with simple shapes”, “flat vector illustration”, “for costumes in MIT Scratch”, etc. You might need to refine the description or regenerate the image.   Once you have the image you like, click on it to add it as a new costume.     Step 2 - Clean up the costume image (optional)   The costume will be in bitmap format. Before converting it to a vector image, you might need to clean it up. For example, the image may contain a shadow. You can use the erazer tool to remove it manually, or use the new magic wand tool to select and delete it. [image: 1acd1d15-de24-42ed-b9bc-366936c31a5a.gif]   For another example, sometimes the AI generated image has some transparent parts. You can use the “fill” tool to fill some colors in there. [image: 97398dd5-16eb-49c0-beb4-95a3bb567090.gif]     Step 3 - Convert the bitmap costume to a vector image   You can click the “Vectorize” button to convert any bitmap costume to a new vector costume: [image: ee0406ed-cdf1-4fe9-89a7-362c6c78d719.gif]     A new vector format costume will be added, and the original bitmap costume is not changed. This is a true vector image, as you can select individual parts and change them: [image: 03075006-1f75-45f9-b196-5174c759bd3c.gif]     Note that the original MIT Scratch provides a button to convert a bitmap image to vector, but it is not really a true vector image. It only represents the entire image as one big shape, and you still can’t edit individual parts.     Create Vector Images from Drawings   Since you can convert any bitmap costume to a vector costume, you can also draw a costume of your own, then convert it. For example, suppose we use a few simple shapes to create a small house, and then use the “variations” tool to convert it to a cartoon: [image: 99477b90-fb38-4952-98ef-db7ba1ca2ea8.gif]     Next, we can convert this cartoon house to a vector image. Note that it needs to be in the “bitmap” mode first, since the “vectorize” button is only available in the bitmap mode: [image: 56724e7c-838a-43ea-b067-70c7f6d653f7.gif]       Search for Vector Images   The vector images generated by any user is shared with the community. You can open the AI image tool for sprites (not backdrops), and select the “Vector” type to search for them: [image: 8b93c0a1-c388-4569-b83c-b2f468cc9373.png]
• 2D Blocks

  How to use each 2D block

  135 136
  135 Topics

  136 Posts

  I

    Introduction   In game projects, clones are commonly used to create objects like enemies, obstacles or powerups. However, it is not easy to scan for them in our code, which is often needed when we need to do something clever, such as “find all the enemies near me”, or “check if I have a clear line of fire”. In CreatiCode, every clone has a clone ID, and the original sprite can also be treated as a clone with an ID of “originalsprite”. There are 2 new blocks that can be used to scan for clones of a given sprite: one is simply based on distance from this sprite, and the other based on a scan area.     Find Clones by Distance   You can use this sensing block to find clones of a given sprite within the given distance from this sprite, and save their information in the given table: [image: 8829343a-c510-4abf-8244-82ec0925e103.png]   Notes: You can pick any sprite, even this sprite itself The original sprite can also be treated as a clone, with a clone ID of “originalsprite”. The distance is the direct-line distance between this sprite and each clone of that sprite, calculated using their x and y positions. If any clones are found within this distance, they are listed in the table in order of increasing distance (nearest first). The table will always have at least 4 columns: clone ID, x, y and distance. If the clone has any private variables, they will also be added as additional columns.     Example   Here is an example program showing how it works: play.creaticode.com/projects/685e804081a45ef495ae5fdf   In the Tree sprite, we create 5 clones of the tree. Each clone will go to a random position, generate a “secret” that is private to itself, and then say its clone ID to identify itself. [image: 1df5f9b2-b0c8-481e-859f-b20181d0c34c.png]   So on stage, you will see 6 tree objects like this: [image: e41fa05f-e90a-484e-9cd6-4a8d4c5ef9a5.png]   Now, in the Truck sprite, we can use this sensing block to find trees that are with 100 units distance from the truck: [image: ff775d82-a2dc-4e5a-880f-c5a34b689f8b.png]   Then we can look at the content of table1: [image: 86b95333-ca03-4dd0-b046-74fbbdd41531.png]   As shown, there are 3 clones whose distance is less than 100 from the truck. The nearest clone is the original tree sprite, which is at x of 0 and y of 0. It is about 64.85 units away from the truck. The second nearest clone is the one with ID of “clone_3”. It is a bit further away, and its secret is 78. You can try to change the distance threshold or drag the trees around, and observe how table1 changes. For example, when the distance threshold is very large, all clones should be listed in the table; and when it is very small, the table should become empty.               Detect Blocking Clones in the Forward Direction   Another very common question we need to ask is whether there are obstacles in front of our sprite, which may block our sprite’s movement or block the shots it fires. One way to do this checking is to use the block above to find all clones on the stage, and then check the position of each of them. But the calculation become more complex when the sprite is facing an angle (not straight left/right or up/down). Instead, you can use the following block for this task, which defines a rectangle “scan area” in front of this sprite, and list any clone of the given sprite it finds in this area in the given table. [image: 2297f4ed-d46f-447a-a3ed-54522d0ceffc.png] Notes: You can pick any sprite, even this sprite itself The original sprite can also be treated as a clone, with a clone ID of “originalsprite”. The distance is going forward along this sprite’s current direction. So if this sprite is facing 45 degrees, you can imagine it moves forward along this direction for 200 units, and check if there are any clones that’s 20 (half of 40) units away on the left or right side. If any clones are found within this distance, they are listed in the table in order of increasing distance (nearest first). The table will always have at least 4 columns: clone ID, x, y and distance. If the clone has any private variables, they will also be added as additional columns.     Example   Here is an example program showing how it works: play.creaticode.com/projects/685e928081a45ef495ae82c0   The truck is facing -30 degrees (upper left direction). In the Tree sprite, 2 clones are created in a similar way. You can drag them to a formation like this: [image: 65738bf0-57e4-4690-ac02-7c9f93db6a3e.png]   The original tree sprite is directly on the forward path of the truck. The clone 2 is slightly blocking the path on the right side, and clone 1 should not be a blocker.   Now, suppose we run this block in the truck sprite: [image: 5be89be2-1986-4a76-8ff5-5c3876cfdef2.png]   The detection area will be 200 by 70 in front of the truck: [image: 9917ab75-2ea0-43ff-99b5-2135f7734b9e.png]   The table1 will contain 2 rows: [image: 7d1c4728-c595-44e3-8bf4-2f167c83c2dc.png]   Explanation: The center point of both the original sprite and the clone 2 are inside the red rectangle, so they are included in the result table. For clone 1, although its edge touches with the red rectangle, its center point is outside the rectangle. Since we only look at the x/y position of each clone, and not their size, the only thing that matters is their center point’s position. Therefore, when deciding the width of the detection area, you need to consider the width of both this sprite and the clones. Now, suppose we change the block to use width of 100, then the table will contain 3 rows, because the detection area now includes the center point of the clone 1 as well: [image: 361b27a9-5860-42c4-ade9-2a158ff52341.png]   You can try to play with different truck direction, tree position, distance and width settings to understand how this block works better.
• 3D Blocks

  How to use each 3D block

  90 90
  90 Topics

  90 Posts

  I

  Introduciton   You can now add joystick-style user controls for your 3D games, which is a natural input method for users on touchpads and smartphones. Note that this new feature only works in 3D projects, and a 3D scene must be initialized first. [image: bd66a512-c5fe-41d1-ab11-ab0ee0646d38.gif]     Add a Joystick   A virtual joystick is made of 2 parts: A “base” that is composed of 2 circles. Whenever the pointer is pressed down, the base will not move as the pointer is dragged around it. A “puck” that is a smaller circle with a dot at its center. It shows the current position of the pointer relative to the base.   [image: 94053901-b56b-41aa-9119-0e1dbeb8d51d.png] You can add a new joystick using the following block: [image: 0b27122c-d0c6-4527-b97d-3970e5eb6e66.png]   The inputs are: Left or Right: you can add a left or right joystick using this block. The left one only covers the left half of the screen, and the right one only covers the right half. Use this block 2 times to add both joysticks. Color1 and Color2: These two color inputs control the colors of the base and the puck. Scale: This is a scaling factor that controls the size of the virtual joystick. By default, it is 100, which means 100% of the default size. If you would like to double the size of the joystick, you can set this value to 200.     Read joystick properties   You can read the properties of a joystick using this reporter block: [image: 7255bb0e-23fb-4787-a990-9aa68438087a.png]   It has 2 inputs: Side: left or right Property: x or y: the position of the puck relative to the center of the base. Note that both x and y are between -1 and 1. For example, if the puck is at the right edge of the base, then x will be 1 and y will be 0. dir: the direction of the puck relative to the base in degrees, which is between -180 and 180. Distance: the distance of the puck from the base between 0 and 1. pressed: whether the joystick is pressed down. 0 means not pressed down, and 1 means it is pressed down. This should be the first value to check, since if the joystick is not pressed down, then all the other properties are not valid.     Remove all joysticks   You can use this block to remove all the joysticks you have added so far: [image: 1d01c5e0-fa92-4a17-b136-31470151eb52.png]     Demo   In this demo program, we first add a 3D glass object, then add 2 virtual joysticks of different colors and scales. Then we enter a forever loop: whenever the left or right joystick is pressed down, we read its properties into a few variables, and also rotate the 3D glass based on the “dir” property: [image: 47cdf629-7187-4ab1-93f0-3c1e5fd064c9.png]   Here is the project link: play.creaticode.com/projects/673e98585e434ba9fd49f96a
• Live Books

  Free K-12 books that you can use in combination with the CreatiCode platform to learn coding and technologies. Their content will be continuously updated based on your feedback.

  3 3

  • ChatGPT for K-12 Students - Understand, Build, Innovate
  3 Topics

  3 Posts

  I

      What’s a Prompt?   [image: 50dc0f93-e9e3-4679-84fc-765d3034c335.png]   You’re already familiar with ChatGPT, but let’s go deeper into the mechanics of your interactions: the prompts. Every message you send to ChatGPT is actually a prompt. Instead of thinking of a prompt as a standalone question or command, imagine it as your contribution to an ongoing dialogue with ChatGPT. This isn’t just a Q&A session; it’s more like a flowing conversation where each prompt serves a specific role. Here are the core types of prompts you’ll use: Questions: These are straightforward inquiries that seek a direct answer. For instance, “ChatGPT, how does photosynthesis work?” or “What is the square root of 64?” Requests: This type is for when you need ChatGPT to perform a specific task. For example, “ChatGPT, summarize this chapter for me,” or “Create a list of renewable energy sources.” Information: These prompts add extra context or clarification to the conversation. Maybe ChatGPT misunderstood a previous prompt, or perhaps you want to add more detail to get a better answer. For example, “I meant to summarize the chapter about World War I, not World War II,” or “By renewable energy, I’m referring to sources that are not fossil fuels.” In a real-world chat with ChatGPT, you’ll often use a mix of these types of prompts. You could start with a question, then make a request based on ChatGPT’s answer, and provide additional information to clarify or steer the conversation. Understanding these different types of prompts allows you to have a more dynamic and meaningful conversation with ChatGPT. With this knowledge, you’re better equipped to make ChatGPT a valuable tool for learning, creating, and exploring.     Building a Great Prompt: The CORE Framework   If you are just having a casual chat with ChatGPT, you can pretty much speak your mind freely in your prompts. However, when your goal is to ask ChatGPT to carry out a task and deliver satisfactory results, the prompt often needs to be more complex and structured. Although there are many ways to write a prompt, some are more effective than others in getting a high-quality response. You may often hear others giving very different opinions on what ChatGPT can do: some people may tell you ChatGPT is awesome and can do great things, while other people may say ChatGPT is very confused and can’t get anything useful out of it. Most of the time, this difference is caused by the difference in the prompts they have used. ChatGPT is like a gold mine, and a well-written prompt is like a well-calibrated metal detector that allows you to find gold in it. To help you get started, let me introduce a simple but powerful framework called CORE. It stands for Context, Objective, Requirement, and Example. Using these four elements, you will be able to create prompts that bring out the best in ChatGPT, giving you answers that are as awesome as you hoped they would be.     Context: Setting the Stage   Context is like the setting in a story. It tells ChatGPT the background details: who you are, what you are trying to do, and why you’re asking ChatGPT for help. Good context is like giving ChatGPT a backstage pass to your situation. Without it, ChatGPT might give you an answer that’s sort of like a one-size-fits-all t-shirt — kind of okay but not a great fit. For example, if you ask ChatGPT “How can I earn some coins?”, its answer will be very different depending on whether you are talking about “Super Mario” or real life. Usually, an easy way to describe the context is to start with “I”, such as “I’m a 6th-grade student, and I need to …”, “I am trying to …”, or “I need your help with …”. Alternatively, some people prefer to start with “You” (i.e. ChatGPT), such as “You are helping me with …”, or “You are talking to a 6-th grade student”. Sometimes, you may need to provide additional information or reference to ChatGPT in the context. For example, if you need ChatGPT to help summarize an article, then you need to include that article in your prompt. Your prompt may look like this: I am reading an article about the French Revolution: [insert the entire article] It is a bit too long. can you summarize it for me?   Examples of Using Context   Math Homework Help: Less Effective Prompt: “Help me with fractions.” Effective Prompt: “I’m a middle school student struggling with my math homework on fractions. Can you help me?” Explanation: The effective prompt specifies that it’s a middle school student needing help with homework. This helps ChatGPT tailor the explanation to a middle school level, making it more accessible for the student.   Science Fair Project on Renewable Energy: Less Effective Prompt: “How do solar panels work?” Effective Prompt: “I’m working on a science fair project about renewable energy, specifically focusing on solar panels. How do they work?” Explanation: This prompt sets the stage for a more educational and project-focused response, informing ChatGPT that the user isn’t just curious but has a specific academic goal.   Writing a Poem for English Class: Less Effective Prompt: “How do I write a poem?” Effective Prompt: “I have an English class assignment to write a poem about nature. How do I get started?” Explanation: The effective prompt makes it clear that the task is for an English class assignment about nature, allowing ChatGPT to offer more targeted tips and suggestions.   Learning to Play a New Instrument: Less Effective Prompt: “Tips for learning the guitar.” Effective Prompt: “I just joined my school’s music club and chose to learn the guitar. Any tips?” Explanation: The context specifies that the user is a beginner who has joined a music club. This helps ChatGPT provide tips that are suitable for someone who is new to playing the guitar and perhaps working in a group setting. Each of these examples shows how a little bit of context goes a long way in getting a response that really fits what you need.   Objective: What’s the Mission?   Once you’ve set the stage with your context, it’s time to get down to business with the Objective. This is where you tell ChatGPT exactly what you want it to do for you. You’re essentially giving it a mission to complete. Without a clear objective, ChatGPT would have to guess what it needs to do, and sometimes may take the wrong action. For example, imagine you tell ChatGPT “I failed my math test today”. If you don’t say anything else, most likely ChatGPT will offer some advice on how to improve your math skills. However, if you say “I failed my math test today. How should I tell my parents about it?” you will get very different answers. Usually, the objective should contain a verb that describes the action that ChatGPT needs to take, such as “explain”, “describe”, “list”, “design”, “summarize”, etc.   Examples of Great Objective Descriptions   Math Homework Help: Less Effective Prompt: “I’m a middle school student struggling with my math homework on fractions. Help me.” Effective Prompt: “I’m a middle school student struggling with my math homework on fractions. Can you walk me through how to solve ( \frac{1}{2} + \frac{3}{4} )?” Explanation: The highlighted objective clearly asks for a walkthrough on solving a specific fraction problem. This directs ChatGPT to provide a step-by-step solution tailored for a middle school student.   Science Fair Project on Renewable Energy: Less Effective Prompt: “I’m working on a science fair project about renewable energy, specifically focusing on solar panels. How do they work?” Effective Prompt: “I’m working on a science fair project about renewable energy, specifically focusing on solar panels. Please explain how they convert sunlight into electricity.” Explanation: The highlighted objective narrows down the query to ask how solar panels convert sunlight into electricity. This specificity guides ChatGPT to deliver a more focused explanation, ideal for a science fair project.   Writing a Poem for English Class: Less Effective Prompt: “I have an English class assignment to write a poem about nature. How do I get started?” Effective Prompt: “I have an English class assignment to write a poem about nature. Please give me a template or outline to start my poem?” Explanation: By asking for a template or outline, the highlighted objective specifies the type of assistance needed. This helps ChatGPT provide a useful starting point for writing the poem.   Learning to Play a New Instrument: Less Effective Prompt: “I just joined my school’s music club and chose to learn the guitar. Any tips?” Effective Prompt: “I just joined my school’s music club and chose to learn the guitar. Please list the basic chords I should start with.” Explanation: The highlighted objective asks for specific information on basic chords, directing ChatGPT to provide a beginner’s guide that’s useful for someone in a school music club.   By stating your objective clearly, you’re setting up ChatGPT for success, making it way more likely that you’ll get the answer you’re really after. Up next, we’ll add even more finesse to our prompts by introducing requirements and examples.     Requirement: The Nitty-Gritty Details   After you have laid out the Context and Objective in your prompt, ChatGPT would know what it needs to do. However, there are many different ways to carry out the same task, so we need to provide some requirements that specify how to do it. There are many things you can include in your requirements. For example, you might specify the tone, such as “formal” or “casual,” or the length, like “detailed” or “brief.” You can even specify a limit on the number of words, though ChatGPT may not be able to strictly control its output word count. You could also ask for the answer to be formatted in a particular way, like a list of bullets or a paragraph. You may also tell ChatGPT what you don’t want in your requirements. In many ways, the requirement is very similar to the rubrics your teacher gives you for some assignments. So imagine you are a teacher assigning a task to ChatGPT, then design your rubrics for ChatGPT to follow. One commonly used technique in writing the requirement is to assign a “role” to ChatGPT. For example, you can say “Write the answer as an expert in …”, and ChatGPT will use the tone and level of details that are typically used by experts. On the other hand, if you say “Pretend you are 5 years old”, then ChatGPT’s response will look like written by a very young kid with very simple words and sentences.   Examples of Giving Requirements   Math Homework Help: Less Effective Prompt: “I’m a middle school student struggling with my math homework on fractions. Can you walk me through how to solve ( \frac{1}{2} + \frac{3}{4} )?” Effective Prompt: “I’m a middle school student struggling with my math homework on fractions. Can you walk me through how to solve ( \frac{1}{2} + \frac{3}{4} )? Please use simple language and show all steps.” Explanation: The highlighted requirement specifies the language level and detail needed, ensuring that the explanation is both understandable and comprehensive for a middle school student.   Science Fair Project on Renewable Energy: Less Effective Prompt: “I’m working on a science fair project about renewable energy, specifically focusing on solar panels. Please explain how they convert sunlight into electricity.” Effective Prompt: “I’m working on a science fair project about renewable energy, specifically focusing on solar panels. Please explain how they convert sunlight into electricity. Keep it concise but include the basic science behind it.” Explanation: The requirement narrows down the focus to a concise explanation while still including the basic science. This helps prevent ChatGPT from writing lengthy explanations.   Writing a Poem for English Class: Less Effective Prompt: “I have an English class assignment to write a poem about nature. Please give me a template or outline to start my poem?” Effective Prompt: “I have an English class assignment to write a poem about nature. Please give me a template or outline to start my poem? Make sure to include at least three different poetic devices.” Explanation: The requirement specifies the inclusion of different poetic devices, guiding ChatGPT to offer a more educational and enriching starting point for the poem.   Learning to Play a New Instrument: Less Effective Prompt: “I just joined my school’s music club and chose to learn the guitar. Please list the basic chords I should start with.” Effective Prompt: “I just joined my school’s music club and chose to learn the guitar. Please list the basic chords I should start with. Pretend you are an experienced music teacher.” Explanation: By asking ChatGPT to take on the role of an experienced music teacher, the highlighted requirement ensures that the guide will be intuitive and well-designed.   By being meticulous with your requirements, you’re fine-tuning the ChatGPT’s responses to fit like a glove. You get to be the director of how you want your information served.     Examples: Show and Tell   So, you’ve given ChatGPT the context, objective, and even the fine details of your requirements. What’s left? Examples! While this step is optional, it can be incredibly effective in getting the response you’re after. If you find ChatGPT’s answers are not what you expect, but you don’t know how to change the objective or requirements, then it is probably a good time to provide some examples directly. Examples can illustrate the style, tone, or format you prefer. If you’ve ever heard the saying, “A picture is worth a thousand words,” well, in this case, an example can be worth a thousand guidelines. It’s like giving ChatGPT a mini “preview” of your ideal answer.   Examples of Providing Examples   Math Homework Help: Less Effective Prompt: “I’m a middle school student struggling with my math homework on fractions. Can you walk me through how to solve ( \frac{1}{2} + \frac{3}{4} )? Please use simple language and show all steps.” Effective Prompt: “I’m a middle school student struggling with my math homework on fractions. Can you walk me through how to solve ( \frac{1}{2} + \frac{3}{4} )? Please use simple language and show all steps. For example: ( \frac{1}{3} + \frac{1}{4} = \frac{1 \times 4 + 3 \times 1}{3 \times 4} = \frac{4 + 3}{12} = \frac{7}{12} ).” Explanation: The example provides a sample walkthrough for adding fractions, setting the expectation for the style and format of the answer.   Science Fair Project on Renewable Energy: Prompt: “I’m working on a science fair project about renewable energy, specifically focusing on solar panels. Please explain how they convert sunlight into electricity. Keep it concise but include the basic science behind it.” Explanation: For this prompt, it is not easy to provide an example since you would have to include an entire paragraph that explains another concept.   Writing a Poem for English Class: Less Effective Prompt: “I have an English class assignment to write a poem about nature. Please give me a template or outline to start my poem? Make sure to include at least three different poetic devices.” Effective Prompt: “I have an English class assignment to write a poem about nature. Please give me a template or outline to start my poem? Make sure to include at least three different poetic devices. For example, start with a simile, include some alliteration, and end with a metaphor.” Explanation: The example outlines the structure and poetic devices desired, providing ChatGPT with a blueprint for crafting the template or outline.   Learning to Play a New Instrument: Prompt: “I just joined my school’s music club and chose to learn the guitar. Please list the basic chords I should start with. Pretend you are an experienced music teacher.” Explanation: For this prompt, it is also not easy to provide an example, and it might not be necessary.   In short, providing an example is like giving ChatGPT a cheat sheet for acing your query. It’s your way to make sure you get the answer that fits your needs to a T. With this, you’ve completed the C.O.R.E framework, and you’re all set to craft prompts that will make your interactions with ChatGPT as fruitful as possible. Absolutely, a hands-on activity is a fantastic way to cement the understanding of the CORE framework. Here’s how you could set up this educational exercise:     Hands-On Activity: Fix that Prompt!   You’ve learned about the C.O.R.E framework — Context, Objective, Requirement, and Example. Now it’s time to put your knowledge to the test! Below are some less effective prompts that lack one or more elements of the CORE framework. Your mission is to figure out what’s missing or poorly written, and then rewrite the prompt to make it better. For each case, you can try both the original and the improved versions on ChatGPT to see how they compare. Does your prompt yield a better answer? You can keep improving your prompt until you see a clear improvement. You can use this chat project to run the tests: https://play.creaticode.com/projects/6531b7e60fdce080a4481c1d   Prompts for Analysis and Improvement Prompt: “Tell me about the solar system.” Hints: Is the context clear? What’s the objective here? Any requirements or examples?   Prompt: “I need to write a story for my class.” Hints: Who are you? What exactly do you need for your story? What should it look like?   Prompt: “I am preparing for my Spanish exam. How do I improve?” Hints: Which area are you looking for improvement?   Prompt: “I’m hosting a party. Give me a recipe for salads.” Hints: Any dietary restrictions? How detailed should it be?         Follow-Up Prompts: It’s a Conversation, Not a Monologue     [image: 6cd6e779-09f9-4dbf-92d0-5e3a974ad847.png]   You’ve got your CORE framework down, but let’s be real — nobody’s perfect. It’s rare to get exactly what you need from ChatGPT with just one prompt. And guess what? That’s totally okay! Working with ChatGPT is more like a conversation than a monologue. Sometimes, you need to clarify, adjust, or even backtrack to get to the answer you’re looking for. The key to effective follow-up prompts is to identify what went wrong (or what could be better) with the initial response. Is ChatGPT missing some background information? Were your original requirements unclear? Did your example mislead the model? Once you spot the issue, your follow-up prompt can address it, refining ChatGPT’s understanding and output. Don’t worry if you have to go through several iterations. The goal is to gradually narrow down to the most accurate and helpful response, and that usually takes a bit of back-and-forth.   Common Issues and How to Address Them Through Follow-Up Prompts   Missing Background Information Explanation: Sometimes ChatGPT doesn’t have enough context to give a tailored response. This usually happens when the initial prompt is too [censored]ue or general. In such cases, you’ll likely get a broad or generic answer that might not meet your specific needs. The key is to pinpoint what additional information would make your question clearer and include that in your follow-up prompt. Example 1: Initial Prompt: “Tell me about photosynthesis.” Initial Response: “Photosynthesis is the process by which green plants and some other organisms use sunlight to synthesize foods with the help of chlorophyll pigments.” Follow-Up Prompt: “I’m interested in understanding how chlorophyll plays a role in photosynthesis. Could you elaborate?” Improved Response: “Absolutely! Chlorophyll is essential for photosynthesis in plants. It’s the molecule in plant cells that absorbs sunlight and uses its energy to convert CO2 and water into glucose and oxygen.” Example 2: Initial Prompt: “Explain the concept of renewable energy.” Initial Response: “Renewable energy is energy that is collected from resources that are naturally replenished on a human timescale, such as sunlight, wind, and rain.” Follow-Up Prompt: “Can you focus on how solar energy is harnessed and converted into electricity?” Improved Response: “Certainly! Solar energy is harnessed using photovoltaic cells commonly found in solar panels. These cells convert sunlight directly into electricity by the photovoltaic effect.”   Misleading Descriptions Explanation: At times, the words you use in your prompt might inadvertently guide ChatGPT down the wrong path. For example, asking for a “quick recipe” could still yield a complex dish if ChatGPT’s definition of “quick” differs from yours. It’s important to clarify any terms or phrases that could be interpreted in multiple ways. Example 1: Initial Prompt: “Give me a quick recipe.” Initial Response: “How about Beef Bourguignon? It’s a delightful French dish, although it takes about 2 hours to make.” Follow-Up Prompt: “I’m looking for something quick and easy to prepare. Do you have a recipe that takes less than 30 minutes?” Improved Response: “Of course! A quick and easy option would be a classic Spaghetti Aglio e Olio. You’ll need spaghetti, garlic, red pepper flakes, and olive oil, and it takes just about 20 minutes to prepare.” Example 2: Initial Prompt: “How do I become popular?” Initial Response: “Gaining popularity can involve a myriad of factors such as your social media presence, networking skills, and even your charisma.” Follow-Up Prompt: “I was referring to becoming well-liked among my local community members. Do you have any tips for that?” Improved Response: “Ah, I understand. In a local community setting, becoming well-liked often involves being actively involved in community events, being kind and approachable, and showing genuine interest in the well-being of others.”   Unclear Requirements Explanation: If you have specific requirements for how you’d like the information to be presented, it’s crucial to state them clearly. Whether you want a detailed explanation, a summarized list, or any other specific format, not stating this clearly can lead to getting a response that doesn’t meet your expectations. Always specify your requirements in your prompt or follow-up to get the answer you’re looking for. Example 1: Initial Prompt: “Write me a poem about the ocean.” Initial Response: “The ocean’s waves dance to and fro, a ballet of nature, don’t you know.” Follow-Up Prompt: “Could you write the poem in a sonnet form?” Improved Response: “The ocean’s waves in moonlight gleam so bright, a dance of liquid sapphire through the night. Each crest and trough an artist’s stroke, it seems, a living, breathing, ever-changing dream.” Example 2: Initial Prompt: “Tell me how to take care of a dog.” Initial Response: “Taking care of a dog involves feeding, exercise, grooming, and regular veterinary check-ups.” Follow-Up Prompt: “Could you provide the information in a detailed list format?” Improved Response: "Certainly! Here’s a detailed list: Feeding: Choose nutritionally balanced food and provide fresh water. Exercise: Daily walks and playtime are essential. Grooming: Brush regularly and keep nails trimmed. Vet Visits: Annual check-ups and vaccinations are a must."   Misleading Examples Explanation: Sometimes, you might use an example to indicate the style or format you’re interested in. But if your example isn’t spot-on, ChatGPT might take it too literally or misunderstand your intention. Be mindful of the examples you use and make sure they align closely with what you’re actually looking for. Example 1: Initial Prompt: “Write me a story like Harry Potter.” Initial Response: “In a dystopian future, young Sarah discovers she’s a tech wizard capable of controlling machines with her mind.” Follow-Up Prompt: “I meant a fantasy story set in a magical world.” Improved Response: “Ah, got it. In the magical kingdom of Eldoria, a young orphan named Tim discovers an ancient wand that bestows upon him incredible magical powers.” Example 2: Initial Prompt: “Suggest a hearty dinner recipe.” Initial Response: “How about a seafood paella?” Follow-Up Prompt: “I was thinking of something more along the lines of a meat and potatoes kind of meal.” Improved Response: “Ah, I see. How about a classic meatloaf with a side of mashed potatoes? It’s a hearty, comforting meal that’s sure to satisfy.”   Needs Additional Information Explanation: Even when you think you’ve provided enough details, sometimes ChatGPT might still need more information to give you the best possible answer. This could be additional context, specific preferences, or other factors that weren’t included in your initial prompt. If the initial response is lacking, think about what additional details could make it more precise.   Example 1: Initial Prompt: “What laptop should I buy?” Initial Response: “The ideal laptop depends on various factors, including what you’ll be using it for, your budget, and personal preferences.” Follow-Up Prompt: “I’ll mainly be using it for video editing.” Improved Response: “For video editing, you’ll want a laptop with a strong processor, at least 16GB of RAM, and a high-resolution display. MacBook Pro and Dell XPS 15 are good options.” Example 2: Initial Prompt: “What pet should I get?” Initial Response: “Choosing a pet depends on your lifestyle, living situation, and personal preferences. Dogs and cats are popular choices, but there are also birds, fish, and small mammals like hamsters.” Follow-Up Prompt: “I should add that I live in an apartment.” Improved Response: “If you live in an apartment, you might consider smaller pets that require less space. Small dog breeds, fish, or even a rabbit could be a good fit.”   Understanding these common pitfalls and knowing how to navigate them can greatly improve your interactions with ChatGPT. A good prompt often requires some iteration and fine-tuning, so don’t hesitate to refine your questions in follow-up prompts.     Hands-On Activity: Mastering the Art of Follow-Up Prompts   Objective In this activity, you will practice writing follow-up prompts to fine-tune ChatGPT’s responses. You’ll start with some initial prompts that are intentionally less effective. After getting the initial responses, you’ll identify issues based on the categories we’ve discussed and write follow-up prompts to address them. Finally, you’ll evaluate the improved responses to see if they meet your expectations. Guidelines for a Great Response Relevance: Does the response answer your question directly and completely? Clarity: Is the response easy to understand, with no ambiguous or confusing parts? Depth: Does the response provide a sufficient level of detail? Tone: Does the tone of the response match what you were looking for (e.g., formal, casual, educational, etc.)? Formatting: Is the response formatted in a way that makes it easy to read and understand?   Initial Prompts “Tell me how solar energy works.” “What’s a good meal I can make quickly?” “How can I make my bedroom more comfortable?” “How do I get better at playing basketball?” “Explain how a car engine works.”   Steps Step 1: Copy one of the initial prompts and put it into the same chat project used in the previous activity. Step 2: Examine the response you get. Identify any issues based on the categories we’ve discussed (Missing Background Information, Misleading Descriptions, Unclear Requirements, Misleading Examples, Needs Additional Information). Step 3: Write a follow-up prompt to address the issue(s) you’ve identified. Put your follow-up prompt into ChatGPT. Step 4: Again, examine the new response. Is it improved? Does it meet the guidelines for a great response? If not, go back to Step 3 and write another follow-up prompt. Step 5: Once you’re satisfied with the response, move on to the next initial prompt and repeat the process.   Example of the Process Initial Prompt: “Tell me how solar energy works.” Initial Response: “Solar energy works by capturing the sun’s energy and turning it into electricity for your home or business.” Issues Identified: Missing Background Information, Unclear Requirements Follow-Up Prompt: “I’m doing a project on renewable energy sources. Can you explain how solar panels capture the sun’s energy and convert it into electricity, in a detailed manner?” Improved Response: “Certainly! Solar panels are made of photovoltaic cells, which contain semiconductors. When sunlight hits these cells, it energizes the electrons, creating an electric current. This electricity is then converted from DC to AC and can be used to power your home. Solar inverters and battery storage systems can also be used for a more constant energy supply.” Evaluation: The improved response is relevant, clear, detailed, educational in tone, and well-formatted, meeting all the guidelines for a great response. Feel free to go through all the initial prompts to get the most out of this hands-on activity. Remember, the key to a meaningful interaction with ChatGPT often lies in the art of the follow-up prompt!     Chapter Summary   In this chapter, we explored the CORE framework to craft effective prompts for ChatGPT. The CORE framework consists of Context, Objective, Requirement, and Example, each adding clarity and precision to your questions. We illustrated this with detailed examples and explained how to fix common issues through follow-up prompts. Hands-on activities were included to offer practical experience in writing both initial and follow-up queries. By mastering these principles, you’re set to get the most relevant and accurate responses from ChatGPT.     Project - An Improved Chat App   It’s time to do some coding now. Please follow this tutorial to build an improved chatbot.
• Programming

  How to design and develop a solution program

  1 1
  1 Topics

  1 Posts

  I

    Prerequisite The For-Loop Block The Repeat Block The Repeat Until Block The Forever Block   What are Loops? A “loop” is a block for playing other blocks repeatedly. Below are some loop blocks you can use on the CreatiCode playground;   What are Nested Loops? When you put one loop inside another loop, it becomes a “nested loop”. You can even have a third loop inside the inner loop.   How Nested Loops Work? When you run a program with a nested loop, the inner (child) loop will work like a normal loop. However, because of the outer (parent) loop, the inner loop itself will be repeated. Here is a step-by-step example: Step 1: The main loop is played.   Step 2: The Nested loop is started.   Step 3: The blocks inside the nested loop are played until the condition of the nested loop is completed.   Step 4: The blocks after the nested loop are played (if there are any).   Step 5: The main loop is restarted. Note: All of the above 5 steps keep repeating until the condition of the main loop is completed. For example, as shown below, “repeat until ” is the nested loop, which keeps the monkey moving until it touches the edge of the stage. And “repeat (5)” is the main loop which repeats the nested loop 5 times.   Use of Nested Loops We use Nested loops when we want to repeat multiple blocks at the same time, until multiple conditions are completed. For example, as shown below, nested loops are used to make the monkey move and eat bananas at the same time.  
• Tools

  Design tools, math tools, collaboration tools, programming tools

  39 41
  39 Topics

  41 Posts

  I

  Introduction   Coding agents like Claude Code or Codex have been drastically changing how computer programmers work over the past year, and will continue to do so. They can write code much faster than human programmers, and they even enable people who don’t know coding to create apps and websites by simply describing them with words - so called “vibe coding”. At this point of time, no one can predict what software engineering looks like in 10 years, or how AI would transform other types of jobs. However, it is pretty obvious that everyone would be using AI agents as part of their work, so it is an important skill for every student to pick up. Today, we are introducing a new “agent mode” for the XO AI assistant. In this mode, XO would not just “chat”, but actually make changes to the assets or code blocks in your project directly based on your instructions, such as adding a background image or changing some code blocks. If you learn to use the agent mode well, you will not only build projects faster on CreatiCode, but also become more comfortable working with other agents for learning or work in the future.     Turn On/Off the Agent Mode   To use XO in the agent mode, you simply need to check this checkbox in the XO chat window, and your selection will be remembered. Uncheck it to return to the previous “chat-only” mode. [image: 7683481a-578a-4a0f-b905-6d9a7fcb1885.png]   For teachers, you can enable or disable this feature for the class in the class management page: [image: 6ed52536-0252-4b7a-b32e-8e9abe5f1514.png]     Basics of Working with the XO Agent   When working with the XO agent, this is typically what would happen: You start with a request to build something new or change an existing project; The XO agent may ask you some questions to confirm/clarify what you want to do; After the agent has gathered enough information, it will start working on the request, such as adding a costume (search in the AI image library or draw a new svg costume), adding a new sprite, adding code blocks to a sprite, changing some code blocks in a sprite, etc. The agent will stop after completing a reasonable milestone, and ask you to review its work. You can ask it to change its work or continue to the next milestone. Of course, if your request is relatively small, it may finish all the work in one go. The first and forth steps now become much more important, and they will require creativity, critical thinking and agency. In addition, knowledge about coding is still very valuable. They will allow you to specify the task better and evaluate the agent’s work better.     Prompt Clinic Score   Every time you submit a message, it will be scored based on how well it is written. This is our “Prompt Clinic” tool that helps you improve prompting skills over time. If the score is 1 (the lowest), that means your request maybe unclear or confusing, so it will NOT be sent to XO; if the score is 2 to 5, then the request will be sent to XO as usual (not blocked). [image: f585c740-e60b-4ce1-9302-68998751b844.png]   When the score is 1, you can click the continue anyway button to force the agent to respond, but we strongly recommend you to send a new request that is clearer and more detailed. Read more about the Prompt Clinic in this post.     Example Workflow - Create a Game   Below is a more concrete example of how you can work with the XO agent to build a simple game. It is just an example to give you some idea how it works, and when you use the agent yourself, it may behave very differently depending on how you prompt itt.     Step 1 - Turn On the Agent Mode   Create a new project, open the XO chat window, and turn on the agent mode. You can turn it off to return to the “chat” mode, or close the window using the “X” button at top right. [image: 262806da-2df4-463b-81fc-23cc7c07ee8d.gif]     Step 2 - Submit a new request   Since we are starting from a blank project, make sure the agent knows what type of game you want to build, and provide enough information for it to get started (the more the better). If the game is kind of well known, then it should know what to build from the name, but if it is a more original game idea, then you need to provide more information. For this example, we will start with this request: build a classic breakout game, with a few rows of breaks at top, and the player controls a paddle to bounce a ball up to break the bricks. [image: 00faa862-d87b-4fbb-8559-bc7ed0b6de8b.png]   As shown, the Prompt Clinic gave it a score of 3 (Solid), because it is very broad and missing many details. That’s still good enough for now.     Step 4 - Refine the request   In the previous step, the agent first suggested a first milestone that it can work togethers, then asked 2 questions, one on the color of bricks, and another one whether to get started on the first milestone. It is always a good idea to answer the agent’s questions, unless you want to make big changes in the plane. In this case, suppose we don’t want the agent to start coding yet. Instead, we want it to prepare all the sprites and the backdrop first. We can provide more details like this: make the bricks colorful. Also, don’t work on any code yet. For first milestone, only prepare the sprites and the backdrop. This is a fairly “strong” prompt that specifies the exact scope of work for the agent to work on. As you will see, the Prompt Clinic rated it as 5 (Exceptional). [image: 6e17e75b-50fe-4553-badf-3bc6f02fce63.gif]   After some thoughts, the agent decided that it has enough information to get to work! It generated a simple blue background, and 5 colored bricks. During this time, the XO chat window is minimized at the bottom right, so we can observe what it is doing. When it is done, it presents a summary of what it did for us to review, and also suggests what can be done next: [image: b4daa9fc-38c9-473d-83a2-a9f4c9718c0b.png]   The stage looks like this now: [image: dbbc7288-b62b-4119-aa5e-8070579d4aab.png]     Step 5 - Prepare more assets   In the previous step, the agent did not generate the paddle and the ball, which are also essential to the breakout game. This is because the agent is instructed to only work on small milestones and do not do “too much” in each run. This allows the user to review its work without overwhelming them. In this case, the agent already created a backdrop and 5 brick sprites, so it “feels” this may be a good time to stop. For this step, we can simply make it finish the artwork: add the paddle and the ball, and remove the dog sprite. Of course, we could just remove the dog sprite ourselves, but this is a good test. [image: dfb8cb22-b5e2-432c-82b2-62c9a040449e.gif]   It turns out the agent did a pretty good job in following our instruction.     Step 6 - Improve the assets   Before continuing, we should fix another problem: the agent added 5 brick sprites with different colors. However, to be more efficient, we should only have one brick sprite with multiple costumes, so we can easily create clones of this sprite. This is where if you know how to code already, you can point out issues with the agent’s work. [image: 0f3730d1-1ff6-4f56-a44f-2ec6707afff6.gif]   As shown, the agent created the single Brick sprite, and then deleted most of the existing bricks. It somehow missed the purple brick (the agent is not perfect), so we have to delete it ourselves to save time. Now the project has all the sprites we need, and the agent also renamed our project based on our request: [image: e32c3705-b8e8-4184-ab13-211d844d9bca.png]     Step 7 - Add Code Blocks   Finally, we are ready to ask the agent to start coding. It is always a good idea to give the agent a small milestone to work on. In this case, let’s make it focus on the bricks:now add code to the Brick sprite so it creates 5 rows of bricks, 10 in each row, using clones. [image: 578345ce-4282-472d-9d4d-6af3e148c241.gif]   This time the agent added some blocks to the Brick sprite. It will create the bricks at top like this: [image: 6b11f109-1c19-4f17-b4ab-86d637b8f652.png]     Step 8 - Retry a step   Whenever we submit a new request, a snapshot of the entire project is taken, so if we don’t like what the agent did, we can revert the project to its previous state and try again. In this example, the bricks are all the same color for each row. Suppose we want to make the colors more random, we can send a new message to ask the agent to fix it, or we can trigger a “retry”: [image: f3efd454-16dd-45b4-a4c9-0dd4fd97e9e3.gif]   As shown, after we click “retry” and confirm, the project is reverted to its state before any code was added to the Brick sprite, and our message is copied into the input box for us to reuse. In this case, we will simply add some addition requirement that the bricks have to be random: [image: 84a2c508-1eb6-4213-9698-167eccb69d40.gif]   Now we get a random brick wall like this: [image: 115df587-7ef1-498c-a526-8643172592dd.png]   The game is still not done, but we will stop the example here since you have seen how the agent works. Feel free to create this game or any other project you like.     Conclusion In summary, the XO agent is not perfect, but it can already help you build your dream project faster and maybe better. The more you use it, the more you will understand its strength and weakness. Give it a try!