General Instructions and Tutorial for...

Transcription

1 Collabrify Suite of Apps Intergalactic Mobile Learning Center Page 1 of 25 General Instructions and Tutorial for... Last Updated: March 2017 By Travis Trombley Contact Elliot Soloway at info.imlc@umich.edu for help or for further information. We would love to hear from you - please let us know if you are using Collabrify Map. Thank you! And learn more about Collabrify at:

2 Collabrify Suite of Apps Intergalactic Mobile Learning Center Page 2 of 25 Table of Contents Introduction How to get started with Collabrify Map Collabrify Map Toolbar Features Collabrify Map Features Creating and Customizing Nodes Moving, Editing and Deleting Nodes Linking Nodes Adding and Working with Collaborators Collabrify Maps Tutorial

3 Collabrify Suite of Apps Intergalactic Mobile Learning Center Page 3 of 25 Introduction Welcome to Collabrify Map, a streamlined, simple-to-use app designed not only to help students generate dynamic, customizable concept maps, but to allow them to do so in synchronous collaboration with their peers and teachers. Map fills a number of classroom needs, especially for younger students. First, it provides a digital tool for a valuable, cognitive process: cognitive mapping. Its simple, click-and-drag interface allows students of all ages to make connections between ideas quickly and easily. Additionally, Map provides the tools for students to add visual value to their maps by easily adding pictures to their map nodes. While normally reserved for brainstorming activity, concept mapping is an incredibly useful strategy for getting kids to recognize causal relationships and the interrelatedness of various concepts. Map s custom link creation feature and compatibility with other Collabrify apps makes it an ideal platform to apply concept mapping as an activity in all subject areas. That said, Collabrify Map is just one component of the Collabrify suite, which contains a number of apps designed to promote digital collaboration in 21st Century schools. The apps range in complexity and function, from lesson planning to activity execution. You can learn more about the Collabrify Suite by visiting us at our webpage Intergalactic Mobile Learning Center. Importantly, Collabrify Map is free ; there are no limits to how many Maps you and/or your students create, and Collabrify Map will continue to be free! This manual contains general instructions for logging into and setting up the app, descriptions of the app s features, and a step-by-step tutorial designed specifically to help new users - be they prospective teacher-users or students - develop proficiency with the app by trying it out. Please, if you have problems, do not hesitate to contact us at imlc.info@umich.edu or call project director Elliot Soloway at We can t always foresee the mis-steps that might well happen, and we apologize in advance for whatever glitches you run into! If a problem arises, please contact us and we will work with you to resolve the issue. In all likelihood, the glitch is something small that, with a bit of conversation, can be easily rectified. That said, thank you for your willingness to try something new! After you have used this manual, please let us know how it all worked out. We absolutely welcome suggestions for improving both the app and our instructions for the use thereof! -The Collabrify team

4 Collabrify Suite of Apps Intergalactic Mobile Learning Center Page 4 of 25 Getting Started with Map NOTE: If possible, use a Google Chrome Browser - while our apps work in other browsers like Safari and Firefox, they function most effectively in Chrome. Currently, we are not supporting the use of Microsoft browsers; we plan to provide such support in the future. Assuming the use of Chrome, it may be useful to use an Incognito Window in the Chrome Browser in order to negate any potential issues caused by being logged into multiple Chrome accounts. To do this, click on the hamburger button (three vertical dots on some versions of Chrome) in the upper right hand corner of Chrome browser, then click New Incognito Window. 1. If you are not signed into your Google account, tap Sign In with Google and follow the instructions in the pop up. NOTE : Users must have a Google account (Gmail) to use the Collabrify apps. When prompted, authorize your Google account to use Collabrify Apps by hitting Allow. 2. This will take you to a homepage with a list of files. Open a file by tapping on it. If this is your first time, you will see no files (as seen in the picture below).

5 Collabrify Suite of Apps Intergalactic Mobile Learning Center Page 5 of To create a new file, tap New File at the bottom of the home screen. This will bring you to the default page for a new file.

