INSTRUCTIONAL UNIT 4 (IU4) … · cover evaluation of the first draft learning materials and...

INSTRUCTIONAL

UNIT 4 (IU4)

Instructional Design Project

EDTC 6321 Summer 2020 Module 1

by Heather Bourgeois

i

Table of Contents

I. Introduction ........................................................................................................................... 1

II. Goal Statement ...................................................................................................................... 1

III. Subject Matter Expert Review ............................................................................................... 1

Introduction ...................................................................................................................... 1

Summary .......................................................................................................................... 2

Synopsis ............................................................................................................................ 3

IV. One-on-One Evaluation .......................................................................................................... 4

Introduction ...................................................................................................................... 4

Summary .......................................................................................................................... 4

Synopsis ............................................................................................................................ 6

V. Small Group Evaluation ........................................................................................................... 6

Introduction ..................................................................................................................... 6

Summary .......................................................................................................................... 7

Synopsis ............................................................................................................................ 8

VI. Revised Lesson Materials ........................................................................................................ 9

Learning Environment ...................................................................................................... 9

On-Screen Slides for Video Lesson .................................................................................. 11

Audio Narration Script .................................................................................................... 14

Web Page Project ........................................................................................................... 18

Assessment Quiz ............................................................................................................. 20

INSTRUCTIONAL UNIT 4 (IU4) EDTC 6321 | Heather Bourgeois

1

I. Introduction The purpose of this instructional unit is to introduce learners to the basics of creating a web page from scratch, using HTML and CSS. The target audience for this instructional unit is young learners (9-10 years old), so the lessons and activities are designed to be easy to use and understand, while being presented in a fun and friendly way. Because this instructional unit is designed to be short (approximately 30 minutes) there is not enough time to go over every aspect of web development, so it is focused on covering only the minimum requirements needed to build a very simple web page.

This document, Instructional Unit 4 (IU4), is the last part in the planning of this instructional unit and will cover evaluation of the first draft learning materials and revision of those materials based on feedback obtained during the evaluation process. This evaluation of the first draft training materials for this instructional unit was done through a three-part assessment, including a Subject Matter Expert Review, a One-to-One Evaluation and a Small Group Evaluation. The results of these assessments and revisions made to the instructional unit’s training materials are presented below.

II. Goal Statement Learners will be able to use HTML and CSS to develop and style a simple web page. It is expected that they will exit the instructional unit with sufficient mastery of the covered skills to be able to create their own basic web page. This instructional unit will help supplement the learner’s foundational technical skills, which they can build upon with later training.

III. Subject Matter Expert Review

Introduction While I am technically a subject matter expert myself, as I have training in web design and development and almost 20 years of experience creating web pages, I thought that it would still be good to have a non-biased expert look through my training materials to see if there is anything that I missed. For this purpose, I contacted a former coworker who is also a web developer. The subject matter expert consulted for this instructional unit is a web developer with a bachelor’s degree in Computer Science and 15 years of experience building web pages with HTML, CSS and additional scripting and programming languages. This evaluation was done remotely, on his home computer and on his own schedule. I sent him the PDF of Instructional Unit 3 (IU3), where he reviewed all of the content in my first draft training materials and then provided his feedback for each of the sections.


2

Summary The feedback received from the subject matter expert is presented in the table below.

Steps

SME’s Comments My Response

Step 1: Introduction

The SME commented that it is a good, interesting intro that connects with the learner and gets them thinking about how web pages are made.

Introduction will remain the same, as it appears to successfully meet its objectives.

Step 2: Lesson

The SME commented that while he thinks the most important tags are covered, there are several others, such as the <meta> tags and <footer> that should also be included in a finished web page.

While I agree that there are more tags included in most completed web pages, for the sake of this short training I don’t think there is time to go over any additional tags, so I will not be adding additional tags at this time.

Step 3: Try It Out Yourself

The SME suggested adding an extra question showing a tag with the first letter capitalized, to see if they can spot it as incorrect.

While I think this would be a great additional question, I am concerned about adding additional content with the 30 minute limit to this training and the young target audience, so I will not be adding it at this time.

