Interactive Video Vignettes User Manual

Authors Jonathan Crawford Matthew Setlow

Plaintext

User Manual

Matthew Setlow
Jonathan Crawford
1
The Interactive Video Vignettes Project
Directed by Priscilla W. Laws (Dickinson College) and Robert B. Teese (Rochester Institute of
Technology).

Patrick Cooney (Millersville University), David Jackson (Dickinson College), Kathleen Koenig
(University of Cincinnati), Thomas Reichlmayr (Rochester Institute of Technology) and
Maxine Willis (Dickinson College).

Students at Rochester Institute of Technology and Dickinson College:
Bradley Bensch, Thomas Connors, Jonathan Crawford, Nick Fuschino, Rohit Garg, Hollie K.
Grant, Peter Gyory, Monir Hossain, Jacob Juby, Chad Koppes, Trevor Koppes, Joseph
Ksiazek, Jen Lamere, Cailin Li, Nicolas McCurdy, Samuel Nelson, Hector Piñeiro II, Peter-
John Rowe, Chirag Chandrakant Salian, Matthew Setlow, Angel Shiwakoti, Brian Soulliard,
Juntian Tao, Gordon Toth, Devin Warren, Todd Williams, and Brian Wyant.

http://www.ComPADRE.org/ivv/

This material is based in part upon work supported by National Science Foundation (NSF)
grants DUE-1123118, DUE-1122828 and DUE-1245147. Any opinions, fndings and
conclusions or recommendations expressed in this material are those of the author(s) and do
not necessarily refect the views of the National Science Foundation.

2
Table of Contents
Introduction 4
Vignette Example 4
Projectile Motion Example 4
Making Your Own Vignettes 8
Setup/Installation 8
Opening, Hosting, Sharing Vignettes 8
Overview of Components 9
Workspace, Page, Widget 9
Page Interactions 11
Open, Edit, Delete, Connect, Branch 11
Building a Vignette Step by Step Tutorial 12
Widgets 19
Login 19
Text 20
Video 21
Question 22
Image 23
Frame Player 24
X-Y Analysis 25
Displacement Analysis 26
Graph 27
Table 29
Answer 30
Certificate 31
Widgets Under Development 32
Previewing Vignettes 33
Start Preview, Stop Preview 34
Advanced Features 34

3
Introduction
Interactive Video Vignettes (IVVs) are ungraded web-based assignments for introductory
physics students. They combine the convenience of online video with video analysis and the
interactivity of individual tutorials. Each online vignette addresses a known learning
diffculty. A typical vignette takes about 10 minutes or less to complete. It invites each
student to make predictions, perform observations, and draw conclusions about a single
phenomenon. The design of vignettes is informed by the outcomes of physics education
research and is being refned through a research-based development process. The possible
uses of vignettes include:

• Online assignments similar to ungraded homework that carry completion credit (This
enables students to make authentic predictions without feeling they are being judged.)
• Examination preparation
• A tutorial setting where students work in collaborative groups
• A fipped classroom assignment where a vignette is completed before its topic is
introduced in class
• An online textbook enhancement.

Vignette Example
To view example vignettes, go to the following link,
http://www.compadre.org/IVV/collection.cfm. This section of the user guide is a brief
overview of the components involved in composing a vignette.

Projectile Motion Example
In this section the Projectile Motion Vignette, found at the link above, will be described.
Page One - The frst page of this vignette consists of a login page. The user is asked to enter
their name. The input the user provides is then stored within the vignette and may reappear
later in the Certifcate page. After the user types in their information, they may proceed with
the vignette by left-clicking the “Next Page” button.

4
Page Two - The second page consists of a video player. The user is presented with a short
video that provides background on the subject. After the user watches the video, they may
proceed with the vignette by left-clicking the “Next Page” button.

Page Three - The third page consists of four different zones: a video player, a frame player
and two question zones. When the page frst loads, the video player, in the top left, will
automatically play a video that provides additional background information on the subject.
At the bottom of the page the user is presented with two questions. A frame player is
provided in the top right corner for users to scrub frame by frame to better answer the
question. After the user answers the questions, they may proceed with the vignette by
clicking the “Next Page” button.

