Teachers: use this tutorial with students to learn how to make an app from a template in www.vizwik.com. Approx.: one hour of coding. This is a basic tutorial that teachers can use to do one hour of coding with their students in www.vizwik.com.

1. Basic Tutorial
(Teachers: use this tutorial with students to learn how
to make an app from a template, approx. 1h)
Learn Create Share

2. For Teachers
vizwik
1. Teachers: Create a Classroom
2. Teachers: Copy a Template
3. Teachers: Share a Template

3. 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

4. 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

5. Students: Bonus
14. View 5aMap and related Scripts 5a
15. View 5eDrawing and related Scripts
vizwik

6. 1. Teachers: How to Create a
Classroom
1
2
3
4
1. Click on the Profile Panel icon
2. Enter your school’s name
3. Enter your class name and click the Create button
4. Share the class code with your students
vizwik

7. 2. Teachers: Copy a Template
2
3
1. Open the Apps Panel in your public account.
2. Click on Newest
3. Choose “Basic Tutorial Template” and click on it.
1
vizwik

8. 2. Teachers: Copy a Template
4. Click on “Copy” to create your own project from the template, and edit
the project.
4
vizwik

9. 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

10. 3. How to Share a Template in the
Classroom
8
5
4
6
7
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.
vizwik

11. 1. Students: Create an Account
1. Click on En
2. Click on Sign Up
2
vizwik
1

12. 1. Students: Create an Account
3. Are you a teacher? Click No.
3
vizwik

13. 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

14. 1. Students: Create an Account
5. Fill in the required information.
5
vizwik

15. 2. Students: Copy a Template
1. Open the Apps Panel
2. Click on Newest
3. 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.
2
1
3
vizwik

16. 2. Students: Copy a Template
4. Click “Copy” to open and edit the project.
4
vizwik

17. 3. Add images in Vizwik
1
vizwik
1. Click on Media in the Parts Panel
2. Click on Images
3. 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
2
3

18. vizwik
4. View 1Home: Personalize the View
1
4
3
2
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

19. 5. View 2Profile: Change Properties
and Information
1. Edit cover image
2. Edit the profile image profile
3. Edit the name label
1
2
3
vizwik

20. 5. View 2Profile: Edit Information -
Fb, Twitter, Phone, EMail
1. Select the Facebook Image
2. Open the wrench property panel to add the url and choose “Web” for the Type of link
3. Repeat steps 1 and 2. For Twitter, choose “Web”, for the phone, choose “Phone #“ and
for email, choose “email”
1
2
3
vizwik

21. 6. View 3Info: Editing the
Information in the Label
3
2
1
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.
vizwik

22. 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

23. 8. View 5Tools: Add a URL to a
Button
vizwik
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

24. 9. View 5bVideo: Edit Video
1
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.
2
vizwik

25. 10. View 5cTax and related Scripts
vizwik
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.

26. 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

27. 12. Check the app on mobile!
1. Go to m.vizwik.com on your phone, ipod or tablet (Google
Chrome).
vizwik
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.

28. 13. Create Script 5dtips 18p
1
vizwik
2 5
4
3
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.

29. 14. Bonus: View 5aMaps and Scripts
5a
3
5 4
Look at the Scripts that we made to show location on a Map.
vizwik

30. 15. Bonus: View 5eDrawing and
related Scripts
vizwik
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.

31. Hey Teachers!
vizwik
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.

32. Thanks to our Partners!
vizwik