add interactivity to your website 1. blogtech-apps-in-education.weebly.com/uploads/3/1/0/6/... ·...

12
Technology Applications in Education Tutorial: Add Interactivity to Your Website in Add Interactivity to Your Website Interactivity can be a compelling and innovative way to engage your students and create experiences that cannot be replicated in other media. Weebly provides multiple functions for you to achieve the interactivity, such as survey, forum, poll, social icons, feed reader, and blog. You will learn how to use those functions in this tutorial. You are required to add a blog to your course site and encouraged to use other interactive function. You can use survey function to create quizzes, worksheets, and surveys for your class. 1. Blog It is convenient to create a blog page in Weebly. As Picture 1.1 shows, you can select “PAGESin the control panel and it will navigate you to the next screen to add the blog. Picture 1.1 Click PAGESin Control Panel Click the Add Page +button in the upper-left corner and choose Blog Pagefrom the drop- down menu. Then specify the blog name and layout on the right side of the screen. Choose save and editto get started with your blog. Picture 1.2 Add a Blog Page Then you will see the next screen as Picture 1.3 and you can edit the blog now.

Upload: others

Post on 25-Jul-2020

1 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Add Interactivity to Your Website 1. Blogtech-apps-in-education.weebly.com/uploads/3/1/0/6/... · Picture 1.4 demonstrates how to manage comments from your readers. Once readers comment

Technology Applications in Education Tutorial: Add Interactivity to Your Website

in

Add Interactivity to Your Website

Interactivity can be a compelling and innovative way to engage your students and create

experiences that cannot be replicated in other media. Weebly provides multiple functions for you

to achieve the interactivity, such as survey, forum, poll, social icons, feed reader, and blog. You

will learn how to use those functions in this tutorial. You are required to add a blog to your

course site and encouraged to use other interactive function. You can use survey function to

create quizzes, worksheets, and surveys for your class.

1. Blog

It is convenient to create a blog page in Weebly. As Picture 1.1 shows, you can select “PAGES”

in the control panel and it will navigate you to the next screen to add the blog.

Picture 1.1 Click “PAGES” in Control Panel

Click the “Add Page +” button in the upper-left corner and choose “Blog Page” from the drop-

down menu. Then specify the blog name and layout on the right side of the screen. Choose “save

and edit” to get started with your blog.

Picture 1.2 Add a Blog Page

Then you will see the next screen as Picture 1.3 and you can edit the blog now.

Page 2: Add Interactivity to Your Website 1. Blogtech-apps-in-education.weebly.com/uploads/3/1/0/6/... · Picture 1.4 demonstrates how to manage comments from your readers. Once readers comment

Technology Applications in Education Tutorial: Add Interactivity to Your Website

in

Picture 1.3 Blog Screen

You can create a new post after clicking “New Post” button. It is simple to edit the content for

the post because you can also directly drag elements and drop here. On the right side of the

screen in Picture 1.4, you can decide whether to share on Facebook and Twitter for promotion. It

is highly recommended to set the comments “Open” so that your students can comment on your

post. After completing editing the new post, you can create tags and category it. Additionally,

you can also generate a secret link to share with your friends. At last, you can choose to save the

post, save as a draft, and also cancel post.

Since you won’t have a lot blog post for this class, I suggest that you remove Categories and

Change Archive to Blogroll. You will add your peers’ blog URL in this section. Type your

peer’s name, highlight the name, click Link icon, and copy/paste his/her blog URL in the URL

box. Make sure to check the box before Open in a New Window.

Page 3: Add Interactivity to Your Website 1. Blogtech-apps-in-education.weebly.com/uploads/3/1/0/6/... · Picture 1.4 demonstrates how to manage comments from your readers. Once readers comment

Technology Applications in Education Tutorial: Add Interactivity to Your Website

in

Picture 1.3: Create a New Post

Picture 1.4: Manage Comments

Picture 1.4 demonstrates how to manage comments from your readers. Once readers comment on