6 Collabrify Suite of Apps Intergalactic Mobile Learning Center Page 6 of 25 Collabrify Map Toolbar Functions NOTE : Refer to the figure below for tool locations. The letters correspond with the tool descriptions below. A. COLLABRIFY MAP page title - Clicking the COLLABRIFY MAP name in the upper left corner will return users to the Collabrify Map homescreen. B. Eyeball Icon - In addition to displaying the number of users currently operating on a MAP, clicking the icon will provide the Google account info (picture and Gmail address) of all collaborators. C. Share - As described above, the share button in the upper right corner of the screen allows users to add collaborators to their MAP (see section 4 above). D. CENTER - Found at the bottom of the page, the CENTER button automatically realigns the view of the MAP to its center. E. CLEAR - Also found at the bottom of the page, clicking the CLEAR button will bring up a window in which users will be able to clear the MAP of all contents. F. Zoom Bar - At the bottom center of the page, the slide bar with a negative sign on the left and positive sign on the rights controls the MAP s zoom function, permitting users get up close on a single Node or draw back to see their entire MAP. Users can gradually zoom in or out by clicking the + or - signs, respectively, or just dragging the button on the zoom bar. G. Undo and Redo arrows - Found in the lower right corner, the right and left facing curved arrows allow users to undo actions, the subsequently redo those actions, if

7 Collabrify Suite of Apps Intergalactic Mobile Learning Center Page 7 of 25 desired. If these actions are unavailable (an action cannot be redone unless first undone, for example), there arrows will appear in a faded color.

8 Collabrify Suite of Apps Intergalactic Mobile Learning Center Page 8 of 25 Collabrify Map Features 1. Creating and Customizing Nodes A. To create a new node, move the cursor over the grid, then tap and hold for a second anywhere to create a Node in that spot. Note: The hold for a second is important; simply tapping on the screen will enable the user to move the Node. B. Immediately the Add Node dialogue box (pictured below) will appear. C. Add Node dialogue box options. a. At the top of the dialogue box are three tab options for accessing different tools in Map: Display, Comments, and Image. b. In the Display tab, users can: i. title their node by typing in the space underlined in red. (NOTE: a title is required to create a Node) ii. choose the shape of their node by clicking one of the three available iii. options: circle, square or diamond select the color of their node by clicking on one of the eight available options depicted as rectangles c. The Comments option offers users the ability to write and attach notes to individual nodes. Uses for this include but are certainly not limited to: i. Discussion between collaborators on how best to use or organize nodes ii. iii. iv. Additional information or explanation about the content of the node Teacher feedback Metacognitive annotation (a student describing what she believes is the node s purpose or writing out any troubles she may be having with the project)

9 Collabrify Suite of Apps Intergalactic Mobile Learning Center Page 9 of 25 d. As probably expected, the Image tab allows users to add a picture to the node. i. In the Image tab, select INSERT on the left side of the window. ii. This opens a contained Google Image Search dialogue box.

10 Collabrify Suite of Apps Intergalactic Mobile Learning Center Page 10 of 25 iii. Type the desired image subject into the search bar, then hit the enter key on the keyboard or click the magnifying glass button to the right of the search bar. 1. To narrow search parameters, click the dropdown box to choose from various types of images Google can seek out specifically (e.g., Any Type, Face, Clipart, etc.) 2. or click the color options from the band to the right to have Google narrow the search to photos primarily containing those colors iv. Once a picture is selected (framed in blue with a blue checkmark in the upper left-hand column), click the Select button in the bottom left corner of the window to insert the image. D. When satisfied with the Node, click CREATE in the bottom right corner (when editing a node after it s created, the button option becomes SAVE ). E. Users can edit nodes at any time simply by clicking on the desired node, which will open up the Edit Node dialogue box. 2. Moving, Editing and Deleting Nodes Once created, Nodes can be edited and moved around the grid with ease

11 Collabrify Suite of Apps Intergalactic Mobile Learning Center Page 11 of 25 A. To EDIT a Node, simply click on any already created Node to open the Edit Node dialogue box. a. This dialogue box looks and functions just like the Add Node dialogue box detailed above. b. When finished making edits, click the Save button in the bottom right corner of the dialogue box. B. To MOVE a Node simply move the cursor over the desired Node, click and hold, then drag the Node slowly to the desired destination on the grid. a. When dragging, a dotted line will appear - where the line ends, the Node will go. b. Dragging the line to another existing Node will create a Link between the Nodes rather than move the originally selected Node (see below). C. To DELETE a Node, move the cursor over the desired Node and click to open the Edit Node dialogue box, then click the Delete option in the lower left corner.