Step 4: What We Learned

The SME felt that this was a good summary of the topics covered, but that maybe it would be helpful to review more specific information that was covered.

I agree and will look into adding more detail to a revised version of this training at a later time, but for now will not be expanding this section due to time constraints.


3

Synopsis The subject matter expert emailed me his feedback on the training materials that I sent him in Instructional Unit 3 (IU3) and I took his feedback into consideration when deciding on the following revisions to the training materials:

1. Short Term Revisions

o I will modify question #1 on the assessment quiz to include more than one choice that begins correctly with <!. This will present a bit more of a challenge to the learner and be a better assessment of their recognition of the proper doctype tag.

Step 5: Assessment Quiz

The SME suggested that question 1 of the quiz be made a bit more challenging by having more than one of the options start with <!.

I will modify the multiple-choice answers for question 1 of the assessment quiz to present more of a challenge to the learner by having more than one of the choices begin with <!.

Step 6: Web Page Project

The SME commented that I should make it clear to the learner how the CSS is linked to the HTML in an actual website. In the code playground the HTML and CSS are in their own boxes and automatically work together, but when developing a real website the CSS needs to either be included within the head section of the HTML code (within <style> </style> tags) or if in a separate file it needs to be linked within the head section of the HTML code (within a <link> tag).

This is definitely a great suggestion but I don’t want to confuse the learner with too much information. For now I will mention to the learner that when making a real web site you have to link the CSS and HTML together, but that the code playground will do it for them.


4

o I will add information telling the learner that when creating a real website they will need to link the CSS to the HTML, but that for this lesson the code playground will automatically link it for them.

2. Long-Term Revisions

o I will look into adding more detail to the review section, to provide more of a thorough overview of the information covered in the lesson.

IV. One-to-One Evaluation

Introduction The draft training materials for this instructional unit were presented to a learner from the target audience. The learner for this evaluation is a 10-year-old female in 5th grade. She has basic technical skills and is very familiar with using various devices, browsing the internet and doing online activities and games. We went through the training materials together on a desktop computer, with her looking at the slides for the video while I read the narration. She gave feedback as the training progressed and gave ideas for improvements. She then went through the quiz questions and gave her answers, along with feedback on the difficulty of the questions. The final part of the instructional unit, the web page project, was done in an existing online code playground (JSFiddle), because the code playground for this instructional unit has not yet been developed. The entire evaluation lasted 43 minutes. Summary My observations of the learner, along with her feedback, are presented in the table below.

Steps

Observations/Feedback My Response

Step 1: Introduction 4:30pm – 4:31pm (1 minute)

The learner commented that it might be helpful to have a section with instructions, before the video begins.

I will add new section to the training (Part 1: Instructions, to go before what will now be Part 2: Video Lesson, Part 3: Quiz and Part 4: Web Page Project).


5

Step 2: Lesson 4:31pm – 4:39pm (8 minutes)

The learner suggested that I leave out the parts in the narration where I name the closing tags, as they are generally called “end-“ when spoken (for example, “end-head” and “end-body”) and she thought they sounded creepy (lol)

I will revise the narration script to exclude the spoken closing tag names. I think this will work fine, as the closing tags will be being written on the screen at the time that I would have said them.

Step 3: Try It Out Yourself 4:39pm – 4:41pm (2 minutes)

The learner sometimes took a bit longer than I expected to think of an answer, so the fixed pauses in the video may not always be long enough for every learner.

I will add information to the narration script, just before the questions begin, to let them know that they can pause the video if they need more time to think of their answer.

Step 4: What We Learned 4:41pm – 4:43pm (2 minutes)

The learner commented that she thought this was a pretty good review of the information, but maybe add some pictures.

I will look into expanding this section in the future to include some pictures related to the review content.

Step 5: Assessment Quiz 4:43pm – 4:50pm (7 minutes)

The learner was confused by question #6 and suggested that it be reworded in an easier to understand way.

I will add extra descriptive text to this question, such as “What is the correct file extension for an HTML document (the letters after the . at the end of your filename)?”

Step 6: Web Page Project 4:50pm – 5:13pm (23 minutes)

