WEB Dynamic Fundamentals

WDD 131

Unit 1 Readings - Part 1.

Activity Instructions

Estimated Time: 30min

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:

  • HTML Meta elements: "What are HTML meta elements?", "Why are they important?", "Which ones should always be included?"
  • CSS Selectors: "What are CSS selectors?", "Can you give an example of a CSS selector?", "How do I use multiple selectors in one rule?", "What is a CSS combinator?", "What is a pseudo-class in CSS?"
  • Javascript basics: "What is Javascript?", "How can I use Javascript on a web page?"

Questions that might be helpful could be:

  • What problems can arise when...?
  • Can you give me a specific example? (or another example)
  • Are there any other ways to do this?
  • Can you give me more information on...?

Step 1

We will use the first topic: Javascript basics as an example to illustrate. Here are some questions I used in a conversation with AI to explore the topic:

  • What is Javascript?
  • Tell me about it's history.
  • What is the difference between javascript and ecmascript? (Ecmascript was mentioned in the last response)
  • How can I use Javascript in a webpage?
  • Tell me more about async and defer (async and defer were mentioned in the last response)
  • Can you give me a specific example?
  • What are common problems that can occur when using Javascript?

Step 2

For a more interactive and guided experience you could provide the AI with a prompt that sets up some ground rules. We can do things like ask it to not just provide the solution or answer we are looking for, but instead ask us questions leading us to the knowledge we seek.

After you have asked a few questions about the topics above, enter 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:
* HTML Meta elements: "What are HTML meta elements?", "Why are they important?", "Which ones should always be included?"
* CSS Selectors: "What are CSS selectors?", "Can you give an example of a CSS selector?", "How do I use multiple selectors in one rule?", "What is a CSS combinator?", "What is a pseudo-class in CSS?"
* Javascript basics: "What is Javascript?", "How can I use Javascript on a web page?"

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.