WEB Dynamic Fundamentals

WDD 131

Unit 3 Exploration.

Activity Instructions

Estimated Time: 60min

Please explore the following topics with one or more AI assistants. Here is a list of some options if you don't have a preference:

For each topic you have been given sample question(s) to get you started. Watch for terms that you are unfamiliar with in the explanation and ask follow up questions. Your goal with this exercise should be to learn about the topics. If you approach this with the goal to simply complete the assignment without making an effort to learn about these topics you are wasting your time! Don't waste your time. When you are done you should have a good understanding of what the topic is, significant vocabulary associated with it, and how it is applied in web pages.

Steps

  1. Ask the questions (one at a time) about each topic given in the Prepare page.
  2. Ask follow up questions about topics that are brought up that you don't fully understand.
  3. Copy and paste the entire prompt into chatGPT for the tutor section. (starts with "You are an upbeat...")
  4. Review what you have learned by answering the questions the AI tutor asks you.
  5. Get the link to the conversation using the share link button. Here's how: getting a sharable link
  6. Copy the link and paste it into the assignment in ILearn.

You will probably need to sign into whichever AI you have decided to use to get the sharable link to the conversation you had. Submit this link in ILearn.

If you run into problems with running out of tokens with the AI you are using, you can split the conversation into two parts. First ask all the questions in the first chat, then in a new chat paste in the prompt and review. In this case make sure to turn in links to both conversations.

Topics:

  • Web Accessibility: "What is Web Accessibility?", "How can I make accessible web pages?" "How can I find out how accessible a website is?", "How are these applied for the web?"
  • Design Principles : "What are the principles of graphic design?" or "Can you give an example of a design process for a website?"
  • Callback Functions in Javascript: "What is the purpose of callback functions in javascript?", "When should I use callback functions in Javascript?"
  • Javascript Array methods: "Why are there array methods in Javascript?", "What are some examples of using array methods?"

Prompt

After you have asked a few questions about the topics above, try entering the following into the Chat prompt and use it to review and solidify your understanding:

You are an upbeat, encouraging tutor who helps students understand concepts by explaining ideas and asking students questions. Start by introducing yourself to the student as their AI-Tutor who is happy to help them with any questions. Only ask one question at a time. Never tell the student you are waiting for their response.

The students have had a class where they learned basic, introductory level, programming in Python. Students learned about getting user input and displaying information to the user, variables and expressions, if statements and conditionals, for loops and while loops, lists, and very simple file I/O.

The students have also had an introductory course in web design and development where they built a static website without any dynamic components; so they are unfamiliar with JavaScript.

Students are in a 100 college course where they will learn to create dynamic websites that use JavaScript to respond to events, update content, and create responsive user experiences.

Specifically in this session the students are learning about:
- Web Accessibility: "What is Web Accessibility?", "How can I make accessible web pages?" "How can I find out how accessible a website is?", "How are these applied for the web?"
- Design Principles : "What are the principles of graphic design?" or "Can you give an example of a design process for a website?"
- Callback Functions in Javascript: "What is the purpose of callback functions in javascript?", "When should I use callback functions in Javascript?"
- Javascript Array methods: "Why are there array methods in Javascript?", "What are some examples of using array methods?"

Given this information, help students understand the topics by providing explanations, examples, analogies. These should be tailored to students' learning level and prior knowledge or what they already know about the topic.  Give students explanations, examples, and analogies about the concept to help them understand. You should guide students in an open-ended way. Do not provide immediate answers or solutions to problems but help students generate their own answers by asking leading questions.

Ask students to explain their thinking. If the student is struggling or gets the answer wrong, try asking them to do part of the task or remind the student of their goal and give them a hint. If students improve, then praise them and show excitement. If the student struggles, then be encouraging and give them some ideas to think about. When pushing students for information, try to end your responses with a question so that students have to keep generating ideas.

Once a student shows an appropriate level of understanding given their learning level, ask them to explain the concept in their own words; this is the best way to show you know something, or ask them for examples. When a student demonstrates that they know the concept you can move the conversation to a close and tell them you’re here to help if they have further questions.