/ai-coding-activity

Primary LanguageJavaScriptMIT LicenseMIT

ai-coding-activity

An activity for introducing programmers and non-programmers to programming with generative AI

copyright 2023, Chris Minnick

Description

In this activity, you'll work as a team, and with a generative AI tool, to create a trivia game.

Requirements

  1. Each team, and preferably each member of each team, should have access to a generative AI tool such as ChatGPT, Google Bard, Microsoft Bing, or Github Copilot.
  2. Each team should have access to a code editor such as VS Code.
  3. Each team should have access to a web browser.
  4. At least one person on each team should have some familiarity with JavaScript, HTML, and CSS.

Instructions

Read through these instructions before beginning the activity. There are some helpful tips at the end of the instructions.

Part 1: Organize your team

In this part, you'll organize your team and decide on a topic for your trivia game.

  1. Decide on a team name. Use your AI assistant to generate ideas.

    • Suggested prompt: What are some good names for a coding team? Names should be short and memorable, and appropriate for a professional environment.

  2. Each team should create a new GitHub repository for their trivia game or decide on another method for sharing files.

  3. If using Git, team member should clone the repository to their local computer. The owner of the repository should give each team member write access to the repository.

  4. As a team, decide on roles for each team member. More than one team member can have the same role. Roles might include:

    • Project Manager
    • Writer
    • Designer
    • Programmer
    • QA

  5. As a team, decide on a topic (or multiple topics) for your trivia game. Use your AI assistant to generate ideas for topics.

    • Suggested prompt: What are some good topics for a trivia game?
    • Suggested followup: How about something weirder?

  6. As a team, decide on a name for your trivia game. Use your AI assistant to generate ideas for names.

    • Suggested prompt: What are some good names for a trivia game about U.S. History?

Part 2: Create the game content

In this part, you'll use your generative AI tool to create the content for your trivia game.

  1. Use your generative AI tool to create the content for your trivia game. For example, if your trivia game is about the history of the United States, you might use your generative AI tool to create questions and answers about the history of the United States. Think about what format the questions and answers should be in (or ask your generative AI tool for recommendations) so they can be used programmatically.

    • Suggested prompt: What are some good questions and answers about the history of the United States? Format the questions and answers so they can be used by a JavaScript program.

  2. As a team, review the content and make any necessary changes.

Part 3: Create the game

In this part, you'll use your code editor to create the game.

  1. As a team, decide on the rules for your trivia game. Use your AI tool to generate ideas for rules.

    • Suggested prompt: What are some good ideas for making a trivia game fun?

  2. As a team, decide on the format for your trivia game. For example, will it be a web page? A mobile app? A voice app? Use ChatGPT or Copilot to generate ideas for formats.

  3. Figure out how to use your generative AI tool to create the code for your trivia game. For example, if your trivia game is a web page, you might use your generative AI tool to create the HTML, CSS, and JavaScript for the web page.

    • Suggestions for prompts:
      • Create a web page that will use JavaScript to load questions and answers from a file and display them to the user one at a time in a random order and keep track of the user's score.
      • Create a mobile app that will use JavaScript to load questions and answers from a file and display them to the user one at a time in a random order and keep track of the user's score.
      • Create a voice app that will use JavaScript to load questions and answers from a file and display them to the user one at a time in a random order and keep track of the user's score.

  4. Copy the code from your generative AI tool into the appropriate files in your GitHub repository.

  5. As a team, review the code and make any necessary changes.

Part 4: Test the game

In this part, you'll create a test plan and test your game.

  1. As a team, create a test plan for your trivia game. Use your AI tool to generate ideas for test plans.
    • Suggested prompt: Create a test plan for this trivia game.
  2. As a team, test your trivia game. Use your AI tool to generate ideas for test cases.
    • Suggested prompts:
      • Test this trivia game.
      • Test this trivia game by playing it.
      • Test this trivia game by playing it and trying to break it.
      • Write tests for this trivia game using the Jest testing framework.
      • What other ways can we test this trivia game?
      • What other tests can we write for this trivia game?
    • Notice that the generative AI tool will likely not be able to run the tests it generates. Can you figure out how to prompt the tool to simulate running the tests?
  3. As a team, review the test results and make any necessary changes.

Part 5: Publish the game

In this part, you'll publish your game.

  1. As a team, decide on a way to publish your trivia game. For example, you might publish it as a web page, a mobile app, or a voice app. Use your AI tool to generate ideas for ways to publish your game.
    • Suggested prompt: Publish this trivia game.
    • Notice that the generative AI tool will likely not be able to publish the game. Can you figure out how to prompt the tool to simulate publishing the game? Or, were the responses from the generative AI tool helpful in figuring out how to publish the game?
  2. Publish your trivia game.

Part 6: Presentation

In this part, you'll create a short (10-minute) presentation about your game.

  1. Use your AI tool to generate text (and images?) for slides for a presentation about your app / game. Here are some questions to think about as you're creating your presentation:
  • What was the most challenging part of this activity?
  • What was the most fun part of this activity?
  • What did you learn from this activity?
  • What would you do differently if you did this activity again?

Helpful tips for coding with AI

  1. Context is everything. The more information you can provide about the task, the more helpful the tool can be.
  2. Consider token limits. In long conversations, the ChatBot will remember a limited amount of the previous conversation with each additional prompt. You may need to repeat a previous prompt, or ask the chatbot to summarize the previous conversation so it remembers.
  3. Use "continue". The amount of content a tool will generate at once is limited, but you can tell it to keep going with an answer by typing "continue."
  4. Keep instructions short and precise.
  5. Ask follow-up questions or ask it to try again.
  6. Don't be naive. You're the expert and GenAI tools will often do things wrong or in less-than-ideal ways.
  7. Assign the tool a role. For example: "You are an expert [coder, data scientist, technical writer, comedian, etc]."