Let's Play: Engaged and Learning in a Digital World Justin Hodgson | Director, IU Digital Gardener Initiative

Overview

Today we will explore generative AI technologies, including text generators and image generators, and pair them with Adobe Express to create deliverable, multimedia assets. This page will first provide a bit of context and then present one of two challenges: challenge 1 focuses on fun and building creative confidence; challenge 2 starts us toward more formative productions.

After the Challenge Section, this page also offers visual guide on how to create an Adobe Express webpage.

Example Creations

Challenge 1 | Example Creation (Justin Hodgson)

Challenge 2 | Example Creation (Justin Hodgson)

A few additional Adobe Express Webpages examples

Resource | Guide to Wikipedia Afrofuturism Editathon - Gemmicka Piper (IU Indianapolis)
Resource | Writing from Sources (3Cs of Integration) - Justin Hodgson (IUB)
Assignment | Long Essay 1 (ENG-L204) - Miranda Rodak (IUB)
Assignment | Multimedia Project (ENG-R209) - Justin Hodgson (IUB)
Student Multimedia Essay | Mental Health on College Campuses (ENG-R209) - Carolyn Ciolfi (IUB)
Student Multimedia Essay | The Crossroads of Indiana University (ENG-W171) - Ryan Canfield (IUB)

What is Generative AI?

The most prominent Generative AI tool people are discussing in higher education is ChatGPT, a product from OpenAI. Generative AI tools can create new data – like text and images (see below) – based on patterns it has learned from the large sets of existing data on which it is trained. ChatGPT is a chatbot tool intended to generate text in response to requests and input from users. Tools have also been developed to generate other types of data, such as Adobe Firefly & OpenAI’s DALL-E 2, which can produce images based on short strings of text provided by users, and Soundful.com, which is AI generated audio. Other technologies, including generative AI video, seem to appear every day.

Left Image was created with Adobe Firefly | Right Image is a screen shot of ChatGPT responding to key issues on DeepFakes and PostTruth

While Google, Microsoft and other companies have featured AI in many tools and platforms, they, along with companies like Adobe, are beginning to integrate generative AI into multiple applications across their platforms. For example, Microsoft is now featuring CoPilot as part of its 365 suite and Adobe most recently announced its AI Assistant for Acrobat beta (among other generative AI options in Express, Photoshop, and the like).

Ok, but what does this mean for higher education?

This moment in time is strangely still something of the "Wild West" when it comes to Generative AI and higher education. The truth is that while we have shifted away somewhat from the initial "culture of fear," we are still only scratching the surface of digital innovation with generative AI in higher education teaching and learning. Put simply, lots of questions remain--with answer often only partial or perpetually in flux. Some common questions or concerns from faculty I've heard in just the last 6 weeks include:

Do we have any policies on Generative AI? If so, how do we enforce them?
Given its potential, how might we address Generative AI in our learning outcomes, activities, and assessments?
If students or faculty are using these tools, can they be trusted? Can their content be trusted? Are these tools still producing biased or even incorrect outputs?
How might these platforms aid in teaching and learning? Are there any best practices or guides available?
How are these tools impacting our own disciplines? What we can do to help prepare students for a world where skills in using Generative AI will be of tremendous value?

5 Tips for Understanding AI for Today's Classrooms (Instructure)

4 Tips for GenAI and Syllabi (Justin Hodgson)

Generative AI | Ethics of Practice PDF (Justin Hodgson)

CHALLENGE 1: Building Creative Confidence

The TASK

Working in small groups (2 or 3):

use a generative AI platform (e.g., CoPilot) to to come up with 3 to 5 ideas for a digital narrative related to a concept from your discipline;
use the same generative AI platform to create a micro-story related to one of the generated ideas;
then use a generative AI platform (e.g., Adobe Firefly) generate images for that story;
and combine the text and images into a published, scrolling, multimedia webpage using Adobe Express webpage

The RULES

Story must be between 200-350 words, created by (or at least in collaboration with) generative AI
Creation must include a title image and 3 "in-text" visuals create by (or at least in collaboration with) generative AI
Final output must be completed as a published Adobe Express webpage (i.e., live, online, with shareable URL).

The DELIVERABLE

When completed, be sure to go to Share --> Publish so your Express page is live online. Then copy/paste (i.e,. share) and add your creation/thoughts on the shared Google Slides (use button below).

Share Published Creations Here