5
Page Four - In the fourth page the user is presented with an interactive activity. There is
text in the bottom half of the page. The user is asked to click on the center of the ball in each
frame of the video to mark the position. The purpose of this activity is to analyze the
horizontal motion of the ball. A video in the top left of this page gives the user a hint about
the objective of the task. As usual, the user proceeds by clicking the “Next Page” button.

Page Five - In the ffth page the user is given feedback as well as the correct explanation to
the frst question asked. At the top of the page a video plays in which the instructor reinforces
the concept and recaps the purpose of the activity.

6
Page Six - The sixth page is exactly the same as the fourth page except the activity on this
page is analyzing vertical motion.

Page Seven - The seventh page is exactly the same as the ffth page except it corresponds to
the vertical motion analyzed from the corresponding page.

Page Eight - Page eight contains a single section with a video player. The video recaps the
vignette and summarizes the lesson.

Page Nine - The last page of the vignette presents the user with a printable certifcate. The
login data collected from the frst page of the vignette is incorporated within the certifcate.

7
Making Your Own Vignettes
Making a Vignette is easy to do with the free software, Vignette Studio. It is a Java based
application that uses a visual programming environment.

Setup/Installation
To install the Vignette Studio software:

1. At this link: http://www.compadre.org/IVV/studio.cfm , click on the download
button at the bottom of the page.
2. A zip fle will be downloaded to your browser's standard download folder.
3. Unzip the zip fle.
4. The downloaded folder named “Vignette Studio” contains the Java application
“VignetteStudio-1.7.5.jar”, “README-Make-Your-Own.txt” quick guide,
“Sample_Vignette_Resources” folder with resources (that accompany the Step-by-Step
guide in the Building a Vignette Step by Step Tutorial chapter),
“Vignette_Studio_Manual” this manual in the form of a .pdf fle, “Practice_Materials”
folder with example videos and “BB_Script.pdf,” a sample Interactive Video Vignette
script.
5. To open the application double click on the “VignetteStudio-1.7.5.jar” fle.
6. A window with a new workspace will appear.

Opening Vignettes
All of the resources and software of a vignette are stored in a single folder. To open a vignette
locate the “.vignette” fle within the main folder of the Vignette fle structure. To do this use
the File... Open menu item in Vignette Studio. The other folders within the main folder
contain videos, images and other resources required for compiling the Vignette.

Sharing and Hosting Vignettes
In order to share a Vignette it must be uploaded to an available website. See the website
www.compadre.org/ivv for tips on how to fnd a suitable website. Once a website domain is
acquired, the entire Vignette fle folder may be uploaded. Vignettes are scripted in HTML
format and are intended to be utilized with many of the most popular web browsers. Safari,
Chrome, Firefox, Opera and Internet Explorer are all compatible with Vignettes.

8
Overview of Components
Workspace - A blank area for dragging pages and building Vignettes. This is where the
functionality of the vignette and the interactions between the pages can be seen. To add a
page to the workspace, simply click and drag one of three page templates to the workspace.
One page must be designated as the 'start page.'

Page - Vignettes consist of several pages. Create a page by dragging a page template
anywhere onto the Vignette Studio workspace. There are three page templates. The template
will divide a page into one, three, or four zones. The three-zone page has two quarter zones
on top and one half zone on the bottom. The four-zone page has four quarter zones. To access
a certain page from the workspace, double-click the icon of the desired page in the
workspace.

Widget - A single self-contained function may be placed within each zone on a page. These
functions are called widgets. Create wiglets by dragging a specifc widget onto a zone of an
already created page. (See Widget section for examples.) To access and edit a dropped widget
from the page tab, double-click on the zone that contains the widget. To delete a widget,
right-click the zone that contains the widget and click delete. To replace a widget with
another, simply drag another widget to the zone and replace the widget.

Menu Bar - Access settings and global application
functions through drop down menus.

Navigation Bar - Navigate between
different workspaces by left-clicking on
the corresponding tab.

Page Templates - Choose an Vignette Workspace - Central
appropriate page template for workspace for creating pages and
organizing your Vignette. establishing connections between pages.

9
Dropped Widgets - These are
widgets that have already been
dragged and dropped.

