Introduction
The CreatiCode Playground provides a complete set of tools for creating AI-based projects, including games and apps. It offers a safe and engaging environment where K-12 students can learn and experiment with advanced AI technologies, such as ChatGPT and face tracking.
For beginners, there are step-by-step tutorials and projects that introduce the basics of AI coding. These resources are designed to help students build a solid foundation, making it easier for them to create enjoyable and practical AI projects.
Teachers can also use these tutorials to design introductory courses, enabling students to gain hands-on experience with AI coding and build confidence in their skills.
The first part of the tutorials focuses on AI tools available on the CreatiCode playground for generating images and coding assistants. The second part will focus on generative AI blocks (e.g. ChatGPT). The third part covers predictive AI blocks (e.g. classification models).
Part 1 - AI Tools in CreatiCode Playground
Topic 1 - Search or Generate Backdrop Images Using AI
Tutorial Link: Search or Generate Backdrop Images Using AI
Overview: Unlike the very limited backdrop library of MIT Scratch, CreatiCode offers a vast library of AI-generated backdrop images that you can browse or search. They are all carefully examined to ensure they are appropriate for K-12 school settings. If you can’t find any backdrop you like, you can also ask AI to generate a new backdrop for you with a detailed description.
alt text
Topic 2 - Search or Generate Sprite Images Using AI
Tutorial Link: Search or Generate Sprite Images Using AI
Overview: You can also choose from a rich collection of sprite images that are generated by AI and safe for use in schools. Each sprite image features one character or object over a transparent background. You can also generate new sprite images with your own description.
alt text
Project Idea - A Simple Storybook (Difficulty: 2)
Overview: Pick your favorite story and illustrate it using one sprite and a few backdrops. Search for appropriate images using the AI image library or generate them youself. Add some text in each backdrop, then play through them one by one to form a story.
Topic 3 - Learn new things with CreatiCode XO’s help
Tutorial Link: CreatiCode XO - Explain To Me
Overview: CreatiCode XO is an AI assistant that you can chat with when you are in the CreatiCode playground. You can use XO to help you learn new concepts or blocks, with simple questions like “explain xyz to me” or “how to do xyz”.
alt text
Topic 4 - Debugging with CreatiCode XO’s help
Tutorial Links:
How to debug
CreatiCode XO - Debugging
Overview: Debugging is one of the most challenging task for most students, and very often our teachers do not have the time or expertise to help each student with debugging. Every student needs to learn the basics of debugging. XO is not designed to debug on behalf of the students. Instead, XO can assist students in the debugging process in diagnosing issues and brainstorming solutions.
alt text
Topic 5 - Design New Projects with CreatiCode XO’s help
Tutorial Link: CreatiCode XO - New Project Design
Overview: XO can help us get started with new projects. It can suggest project ideas when we “blank out” and need some inspirations. If you already know the project you would like to build, XO can suggest a plan on how to do that.
alt text
Topic 6 - Use XO to generate quizzes
Tutorial Link: CreatiCode XO - Give me a quiz
Overview: XO can be used to generate quiz questions in several formats, like short answers, multiple-choice or code completion. Students can use it for self-evaluation, and teachers can also use it to design assessment problems.
alt text
Topic 7 - Use XO to generate feedback
Tutorial Link: CreatiCode XO - Automatic Feedback
Overview: XO can be used to generate feedback on our project automatically. This allows students to get realtime feedback as they work on a project, and they don’t have to wait for teachers.
alt text
Part 2 - Programming with Generative AI
Topic 8 - Introduction to ChatGPT blocks
Tutorial Links:
The Chat Window Widget
OpenAI ChatGPT
Overview: Learn the basics of working with ChatGPT and also how to use the chat window widget to build a simple chat application. All ChatGPT requests are moderated to ensure they are appropriate for K-12 schools.
alt text
Project Idea - A Chat With Einstein (Difficulty: 3)
Tutorial Link:
A Chat With Einstein
Overview: Create a simple chat app where the user can chat with ChatGPT, which pretends to be Einstein.
alt text
Project Idea - An Improved Chat App (Difficulty: 3)
Tutorial Link:
An Improved Chat App
Overview: Improve the previous chat app with streaming response and make sure ChatGPT stays in the role assigned to it.
alt text
Topic 8 - Chat-based Apps
Tutorial Link:
Yes Minister!
Overview: The improved chat above can be modified into many different types of chat-based apps, and the only thing that needs to be changed is the prompt for ChatGPT. This is very different from traditional app development, where each new app requires new logic and code. In this example, we can change it to a game where the player is the Prime Minister of UK, and the ChatGPT AI will ask the player to make some important decisions and rate the decisions at the end.
alt text
Project Idea - MBTI Personality Test (Difficulty: 3)
Tutorial Link:
MBTI Personality Test
Overview: This another example of building a new app by changing the ChatGPT prompt. In this app, ChatGPT will ask the user a few questions, then determine the MBTI personality of the user.
alt text
Topic 9 - Simple Widgets: Label, Button, Textarea
Tutorial Links:
Label
Button
Textarea
Overview: learn to use these 3 most basic types of widgets, which are useful for building most apps.
alt text
Project Idea - An AI-based Story Writer (Difficulty: 3)
Tutorial Link:
An AI-based Story Writer
Overview: ChatGPT has many other use cases beyond chatting. In this tutorial, you learn to use it to write a story based on user input.
alt text
Project Idea - A Quiz Writer (Difficulty: 3)
Tutorial Link:
A Quiz Writer
Overview: In this project, we ask ChatGPT to generate a multi-choice quiz question based on user request, then evaluate the user’s answer.
alt text
Project Idea - Cloze Game (Difficulty: 4)
Tutorial Link:
Cloze Game (Difficulty: 4)
Overview: In this project, we ask ChatGPT to create a cloze game, which require some more advanced prompting techniques.
alt text
Topic 10 - AI-driven Games
Tutorial Link:
Who’s the Spy?
Overview: ChatGPT can also be used as the “reasoning engine” to create interesting games that weren’t possible before. In this tutorial, you will build a game where the player needs to interogate a few characters to find out who is the spy, and all responses are generated using ChatGPT.
alt text
Topic 11 - Using ChatGPT as text processing tool
Tutorial Link:
Product Review Summary
Overview: ChatGPT is very good at processing large amounts of text. In this tutorial, you will learn to use it to process many product reviews and summarize them.
alt text
Topic 12 - Teach ChatGPT to use tools
Tutorial Link:
Enhance ChatGPT to Do Math Calculations (Difficulty: 3)
Overview: ChatGPT has limitations in many tasks, such as math calculation. In this tutorial, you will teach ChatGPT for “tool use”: you will provide a calculator tool for ChatGPT, and you will instruct ChatGPT to use this tool whenever it needs to do calculations.
alt text
Topic 13 - Enhance ChatGPT with Semantic Search
Tutorial Link:
Enhance ChatGPT with Semantic Search
Overview: ChatGPT has limited knowledge, so when we create a QA chatbot, we need to feed it additional knowledge based on the user’s question. This can be achieved using “semantic search”, which allows us to search for text based on meaning rather than matching words.
alt text
Topic 14 - Use ChatGPT to create knowledge base from web
Tutorial Link:
Prepare Knowledge Data Using Web Content (Difficulty: 4)
Overview: In this tutorial, you will learn to prepare the knowledge data for a new chatbot, which will answer questions about any organization based on its web site. The basic idea is to download data from its website and generate questions/answers using ChatGPT based on that data.
alt text
Topic 15 - A Voice Translator
Tutorial Links:
AI for Converting Speech to Text
AI for Converting Text to Speech
A Voice Translator (Difficulty: 2)
Overview: Besides text data, AI models can also work with voice data, and converting between text and speech.
alt text
Part 3 - Programming with Predictive AI
Topic 16 - AI Motion Sensor
Tutorial Links:
Video Sensing
Bouncing Ball with Motion Sensor (Difficulty: 3)
Overview: The video sensing blocks allow us to detect the amount of object movement in the camera video. This information can be used to create simple games where the player’s body controls sprites in the game.
alt text
Topic 17 - Hand Tracking
Tutorial Link: Counting Fingers with Hand Detection (Difficulty 3)
Overview: AI models allow us to track human hands in a camera video in realtime and detect the keypoints of the hand/fingers. In this tutorial, you will build a small project that counts how many fingers are stretching out.
alt text
Topic 18 - Body Pose Tracking
Tutorial Links:
Body pose detection
Fitness Game Using Body Pose Detection (Difficulty: 3)
Overview: Motion sensing only gives us very limited information on the amount of motion in the camera video. To track the exact pose of the player in the camera video in realtime, we can use the body pose detection block. That allows us to build games where the body pose of the player is used to control sprites in the game.
alt text
Topic 19 - Beginner Level Image Analysis
Tutorial Link: Recognize 0’s and 1’s (Difficulty: 4)
Overview: Image analysis requires walking through all the pixels (components) in an image and analyze them. In this tutorial, you will build a smart program that can recognize whether a hand-written number is 0 or 1, which shows the basic methods of image analysis.
alt text
Topic 20 - Data Classification
Tutorial Links:
The KNN (K-Nearest-Neighbor) Classifier
KNN Classifier for Diabetes (Difficulty: 4)
Overview: AI classifiers allow us to classify data into different categories. We need to first train such a classifier model using training data, then we can use it to classify new data. In this tutorial, we will build a classifier that predicts whether a person has diabetes, using a KNN classifier model.
alt text
Topic 21 - Neural Network Models
Tutorial Link: Use Neural Network Model for Training and Prediction (Difficulty: 5)
Overview: A Neural Network model is made of many “layers” of “neurons”. Each neuron is a small calculator that takes some input values and calculates an output value based on the input values. We can train these neurons based on some training data, and then use the model to make predictions on new data. In this tutorial, we will train a simple neural network model to do a simple calculation to illustrate the basic workflow.
alt text