The goal here is to play with the tools, to continue to familiarize yourself with how descriptive language (through prompt interactivity) can impact output. For example, asking Firefly for "a painting of four wizards eating pizza in a college town in the style of Norman Rockwell" will produce a more detailed set of images than a prompt asking for "a painting of wizards"). Also, with claude.ai and lex.page (among others), results can be iterative: i.e., you can ask it to revise its previous output to add detail, emphasize certain elements of what was previously produced, etc. Take advantage of these features.

Tips & Example

When it comes to prompting Generative AI platforms like CoPilot, ChatGPT, claude.ai, and other large language model (LLM) platforms, it helps to designate the information in the prompts in digestible ways for the tool. I tend to use the following categories:

Role: assign it a role so it operates with a particular perspective or approach
Goal: describe your goal / what you need help doing
Context: offer relevant context to the goal and task
Other: provide additional information, attachments, etc. so it has more information to work with
Task: tell it what to generate and offer specific steps/guides as appropriate

My Example Prompt

[Role] You are a professional writing consultant specializing in helping Youth Fiction writers create story ideas and draft stories.
[Goal] I need help writing a story for 6th graders that will help them understand key rhetorical concepts and how they operate in the world.
[Context] I’ll be presenting this story to a group of students in a local Catholic School, using the story as a way to help illustrate key concepts
[Other info] The rhetorical concepts being focused on are ethos, pathos, and logos as introduced by Aristotle.
[Task] You will provide a list of three possible story ideas for demonstrating the rhetorical concept of pathos. Once you generate the list, you will wait for my response selecting the desired story idea and then complete the task of creating a 250 word micro story about that story idea.

Challenge 2: Assignments and Assessments

The TASK

Working individually (or in groups)

use a generative AI platform (e.g., CoPilot) to come up with ideas for a multimedia assignment,
select one of those ideas and have the platform help you generate the text of that assignment,
use the same generative AI platform to create a rubric for assessment,
use a generative AI platform (e.g., Adobe Firefly) to create visuals for the assignment handout,
combine the text and images into a published, scrolling, multimedia assignment guide/handout using Adobe Express webpage.

The RULES

Assignments must include learning objectives and should identify the final format expectations (e.g., medium, delivery format, duration, genre, number of images, citations, etc.).
Creation must include at least 1 visuald create by (or at least in collaboration with) generative AI.
Creation must include sections (e.g., overview, description, expectations, etc.) that are visually identifiable as sections (i.e., visual breaks in the Express page).
Final output must be a published Adobe Express webpage (i.e., live, online, with shareable URL).

The DELIVERABLE

When completed, be sure to go to Share --> Publish so your Express page is live online. Then copy/paste (i.e., share) and add your creation/thoughts on the shared Google Slides (use button below)

Share Published Creations Here

Tips and Workflows

When it comes to prompting Generative AI platforms like CoPilot, ChatGPT, claude.ai, and other large language model (LLM) platforms, it helps to designate the information in the prompts in digestible ways for the tool. I tend to use the following categories:

Role: assign it a role so it operates with a particular perspective or approach
Goal: describe your goal / what you are trying to achieve
Context: offer relevant context to the goal and would-be task
Other: provide additional information and/or content when relevant - the more information it has to work in relation to, the likelier it is to achieve something of value to you.
Task: tell it what to generate and offer specific steps/guides as appropriate

My Example Workflow

Role, Goal, Context, Other, & Task

Generated Ideas & Waiting on Selection

Prompt Selected and CoPilot generating requested content for the Task assigned

Co-Pilot | A Starting Guide

Step 1 | Sign in

Go to copilot.microsoft.com and click "Sign in" button (red arrow)

Sign in with your institutional (enterprise) email and complete your institutional login process

Overview of Basic CoPilot Login process

Go to the Microsoft CoPilot website: https://copilot.microsoft.com/
Click the Sign in button
Type in your university email address in the "Email, phone, or Skype" text field
Click Next
Click Work or school account
You may then be taken to your university secure login (SSO). If so, complete that process (and any secondary authentication requirements: i.e., Duo Authenticate).
You should then be taken to the Microsoft CoPilot landing page

Step 2 | Generate Some Ideas

Use the prompt bar (green arrow) to get CoPilot to generate 3-5 ideas for a story related to a disciplinary concept: e.g., rhetorical concept of pathos.

Step 3 | From Idea to MicroStory

Select one of the story ideas and ask CoPilot to write a microstory about that story ideas.

Be specific and be sure to limit the word count.

You might also try using/modifying the Roles, Goals, Context, Other, Task structure from Tips & Workflows section of Challenge 2 above.

Bonus Step | Copy & Paste

Step 4 in the Create an Adobe Express webpage sequence will invite you to Copy/Paste your CoPilot created story into your Express webpage. At that point, return to CoPilot and use the copy button (green arrow) to copy the generated text.