Zone - Zones are for placing widgets. This zone is
currently empty. To add a widget to this zone select a
widget from the widget browser and drag it to this pane
and drop it. Drag and drop by clicking and holding the
left mouse button until the mouse is hovered over the
zone. Release the mouse button to place the widget.

Widget Browser - This browser contains all the widgets
available for creating vignettes. Scroll down to view more
widgets.

10
Page Interactions
Opening - Open a page by double-clicking to view its zone layout and assign each zone its
own widget. Pages can also be opened by right-clicking a page and selecting Open.

Editing - Page names can be renamed by right-clicking on a page and selecting Edit.

Deleting - Pages can be deleted by right-clicking on a page and selecting Delete.

Connecting/Disconnecting – Users navigate through a vignette with the Next Page
and Previous Page buttons. To create a link between two pages right-click on a page and
select Connect. Then select the desired next page by left-clicking. Disconnecting two pages
can be accomplished by right-clicking either page and selecting Disconnect.

Connect Credits
To create a Credits page, make a page containing a Text Widget holding the credits. Right-
click on the last page of the vignette, choose Connect Credits and then left-click on the Credits
page.

Branching - “Branching” is a available for creating connections from one page to multiple
other pages, as dictated by user input. For more information on branching, see the Question
Widget description.

Adding Widgets - Add a widget by double-clicking on a created page from the
workspace. This will take you to the Page edit tab of the workspace. While in the Page edit
tab of the Workspace drag and drop widgets onto the zones of the corresponding page
template.

11
Building a Vignette Step by Step Tutorial
Build a Vignette from scratch using the supplied resources found in the
“Sample_Vignette_Resources” folder that is included within the “Vignette_Studio” folder.
This step by step guide provides instructions for creating a seven page vignette on the topic
of acceleration. The completed version of this vignette can be viewed at the following link,
www.compadre.org/ivv.

1. Open the Vignette Studio application. (Refer to the Setup/Installation chapter within
the Making Your Own Vignette Chapter).

2. Left-click on the File drop down list from the Menu Bar and select New Vignette. A
dialog window will prompt an input for naming the vignette fle. Choose a name for
the vignette (ex. “Sample_Vignette”) and left-click ok.

3. Left-click and hold on the single zone page template, then drag and release the left
mouse button anywhere inside the Workspace. A dialog box will appear prompting
input for the page name. For this tutorial type in “Login” and make sure the check box
First Page is checked.

4. Double-clicking on the newly created “Login” page will open the page into the Page
tab of the Navigation Bar. While in the Page tab drag and drop a Login widget onto
the page's singular zone. When the Login Widget is successfully dragged and dropped
a Login Widget icon will appear within the singular zone.

12
5. Double-click on the created Login Widget icon to open the widget in the Widget edit
tab and begin editing its contents. Where it says, “Enter text to prompt the user:” enter,
“Please enter your name below” inside the box. Next to the text “Exports too:” enter,
“login_info” or any variable name you want. (Any user input collected from this Login
Widget can be accessed by other widgets with the variable name chosen. So, remember
the name you choose.) Left-click on the “+” button towards the bottom right of the
Login Widget edit tab to create an additional user input entry. For Input 1 type in
“First Name” for the Label parameter. For Input 2 enter “Last Name” for the Label
parameter. Leave the Max Length, Input Restrictions and Width values unchanged.
They will automatically be set to the default settings. Left-click on the Vignette tab to
return to the main workspace.

6. Repeat the same drag and drop process from before to create a new page. Choose the
single zone page template and name the page “Page1” when the dialog box appears.
Double-click on the newly created “Page1” page to open the page into the Page edit
tab of the Navigation Bar. While in the Page edit tab of the drag and drop a Video

13
Widget onto the page's singular zone. When the Video Widget is successfully dragged
and dropped a Video Widget icon will appear within the singular zone.

7. Double-click on the created Video Widget icon to open the widget in the Widget edit
tab and begin editing its contents. Leave all settings at their default values, but click on
the Video File button. A browser window will pop up and allow you to choose a video
fle to upload. Locate the “Page1.mp4” fle within the “Sample_Vignette_Resources”
folder. Once the fle is located, click open and the video fle will be converted to two
different optimal formats for web playback. Once the conversion is complete click the
OK button and then click on the Vignette tab to go back to the Workspace.

