Application: 1 – 4 pm basic html UM Lessons Random assignment

Application: 1 – 4 pm

• basic html

• UM Lessons

• Random assignment

What is HTML?

• HTML stands for Hyper Text Markup Language - it is the

language used to write web pages

HTML Continued

• HTML is like a paint by numbers kit

• Instead of numbers there are things called “tags”

• A tag basically tells the internet how you want something displayed

• Every starts with < and ends with >

Why Use HTML?

• HTML allows the most control of what’s going into your website

• e.g. When making surveys, it allows you to control the font size, color, and positioning of questions

Drawbacks of HTML

• You have to learn the language• Writing web pages in HTML is very time

consuming• Unlike the survey program that will be

addressed later, HTML requires space on a server to store both the website and the data that is submitted

• It’s best used as an editing tool when using easy survey programs

Basic html: Tags

• A tag has two parts a beginning tag < and an end tag >

• For example:How does a title such as

“The Effects of Family Pets on Child Development”

turn into

“The Effects of Family Pets on Child Development”?

• One can’t simply push the little B button at the top of the screen as in Microsoft Word, so what do we do?

Tags Continued

• The solution is to use a tag:

In order to bold a word, such as dog for example, you MUST put the <b></b> tags around it.

• <b>dog</b> on a web browser becomes dog• The ending tag, </b> in this case, is extremely important.• This tag tells the browser where to stop applying a tag• Without it, the entire web page could end up bolded or,

as in the case of some web link or form tags, the rest of the page might not display at all.

Tag HTML Code Example Browser Display

Example

<B> (Bold)

I want to <B>emphasize</B> this!

I want to emphasize this!

<I> (Italic) I want to <I>italicize</I> this!

I want to italicize this!

<U> (Underline)

I want to <U>underline</U> this!

I want to underline this!

More basic tags…

<br> inserts a line break into your document unlike the others, it does not need an end tag

Simple web page

• Go to START

Accessories

Open the program Notepad

• We will start with the most simple webpage

Here is the very least HTML code that can be called a page:

HTML Code Browser Display

<HTML> <HEAD> <TITLE>This is my page title! </TITLE> </HEAD> <BODY> This is my message to the world! </BODY> </HTML>

This is my message to the world!

You don't need to know the meaning of all these tags. Type a title between the <TITLE> and </TITLE> tags. It will appear at the top of the browser display. Your page contents go between the <BODY> and </BODY> tags. Play with bold, underline, and italics tags. Save the file as .html (example: mypage.html), then you can view it with a browser.

Simple web page

Hypertext link in html

A hypertext link is a special tag that links one page to another page or resource. If you click the link, the browser jumps to the link's destination. There are two parts to a link: One part tells the browser what to do. The other part tells the human what to do.

Here is an example:

HTML Code Browser Display

<A HREF="http://www.google.com">Go to Google</A>

Go to Google

http://www.microsoft.com/

Learning basic HTML

Here are some websites where you can easily

learn basic html:

http://www.mcli.dist.maricopa.edu/tut/lessons.html

http://webdesign.about.com/od/beginningtutorials

/a/bl_htmltutorial.htm

Or, you can simply find a website you like online

and got to VIEW Page Source, to come up with

the html tags for that page… Let’s try that…

http://www.mcli.dist.maricopa.edu/tut/lessons.html

http://webdesign.about.com/od/beginningtutorials/a/bl_htmltutorial.htm

http://webdesign.about.com/od/beginningtutorials/a/bl_htmltutorial.htm

Microsoft FrontPage

Isn’t there a way we can get the control of HTML without having to actually learn it?

Yes!

Microsoft FrontPage

• Microsoft FrontPage, and other programs like it, are what is called a WYSIWYG (what you see is what you get) editor

• It allows you to place words, pictures, movies, forms, etc. where you want them on the page without having to type any code

• It has the same style toolbars (e.g. bold, italic, size change, font, color, etc.) as Word or PowerPoint, plus the ability to add in radio buttons, drop down menus, page dividers, buttons, etc., anywhere you want

