3/23/23 Page 1 of 28
Instructor
Guides
BlazeVIEW HTML and Widgets
Template
3/23/23 Page 2 of 28
Table of Contents
Overview ....................................................................................................................................................... 3
BlazeVIEW HTML and Widgets Template ..................................................................................................... 4
Downloading the BlazeVIEW HTML and Widgets Template ..................................................................... 4
Importing the File into Your Course .......................................................................................................... 5
Course Homepage Customization................................................................................................................. 8
Accessing the Homepage Selector ............................................................................................................ 8
Course Homepage Options ....................................................................................................................... 9
Course Homepage Option 1 ................................................................................................................ 10
Course Homepage Option 2 ................................................................................................................ 10
Course Homepage Option 3 ................................................................................................................ 11
Course Homepage Option 4 (Recommended Option) ........................................................................ 11
Course Homepage Option 5 ................................................................................................................ 12
Course Homepage Option 6 ................................................................................................................ 12
Course Homepage Option 7 (Recommended Option) ........................................................................ 13
Selecting a Course Homepage ................................................................................................................ 13
Things to Note ......................................................................................................................................... 14
Working with Template Pages .................................................................................................................... 14
Creating a New Content Topic from a Template .................................................................................... 15
Editing Template Pages ........................................................................................................................... 19
Copying Text ........................................................................................................................................ 19
Selecting a Heading Structure ............................................................................................................. 19
Editing Images ..................................................................................................................................... 20
Finding Creative Commons Images ..................................................................................................... 20
Replacing Images ................................................................................................................................ 21
Replacing Videos ................................................................................................................................. 21
Welcome Widget ........................................................................................................................................ 22
Setting Up the Welcome Widget ............................................................................................................ 24
Visual Table of Contents ............................................................................................................................. 26
When to Use the Visual Table of Contents Widget ................................................................................ 26
Visual Table of Contents Best Practices .............................................................................................. 27
Adding a Module Description and Image for the Visual Table of Contents............................................ 27
3/23/23 Page 3 of 28
Overview
The BlazeVIEW HTML and Widgets Template is designed with specific elements to enable best practices
for online teaching and in turn, student success. The template includes dynamic components that you
can customize to engage learners in your course. These components include:
Course homepage layout options
Choose from seven layout options to greet students upon entering your course, some of which feature
widgets that help improve engagement.
• The Welcome widget can be personalized with a greeting, course-specific instructions, and
term-long reminders.
• The Visual Table of Contents widget allows students to track their completion and quickly pick
up where they left off in any module.
• The Slim Announcements widget provides previews of the course announcements you make, so
fewer announcements are overlooked.
Start Here module with a VSU Syllabus
The HTML Syllabus page contains all necessary institutional components with live links for students. This
syllabus offers a single location for transparent information regarding grading, pacing, and policies.
Sample module + seven additional placeholder modules
The sample module, Module 1, includes template pages for a Module Overview, Learning Materials, and
a Video Lecture along with placeholders for a quiz, assignment, and discussion. Module 1 models best
practices for linear course design by allowing students to navigate through
• an introduction to the content and objectives
• the instructional materials they need to engage with and understand
• activities and assessments that measure their mastery of the objectives.
BlazeVIEW Student Guide module
The BlazeVIEW Student Guide module contains links to videos and instructions for students to use
BlazeVIEW and its embedded tools. Students can reference how to update their settings, submit
assignments and quizzes, view grades, and communicate with you and their peers.
3/23/23 Page 4 of 28
BlazeVIEW HTML and Widgets Template
Downloading the BlazeVIEW HTML and Widgets Template
1. Open the eLearning Import Files Google Drive folder.
2. Click the BlazeVIEW HTML and Widgets Template folder to open it.
3. Select the BlazeVIEW_HTML_and_Widgets_Template_Import_File.zip file.
4. When the link opens, select the Download icon to download the file to your computer.
3/23/23 Page 5 of 28
5. After the file downloads, click on the selector arrow at the right of the file name and select
Show in Folder.
6. The BlazeVIEW HTML and Widgets Template Import compressed (zipped) file should
download into your Downloads folder so that you can import it into your course(s).
Importing the File into Your Course
Note: We recommend importing the BlazeVIEW HTML and Widgets Template into an empty course
shell.
1. Navigate to the course you plan to import the BlazeVIEW HTML and Widgets Template.
2. Click the Admin Tools icon on the Minibar and select Import/Export/Copy Components.
3/23/23 Page 6 of 28
3. Select Import Components, then click Start.
3/23/23 Page 7 of 28
4. Click the Upload button and browse to upload the BlazeVIEW HTML and Widgets Template file
you downloaded earlier, then click the Import All Components button.
5. When the import is complete, click on the View Content button to navigate your course's
Content section.
3/23/23 Page 8 of 28
Course Homepage Customization
After the import is complete, choose your desired course homepage layout.
The course homepage is the first thing students see when they enter your course. Selecting a homepage
layout that suits your course, your teaching style, and your students’ needs ensures success for all.
Important Note: To take full advantage of the options available in the BlazeVIEW HTML and Widgets
Template, select Course Homepage Option 4 or Course Homepage Option 7.
Accessing the Homepage Selector
1. Enter the course of which you wish to change the homepage.
2. From the NavBar, select Design > Course Admin.
3. Under the first area, Site Setup, select Homepages.
4. You will see a list of available course homepage options. Previews and descriptions of each
follow. Your current active homepage will be indicated with a checkmark and the word “Active”
on the right side of the row.
3/23/23 Page 9 of 28
Course Homepage Options
When selecting a course homepage, decide whether or not you wish to set up available widgets. The
Welcome Widget and the Visual Table of Contents Widget require some setup to be attractive and
effective for your course.
3/23/23 Page 10 of 28
Course Homepage Option 1
Two equal columns featuring Announcements, Day 1, Course Administration, Role Switch, GALILEO
Search, Content Browser, Calendar, Work To Do, and User Links.
Course Homepage Option 2
Two equal columns featuring Slim Announcements, Day 1, Calendar, Work To Do, Content Browser, Role
Switch, and Course Administration widgets.
3/23/23 Page 11 of 28
Course Homepage Option 3
Two equal columns featuring Slim Announcements, Visual Table of Contents, Calendar, Work To Do, Day
1, Galileo Search, Role Switch and Course Administration widgets.
Course Homepage Option 4 (Recommended Option)
Two equal columns featuring the Welcome Widget, Slim Announcements, Visual Table of Contents,
Calendar, Work To Do, Day 1, Galileo Search, Role Switch and Course Administration widgets.
3/23/23 Page 12 of 28
Course Homepage Option 5
One wide and one narrow column featuring Slim Announcements and Visual Table of Contents,
Calendar, Work To Do, Course Administration, Role Switch, and Galileo widgets.
Course Homepage Option 6
Two equal columns featuring the Visual Table of Contents widget, Announcements, Day 1, Calendar,
Work To Do, Galileo Search, Role Switch and Course Administration widgets.
3/23/23 Page 13 of 28
Course Homepage Option 7 (Recommended Option)
One wide and one narrow column featuring Slim Announcements, Welcome, and Visual Table of
Contents, Calendar, Work To Do, Course Administration, Role Switch, and Galileo widgets. There is no
Day 1 Widget present in this option.
Selecting a Course Homepage
To change your course homepage, use the dropdown selector at the top of the page. Select from the
available options, then click Apply.
3/23/23 Page 14 of 28
Things to Note
Best Practice: If you choose to change your course homepage layout after a course has started, post an
announcement notifying students of the change.
Reminder: When selecting a course homepage, decide whether or not you wish to set up available
widgets. The Welcome Widget and the Visual Table of Contents Widget require some setup to be
attractive and effective for your course. If you do not intend on setting up these widgets, select a course
homepage option that does not include them.
Note: The Slim Announcements Widget will not display a video. You may still place a video within an
announcement, but please use text within the announcement to indicate to students that they should
click the announcement title to view the full contents.
Working with Template Pages
The BlazeVIEW HTML Template comes with several purpose-driven page types, such as Course
Introduction, Module Introduction, Meet Your Facilitator, Basic page, Video Lecture, and Conclusion
pages. Use the Preview feature to view each page in the Manage Files “pages” folder.
3/23/23 Page 15 of 28
The following HTML template pages are included in the BlazeVIEW HTML and Widgets Template:
1. The Blank (00_blank) page is an empty page with a banner image
2. The Course Introduction (01_intro) page features a full-screen image for visual impact, and a
clean area for course description.
3. The Module Introduction (02_module_intro) page features a prominent banner image across
the top and a numbered list can be used to list a module’s learning objectives. This makes it
ideal as the first page of a module in a course.
4. The Meet Your Facilitator (03_meet_your_facilitator) page can serve as a dedicated space to
present facilitator’s expertise, experience and personality.
5. The Basic (04_basic _page) page is a general-purpose layout.
6. The Video Lecture (05_video_lecture) page is a great way to present video content, while
accompanying it with supporting context, explanations and activities.
7. The Conclusion (06_conclusion) page makes an excellent page to conclude each module. Using
a consistent layout for conclusions will help signal to course participants that they have reached
the end some portion of the course content.
8. The Elements (07_elements) page includes samples of some commonly used page elements
which you can copy to other pages.
9. The Image (08_images) editing page illustrates the different ways images can be used.
10. The Accordion (09_acordions) page includes samples of interactive accordions which you can
copy to other pages.
11. The Tab (10_tabs) page includes samples of interactive tabs which you can copy to other pages.
Creating a New Content Topic from a Template
The aforementioned HTML page templates are available to use when you create new HTML pages.
1. In a module, click Create a File from the Upload/Create context button.
3/23/23 Page 16 of 28
2. Enter a name for the file and click Browse for a Template.
3. Select Course Offering Files.
4. Select the BlazeVIEW_HTML_Template folder.
5. Select the pages folder.
3/23/23 Page 18 of 28
Note: Applying the template to an existing page will overwrite the content and you will lose your work.
Click Cancel to discard the changes.
3/23/23 Page 19 of 28
Editing Template Pages
You can use the HTML editor to make quick and easy changes without needing any prior knowledge of
HTML/CSS.
Enter your content and use the available controls to apply formatting to your text. Detailed instructions
for editing content are included on each template page.
Copying Text
When writing content, it is a great practice to first write content in a document, such as Microsoft Word.
It allows stakeholders to easily collaborate and track changes to content. It also allows you to spot
spelling and grammar errors early on.
When pasting text from a Word document into the HTML editor, however, some of the document’s text
styling will copy over. This will clash with the styles that are carefully crafted for this template. You can
use Ctrl+Shift+V (Cmd+Shift+V on Mac) OR right-click to paste copied text as unformatted text to HTML
editor.
Selecting a Heading Structure
When adding content to pages, it is important to pay attention to its heading structure. Proper heading
structure is especially important for learners with disabilities, as assistive technologies (like screen
readers) rely on headings for navigation.
The HTML Editor provides format options for six heading levels, paragraph style, and a few additional
options. To create a heading, select your text, and choose the appropriate heading format from the
Format list.
3/23/23 Page 20 of 28
Editing Images
Images can be added to any of your pages to create visual interest and help break up text-heavy
courses.
Inline image editing: the HTML editor has advanced image editing features, including resizing, flipping,
rotating, and adjusting brightness, sharpness and color.
The HTML editor also provides Align Left, Align Right and Align Full functions to place an image in
particular location.
Note: Follow copyright and fair use guidelines to insert images with a Creative Commons license. For
more information, check out the Creative Commons license guidelines
.
Finding Creative Commons Images
There are a number of royalty-free and/or creative commons licensed images you can use for your
BlazeVIEW course. Images will need light editing to change their dimensions to match the 754 pixels
wide by 400 pixels high (or larger) size recommended.
Check out some of the websites below:
• Creative Commons (CC) Search
• Google Image Search (images, tools, and usage rights)
• Carleton Library Site
Public Domain and CC0 License Photo Sites
A number of free, stock images are available for use in your teaching and learning. Use a search engine
to find royalty-free images, or visit the links below and search for images to use in your content. Be sure
to follow the relevant use guidelines and specifications. If you have any questions about image
copyright, please email blaz[email protected].
• pixabay.com
• pexels.com
• unsplash.com
• burst.shopify.com
• gratisography.com
• stocksnap.io
• publicdomainpictures.net
• metmuseum.org/art/collection
3/23/23 Page 21 of 28
Replacing Images
Several of the template files come with image placeholders. To replace the image:
1. Select Edit HTML from the context drop-down beside the topic’s title.
2. Once you can edit the topic, select the image and delete it. Do not move your cursor.
3. Click the Insert Image icon.
4. Select the source for your image.
5. Click the Choose Destination button to save it to the folder you want.
Replacing Videos
The Video Lecture page includes an embedded YouTube video, which can scale in any browser or mobile
devices.
To replace the video:
1. Select Edit HTML from the context drop-down beside the topic’s title.
2. Delete the video and leave the cursor in place. To do so,
a. click on the video and pause it
b. carefully click the area preceding (left of) the video within the colored video container
c. hit the Delete key.
3. Click the Insert Stuff icon.
4. Do one of the following:
a. Select YouTube and search for the YouTube video; or
b. Select Enter Embed Code and paste in the YouTube video embed code.
5. Click the Insert button.
Known issue: it is difficult to replace the video in certain browsers. If you are comfortable with HTML
code, it is easier to search and replace the iframe code in the HTML Source Editor.
3/23/23 Page 22 of 28
Welcome Widget
The Welcome Widget adds a window overlaid on your course homepage intended to welcome students
to the course each time they log in and access the homepage, until they dismiss it. The Welcome Widget
contains four pages, referred to as “steps,” of information to promote student success in BlazeVIEW.
1. Step 1: Course Introduction – This page is intended for you to personalize with your course title,
a welcome message, and any key reminders or information you would like students to refer to.
See Setting Up the Welcome Widget
on Page 24 for further instructions.
2. Step 2: Navigating BlazeVIEW and this Widget – This page contains an instructional video on
navigating the Brightspace D2L Learning Environment (BlazeVIEW). Students will also learn how
to dismiss and reopen the Welcome Widget, also referred to as the Quick Guide.
3/23/23 Page 23 of 28
3. Troubleshooting Common Issues – This page contains a 5-part interactive accordion. When
students click and expand the rows, they will find the solutions to common BlazeVIEW
problems.
4. Who to Contact for Help – On this final page, students will find a table of contact information,
categorized by help topic. This page is intended to provide students with next steps if
troubleshooting does not work.
3/23/23 Page 24 of 28
Setting Up the Welcome Widget
The Welcome Widget is automatically deployed in your course. To remove the Welcome Widget, you
must select a course homepage option that does not include the Welcome Widget. See
Course
Homepage Customization on Page 8 for futher instructions.
Note: The Welcome Widget pulls content from a module using the name “Welcome.” If any other
module in your course contains the keyword “welcome” in the title, you must change it.
1. From the NavBar, select Content.
2. You will see the Welcome module under the Table of Contents.
3/23/23 Page 25 of 28
3. Personalize the Course Introduction page by selecting Edit HTML from the indicated dropdown
arrow.
4. Edit the page content to include your course information and anything else you would like to
incorporate. When you are finished, click Save and Close.
3/23/23 Page 26 of 28
Visual Table of Contents
The custom Visual Table of Contents widget creates a tile for every module created in the course. A tile
is automatically created for each Module in the course. The information in the tile is pulled from the
Module description in the Content area, and can contain a unique image for each module. Any text
added to the module description can be pulled in as information about the module. The widget is also
smart enough to know where a learner left off, so they can select the module title to get to the top level
of the module or select the ‘Next Topic’ button to go to the next unread topic in that module.
Note: If you choose not to use the Visual Table of Contents, see Course Homepage Customization
on
Page 8 for instructions to select an option that instead contains the Content Browser.
When to Use the Visual Table of Contents Widget
The Visual Table of Contents widget is a great choice if…
…you have a content-driven course
When sharing content and activities is the primary goal of your course, the Visual Table of Contents adds
a highly visual, simplified organization system right to your homepage.
…you have a traditional linear course structure
The layout of the Visual Table of Contents encourages continuous progression through a course, module
by module, and topic by topic.
…you want to promote learner progress
The widget visualizes progress and launches learners into the first unvisited topic reinforcing the
importance of completion.
3/23/23 Page 27 of 28
Visual Table of Contents Best Practices
• Keep your module description short and to the point. Your module’s description is automatically
displayed on the “back” of each module flip card. Keep the description to less than 50 words so
it fits on the card.
• Picture size matters. The image used in the module description should be 754 pixels wide by 400
pixels high (or larger) so it will properly display in the widget. We recommend using a .jpg file
type, but the widget supports .png, and .svg.
Adding a Module Description and Image for the Visual Table of Contents
1. From your BlazeVIEW course homepage, click Content in the course Navbar.
2. Under Table of Contents in the left sidebar, click on the module you want to edit.
3. Under the module title, click Add a description… or click on the existing module description.
4. Use the HTML editor to add an image. Click the Insert Image button in the Editor toolbar and
choose the image location.
o If the image is on your computer, select My Computer. Choose the file from your
computer and drag and drop it on the designated area, or click Upload to select the
image from your computer. Then, click Add.
o If the image is located on the web, select URL. Enter or paste the web address for the
image, then click Add.
o If the image is located within the course, select Course Offering Files. Choose the file
from your course files, then click Add.
5. Once you click Add, the system will prompt you to add an alternative text for the image
selected. To ensure that the image is accessible to all users, enter a short description of it in the
Alternative Text field or check the ‘This image is decorative’ box if it is a decorative image.
TIP: The alternative text should convey the message you want students to get when they look at
the image. If the image refers to an intricate infographic that needs further explanation, enter a
short description in the provided Alternative text field and add a more detailed description
under or next to the image in the HTML textbox so all learners benefit from the explanation.
WARNING: Only select ‘This image is decorative’ if the image contains no information valuable
to the student. You can always edit the image later and edit the alternative text.
3/23/23 Page 28 of 28
6. Click Update. The image is now saved in your module description and will be displayed in the
Visual Table of Contents.
For more information or assistance, call 229-245-6490 or email [email protected].
For 24/7 BlazeVIEW or GoVIEW assistance, call 855-772-0423 or visit GeorgiaVIEW Help Center.