8. Congratulations, your vignette now has two pages! Since there are two pages in the
Workspace a connection can be established. Right-click on the “Login” page to bring
up a drop down menu at the cursors location. Select Connect within the drop down.
Whichever page is selected next will be directly linked to the “Login” page. For this
demonstration select the “Page1” page. If the “Login” page is accidentally selected
instead of the “Page1” page, then repeat the right-click drop down process.

9. Let's create another page. Select the three zone page template to drag and drop onto
the Workspace. Keeping a consistent naming convention makes for a more streamlined
workfow. So, name the new page “Page2” when the dialog box appears and left-click
OK. Once the page is created left-click on it to open the page in the Page edit tab. For
this page add the following widgets by dragging and dropping each widget icon from
the Widget Browser to their corresponding locations. In the top left zone add a Video
Widget. In the top right zone add an Image Widget. Finally, add a Question Widget in
the bottom half zone. Left-click on the top left Video Widget to open up the widget in
the Widget edit tab and upload the “Page2.mp4” fle within the
“Sample_Vignette_Resources” folder. Return to the Page edit tab and left-click on the
Image Widget in the top right zone. In a similar fashion to the Video Widget, upload
process go ahead and upload the supplied image fle “Page2_image.jpg” located
within the “Sample_Vignette_Resources” folder. Finally, left-click on the Question
Widget in the bottom half zone. Next to the text that says, “Enter the question text:”,

14
enter “How does a ball fall after you drop it?” in the entry box. Left-click on the “+”
button on the right within the Question Widget edit tab. Now there are three possible
answers for the user to choose from. Fill out the Question Widget accordingly, for
answer 1 enter, “It slows down.” For answer 2 enter, “It falls at a constant speed.” For
answer 3 enter, “It speeds up.” Click on the Vignette edit tab to return to the main
Workspace.

10. Let's make another page. Select the three zone page template to drag and drop onto the
Workspace. Name the new page, “Page3” when the dialog box appears and left-click
ok. Once the page is created left-click on it to open the page in the Page edit tab. For
this page add the following widgets by dragging and dropping each widget icon from
the widget browser to their corresponding locations. In the top left zone add a Video
Widget. In the top right zone add an X-Y Analysis Widget. Finally, add a Text Widget
to the bottom half zone. Left-click on the top left video widget to open up the widget in
the Widget edit tab and upload the “Page3.mp4” fle within the
“Sample_Vignette_Resources” folder. Return to the Page edit tab and left-click on the
Text Widget in the bottom half zone. In the Widget edit tab underneath “Add your
text:” enter “Click on the center of the ball in each frame of the video. When you get to
the last frame, click on the Next Page button.” (Note that some HTML has been
provided to properly format the desired text. Make sure to only delete the text in the

15
entry box that says “Delete this sentence and replace it with your text.”) Return to the
Page edit tab and left click on the X-Y Analysis Widget in the top right zone. In the
Widget edit tab set the following parameters accordingly. Left-click on the “Select
Frames” button to open up the Video Frames Window. Check to make sure “Frame
Selection Mode:” is set to “Video”. Then locate the “BallDrop.mp4” fle within the
“Sample_Vignette_Resources” folder. Click “Save” to close the window. Set the
“Displays” value to “HORIZONTAL” and enter a variable name such as
“xy_analysis” next to the “Exports To:” for other widgets to access.
(Any user input collected from this X-Y Analysis Widget can be accessed by other
widgets with the variable name chosen. So, remember the name you choose.)
Left-click on the Vignette edit tab to return to the main Workspace.