your blog, you can view all of them after clicking “Comments” button. Choose one comment and

you can decide whether to approve, delete, or spam it based on your preference. If you want the

comment to show below your post, choose “Approve”.

Page 4: Add Interactivity to Your Website 1. Blogtech-apps-in-education.weebly.com/uploads/3/1/0/6/... · Picture 1.4 demonstrates how to manage comments from your readers. Once readers comment

Technology Applications in Education Tutorial: Add Interactivity to Your Website

in

Picture 1.5: Change Blog Settings

“Blog Settings” enables you to change the overall setting of the blog. You can choose the default

setting for comment and it is suggested to be “Open”. You can also adjust some other basic

settings such as posts per page, notification email address, safety issues, and date/time. Please

check the Picture 1.5 for a better idea.

On the right side of Picture 1.2, you can change the settings for author description, archives,

categories, and RSS Feed, similar to common online blog.

Now you can get started to create your own blog! Remember to publish all the pages!

2. Discussion Board

Discussion board is a common tool that is widely used through online courses. Weebly can also

enable discussion board by embedding “Forums” from the category of “More” options, which

rightly locates in the lower right corner of the left sidebar. You can directly drag the element to

the page and begin to edit it.

Page 5: Add Interactivity to Your Website 1. Blogtech-apps-in-education.weebly.com/uploads/3/1/0/6/... · Picture 1.4 demonstrates how to manage comments from your readers. Once readers comment

Technology Applications in Education Tutorial: Add Interactivity to Your Website

in

Picture 2.1 Forums

Click “Start a Topic” to create your new discussions. Simply type the title and content in right

text boxes. You can also embed an image, a link, a quote, or HTML codes in the content area.

There are two categories for discussions, news and off-topic. You can category the new

discussion in terms of contents by yourself.

After the content is done for editing, you can change the settings of this new topic. “Subscribe”

will notify you of new comments and replies through emails. “Sticky” is set for important

announcement. If selected, the announcement will show at the top of the forum. If “Closed” is

selected, it means the topic stop receiving comments and replies. You can change those settings

anytime if needed.

3. Poll

Weebly allows you to create a poll and view results at Polldaddy.com. You can find “Poll” in the

category of “More” options and directly drag it to the page. Move the cursor to the new poll and

the editing box will emerge. You can change the alignment of the poll. Also, if you click on

“Edit Poll”, you can even further edit in the Polldaddy.com.

Page 6: Add Interactivity to Your Website 1. Blogtech-apps-in-education.weebly.com/uploads/3/1/0/6/... · Picture 1.4 demonstrates how to manage comments from your readers. Once readers comment

Technology Applications in Education Tutorial: Add Interactivity to Your Website

in

Picture 3.1 Edit the Poll

Picture 3.2 Create a New Poll on Polldaddy.com

Page 7: Add Interactivity to Your Website 1. Blogtech-apps-in-education.weebly.com/uploads/3/1/0/6/... · Picture 1.4 demonstrates how to manage comments from your readers. Once readers comment

Technology Applications in Education Tutorial: Add Interactivity to Your Website

in

Picture 3.3 Edit the New Poll

“Edit Poll” will directly navigate you to Polldaddy.com. Be sure to register for Pollydaddy.com

so that you can view the result. Click “Settings” and complete the registration (Picture 3.2).

Picture 3.2 highlighted the button you can click to create a new poll, and then Picture 3.3 will be

on the screen. You can edit poll questions and answers with instructions on Picture 3.3. In

addition, the right side of the picture is the place that you can change settings of the poll. If there

are other good answers, you can select “Allow Other Answer”. If the right answer is not

restricted to one, you can select “Multiple Choice”. If you select “Randomize Answers”, the

order of answers will be randomized for students to view. If “Block Repeat Voters” is selected, it

means students can only vote once in total. Share this link means the poll will be public. For the

poll results, there are three options, including “Show Results”, “percentage,” and “Hide Results”.

You can decide how to show the result in terms of your needs. The language is pre-assumed as