An Example

• The following HTML Code:

<html>

<head><meta http-equiv="Content-Language" content="en-us"><meta name="GENERATOR" content="Microsoft FrontPage 5.0"><meta name="ProgId" content="FrontPage.Editor.Document"><meta http-equiv="Content-Type" content="text/html; charset=windows-1252"><title>Kevin</title></head>

<body text="#FF0000" bgcolor="#000000">

<center"><h6>Kevin's Page</h6></center><br><br><img border="0" src="dog.jpeg" width="177" height="242"></p><center"><h5>Welcome to my page!</h5></center><hr><br><hr><hr color="#FF0000"><h5><b>Email me <a href="mailto:[email protected]">here</a></b></h5>></body>

</html>

Example Continued

• Creates:

UM Lessons

• UM Lessons is a program hosted by the university on the university server

• UM Lessons can be found at http://lessons.ummu.umich.edu/2k/

http://lessons.ummu.umich.edu/2k/

Lessons example survey

Here’s an example of what you can do with UM Lessons:

http://lessons.ummu.umich.edu/2k/utilize/reader/skonrath/media_issues

Let’s have a look…

Strengths of UM Lessons• Fairly easy to use• Free• Can create surveys with random assignment• Can add images and Quicktime videos• Can have participants login with uniqname or

can recruit anonymous ones• The page is automatically stored on the

university server• The data is stored in a downloadable form on

the university system• They make periodic updates based on user

feedback

Drawbacks

• Limited control of design, but can use basic html to edit

• No pull-down menus for multiple choice data• No statistical analyses, but easy excel download

of datafile• Cannot collect reaction time data

Lessons Hierarchy

WORKSPACE. In your workspace you can create units and access other units if other owners have given you access.

UNITS are collections of lessons. Each unit has its own access lists. The manage list defines who can build, modify, or analyze lessons in that unit. The Student list defines how and who can take the lessons. Units can contain resources for use within lessons.

LESSONS are surveys (or quizzes if you’re an instructor). Lessons can include questions, answers, responses, and feedback. Lesson settings determine when and how students interact with the lesson.

Lessons SecurityUse this information to fill out the IRB Approval form...

Physical Security: The UM.Lessons servers are housed in one of the secure machine rooms at ITCS's Arbor Lakes facility. The building requires card-key access and the machine rooms require further authorization.

Respondent Identity Protection: UM.Lessons allows the lesson owner/manager (the "manager") to choose from one of three respondent access settings: authenticated access, anonymous access, and self-identified access. If the manager chooses authenticated access, by default each respondent is identified in the data by uniqname or email. 1) BLIND authentication: Blind lessons do not associate the uniqnames or email addresses with respondent data. Blind lessons do provide an alphabetical list of respondents who submitted the lesson. This list is only provided once fifteen respondents have submitted. Start and submit times are provided for each respondent. In special situations (out of concern for national security or a medical emergency), the UM.Lessons developer can access the uniqname identity of a BLIND respondent. 2) Anonymous access does not require the respondent to self-identify or use a password to access the lesson. Respondents are identified in the data by random user numbers. Start and submit times are provided for each respondent.3) Self-identified access prompts respondents to identify themselves on the first page of the lesson, and that identity is associated with respondent data. Start and submit times are provided for each respondent.

Encryption: When a UM.Lessons lesson is set to authenticated access, respondent data is encrypted as it travels to the UM.Lessons server. By default, respondent data is not encrypted when an lesson is set to anonymous or self-identified access. A manager may request that an anonymous lesson be encrypted.

Access to Data: Data gathered via a UM.Lessons lesson is stored on a secure server (https) that requires uniqname and Kerberos (or Friend) access. The manager of the lesson has control over which individuals can access the data. Data can be downloaded by an manager as an Excel, CSV, or TSV file. Three UM.Lessons senior support staff also have access to all UM.Lessons data.

Creating a UM Lessons survey

• Go to lessons.ummu.umich.edu• Hopefully all of you have already requested a