11. Let's make another page. Select the three zone page template to drag and drop onto the
Workspace. Name the new page “Page4” when the dialog box appears and left-click
OK. Once the page is created left-click on it to open the page in the Page edit tab. For
this page add the following widgets by dragging and dropping each widget icon from
the widget browser to their corresponding locations. In the top left zone add a Video
Widget. In the top right zone add a X-Y Analysis Widget. Finally in the bottom half
zone add an Answer Widget. Left-click on the top left video widget to open up the
widget in the Widget edit tab and upload the “Page4.mp4” fle within the
“Sample_Vignette_Resources” folder. Return to the Page edit tab and left-click on the
X-Y Analysis Widget in the top right zone. In the Widget edit tab set the following
parameters accordingly. Left-click on the “Select Frames” button to open up the Video
Frames Window. Check to make sure “Frame Selection Mode:” is set to “Video,” the
frame rate will automatically be set to the inherent frame rate of the chosen video fle.
Then locate the “BallDrop.mpeg” fle within the “Sample_Vignette_Resources” folder.
Click “Save” to close the window. Set the “Displays” value to “HORIZONTAL” and
make sure the variable name next to the “Exports To:” matches the variable name from
before. (“xy_analysis” should be the correct variable name.) Return to the Page edit tab
and left-click on the Answer Widget in the bottom half zone. In the Widget edit tab
make sure that the long drop down below the Navigation Bar is set to
“PPage2_W3_question”and that the loaded information is correct. The text next to each
entry box should refect the information from the Question Widget. The entry boxes
next to each possible answer from the Question Widget provide unique feedback. Fill
out the Answer Widget entry boxes accordingly. Next to “It slows down” enter, “When
asked how the ball would fall, you answered,”It slows down.” In that case, the lines
would get closer together as the ball falls.” Next to “It falls at a constant speed” enter,
“When asked how the ball would fall, you answered, “It falls at a constant speed.” In
that case, the lines would be equally spaced.” Finally, next to “It speeds up” enter,
“When asked how the ball would fall, you answered. “It speeds up.” Right, the lines
get farther apart as the ball falls.” Now that the all of the widgets on “Page4” are flled
out, left-click on the Vignette edit tab to return to the main Workspace.

16
12. Adding a video at the end of a vignette provides recap of the lesson. Select the single
zone page template to drag and drop onto the Workspace. Add a Video Widget to the
single zone. Double-click on the created Video Widget icon to open the widget in the
Widget edit tab and begin editing its contents. Leave all settings at their default values,
but click on the Video File button. A browser window will pop up and allow you to
choose a video fle to upload. Locate the “Page5.mp4” fle within the
“Sample_Vignette_Resources” folder. Once the fle is located, click open and the video
fle will be converted to two different optimal formats for web playback. Once the
conversion is complete click on the Vignette tab to go back to the Workspace.

13. Ending the vignette with a confrmation page or certifcate page and asking students to
hand in a printout is a good way to ensure the lesson has been completed. Select the
single zone page template to drag and drop onto the Workspace. Add a Certifcate
Widget to the single zone. Double-click on the created Certifcate Widget icon to open
the widget in the Widget edit tab and begin editing its contents. From the “Imports
from:” drop down select “login_info” or the variable name you chose for the Login
Widget. If you do not want students to be able to go back to the login and change their
name, click the Disable “back button” checkbox.

17
14. That's it! Preview your vignette to ensure everything works properly.To do this, go to
the Menu Bar and select the Vignette drop down menu. From there select Preview
Vignette. Saving is required before a vignette may be previewed. A dialog box will
appear as a reminder.

18
Widgets
Login - The Login Widget prompts the users for identifcation, and stores the
input information for use in other pages. For example: Prompt the user to enter
their frst and last name in the text box. Add on other inputs to the inputs box. For
example, set the labels to “First Name” and “Last Name” with a width of 25, a
Max length of 25, and set the input restrictions to DEFAULT. Enter in a name to the “Exports
to” text box such as “login_information” and the login information from the inputs will be
stored with the flename for later use (usually for certifcate). The two pieces of information
from the example will be variables called “First Name” and “Last Name.”

Enter text to prompt the user

Choose a variable name
for the Users Input Data

Maximum entry
character length

Add/Subtract Labels
(ex. First Name, Last Name)

Restrict types of characters
for Users to input

Width of entry box Displayed Label for User Input

19
Text - The Text Widget provides the user with the text information. The text
box given in the widget is already flled in with default HTML code. By
replacing the second line, standard text can be entered. Persons with HTML
coding knowledge can format the text further.

Delete this sentence and
replace it with your text.
Use html code for additional
formatting
(ex. <center>...</center>)