“Default Language”. After all the settings are done, remember to save the poll.

Then it comes to the second step, poll design. You can choose whether the poll will use

PollDaddy style. Furthermore, you can select the design and size of the poll (as Picture 3.4).

After you make a decision, you can save the design and then confirm the poll will be added to

the page (clicking “Add to page” on Picture 3.5).

Page 8: Add Interactivity to Your Website 1. Blogtech-apps-in-education.weebly.com/uploads/3/1/0/6/... · Picture 1.4 demonstrates how to manage comments from your readers. Once readers comment

Technology Applications in Education Tutorial: Add Interactivity to Your Website

in

Picture 3.4 Poll Design

Picture 3.5 Add the Poll to Page

Page 9: Add Interactivity to Your Website 1. Blogtech-apps-in-education.weebly.com/uploads/3/1/0/6/... · Picture 1.4 demonstrates how to manage comments from your readers. Once readers comment

Technology Applications in Education Tutorial: Add Interactivity to Your Website

in

4. Survey (test/quiz maker)

Survey is a common method of assessment in online courses. Weebly provides easy access to

survey through drag-and-drop function. Survey function is versatile in Weebly because it can

generate survey, tests/auizzes, dropbox for assignments, and etc. “Survey” element are located in

the category of “More” options. After you drag “Survey” to the page, you can see the following

screen.

Picture 4.1 Survey

You may find the content and organization of left sidebar have changed. More elements emerge

in “Form Fields” and include short text box, large text box, options buttons, and etc. You can

drag them to the page and then revise to ensure they can fit the survey. Before editing, you can

select the item and then the editing window will pop out. Then you can edit the item in terms of

your needs. You can view the results in “View Entries” and also in your registered email address.

Then I will mainly introduce how to use survey to create assignment dropbox. It is quite easy on

Weebly because you only need drag “Text” and “File Upload” to the page. The Picture 4.2

shows all the elements you need for an assignment dropbox. Then what you need do is to paste

Page 10: Add Interactivity to Your Website 1. Blogtech-apps-in-education.weebly.com/uploads/3/1/0/6/... · Picture 1.4 demonstrates how to manage comments from your readers. Once readers comment

Technology Applications in Education Tutorial: Add Interactivity to Your Website

in

the title and description of the assignment to the text frame (Picture 4.3). An assignment dropbox

is completed but you need realize that “File Upload” needs a pro account requires you to pay.

Picture 4.2 Assignment

Picture 4.3 Assignment Dropbox Sample

Page 11: Add Interactivity to Your Website 1. Blogtech-apps-in-education.weebly.com/uploads/3/1/0/6/... · Picture 1.4 demonstrates how to manage comments from your readers. Once readers comment

Technology Applications in Education Tutorial: Add Interactivity to Your Website

in

5. Social Icons

Social media can bring in interactivity for the course. To embed social network service in the

course, you can simply drag “social icon” to the page. Click on the elements and the editing

window will pop out. Choose “Add/Edit Icons” and type/paste the link you want to navigate to in

the right box. If you want to insert more SNS accounts, click “Add more” at the bottom for

continued editing (as Picture 5.1 shows).

Picture 5.1 Social Icons

6. Feed Reader

You may consider subscribe to some website or news portal on your course website. So a feed

reader can meet the needs. You can complete the subscription in one minute with great functions

of Weebly.

You can find “Feed Readers” in the category of “More” options. Drag “Feed Readers” to the

page and click on the reader. Then the editing window pops out and what you need do is to

provide the URL that you want to subscribe in the text box. Besides, you can also adjust the

settings of width & height, position, spacing, and other advanced settings, such as number of

items and text length using the editing window (Picture 6.1).

Page 12: Add Interactivity to Your Website 1. Blogtech-apps-in-education.weebly.com/uploads/3/1/0/6/... · Picture 1.4 demonstrates how to manage comments from your readers. Once readers comment

Technology Applications in Education Tutorial: Add Interactivity to Your Website

in

Picture 6.1 Feed Reader