User Manual - Dickinson Blogs
Contents
1. 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 the2. Instructions Hint HORIZONTAL VERTICAL SMALLPOINT gt 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 Display Settings Point size s 44 Point Size Select size of point clicked on frame Successful click color IM i Successful Click Color Select color of correct point selections Latest click color SS Latest Click Color Select color of most l recent point Click error warning color X ch eovorfwerning color Click Error Warning Color Select color Line width 1 5 Y of incorrect point selections Horizontal line width 50 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 Displacemen Exports to enter in a variable name such as displacement_data for future Analysis 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 lo
3. Login 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 filename for later use usually for certificate The two pieces of information from the example will be variables called First Name and Last Name Enter text to prompt the user Enter text to prompt the user Choose a variable name for the Users Input Data Maximum entry character length Diii Add Subtract Labels ex First Name Last Name Inputs Label Max length Input 1 Width Y Input restriction A B O Restrict types of characters for Users to input Cancel Width of entry box Displayed Label for User Input 19 box given in the widget is already filled in with default HTML code By replacing the second line standard text can be entered Persons with HTML Text coding knowledge can format the text further M Text The Text Widget provides the user with the text information The text Add your text lt div al deci La 30px font size megam font weight bold gt lt div gt B Y Delete this sentence and replace it with your text Use html code for additional formatting ex lt center gt lt center gt 20 button the program will prompt the u
4. 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 file Choose a name for the vignette ex Sample_Vignette and left click ok File Edit Vignette 7 5 Input New Vignette P Open 2 Enter new vignette name Save Save As Import Vignette 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 cy Create new page Please enter the name of the page First page Login canes 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 File Edit Vignette Help Vignette Page Widget 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 varia
5. 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 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 difficulty 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 refined through a research based development process The possible uses of vignettes include e Online assignments similar to ungraded homework that carry completion credit This enables students to make authentic predictions without feeling they are being judged e Examination preparation e A tutorial setting where students work in collaborative groups e A flip
6. 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 Define 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 Define Frames 0 Step Time sk 0 0 Clear all imported frames Select Video Image files 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 file then the Frames Sec will automatically be set to the inherent frame rate of the video file If uploading a series of images then enter the frames per second at 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 upload
7. 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 v Answer The answer widget provides users with a unique feedback option for File Edit Vignette Help Ex Question Widget lt CSeowsnsns lt Use this drop down to What organization does GHS stand import Answer labels Enter the question text for lobally Harmonized Systems from already cre ated 1 Globally Harmonized Systems Ques tion Widgets 2 Global Hazardous Selections 3 Geographical Harmful Sources eographical Harmful Sources 4 Geological Harmful Systems eological Harmful Systems This is the correct answer Answer labels created in Question Widgets can imported within Answer Widgets This answer is incorrect Enter text for unique feedback to every possible answer selection Cancel 30 Ex Certificate The Certificate Widget imports collected login information and displays it on a certificate 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 certificate 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
8. vector Insert text for column label 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 find 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 29 each possible answer Before editing the Answer Widget it is advised to make a related question widget first The answer widget gains its information from a Answer 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
9. 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 file 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 file 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 How does a ball fall after you drop Enter the question text it 1 It slows down 2 It falls at a constant speed 3 It speeds up Cancel 10 Let s make another page Select
10. 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 Ending the vignette with a confirmation page or certificate 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 Certificate Widget to the single zone Double click on the created Certificate 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 Imports from login_info 7 Disable back button _ 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 File Edit Vignette Help Start Vignette Server 18 Widgets LOGIN The Login Widget prompts the users for identification and stores the input information for use in other pages For example Prompt the user to enter their first and last name in the text box Add on other inputs to the inputs box For
11. ble 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 Please enter your name below Enter text to prompt the user Exports to logininfo Label First Name Max length l Input 1 Width i Input restriction pEFAULT Lt lama I Label Last Name Max length Input 2 Width Input restriction DEFAULT 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 Double click on the created Video Widget icon to open the widget i
12. cated 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 Define variable name for data See Video Frames Window from Frame Player Widget section Instructions Insert text for hints Hint Insert text for instructions See Display Settings Window from XY Analysis Widget section 26 G raph Present data sets collected from other widgets on a Graph On the top Za 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 Graph 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 tex
13. data imported From the example from the Login Widget section the first 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 certificate page Certificate Import selected export information Typically from Login If selected prevents Widget users from going back to previous pages Imports from Disable back button _ Content lt p align center gt DEFAULT CERTIFICATE lt p gt lt p align center gt Time hours minutes seconds lt p gt lt p align center gt Date date lt p gt Help button helps with entering information Enter desired text for Certificate HTML Formatting Required 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 Enhanced Text Table Data ail Bar Graph 5 Slider Branch Similar to the Text Widget the Enhanced Text Widget displays any desired text However presets are available within the widget settings to add more fields where the user can enter information For example a login page could be cr
14. eated 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 File Edit Vignette Help Vignette Edit Title Stop Preview e ne lt E A dialogue box will appear asking the vignette composer to Save the vignette before being able to preview the vignette Preview Vignette KA Vignette must be saved before previewing Save the vignette now 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 U pa Server The server is used to share the vignette with others By
15. eo plays in which the instructor reinforces the concept and recaps the purpose of the activity When asked whether the horizontal speed of the ball changes as it moves you picked the answer No it remains the same This is correct Nice job 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 fifth 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 certificate The login data collected from the first page of the vignette is incorporated within the certificate Completion Certificate John Doe has completed the Projectile Motion Interactive Video Vignette 6 9 2015 15 40 24 125 to 15 44 23 518 0 3 59 If your instructor asked for evidence of completion for this assignment either print this page on paper and turn it in or make a screenshot of it and send it to the instructor The End 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 w
16. 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 filled out left click on the Vignette edit tab to return to the main Workspace 16 How does a ball fall after you drop it It slows down It falls at a constant speed It speeds up 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 When asked how the ball would fall you answered It falls at a constant speed In that case the lines would be equally Spaced When asked how the ball would fall you answered It speeds up Right the lines get farther apart as the ball falls Ill EO 12 Adding a video at the end of a vignette provides recap of the lesson Select the single 13 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 file to upload Locate the Page5 mp4 file within the Sample_Vignette_Resources folder Once the file is located click open and the video file
17. 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 Configure Vignette Server This feature allows users to connect and view your vignette without deploying on a server Simply click start below to start the server and instruct users to navigate to the URL below in their browser Bind to host 129 21 55 67 Port 39228 http 129 21 55 67 39228 v os 34
18. inberacbive User Manual Matthew Setlow Jonathan Crawford 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 I 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 Copyright 2015 RIT Creative Commons BY NC SA 3 0 license https creativecommons org licenses by nc sa 3 0 us This material is based in part upon work supported by National Science Foundation NSF erants DUE 1123118 DUE 1122828 and DUE 1245147 Any opinions findings and conclusions or recommendations expressed in this material are those of the author s and do not necessarily reflect the views of the National Science Foundation Table of Contents Introduction 4 Vignette Example 4 Projectile
19. ing the frames press the Save button Click to choose either Video or Images for the Frame Selection mode 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 X Y Analysis 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 See Video Frame Dialogue Box options are in development from Frame Player Widget section and are not described here Choose the type of line or point to display Define variable name for data Fife Edit Vignette Help 4 lt y Vignette Page Widget of Objects Exports To Tracks any M Displays POINT x 4 ae POINT Settings
20. ion 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 Use the circular arrow button to replay the video on the right Question 2 Does the vertical speed of the ball change as it moves Question 1 Does the horizontal speed of the ball change as it moves Yes it speeds up Yes it speeds up D No it remains the same No it remains the same Yes it slows down Yes it slows down Yes it slows down first then speeds up Yes it slows down first then speeds up 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 Click on the center of the ball in each frame of the video to mark its position Page Five In the fifth page the user is given feedback as well as the correct explanation to the first question asked At the top of the page a vid
21. n 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 file to upload Locate the Pagel mp4 file within the Sample_Vignette_Resources folder Once the file is located click open and the video file 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 Oo MP4 Conversion WebM Conversion n n 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 Pagel page If the Login page is accidentally selected instead of the Pagel page then repeat the right click drop down process 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 workflow 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
22. ocate the BallDrop mp4 file 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 aaa Select Frames of Objects Exports To xy_analysis Tracks any I Displays HORIZONTAL Settings Instructions 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 file 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
23. ped classroom assignment where a vignette is completed before its topic is introduced in class e 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 first 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 Certificate page After the user types in their information they may proceed with the vignette by left clicking the Next Page button Projectile Motion Enter your name here John Doe and then click Next Page at the bottom right corner of this window to continue 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 first loads the video player in the top left will automatically play a video that provides additional background informat
24. ser to browse the computer libraries for a video file Subtitle files 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 D Video The Video Widget displays a video file By clicking the Video File Video Displays uploaded video subtitle file in the top right corner of widget settings Motion Footage mp4 a Option for video to play File Edit Vignette Help automatically when opened Vignette Page Widget _ Checked by default autoplay Option for video to be muted when opened Option for video to continuously loop when opened Video File 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 Question 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
25. t 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 a Sets Pa n X min 0 0 min 0 0 F Show Legend X max 0 0 Y max 0 0 Show Y Label X ticks o ticks lo Show X Label 0 Help X Label Sd Y labe sd Equation Variables X location of point from analysis location of point from analysis frame Frame of analysis that the data is from ime Time of the frame that the data is from red Amount of red in the pixels that the user clicked out of 255 green Amount of green in the pixels that the user clicked out of 255 Name the Data blue Amount of blue in the pixels that the user clicked out of 255 sets Note For a Displacement widget x and y are the components of the displacement vector Name Equations Imports from eee Line Settings See next page for more information on Line Settings Equations are used to scale or transform variables before they are plot
26. ted For example x and y from an x y analysis widget are in pixels If you find 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 al 6 Line Settings Display trendline Line width 1 0 Draggable points Marker size 1 Velocity graph Marker style C Smooth filledCircle 7 Show line Show points Display trendline Add a line of best fit 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 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 Table be from previously exported data from either an X Y Anal
27. 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 as When br anching is enabled responses v Branh lt A can be linked to the EEIE page Enter the question text 1 Start Y Add Subtract responses to question A 2 Start Sp esponses for the multiple choice question Ze Image The Image Widget displays an image file 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 file An image with an aspect ratio of 16 9 for example 1920x1080 or 1280x720 will fit 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 Image Click the browse button at the bottom of the page to upload an Image file Browse Computer Libraries Browse 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 Frame Player
28. 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 file Then locate the BallDrop mpeg file 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 reflect 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
29. 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 file 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 11 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 l
30. ther 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 File Edit Vignette Help Vignette 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
31. 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 Overview of Components Wo rkspace 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 specific 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 ano
32. ww compadre org IVV studio cfm click on the download button at the bottom of the page 2 A zip file will be downloaded to your browser s standard download folder 3 Unzip the zip file 4 The downloaded folder named Vignette Studio contains the Java application VignetteStudio 1 7 5jar 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 file 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 file 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 file within the main folder of the Vignette file 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 find a suitable website Once a website domain is acquired the entire Vignette file folder may be
33. ysis 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 a Table Present data sets collected from X Y Analysis Widget in a table format Insert text for the title of the table Insert desired number of columns Default 0 Import selected exported information File Edit Vignette Help Vignette Page Widget Title Imports From Number Of Columns 1 Equation Variables Ea x X location of point from analysis Column 1 heading Equation y Y location of point from analysis frame Frame of analysis that the data is from time Time of the frame that the data is from red Amount of red in the pixels that the user clicked out of 255 green Amount of green in the pixels that the user clicked out of 255 blue Amount of blue in the pixels that the user clicked out of 255 Note For a Displacement widget x and y are the components of the displacement
Download Pdf Manuals
Related Search