Embedded Files
Claude- My 🏆 LLM
Claude- My 🏆 LLM
Claude also has vision summarization, translation, data analysis, and data visualization capabilities, and is (in my opinion) the best writing assistant of all the large Language Models.
👉Try Out Claude.ai
👉Try Out Claude.ai
Go to claude.ai and try one or two of the following prompts.
Feel free to use the files in the PRACTICE FILES folder or files you have on your device for testing.
1. Image Analysis and Description
1. Image Analysis and Description
Objective: Showcase Claude 3’s vision capabilities.
Steps:
• Upload an image.
• Ask Claude 3 to describe the content of the image in detail.
• Discuss how this feature can be used in educational settings, such as creating descriptions for visually impaired students or generating alternative text for web content.
Choose one of my example images or upload one of your own:
2. Text Summarization and Analysis
2. Text Summarization and Analysis
Objective: Demonstrate Claude 3’s natural language processing capabilities.
Steps:
• Copy and paste or upload text into Claude 3.
• Ask Claude 3 to summarize the text.
• Follow up by asking specific analytical questions about the content.
3. Interactive Content Creation
3. Interactive Content Creation
Objective: Highlight Claude 3’s capability to generate and refine content.
Steps:
• Ask Claude 3 to generate a piece of content (e.g., an article, lesson plan, or a creative story).
• Request specific improvements or additions to the generated content.
Example Interaction:
You are an excellent middle school science teacher, skilled in making complex topics approachable and applicable to students and increasing student engagement in learning about the physical world. Create 3-5 ideas for a lesson hook for mixed ability a 7th-grade science class on the topic of ecosystems.”
• Claude 3 generates lesson hooks.
• Follow up: “I like #. Create a sample script for a substitute teacher to use to introduce this lesson in my absence.”
• Claude 3 creates a teaching script for a substitute teacher.
4. Language Translation and Multilingual Support
4. Language Translation and Multilingual Support
Objective: Showcase Claude 3’s ability to translate and handle multiple languages effectively.
Steps:
• Input the English text into Claude 3.
• Ask Claude 3 to translate the text into another language (e.g., Spanish, French, Mandarin).
• Discuss the quality and accuracy of the translation and how this feature can be used in educational settings for ESL (English as a Second Language) students or multilingual classrooms.
5. Data Analysis and Visualization
5. Data Analysis and Visualization
Objective: Demonstrate Claude 3’s capability to analyze data and generate visualizations.
Steps:
• Input the dataset into Claude 3.
• Ask Claude 3 to analyze the data and provide insights.
• Request Claude 3 to generate visualizations (e.g., bar charts, line graphs) based on the data.
Example Interaction:
• Input ANONYMIZED student test scores in different subjects.
• Ask: “Analyze this data and provide insights on student performance trends.”
• Claude 3 generates insights.
• Follow up: “Create a bar chart showing the average scores in each subject.”
• Claude 3 provides the visualized data.
Everyone can code with Claude 3.5 Sonnet Artifacts
Everyone can code with Claude 3.5 Sonnet Artifacts
Claude Artifacts
Claude Artifacts
Create working apps, diagrams, games, and more with Claude's new 'Artifacts' feature.
Share with a link to an interactive webpage or ask for HTML code to embed in a website for working interactive teaching tools!
For each example below, expand the title to see the prompts. Feel free to copy, paste, and edit prompts
Important Note About End User Access to Claude Artifacts
Important Note About End User Access to Claude Artifacts
In order for users on your domain to access and interact with Claude projects, this portion of the URL must not be blocked on the domain: https://claude.site/artifacts/
All Claude artifacts have this in the URL. You may need to request that this be whitelisted on your domain.
Note that this will NOT whitelist the Claude LLM for users, therefore it will not make Claude LLM available to students or faculty. It will only ensure that the artifacts that are created and shared any be accessed and interacted with by users.
The use of Claude LLM is only allowed for users 18 and up at this time per the Anthropic terms of service.
Example: Create an interactive fill-in-the-blank exercise about weather
Example: Create an interactive fill-in-the-blank exercise about weather
Prompt:
Prompt:
Create an interactive fill-in-the-blank exercise about weather for 5th grade students to support the standard in """ """ below.
Each gap should have 4 options that I can click to choose.
All four answers should be plausible answers with no obvious wrong or silly options.
You also need to include a button to check the answers at the bottom.
Add a light blue background and colorful graphics representing weather
Use HTML Code for embedding into a Google Site.
"""NCES.5.E.1 - Understand weather patterns and phenomena, making connections to the weather in a particular place and time.
* NCES.5.E.1.1 - Compare daily and seasonal changes in weather conditions (including wind speed and direction, precipitation, and temperature) and patterns.
* NCES.5.E.1.2 - Predict upcoming weather events from weather data collected through observation and measurements.
* NCES.5.E.1.3 - Explain how global patterns such as the jet stream and water currents influence local weather in measurable terms such as temperature, wind direction and speed, and precipitation.""
Revised as a Game
Revised as a Game
Here I adjusted the prompt to ask for a Game that requires the user to catch the correct answer.
Prompt:
Create an interactive fill-in-the-blank game about weather for 5th grade students to support the standard in """ """ below.
Each gap should have 4 options that I can click to choose. The answers should be moving about the screen along with colorful icons representing weather. The user must 'catch' the correct answer before moving to the next question.
All four answers should be plausible answers with no obvious wrong or silly options. You also need to include a button to check the answers at the bottom.
Add a light blue background and colorful graphics representing weather Use HTML Code for embedding into a Google Site.
Add some colorful weather icons that move around the screen along with the words for visual interest.
Add a light blue background to the game screen.
"""NCES.5.E.1 - Understand weather patterns and phenomena, making connections to the weather in a particular place and time.
* NCES.5.E.1.1 - Compare daily and seasonal changes in weather conditions (including wind speed and direction, precipitation, and temperature) and patterns.
* NCES.5.E.1.2 - Predict upcoming weather events from weather data collected through observation and measurements.
* NCES.5.E.1.3 - Explain how global patterns such as the jet stream and water currents influence local weather in measurable terms such as temperature, wind direction and speed, and precipitation.""
Fill-in-the-Blank practice Exercise
Fill-in-the-Blank practice Exercise
Revised as a Game
Revised as a Game
Example: Simulation about deforestation and impact on endangered species
Example: Simulation about deforestation and impact on endangered species
PROMPT:
"Create an interactive time lapse component that demonstrates the effects of deforestation on endangered species over time.
User should be able to manipulate aspects that impact endangered species.
Include colorful icons for visual interest. "
FOLLOW UP/Iteration Process:
Evaluate and Iterate until you are happy with the results!
"Can you had explanations for each of these controls if users hover over them? These explanations should explain how the element such as Deforestation rate affects species over time and how it can be mitigated "
"I see text boxes when I click, but most of them have white text which i can't see. Make the text in the text boxes black so I can see it."
"Now create HTML so I can embed this in a Google site and it will be interactive for users "
"now the text in the information boxes is too large. make the text in the information smaller so it can all be read "
"I liked the bar with running numbers of animal icons for mammals birds and fish. add those back. make them colorful. "
Example: Algebra problem generator
Example: Algebra problem generator
PROMPT:
Write a script that generates practice problems for algebraic equations, suitable for an 8th-grade math class. Use HTML Code for embedding into a Google Site.
Example: Rubric with graphics
Example: Rubric with graphics
PROMPT:
You are an expert teacher and curriculum writer, skilled in creating assessments and evaluating student work. Your task is to create a rubric for my 5th grade science class studying engineering. My students are doing a STEM experiment, the “egg drop challenge,” in which they use specific materials to design and build a container to protect the egg from cracking as it is dropped from increasingly higher heights. Format the rubric as a chart and include a 5 point scale.
*Prompt Credit AI for Education Prompt Library --> Assessment --> Rubric
Follow ups:
Revise this rubric to a 4 point scale and make the scale super hero themed
Add colorful superhero themed icons
remove all <br>
remove all [ ]
this in HTML so I can embed on a Google Site
Example: Lego Fraction Practice
Example: Lego Fraction Practice
PROMPT:
Create an interactive activity to teach fractions to 4th grade students using interactive Lego blocks.
Include colorful Lego blocks and some decorative Lego images for visual appeal.
Present the user with a fraction question and colorful LEGO blocks that can be dragged across the screen to demonstrate the answer
Tell the user if the answer is right or wrong.
If the answer is wrong provide a clue to help solve it correctly.
When the answer is correct, present a new scene with a new problem.
Follow Up: (after iterating and testing- when I was happy with the result: " create HTML code so that I can embed this in my Google Site. "
Understanding supply, demand, inflation and effects on the value of the dollar
Understanding supply, demand, inflation and effects on the value of the dollar
PROMPT:
Build an interactive simulation that demonstrates the relationship of supply, demand, inflation, and the value of the dollar. This will be for high school economics and finance classes.
Use colorful icons
Adjust the sliders to see estimated effects of increase or decreases in supply, demand, and inflation on the value of the dollar
National Debt Simulators
National Debt Simulators
PROMPT:
Create a simulation that shows the US national debt in real-time, the interest we are paying on the debt, every American's share of the debt, and how the debt can potentially affect the value of the dollar in the future. Refer to this site with up to date national debt statistics for the baseline debt amount. Allow the user to manipulate the debt, raising it or lowering to see the effect it has on the dollar's value.
Start with a baseline of $50,000,000,000,000 national debt and $161,000 debt for every American as the baselines. (Check today's national debt to update in your own simulation at https://cuellar.house.gov/debt.html
Example: Ecosystem Simulation
Example: Ecosystem Simulation
PROMPT:
Design a React component that simulates a simple ecosystem, showing how populations of predators and prey change over time. This should be suitable for a middle school science class studying ecology.
Follow up: Convert to HTML for embedding into a Google Site.
Example: Create graphs from data source
Example: Create graphs from data source
Create graphs from this data on teens' AI usage from the uploaded file:
File- Common Sense Media: The Dawn of the AI Era Teens, Parents, and the Adoption of Generative AI at Home and School
Follow-up requests:
Add the data points to the graphs
Now create HTML code to embed these graphs as interactives on a Google Site
Publishing your Artifact
Publishing your Artifact
You can now publish and share your artifacts for others to interact with as a teaching tool or remix and make their own versions.
Share for remixing:
After completing the artifact to your satisfaction, click 'Publish' in the lower right hand corner and copy the link to share it with someone else to remix OR
This is the final published link
Open to interact with it or remix it in your Claude account.
Embed interactive artifact on a webpage:
Embed interactive artifact on a webpage:
As I have done here, request the response in HTML for embedding and click 'Code' at the top of the artifact window, then embed in a Google Site or other website.
Interactive Weather Gap Fill Exercise HTML with Icons
Click to open website
I've made the following changes to address your concern and make the exercise interactive:
Answer Selection:
Replaced the span elements with radio button inputs for each option.
Each question now has a set of radio buttons, allowing users to select one answer per question.
Interactive Checking:
Modified the "Check Answers" button to trigger a function that checks the selected answers against the correct ones.
Added immediate feedback for each question, showing whether the selected answer is correct or incorrect.
Included a score alert that shows how many questions were answered correctly out of the total.
Visual Feedback:
Added color-coded feedback (green for correct, red for incorrect) to make it easy to see which questions were answered correctly.
Included a reminder to select an answer if a question is left unanswered.
Maintained Previous Features:
The weather icons and overall layout remain the same.
The exercise still maintains its responsiveness and should work well on various screen sizes.
To use this updated version in a Google Site:
Copy the entire new HTML code.
In your Google Site, add an "Embed" element.
Choose the "Embed code" option.
Paste this new HTML code into the provided field.
Adjust the size of the embedded element as needed.
This version allows students to select answers, get immediate feedback, and see their overall score, making the exercise more interactive and engaging. The functionality should work within the constraints of a Google Sites embed.
Chat Controls
Chat Controls
View your Artifacts including any content used to create them in the 'Chat Controls' by clicking the Settings icon in upper right corner of artifact
Example Prompts Utilizing Claude artifacts, PDF Vision, and Analysis
Example Prompts Utilizing Claude artifacts, PDF Vision, and Analysis
Math/Statistics Prompt: "I have a CSV file with my students' test scores from the past semester (NO PII DATA INCLUDED). Could you create an interactive visualization that shows the distribution of scores and helps identify any patterns or areas where students might be struggling?"
Literature Analysis Prompt: "I just scanned this chapter from To Kill a Mockingbird (PDF). Could you help me create an interactive character relationship map that my students can use to track how different characters are connected? Include tooltips that show key quotes about each relationship."
Chemistry/Physics Interactive Demo: "Can you create a simple interactive periodic table visualization where students can click on elements to see their properties, common uses, and electron configuration? Focus on the first 20 elements since that's what we cover in our intro chemistry unit."
History Timeline Builder: "Using this CSV of major Civil War battles, could you create an interactive timeline that shows the location, casualties, and outcome of each battle? It would be great if students could filter by year and see patterns in the conflict's progression."
Biology Cell Explorer: "Could you create an interactive SVG diagram of a plant cell where students can hover over different organelles to see their functions? Include brief explanations suitable for 9th-grade biology students."
Geography Data Visualization: "I have population density data for different states in this CSV. Could you create a color-coded map visualization where darker colors represent higher population density? Include a tooltip that shows exact numbers when hovering."
Language Arts Writing Assistant: "Can you create a simple interactive tool that helps students identify and fix common grammar mistakes? They should be able to input a sentence and get feedback on things like subject-verb agreement and proper punctuation."
Music Theory Helper: "Could you create an SVG of a piano keyboard where students can click on keys to see the note names and their corresponding frequencies? This would help them understand the relationship between musical notes and sound waves."
Environmental Science Dashboard: "Using this CSV of local weather data from the past year, could you create a dashboard that shows temperature trends, precipitation patterns, and how they compare to historical averages? My students are studying climate change."
Computer Science Learning Tool: "Can you create a simple interactive visualization that shows how a basic sorting algorithm works? Students should be able to input small sets of numbers and watch how the algorithm reorganizes them step by step."
SAMPLE .CSV DATASETS for # 1, 4, 6, & 9 above:
SAMPLE .CSV DATASETS for # 1, 4, 6, & 9 above:
https://drive.google.com/drive/folders/1_LQw64McdXZVnN03Pqxt4mpOUh86XiNA?usp=drive_link
Update: November 7, 2024- Enhanced PDF Analysis
Update: November 7, 2024- Enhanced PDF Analysis
Anthropic introduced significant enhancements to Claude's PDF processing capabilities, particularly with the release of Claude 3.5 Sonnet. These updates enable Claude to comprehensively analyze both textual and visual elements within PDF documents, including images, charts, and graphics.
Claude supports PDFs up to 30 MB in size and 100 pages in length.
Update: Oct. 22, 2024- Claude 3.5 Sonnet Updates
Update: Oct. 22, 2024- Claude 3.5 Sonnet Updates
Claude can now RUN code & do advanced data analyisis with the new Analysis tool! (free for al users)
A new built-in feature for Claude.ai that enables Claude to write and run JavaScript code. Claude can now process data, conduct analysis, and produce real-time insights. The analysis tool is available for all Claude.ai users in feature preview.
While Claude could always write code, it can now run that code within Claude.ai to support all types of analysis tasks. With the analysis tool, you get answers that are not just well-reasoned, but are mathematically precise and reproducible.
Claude (API- not web) can now Use a Computer!
Another step toward autonymous agents- Anthropic announced a public beta in its API (not yet available on the web or mobile app/ public version) in which Claude can actually navigate a computer to perform tasks for the user.
Video by Anthropic Claude - https://www.anthropic.com/news/3-5-models-and-computer-use
Claude Analysis Tool & Visual PDFs are both feature previews and must be enabled in your user settings.
Claude Analysis Tool & Visual PDFs are both feature previews and must be enabled in your user settings.
Click your user icon in the lower left corner --> Feature Preview --> Visual PDF's --> ON
ALSO- turn on Analysis tool Feature Preview--> Analysis tool --> ON
Claude Analysis Tool + Claude Artifacts:
Claude Analysis Tool + Claude Artifacts:
In this example, I provided a .csv file of data about various health statistics from Tableu free data sets- https://www.tableau.com/learn/articles/free-public-data-sets and asked Claude to "Analyze the data I attached and create a line graph demonstrating changes in life expectancy for females vs males for all of the countries over time" NOTE- the data only has death rates. Claude was able to analyze it and extrapolate life expectancy data from it. (https://docs.google.com/spreadsheets/d/1fdrvjy0POgj9LiBTOVDS-3PYztZtY53c7ykKQrzsRVo/edit?usp=sharing )
Then asked for it to be more graphically pleasing, add flags and icons etc.
Example: Claude PDF Vision + Claude Artifacts
Example: Claude PDF Vision + Claude Artifacts
I uploaded the NC Generative AI Implementation Recommendations and Considerations for PK-13 Public Schools
Prompt:
"summarize the key points of the document. Arrange the summary by the 5 focus areas of the NC Digital Learning plan. Explain all graphics"
then " turn this summary into a visually pleasing infographic. Show all the text at once for printing"
Include the images of the graphics in the infographic
The result: https://claude.site/artifacts/5a6ccd83-e904-4c0b-92d7-ce8e46ad71eb
This caused it to exceed the message length so I asked for a separate infographic for each focus area.
Here are two of the resulting artifacts
Page updated
Report abuse