12 Collabrify Suite of Apps Intergalactic Mobile Learning Center Page 12 of 25 a. Clicking delete immediately removes the Node and any Links that were connected to that Node. b. Deleted Nodes can be retrieved by clicking the Undo arrow in the lower right corner of the window (see 5.E). 3. Linking Nodes A. To create a link between two nodes, simply place the cursor in the center of one node, click and hold while slowly dragging the cursor to the center of the other node (notice a dotted line appears as you draw, but becomes a solid line when you connect to a second Node), then release. B. This will automatically open a Add Link dialogue box, which looks similar to the Add Node dialogue box previously described (1.C).

13 Collabrify Suite of Apps Intergalactic Mobile Learning Center Page 13 of 25 C. At the top of the dialogue box are two tab options: Display and Comments. a. In the Display tab, like before, users can title the link and change its color. i. The big difference here is the addition of a Direction option, which allows users to define which way they want the arrow on their link to face: 1. Users can change the direction simply by clicking the bar containing the Node titles and an arrow 2. Every click will alter the arrow direction between three options: left facing, right facing, and bidirectional b. The Comments tab functions the same as it did in the Add Node dialogue box (Refer to 1.C.c) D. When finished, click the Create button in the bottom right corner. E. Users can edit the link at any time simply by clicking on it, which will open up the Edit Link dialogue box. a. From the Edit Link dialogue box, users can Delete Links as any time by pressing the Delete button in the lower left corner. 4. Adding and Working with Collaborators A. To add real-time collaborators to a MAP, click the Share button in the upper right corner of the screen. B. In the dialogue box that appears (see picture below), type the Gmail address(es) of the person(s) with whom you would like to collaborate.

14 Collabrify Suite of Apps Intergalactic Mobile Learning Center Page 14 of 25 C. The added collaborator will receive an notifying them that a COLLABIFY file has been shared with them, and the Gmail address(es) entered will appear in the Who has access box. a. If that person already has a COLLABRIFY MAP window open, she will be able to open the file by refreshing the main MAP page, which should show the new file. b. Or, if that person repeats the login procedure described on Pages 2-4, she will see the file available to them from the Map homescreen. D. Collaborators can be identified by clicking the eyeball icons in the upper right corner of the window. The number of collaborators working on the same document simultaneously is depicted to the right of the eyeball.

15 Collabrify Suite of Apps Intergalactic Mobile Learning Center Page 15 of 25 Collabrify Map Tutorial The instructions above detail the options available in the Collabrify Map app, but as educators we know the best way to learn something new is to try it out. Follow the steps below for a detailed tutorial of the Collabrify Map app. The tutorial should take no longer than 10 minutes. Step 1: After following the directions above to access COLLABRIFY MAP (pg 2-3, Steps 1-4), you should see the screen displayed below: Step 2: You will need to AUTHORIZE your Gmail account to use the Collabrify Apps. Tap on the red button entitled Sign in with Google and the following screen will appear: Collabrify apps need access to various elements about your Gmail account in order for the apps to operate effectively. If you are comfortable allowing the Collabrify apps to access the Gmail information, tap on Allow the blue button. The screen below will appear momentarily:

16 Collabrify Suite of Apps Intergalactic Mobile Learning Center Page 16 of 25 Step 3: The screen pictured below should appear. Create a new file to hold a concept map by clicking on the red NEW FILE button on the bottom of the screen. NOTE : If you have used COLLABRIFY MAP before, any other MAP files you ve worked on or that have been shared with you will be listed on this screen.

17 Collabrify Suite of Apps Intergalactic Mobile Learning Center Page 17 of 25 Step 4: Once you open a new MAP by clicking NEW FILE, you should see a blank grid, as seen in the picture below: Step 5: Every new Collabrify Map file will default to the title New Collabrify Map File - click where it says this in the top center of the page to open the Change File Title dialogue box, then delete the existing title and type US Presidents Demo, then hit Save. Step 6: Now, create a node. Tap and hold on any spot on the grid see the arrow on the grid: Step 7: After a second, the Add Node dialogue box will appear. See 1.C for details on the Add Node feature.

18 Collabrify Suite of Apps Intergalactic Mobile Learning Center Page 18 of 25 Step 8: Let s practice navigating the Add Node dialogue box. We will start with the Display tab. A. Type the text US Presidents into the Node Title line. B. Change the shape of the node to a diamond by clicking on the diamond shape in the Shape option - the selected shape will be completely filled in with blue. C. Change the color of the node to Green by clicking on the green rectangle. Step 9 : With the Add Node dialogue box still active, click on Comments towards the top to open the Comments tab. In the text box, type the words This is a node about US Presidents.