Firefly | An Intro

Step 1 | Login

Go to firefly.adobe.com
Click "Sign in" (purple arrow)

Click "Sign in" (green arrow) to sign in with email
Enter email (blue arrow) and click "Continue" (red arrow)
Complete your institutional secure login

Full Overview of general process

Go to the Adobe Firefly website: firefly.adobe.com
Click Sign In in the upper right corner
Type in your university email address in the Email address text field
Click Continue
Click Company or School Account
You will then be taken to your institution's login page. Complete your institutional login process.
You may be prompted to Duo Authenticate (depending on your institutional security settings).
Once completed, you should land at the Adobe Firefly landing page

Step 2 | Generate Some Images

Generate an image by typing a description into the prompt bar (green arrow) and click "Generate" (purple arrow).

Firefly will generate four options. You can use one of these images or manipulate the content description (red box) or the image aesthetics (blue box) and try again:

Once you made changes (description or aesthetic), click "Generate" button to get a new set of creations.

Step 3 | Select and Download

Hover the cursor over the image you want to keep
Click the Options submenu (red arrow)
Select "Download" (blue arrow)

The "Promoting transparency in AI" notification will pop up on the screen, providing an overview of Adobe's commitment to content credentialing.

Click the "Continue" button to complete the image download process

Repeat the steps above as needed to generate the varying images for your Challenge.

Build an Express Webpage

Step 1 | Login

For the first step, create a new Adobe CC Express Web page:

Go to Adobe Express: http://new.express.adobe.com
Sign-in using your institutional email login

Full Process Overview

Go to the Adobe Express website: https://new.express.adobe.com {*If you are still signed in from Firefly, you may be able to skip right to Step 2 below}
Click on Continue with Email
Type in your institutional email address in the Email address text field
Click Continue
Click Company or School Account
You will then be taken to your institutional login page. Complete the institutional login (again, you may be prompted to Duo Authenticate).
Once completed, you should then be taken to the Adobe Express landing page

Step 2 | Create a Webpage

On the Adobe Express landing page, click the large round "+" button (green arrow) and then select "Web page" (blue arrow) in submenu

Step 3 | Build the Opening

Add title, subtitle, and opening image:

Once the new Web page project launches, click "Add a title" (green arrow) and add a title for your challenge: e.g., Challenge 1 - "The Story of Pathos"
Click "Add a subtitle" (blue arrow) and add your byline.
Click Photo icon (purple arrow), select "Upload from device" in photo submenu and add title image you created using Adobe Firefly.

Example

For Accessibility purposes: be sure to click the gear icon in the lower right corner of image (green arrow) an add Alt-text (blue arrow) or designate the image as decorative (red arrow). Click Save button when done.

Step 4 | Add Story Text

Add story text you created in collaboration with Co-Pilot:

Scroll down on the page, click the "+" in the center of the page (green arrow), and select "Text" button (blue arrow).
Copy/Paste text from Co-Pilot into Express

Once the text is on the page, you can select it and adjust it's appearance using the text submenu: i.e., designating header levels (purple arrow), call-out quotes, bulleted/numbered lists, bold, italics, links, and alignment.

Step 5 | Add Images

Locate strategic places to add/insert the other Firefly generative images into your story. Try to use at least 2 different photo or layout options.

Find place in text to add image
Click the "+" button and select "Photo" from submenu.
Click "Upload from Device" to add image
Once on the Express page, choose image display style: inline (default), Fill screen, Window, or Full width.

For each image added, be sure to address Accessibility: i.e., add Alt-text or designate the image as decorative.

Step 6 | Bonus Step

You can complete Step 5 by just adding your additional images and repeating the process. But you migth try playing with other 2 other layout options and features:

Photo grid if you have several photos you want to feature together
Split Layout for side-by-side (text and image) options

NOTE: You can also add images by selecting from the available stock image options rather than Firefly created images. To do this, search photos by keywords/phrases and select your choice to insert a photo.

Click the "+" button (green arrow), select Photo (blue arrow) and type description / keywords for image in "Search Photos" search bar (purple arrow).

Like in the previous steps, be sure to add Alt-Text to any images you add.

Step 7 | Share/Publish

Once completed, you need to publish your Express webpage

Click "Share" in the upper right corner (purple arrow) and select "Publish to web" (green arrow)
Click "Create link" (blue arrow)
Once done processing, click "Copy" (red arrow) to copy the URL for your published Adobe Express webpage and paste/share that link with us via the shared Google Slides

Share Published Creations Here