Friday, July 21, 2023

Coding with AI for Schools

Although coding is a powerful skill, it can also be very intimidating. Thankfully generative AI tools can assist you with coding no matter what your skill level is (or isn't).
  • If you have never coded in your life, you can use AI to bring your ideas to life.
  • If you are learning to code, AI can help with your projects and teach you along the way.
  • If you are a seasoned coder, AI can help you troubleshoot errors and discover new coding approaches.
Recently I recorded a webinar on how you can use AI to help with coding. The training is aimed a people who are brand new to coding, but hopefully it will be valuable to anyone interested in how AI can assist them in this process. Here is the description for the session:

Yes (even) You Can Code with AI!
Don't know Python from Perl? Is HTML all IDK to you? Do you think JavaScript is the handwriting on your Starbucks cup? Even if you have never written a line of code in your life, you can with AI! In this session we will see how to use tools such as Bard and ChatGPT to create code that you can use in Google Docs, Sheets, and Sites for learning games, activities, supports, time-savers, productivity helpers, and more.

See below for the recorded webinar, resource document, slideshow, and detailed directions and examples. 

▶️ Webinar Video (55 minutes)



🧰 Session Resources

👩‍💻 Coding with AI Overview
  • Generative AI tools can help you write code in many languages including HTML, JavaScript, Apps Scripts, Python, Java, C++, PHP, and many more.
  • Examples of generative AI tools are ChatGPT and Google Bard.
  • For our examples we will just be using HTML, JavaScript, and Apps Script.
  • With HTML and JavaScript we can create code that can be embedded into a Google Site and run from the webpage.
  • With Apps Script we can create code to automate tasks in Google Docs, Sheets, Slides, Forms, Calendar, Drive, and more.

🔗 Embedded Code in Google Sites

👀 Overview
  • Google Sites is an easy but powerful tool for creating and publishing your own websites.
  • One of the features in Google Sites is the option to embed code on a page.
  • This can be used to create games, interactive activities, simulations, and more.

❌ Limitations
  • Google Sites does not support all JavaScript features. The platform sanitizes and filters the JavaScript to avoid any potential security issues. This can limit the functionality of custom scripts.
  • The code you embed can only function within the embed window (or "iframe") and is not able to impact the rest of the Google Sites webpage outside of the embed window. This sandbox model is a security feature that is designed to protect users from malicious code.

💡 Examples

Here are some examples of AI-generated code that has been embedded into a Google Site:



✅ Directions
  • Prompt the AI chatbot with a detailed description of what the code should do.
  • Copy the generated code.
  • In Google Sites, click the "Embed" button in the "Insert" panel.
  • In the pop-up window, choose the "Embed code" tab, not the "By URL" tab.
  • Paste in your copied code.
  • Click "Next".


  • A preview of your program should display.
  • Click "Insert" to add it to your page.


  • You can now resize and move the embedded object as needed.
  • To test the code, click the "Preview" button.
  • If the code does not work as expected or desired, return to the AI chatbot and provide the error or changes you want.
  • Repeat the process with testing the code until you have what you want.
  • When you publish the website, the embedded code will execute.


💬 Sample Prompt

Generate HTML and/or JavaScript code that can be embedded within a Google Sites website that does the following:
Randomly chooses one of the following text phrases and displays it centered and in a large font:
Hello!
Greetings!
Welcome!
Howdy!
Ahoy!
G'day mate!
Salutations!
Aloha!


📄 Apps Script Code for Google Tools

👀 Overview
  • Google Apps Script is a scripting language based on JavaScript.
  • Apps Script can be used in tools such as Google Docs, Sheets, Slides, Forms, Calendar, Drive, and more.
  • Apps Script can be used to automate tasks, create custom features, integrate with other tools, and more.

❌ Limitations
  • There can be daily limits on the number of calls that can be made to various Google services.
  • Apps Script is best for simple tasks and small-scale projects.

💡 Examples

Here are some examples of AI-generated Apps Script code that has been used as custom scripts in Google tools:


✅ Directions

  • Open the Google Docs document (or Sheet, Form, Slides, etc.) you want to use.
  • Click on "Extensions" in the top menu bar.
  • Then click "Apps Script" from the drop-down menu.


  • This will open an untitled project in the Apps Script editor.
  • Delete any code in the script editor and replace it with your code.
  • Give your project a name by clicking on and renaming the "Untitled project".
  • Save the script by clicking the "Save project" button (looks like a floppy disc)
  • Click the "Run" button to be prompted to accept the permissions.


  • You can now close the Apps Script editor and return to your Google Doc.
  • Refresh your document.
  • There should be a new menu in the top toolbar (based on your code).
  • You can use this menu to run your Apps Script as needed.


  • If the code does not work as expected or desired, return to the AI chatbot and provide the error or changes you want.
  • Repeat the process with testing the code until you have what you want.

💬 Sample Prompt

Create Google Apps Script code for a Google Docs document with the following specifications:
The purpose of the code is to toggle the capitalization of all selected text.
The code will only act upon the text which the user has already selected.
The code will change all capitalized letters to lowercase letters, and will change all lowercase letters to capitalized letters.
Create a custom menu in the Google Doc titled "Custom Scripts" that includes the menu item "Toggle Case" that when clicked will execute the script.


🏁 Conclusion

AI can assist with coding no matter what your skill level is. I used to code quite a bit, but that was about 20 years ago. Over the years I have forgotten much of what I learned, and the coding languages have changed. Thankfully AI can help me bring my ideas to life.

I would love to learn from you as well! Please feel free to share ways AI has helped you with coding, as well as examples of what you have created.


Post by Eric Curts
📮 Join the "Control Alt achieve" email discussion group
💬 Join the "Control Alt Achieve" Facebook group - bit.ly/caa-fb
🔔 Get new blog posts automatically through email - FollowIt link
📰 Sign up for my email newsletter
🐦 Connect on socials: Threads - Twitter - Facebook - LinkedIn - Instagram - Mastodon - Bluesky
▶️ Subscribe to my YouTube channel
📧 Reach out through email - ericcurts@gmail.com
📗 Check out my "Control Alt Achieve" book
🔗 Watch my "EdTech Links of the Week" livestream - bit.ly/caa-live
🏫 Bring me to your school, organization, or conference with over 60 PD sessions to choose from
Posted by at
Labels: , , ,

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)