20
Video - The Video Widget displays a video fle. By clicking the “Video File”
button, the program will prompt the user to browse the computer libraries for a
video fle. Subtitle fles (which must be in .srt format) are uploaded the same way
after clicking the “Subtitle File” button. By clicking and checking the box next to
“autoplay”, the video in the vignette will play automatically. By clicking and checking the
box next to “muted”, the audio in the movie will be muted. By clicking and checking the box
next to “loop”, the video in the vignette will replay continuously.

Displays uploaded video/subtitle fle in
the top right corner of widget settings

Option for video to play
automatically when opened
(Checked by default)

Option for video to be muted
when opened

Option for video to continuously loop
when opened

Click to upload Subtitle File for video.
(Browse Computer Libraries)

Click to upload video
(Browse Computer Libraries)

21
Question - The Question Widget provides the user with a question and
multiple selectable responses. Enter the desired question into the text box next to
the phrase “Enter the question text.”Add the desired number of answers with the
add and subtract buttons on the far right of the widget. There is a default of two
answer text boxes. Enter in the desired answer text into the text boxes. If the “Branch” check
box is selected, this will allow the question widget to direct the users to another page based
on the selected answer. Select the desired page for each answer next to the answer text box.
Note that the pages that will be branched to must be created before creating the Question
Widget.

When branching is enabled responses
can be linked to the selected page

Add/Subtract responses
to question

Responses for the
multiple-choice
question

22
Image - The Image Widget displays an image fle. By clicking the “Browse...”
button on the bottom of the widget, the program will prompt the user to browse
the computer libraries for an image fle. An image with an aspect ratio of 16:9 (for
example, 1920x1080 or 1280x720) will ft the available space. Images with other
aspect ratios will be letter-boxed. That is, the image will keep its original aspect ratio and
either the sides or top and bottom will be surrounded by black bars.

Click the browse button at the bottom of
the page to upload an Image fle
(Browse Computer Libraries)

23
Frame Player - Presents videos in a frame by frame fashion. Image sequences
can also be displayed. The difference between the Frame Player and the Video
widget is that the Frame Player is optimized for looking at video frame-by-frame.
The Video Widget is better for watching the video at normal speed. Audio can not
be played by a Frame Player. To upload frames, click on the “Defne” button and
follow the instructions below. The number of frames uploaded will be displayed in the
middle of the widget. If an autoplay of the frames is desired, enter in a number greater than
zero in the text box next to the phrase “Step Time.”

Click to upload video and
select parameters Shows how many Set time (seconds) for
frames were uploaded autoplay option

Video Frames Window
Clear all imported frames

Select
Video/Image
fles from
computer

Video Frames - This window is opened up when
selecting “Select Frames” in the Frame Player
widget, X-Y Analysis widget, and Displacement
Analysis widget. Click on the button that is next to
the phrase “Frame Selection Mode:” to either
choose a video or image upload. Click the “Browse”
button to browse the computer libraries for the
Enter corresponding fps desired images or video. If uploading a video fle
then the Frames/Sec will automatically be set to the
Click to choose either Video or inherent frame rate of the video fle. If uploading a
Images for the series of images then enter the frames per second at
Frame Selection mode which the images were captured in the text box next
to the phrase “# of Frames/Sec”. This will
determine the time per frame in displayed in the
vignette. Click the “Clear Frames” button to clear
the frames uploaded. When done uploading the
frames, press the “Save” button.

