basic tutorial in vizwik

Basic Tutorial (Teachers: use this tutorial with students to learn how

to make an app from a template, approx. 1h)

Learn Create Share

For Teachers

vizwik

1. Teachers: Create a Classroom

2. Teachers: Copy a Template

3. Teachers: Share a Template

For Students

vizwik

1. Create an Account

2. Copy the Template “Basic Tutorial Template”

3. Add images in Vizwik

4. View 1Home: Change Images and Background

5. View 2Profile: Change Properties and Information

6. View 3Info: Change the information

7. Data Table: Modify “Blog Articles”

8. View 5Tools: Add a url to a button

9. View 5bVideo: Change the Video

For Students con’t

10. View 5cTax and Tax Scripts

11. How to share your app

12. Check your app on mobile

13. View 5dTips and Create Script for Tips 18%

vizwik

Students: Bonus

14. View 5aMap and related Scripts 5a

15. View 5eDrawing and related Scripts

vizwik

1. Teachers: How to Create a Classroom

1. Click on the Profile Panel icon2. Enter your school’s name3. Enter your class name and click the Create button4. Share the class code with your students

1

4

2

3

vizwik

2. Teachers: Copy a Template

1. Open the Apps Panel in your public account.2. Click on Newest3. Choose “Basic Tutorial Template” and click on it.

3

21

vizwik

2. Teachers: Copy a Template

4. Click on “Copy” to create your own project from the template, and edit the project.

4

vizwik

3. Teacher: How to Share a Template in the Classroom

1. Go back in the classroom. 2. Click on the project’s list.3. Find the Template and click on the edit button on the top right of the

app.

1

2

3

vizwik

3. How to Share a Template in the Classroom

4. Edit the title.5. Edit the description if you want to.6. Choose the categories.7. Share the app with all the members of Vizwik and share it as a template.8. Click Share or Update if it is not the first time you share it.

8

5

4

6

7

vizwik

1. Students: Create an Account

1. Click on En2. Click on Sign Up

2

1

vizwik

1. Students: Create an Account

3. Are you a teacher? Click No.

3

vizwik

1. Students: Create an Account

4. There are 2 different ways to join: with or without a class code. If you have given them a class code, they will answer “Yes” to the question.

4

vizwik

1. Students: Create an Account

5. Fill in the required information.

5

vizwik

2. Students: Copy a Template

1. Open the Apps Panel2. Click on Newest3. Choose “Basic Tutorial Template” and click on it.*Note to the teachers: In this panel, you can see all the apps that your students are sharing. You can verify their work by opening their projects. Only Teachers have this ability.

21

3

vizwik

2. Students: Copy a Template

4. Click “Copy” to open and edit the project.

4

vizwik

3. Add images in Vizwik

1. Click on Media in the Parts Panel2. Click on Images3. Click on the “+” button to add images or just drag and drop images

from the desktop to Vizwik. Images of you, profile, cover photo, other

1

23

vizwik

4. View 1Home: Personalize the View

1. Select the View Item that you want to edit.2. Click on the wrench on the top right corner to change the properties.3. Edit properties: images, font, etc.4. Repeat for each selected View Item: image, label, buttons

1

4

3

2

vizwik

5. View 2Profile: Change Properties and Information

1. Edit cover image2. Edit the profile image profile3. Edit the name label

1

2

3

vizwik

5. View 2Profile: Edit Information - Fb, Twitter, Phone, EMail

1. Select the Facebook Image2. Open the wrench property panel to add the url and choose “Web” for the Type of link3. Repeat steps 1 and 2. For Twitter, choose “Web”, for the phone, choose “Phone #“ and

for email, choose “email”

1

2

3

vizwik

6. View 3Info: Editing the Information in the Label

1. Select the label (outlined in red on the picture).2. Double-clicked on the label to select the text.3. Delete and replace the text.

3

21

vizwik

7. Data Tables: Editing “Blog Articles”

1. Edit by copy and paste information in the titles, article and description.2. From the Parts Panel, drag and drop the images under the column

“Icon”.

2

1

vizwik

8. View 5Tools: Add a URL to a Button

1. Open the Script “4a go to blog” and delete the link “blog.vizwik.com” and replace it by your own URL.

2. Select the button “Vizwik Blog” (you can rename it), check if the Script is attached to the button by clicking on the wrench icon on the right.

1

2

vizwik

9. View 5bVideo: Edit Video

1. Select the video and click on the wrench icon. 2. Enter the video ID. You can find the video ID at the end of the

YouTube url of your choice.

1

2

vizwik

10. View 5cTax and related Scripts

Look at how we create this View and Scripts that go with them. All the work is done for you, but you need to look at it and try to understand how we do this calculation. The colors match the View Items dragged and dropped into the Script.

vizwik

11. How do you share your app?

1. Click on the application above. 2. A window opens. Edit the title of the application.3. Edit the description.4. Choose the categories.5. Share with Vizwik Members et choose “No one” for template.6. Click Share.

2

6

5

4

1

3

vizwik

12. Check the app on mobile!

1. Go to m.vizwik.com on your phone, ipod or tablet (Google Chrome).

2. On the left menu, you see your projects, your apps, the apps that you follow and the public apps in the social network. You can test it on your phone while you build your app.

vizwik

13. Create Script 5dtips 18p

1. Create a new Script and reproduce the following Script. 2. Drap and Drop the Textfield “Amount” from the View onto the Script.3. Drag and Drop the label “tips” onto the Script. 4. Select the Toggle Group Buttons and click on the wrench icon. 5. Choose the correct Script in the drop down menu.

1

4

52

3

vizwik

14. Bonus: View 5aMaps and Scripts 5a

Look at the Scripts that we made to show location on a Map.

3

5 4

vizwik

15. Bonus: View 5eDrawing and related Scripts

This is more complicated. You have to be more advanced to be able to do it. However, you can copy the application “Dan’s Paint” to see how he did it. There are some youtube videos in English that a teacher started to do.

vizwik

Hey Teachers!

To see the students in the classroom, don’t forget to click on the people panel. As a creator of a classroom, you can check your student’s projects by clicking on the apps panel and open it.

vizwik

Thanks to our Partners!

vizwik