The learner requested an extra feature in the code playground - the ability to expand the text box you are typing in for more space.

I will add a feature to the code playground to be able to expand the code box that is being typed in, for more space.


6

Synopsis The learner and I went through the training materials together, with her looking at the slides for the video lesson while I read the narration script. She gave feedback throughout the evaluation and I will be making the following revisions, based on that feedback:


o I will add a Section 1: Instructions part to the instructional unit, moving the existing sections to Part 2: Video Lesson, Part 3: Quiz and Part 4: Web Page Project.

o I will revise the narration script to exclude the spoken closing tag names.

o I will add information to the narration script, just before the questions begin, to let the learner know that they can pause the video if they need more time to think of their answer.

o I will add extra descriptive text to this question, such as “What is the correct file extension for an HTML document (the letters after the . at the end of your filename)?”

o I will add a feature to the code playground to be able to expand the code box that is being typed in, for more space.


o I will look into expanding the review section in the future to include some pictures related to the review content.

V. Small Group Evaluation

Introduction Due to the current distancing measures during the COVID-19 pandemic, the small group evaluation for this instructional unit was not able to be done in person. The draft training materials for this instructional unit were given to a fellow homeschool educator that I have worked with in the past and she had her two children (ages 9 and 11) complete the training. She observed them during the training and gathered their feedback. The two learners have basic technical skills and are familiar with online learning activities, but the older learner also has some basic familiarity with web page creation. The learners went through the training materials on a desktop computer, looking at the slides for the video while their mother read the narration. They then went through the quiz questions and gave their


7

answers, along with feedback on the difficulty of the questions. The final part of the instructional unit, the web page project, was done in an existing online code playground (JSFiddle), because the code playground for this instructional unit has not yet been developed. The entire evaluation lasted for 54 minutes. Summary Observations of the learners, along with their feedback, are presented in the table below.

Steps

Observations/Feedback My Response

Step 1: Introduction 12:23pm – 12:24pm (1 minute)

The older learner commented that the classroom background for the page, around the video, was sometimes a bit distracting.

I will look into adding an option to make the video expand to fill the larger box and cover the classroom.

Step 2: Lesson 12:24pm – 12:35pm (11 minutes)

The younger learner was confused by the concepts of margin and padding and suggested that pictures would help.

I will add drawings to the slides for margin and padding, to show the difference between the two.

Step 3: Try It Out Yourself 12:35pm – 12: 39pm (4 minutes)

One of the learners commented that it was hard to think of the right tag but they would figure it out if they played around with it.

I will add a reminder in the video, shortly before the questions begin, letting them know that they can use the code box at the bottom of the screen to play around typing code themselves to see what looks right.

Step 4: What We Learned 12:39pm – 12:42pm (3 minutes)

The parent noticed that the parts of the instructional unit are listed out of order.

I will edit the narration in this part to list the parts of the instructional unit in the correct order.


8

Synopsis The learners through the training materials together with their mother, with the learners looking at the slides for the video lesson while she read the narration script. They gave feedback throughout the evaluation and I will be making the following revisions, based on that feedback:


o I will add a reminder in the video, shortly before the questions begin, letting them know that they can use the code box at the bottom of the screen to play around typing code themselves to see what looks right.

o I will edit the narration in this part to list the parts of the instructional unit in the correct order.

o I will edit the narration to remove the reference to the <html> tag holding all of the content of the page and will edit question #2 to make it a bit clearer.

Step 5: Assessment Quiz 12:42pm – 12:48pm (6 minutes)

One of the learners was a bit confused by question #2, as it refers to a box to hold “all of the visible content of the page” and while the correct answer is <body>, during the narration the <html> tag was referred to as holding “all of the content of the page”.

I will edit the narration to remove the reference to the <html> tag holding all of the content of the page and will edit question #2 to make it a bit clearer.

Step 6: Web Page Project 12:48pm – 1:17pm (29 minutes)

The learners expressed interest in additional tags for adding and formatting other types of content on their pages.

I will add a “cheat sheet” of common HTML tags and CSS styles within the code playground, for the learner to try out.