workspace. If not, sit next to someone who has one.• On the left hand column, click on “My Workspace”• Login using your uniqname and password• You can either:

– Request a New Unit– Click on a unit you already have

UnitsUnits have the following menu options (on the left hand side of the screen):

1) Lessons: Click this to access any lessons you have created

2) Unit resources: Resources available for all lessonstext excerpt: text that you plan to reference throughout the lessonsimage: typically JPEG or GIF formattedURL: resource (Acrobat PDF, Excel spreadsheet) that students need to download to use. file: upload a file (Acrobat PDF, Excel spreadsheet) that students need to download to use. Please note: Lessons can only support small files. For larger files, please use the URL option above.sound clip: possibly Sun/AU, WAV, AIFF, or QuickTime formattedQuickTime animation/movie/etc

3) Access:a) Who can manage these lessons?b) How do participants sign on?

Unit Demo

• I’ll show you how to create a new lesson, then you try it out…

Creating Lessons

From the Unit level, you can either1) Create a new lesson

2) Select a lesson that you have already created

Creating a new lesson

name

title

ignore this

• Ok, now you try…

Lessons have the following menu options (on the left hand side of the screen):

1) Questions: more later…

2) Resources: Resources available only to this lesson. Same file types as before.

3) Publish: Can make the lesson available…a) right nowb) on a particular date and time (can also end it at a particular time)

4) Reports: a) HTML report (Select “all work”) to take a quick look at what’s happening with the data without actually downloading itb) Download excel (Select “all work”) full excel data file; can easily be converted to SPSS

5) Tools:a) Copy lesson: to this unit or to another one useful for creating different versions of survey for random assignmentb) Munge questions into this lesson brings questions from other lessons to this onec) Setup branching never used this one but may be usefuld) Use response uses a participant response to customize future questions (I’ve never used this one either)e) Change “Show title” setting to show or not to show (self-explanatory)f) Delete lesson be careful! there is no way to retrieve it once it’s deleted.g) Archive work I don’t recommend using this one; difficult to retrieve old datah) Clear work will clear all participant responses – be careful!

• Consent forms & debriefing…

Questions• note: useful for directions/reminders

• short answer: essays or single-word prompting

• fill-in-the-blank: students type in an omitted part of the answer. Mark up your question per this example: The {rain} in {Spain} falls mainly on the {plains}

• true-false: students respond to the question with true/false (or yes/no)

• multiple choice: students pick a single answer out of a list of possible answers

• multiple response: the student can check all answers that apply to a question

• rating scales: collect student opinion on one or more 5-point hi-low scales Number of scales:

• opinion poll: looks like a multiple choice question to the student, but tracks a "score" no matter which choice the student makes

• multiple rating questions: ask several questions around one rating scale Number of questions:

Questions continued…

• You can place a resource beside your questions

• Let’s try to:1) Add a resource to this lesson (pic, url, etc)2) Create a question

• I’ll walk around and give you individual feedback…

Setting up a cluster• Clusters are groups of questions that you want to be together.

• Beside “New Question,” look for the “Set up cluster” link

title

Random assignmentA. 1) Go to: http://sitemaker.umich.edu/surveys/files/political.htm

2) View Page Source 3) Edit Select all 4) Edit Copy5) Open a Notepad file (Start Accessories Notebook)6) Edit Paste

B. Make the following changes:

1) Change the title: <title>Political Opinions and Views Study</title>

2) Add your own links:randomlinks[0]="http://lessons.ummu.umich.edu/2k/study/political_opinions" randomlinks[1]="http://lessons.ummu.umich.edu/2k/study/politicalopinions" randomlinks[2]="http://lessons.ummu.umich.edu/2k/study/political-opinions"

3) Save as html

4) Post to a website UM sitemaker is free & easy **Note: This is the link you give participants

Hands on Demo

• I’m available for the rest of the time to provide hands on assistance…

• Thanks for taking time to attend this workshop

Documents

Application: 1 – 4 pm basic html UM Lessons Random assignment