24
X-Y Analysis - Set data points at each frame to compile a video analysis data
set frame by frame. To upload frames, click on the “Select Frames” button and
follow the instructions under “Video Frames” in the manual. To change the
settings of the interactions within the frames in the widget, click “Settings” and
follow the instructions under “Display Settings.” Within the “Instructions” text
box, the instructions can be typed (typically how to use the X-Y Analysis Widget. Within the
“Hints” tex box, hint for the user can be typed. Next to the phrase “Exports to”, enter in a
variable name such as “xy_data” for future importing. The information stored in “xy_data”
will be used in either the Graph Widget or Table Widget. Next to the phrase “Tracks” is the
option to change the tracking to “any.” Next to the phrase “Displays” is the option to change
the shape of the click marker of the widget.

Choose “any” the other
options are in development Choose the type of
See Video Frame Dialogue Box
and are not described here line or point to display
(from Frame Player Widget section)

Defne variable name for data

Insert text for instructions Insert text for hints

Display Settings - This window is opened up when selecting “Settings” in
the X-Y Analysis Widget and Displacement Analysis Widget.

Point Size – Select size of point clicked on frame.
Successful Click Color – Select color of correct
point selections.
Latest Click Color – Select color of most
recent point.
Click Error/Warning Color – Select color
of incorrect point selections.
Line Width – Thickness of the vertical
lines.
Horizontal Line Width – Thickness of the
horizontal lines.

25
Displacement Analysis – Measure a displacement between two points by
video analysis. Within the “Instructions” text box, the instructions can be typed.
Within the “Hints” text box, hint for the user can be typed. Next to the phrase
“Exports to”, enter in a variable name such as “displacement_data” for future
importing. The information stored in “displacement_data” will be used in either
the “Graph” widget or “Table widget.” To upload frames, click on the “Select Frames” button
and follow the instructions under Video Frames Window located in the Frame Player Widget
section of the manual. To change the settings of the interactions within the frames in the
widget, click “Settings” and follow the instructions under “Display Settings.”

Defne variable
name for data
See Video Frames Window Insert text for hints
(from Frame Player Widget section)

Insert text for instructions
See Display Settings Window
(from XY Analysis Widget section)

26
Graph - Present data sets collected from other widgets on a Graph. On the top
portion of the widget, you can set the scale and parameters of the graph. X-min
and Y-min set the minimum values of the graph while X-max and Y-max set the
maximum values of the graph. X-ticks and Y-ticks set how many tick marks on
each axis there will be (including the zero tick mark). X-Label and Y-Label allow the user to
label the x-axis and y-axis. There are also the options next to the text boxes to show/hide the
legend, x-axis, and y-axis. The bottom half of the widget is where the data is inputed for the
graph. There is a default of one equation space and the user can add or subtract equations
with the plus and minus buttons on the right of the widget. Label the equation with the text
under the phrase “Name.” Import the data with the 'Import from' pull down menu. This data
will be from previously exported data from either an X-Y Analysis Widget or Displacement
Widget. The text or variables that can be typed into the X and Y text boxes can be found by
clicking the question mark next to the phrase “Equation.” The variables include x, y, frame,
time, red, green, and blue. By just typing in those names exactly, the numbers from the
imported data will be plotted on the x or y axis, depending on where the variable is inputed.
By clicking the settings button, a window will appear where the user can change the
appearance of the data displayed on the graph. The options are as follows:
Use these entry boxes Add/Subtract Data
for formatting the Graph Sets

Name the Data
Sets
Note: For a Displacement widget, x and
y are the components of the
displacement vector

...See next page for
more information on
Line Settings

Equations are used to scale or transform variables before they are plotted. For example, x
and y from an x-y analysis widget are in pixels. If you fnd by trial-and-error that a 1-meter
long calibration object has a length of, say, 123 pixels then you would enter x/123 and y/123
as the equations for those values. Instead of trail-and-error, you could create a temporary
vignette having only an x-y analysis widget and a table widget, and use that for gathering
calibration data. A built-in scaling capability is planned for a future version of Vignette
Studio.

27
Display trendline - Add a line of best ft to the data.
Draggable points – Enable points for dragging.
Velocity graph – Create a velocity versus time graph.
Smooth - Smooth the curve displayed on the graph.
Show line - Show/hide the line.
Show points - Show/hide the individual data points.
Line Width - Change the thickness of the line.
Marker size - Change the size of the markers.
Marker Style - Change the shape of the marker.
Color (Default Black Bar) - Click this black bar
and the user can change the color of the line/markers.

28
Table - Present data sets collected from X-Y Analysis Widget in a table format.
In the text box next to the phrase “Title”, the user can enter in the desired title of
the table. Import the data with the 'Import from' pull down menu. This data will
be from previously exported data from either an X-Y Analysis Widget or
Displacement Widget. The desired number of columns can be inputed in to the text box next
to the phrase “Number Of Columns.” For each column, the user can input the column
heading and Equation. The columns heading can be typed into the text box next to “Column
[number] heading.” The text or variables that can be typed into the Equation text box can be
found by clicking the question mark next to the text box. The variables include x, y, frame,
time, red, green, and blue. By just typing in those names exactly, the numbers from the
imported data will be displayed on the table.

Insert text for
the title of the table Insert desired number of columns.
(Default 0)
Import selected exported
information

Note: For a Displacement widget, x and
y are the components of the
displacement vector

Insert text for column label

29
Answer - The answer widget provides users with a unique feedback option for
each possible answer. Before editing the Answer Widget, it is advised to make a
related question widget frst. The answer widget gains its information from a
selected question widget. If there is only one question widget within the vignette,
the answer widget will automatically load the answer selection from that Question Widget. If
there are multiple Question Widgets, the user can select which answers to load at the top of
the answer widget. For every answer given in the selected Question Widget, there will be a
text box for a response text to that answer.
For example, if the question was “What organization does GHS stand for?” and the
answers were either “Globally Harmonized Systems”, “Global Hazardous Selections”,
“Geographical Harmful Sources” and “Geological Harmful Systems”, then there will be four
text boxes given in the answer widget. In the four text boxes something like “This is the
correct answer.” or “This answer is incorrect.” can be typed in the text boxes.

Ex. Question Widget Use this drop down to
import Answer labels
from already created
Question Widgets

Answer labels created
in Question Widgets
can imported within
Answer Widgets

Enter text for unique feedback
to every possible answer selection

30
Certificate - The Certifcate Widget imports collected login information and
displays it on a certifcate. With the drop-down menu next to “Imports from:”, the
user can choose where to import the login data from. From the example from the
Login Widget section, the user would import “login_information.” The text box
below is the formatting section of the certifcate and where to display the information. The
data from the vignette can be displayed with the variables found by clicking the question
mark next to “Content” or the data imported. From the example from the Login Widget
section, the frst and last name can be displayed by typing in “\First Name” and “\Last
Name” (same style as the variables provided). The formatting in the text box follows standard
HTML coding. The “Disable “back” button” option allows the vignette to prevent the user
from going back to previous pages once they reach the certifcate page.

Import selected export
information.
(Typically from Login If selected, prevents
Widget) users from going back
to previous pages

Help button helps with
entering information Enter desired text for
Certifcate (HTML
Formatting Required)

31
Widgets Under Development
The following list of widgets are still under development, but are still included in
VignetteStudio-1.7.5.jar. Though their functionality may not be optimized, they are available
for testing with a variety of new features.

Similar to the Text Widget, the Enhanced Text Widget displays any
desired text. However, presets are available within the widget settings to
add more felds where the user can enter information. For example, a
login page could be created using an enhanced text widget.

The Table Data Widget is designed to collect data through direct user
input in the form of text and numbers. This data can then by imported
into a Bar Graph Widget for better visualization.

A variation on the Graph Widget, except it creates bar graphs. Is must be
used with a Table Data widget as a source of data.

The Slider Branch Widget generates multiple branches based on
values dictated by a users input. It performs in a similar fashion to
the Question Widget however it allows for a large range custom
input answer choices (ex. numerical answers and equations).

32
Previewing Vignettes
Start Preview - Preview a vignette anytime during the building process. To do this, left-
click on the vignette dropdown from the Menu Bar.
Left-click on “Preview Vignette.”

A dialogue box will appear, asking the vignette composer to “Save” the vignette before being
able to preview the vignette.

A preview of the vignette will appear within a new window of the computers default internet
browser.

Stop Preview - Disable the vignette preview by left-clicking “Stop Preview” in the
vignette dropdown.

33
Advanced Features
Setting Up a Server - The server is used to share the vignette with others. By following
the steps below, the user will create a URL. People on the same network can enter in the URL
in any web browser and complete the vignette.

• Click on “Vignette” in the top menu bar

• Click on “Start Vignette Server...”

• Do not change the numbers in “Bind to Host” or “Port” (Unless you have prior

knowledge of servers)

• Click “Start”

• The URL can be copied into an internet browser to interact with the vignette. (Note: At

some institutions, the IT department has set up the network so this will not work

because of network security worries. Try it yourself before doing it in class!)

• Click “Stop” to stop the server