9


o I will add drawings to the slides for margin and padding, to show the difference between the two.

o I will add a “cheat sheet” of common HTML tags and CSS styles within the code playground, for the learner to try out.

o I will add an option to make the video expand to fill the larger box and cover the classroom.

VI. Revised Lesson Materials

Learning Environment

1) Video Lesson The video lesson will be delivered on a web page with the following design:

The instructional video will be within the blackboard and a handwritten font will be used to go with the theme of a lesson being given on the blackboard. The code box at the bottom of the screen will be used by the learner to try out typing the code snippets themselves, as they watch the video lesson. A section with instructions will be added at the beginning of the instructional unit, changing the sections to: Part 1) Instructions, Part 2) Video Lesson, Part 3) Quiz and Part 4) Web Page Project. An option will be given to make the video larger, to cover the classroom in case it is a distraction to an individual learner.


10

2) Code Playground The code playground used for the web page creation project will be delivered on a web page with a design like this (still a work in progress):

The preview of the web page (as shown on the monitor at the right) will be updated in real time to show changes made to the code. The code boxes at the left side will be used for the learner to type their HTML and CSS code. The code boxes will be able to be expanded, so the learner has more space when working within one.

3) Assessment Quiz The assessment quiz will use the following design:


11

On-Screen Slides for Video Lesson


12


13


14

Audio Narration Script

1. How to Create a Simple Web Page Hi There! Today we are going to talk about web pages and how they are created. We will go over all of the steps involved in the process and when we are finished you will be able to use this information to create your own simple website from scratch! I’m sure you have used many websites for things like school projects, entertainment and connecting with family and friends. But have you ever wondered how they are made? If you have ever seen the code behind a website, you might wonder how does this turn into this? Today, we are going to find out! Feel free to use the code box at the bottom of your screen to try out typing the HTML tags and CSS styles as we go. If you prefer to make the video bigger, click on the Full Size button below the video.


15

2. What Are HTML and CSS? First of all, what are HTML and CSS? HTML stands for Hypertext Markup Language. That is a fancy way of saying that it is its own language used for creating the structure of a web page. CSS stands for Cascading Stylesheets, which is another way of saying that they are a way to style your web page. These two work together to create what you see as a web page. I like to think of HTML as the building blocks of the page and CSS as the things we paint on top of the blocks to make them look good! So let’s start with HTML. This language uses tags to tell your web browser important information about your page and how to display it. Tags are special words (or sometimes just letters) used inside greater than and less than brackets. Go ahead and try typing this one yourself in the code box: <head>. This tag tells the browser to create the head section of your page. Some tags are fine by themselves, but most tags, because they are used to hold content (kind of like a box) also need a closing tag. We show a closing tag by adding a forward slash to the beginning of the tag, like this: </head>. This way, everything between the opening tag and the closing tag goes in that box.

3. Required HTML Tags To make a web page, there are some basic tags that we have to include, to tell the browser how to show it. The first tag that any web page needs is the Doctype Declaration. This is how we tell the browser what kind of document it is. This information goes inside a special tag that says <!DOCTYPE html>. When working with code you will notice that some things need to be done in a very specific way. If they aren’t done in the specific way, your code “breaks” and the results won’t be what you are expecting. So it’s very important to type these tags exactly as you see them, including capitalization. For the doctype declaration tag, it always starts with an exclamation point, followed by the word DOCTYPE (in ALL CAPS), then a space and the word html (in all lowercase). This tells your browser that it is an HTML document. The next required tag is the <html> tag itself, which tells your browser that you are starting to write your HTML code. Because this tag will be used as a box to hold all of the content of your web page, it also needs a closing tag: </html>. The next required tag is the <head> tag. This is the “brain” of our web page and holds the content of the page that controls how it is displayed. Because this is also a box that holds content, we will include a closing tag: </head>. There are many tags that can go inside the <head> of the web page, but we will save most of them for a later lesson. For now, we are just going to include a <title> tag and a closing tag: </title>. The text that you type inside the <title> tag is what shows on the browser tab for your website and also in search engine results, if your page is published for everyone to see. Use a title that is a good description of your page.