19 Collabrify Suite of Apps Intergalactic Mobile Learning Center Page 19 of 25 Step 10: Click the Create button at the bottom right corner of the dialogue box and - bingo bongo - you should see your node. Step 11: Now let s practice adding a picture by editing the existing node. A. Click on the node you just created to open the Edit Node dialogue box. B. Click Image from among the options at the top of the dialogue box - to review Image directions and options, see 1.C.d. C. Click the Insert button D. In the Google Search Bar, type Presidential Seal E. Select the first option by clicking it, which results in a blue frame around the picture and a check mark in the upper left corner. F. Hit the Select button in the bottom left corner of the dialogue box - you will see your image displayed on in the Image tab of the Edit Node dialogue box. G. Click the SAVE option in the lower right corner, and you will instantly see your node displayed with the chosen image.

20 Collabrify Suite of Apps Intergalactic Mobile Learning Center Page 20 of 25 Step 12: Now add two more nodes to the map, both below the existing US Presidents Node. Step 13: Repeat Steps 8-11 to customize these nodes. Make the left Node a blue circle titled Democrats, and edit the right Node to be a red rectangle titled Republicans For each node, insert an image of the respective political party s symbol.

21 Collabrify Suite of Apps Intergalactic Mobile Learning Center Page 21 of 25 Step 14: One at a time, connect the new Nodes to the original Node titled US Presidents Click and hold in the middle of the US Presidents Node and drag the line that appears to the center of one of the other Nodes to create a Link (see 3.A). When the Add Link dialogue box appears, make sure the arrow points AWAY from the US Presidents Node, and change the color of the link to purple. Repeat this process for the other Node, too. The result should be similar to the picture below:

22 Collabrify Suite of Apps Intergalactic Mobile Learning Center Page 22 of 25 Step 15: Add a collaborator to the MAP by clicking on the Share button upper right corner of the page, which will open the Sharing dialog box. in the Step 16: Enter the Gmail address of your desired collaborator, then hit the pulsating Send button. The address of the prospective collaborator should now be seen in the Who has access box in the Sharing dialogue box. Click Done in the lower right corner of the Sharing dialogue box to exit and return to your MAP.

23 Collabrify Suite of Apps Intergalactic Mobile Learning Center Page 23 of 25 NOTE: You will see a collaborator s presence indicated by the number 2 (or however many collaborators you have working simultaneously) now in the Eye icon to right end of the upper toolbar. Step 17: When your collaborator(s) joins (see Steps 1-2), have them create additional nodes near the Republican and Democrat Nodes you created. Step 18: Instruct the collaborator(s) to follow Steps 8-11 and Step 14 to complete the following tasks: Title the Nodes with the name of a president from each respective political party (i.e. Kennedy and Reagan) Insert an image of the chosen presidents Change the shape and color of the Nodes to their liking Link the new Nodes to the Nodes of their respective parties The Links should be labeled example The Link arrows should face away from the political party Nodes and towards the example president Nodes.

24 Collabrify Suite of Apps Intergalactic Mobile Learning Center Page 24 of 25 Step 19: Once your collaborator has completed Step 17, click on one of the new Nodes to open the Edit Node dialogue box and complete the following tasks: Change the color of the Node Go to the Comments tab and in the text box write what a description of your edit (i.e., I changed the color of the node from Blue to Yellow. ) Step 20: Finally, click on the title of the MAP in the top center of the page to open the Change File Name dialogue box and follow these instructions: Add the word Collaborated to the end of the filename - it should now read Us Presidents Demo Collaborated. If possible, compare your screen with your collaborators - you should note that their screens will show the old file name.

25 Collabrify Suite of Apps Intergalactic Mobile Learning Center Page 25 of 25 In order to sync the pages, instruct your collaborators refresh their page(s) by clicking the circular arrow in the left corner of the browser window - they should now see the new title. And just like that - bingo bongo - you have completed the Collabrify Map tutorial and are ready to start making and sharing MAPs of your own. If you come across any problems during your experience with MAP, please don t give up send an to imlc-info@umich.edu and we will contact you to work out any issues. More than likely, your problem is the result of an oversight on our part and therefore an opportunity to improve the app. Again, thank you for trying Collabrify!