16

That is it for the content of the <head> tag for now. The next required tag is <body>. This box will hold all of the visible content of your page. We of course need to include a closing tag as well. Within the body we can put as much content as we want. Some useful tags and types of content (that you can use when creating your web page) are <h1> (your main heading), <p> for paragraph text and <img> which shows an image on your page. Because they are containers for content, both the <h1> and <p> tags need closing tags. The <img> tag, however, doesn’t need a closing tag, because it is not a container and instead provides a link to the image that you want to show. Notice that the word “image” is abbreviated to “img” and that it needs some extra information to be complete. We need to tell it where to find our image. We can do that by including the word “src” (again, it’s an abbreviation from the word “source”), followed by an equal sign and then the URL (file path on the web) to our image, in between quote signs, like this: <img src=”images/image.png”>. These tags can all work together to create the basic structure of a web page. Without styles, however, it doesn’t look very pretty. You will just see plain text and images. If you want to make your web page look good, you have to style it!

4. Using CSS That’s where CSS comes in! Using CSS you can tell the browser how to show your content. You can control things like colors, text sizes and fonts. You can also tell it how big to make your pictures and where to put them! Rather than using tags like HTML, CSS uses what we call style declarations. That is just a fancy way of saying that we are writing out the styles to use. In order for the browser to use these styles, however, it has to know what content we want it to style! There are several ways to tell the browser which content to style, but for now we are just going to identify content by using the HTML tags from our page. For example, if we want to make our heading text red and bold, we can target it by using the <h1> tag. The next thing we need to do is create a box to hold all of the styles that we want to apply to the <h1> tag. We do this by using curly brackets: { }. The opening curly bracket goes on the first line, next to the tag we are styling, and the closing curly bracket goes on its own line at the very end. On the lines in between, we can put our styles. To make the text red, we can say “ color: red;”. Notice the colon after the word “color”. We use that to separate the attribute (what style we are working on) from its value (the actual style we want to use). Notice also the semicolon at the end of the line. This is how we tell the browser that we are done with that style. All of our styles will follow that pattern. So next, if we want the text in our heading to be bold, we can say “font-weight: bold;”. Some other useful styles are “font-size”, “margin” and “padding”. “Font-size” sets the size of our text. There are several different units that we can use for size, but for now we are going to use pixels (the number of little squares on the screen), which we abbreviate to “px”. For example, to


17

make our text be a size of 20 pixels, we can say “font-size: 20px;”. Margin and padding also refer to sizes and can use the pixel unit. These sizes are both based on our box of content, with margin referring to space outside of our box (the distance between different boxes of content) and padding referring to space inside of our box (the distance between the edges of our box and the content inside). We can set these styles like this: “margin: 20px;” and “padding: 20px;”. This will make our content have 20 pixels of space between it and the edges of the box and then 20 pixels of space between our box and any other boxes!

5. Saving a Web Page The last thing we need to do is save our web page! We need to make sure that it is saved in the correct format, so our browser can use it. For basic web pages, we need to save with the file extension “.html”. Once the file is saved, it can be published to the web! Now you know the basics of creating a web page from scratch!

6. Try It Out Yourself Let’s go through some examples to see how much you have learned! First, let’s see if you can spot any problems with these examples! The correct answer will be given after a short pause, so if you need more time to find your answer, you can pause the video and then restart it when you are ready to continue. Remember that you can also use the code box at the bottom of the screen to play around with things and see what looks right! Is this tag correct? >body< If you said “no”, good job! The correct way to show a tag is like this: <body>. Is this the correct tag for a paragraph of text? <p> If you said “yes”, great! That is correct! Is “text-size” the correct way to style the size of our text? If you said “no”, that’s it! The correct way to style the size of our text is “font-size”. Now let’s see if you can find the correct tag yourself! Which tag is used for the name of our website, that shows in the browser tab? If you said “<title”>, good job! That’s the one! What if we want to include an image on our page? What is the correct tag for that? If you said “<img>” that’s it!

7. What We Learned


18

Let’s review what we have learned. We now know all about what HTML and CSS are used for and how they work together. We know the basic HTML tags that have to be used on a web page, like the doctype declaration, <html> <head> and <body>, along with some other tags that we can use to display our content, such as <h1>, <p> and <img>. We also learned the correct form of CSS styles and some basic styles that we can use to control how our content looks, such as “font-size”, “margin” and “color”. And we learned the file format we need to use to save our page! You can use what you have learned to play around with creating your own web page. After this video, you will get to show off what you have learned through a short quiz, followed by a web page creation project! Please click on the Part 3: Quiz button above to continue. Thanks for joining me! Have fun and see you next time!

Web Page Project The learner will be given the following instructions:

Please use the code playground to create a web page of your own. A “cheat sheet” of common HTML tags and CSS styles for you to play around with will be accessible within the Code Playground. Be sure to include the following: 1) Required basic HTML tags for the browser to show your page 2) Content for your page 3) Styles for your page, to make it look nice Type the HTML tags of your page in the HTML box and the styles of your page in the CSS box. For images, please choose your desired image from the ones provided and click on it to copy the URL (web address). You can then paste this URL into your <img> tag, by using Ctrl+V on your keyboard. Your work will be automatically saved. Watch on the preview screen as your web page comes to life and adjust the HTML and CSS as needed until you are satisfied with your page. When you are done, click the SAVE button and save the web page in the correct file format. Then click the PUBLISH button. The URL (web address) will automatically be saved for you and added to your quiz, so your teacher will have access to it for review. Happy Coding!


19

Grading Rubric for Web Page Project

Criteria Description

HTML Page Structure

The structure of the web page has been created completely and all required minimum HTML tags are included. The correct doctype declaration was used, as well as the html, head, title and body tags. The tags are included in the correct places and all closing tags are included. The tags are all done in the proper form.

CSS Style Declarations

The CSS style declarations are all done in the proper form. HTML tags were properly targeted for applying styles. Overall styling of the page is clear and easy to read.

Content

A clear, descriptive page title is included within the <title> tag. Content is included within the relevant tags, such as the page heading being in the <h1> tag and longer paragraph text included in the <p> tag. If an image is included, the URL is correctly linked and the image is visible in the page.

Saving & Publishing

The file is saved in the .html file extension and is accessible at the URL submitted with the quiz.


20

Assessment Quiz The assessment quiz will include 6 questions, including 4 multiple choice and 2 fill-in.

Performance Objective Assessment Question

Correct Response

Using the browser-based code playground (CN), the learner will create a new HTML document (B), with the correct doctype declaration (CR).

1. Which of these is the correct doctype declaration for an HTML page? a) <!doctype HTML> b) <doctype html> c) <!DOCTYPE html> d) <doctype HTML!>

The correct answer is: c) <!DOCTYPE html>

Using HTML (CN), the learner will create the structure of the web page (B), using the correct required tags (CR).

2. What tag is used as a container for the visible content of the page? a) <footer> b) <section> c) <h1> d) <body>

The correct answer is: d) <body>

Using the code playground (CN), the learner will add content to the page (B), in the correct sections (CR).

3. Where would you put the <title> of your page? a) <head> b) <body> c) <section> d) <footer>

The correct answer is: a) <head>


21

Using CSS (CN), the learner will style the structure and elements of the page (B), using proper style declarations (CR).

4. What tag is used to display blocks of text? a) <a> b) <p> c) <i> d) <br>

The correct answer is: b) <p>

Using the code playground (CN), the learner will save the HTML document (B), in the correct format (CR).

5. What is the correct file extension for an HTML document (the letters after the . in your file name)? _____________________

The correct answer is: .html

Using a browser-based code playground (CN), the learner will create a simple web page (B), with the minimum required tags and proper use of HTML and CSS (CR).

6. What is the URL (web address) of the web page you created?

The correct answer will be the URL of their published web page, which will be automatically included for them.

Date post:	16-Aug-2020
Category:	Documents
Upload:	others
View:	0 times
Download:	0 times

INSTRUCTIONAL UNIT 4 (IU4) … · cover evaluation of the first draft learning materials and...

Documents