Download - Basic Tutorial in Vizwik
![Page 1: Basic Tutorial in Vizwik](https://reader033.vdocument.in/reader033/viewer/2022042701/55b05b191a28abd72a8b47e1/html5/thumbnails/1.jpg)
Basic Tutorial (Teachers: use this tutorial with students to learn how
to make an app from a template, approx. 1h)
Learn Create Share
![Page 2: Basic Tutorial in Vizwik](https://reader033.vdocument.in/reader033/viewer/2022042701/55b05b191a28abd72a8b47e1/html5/thumbnails/2.jpg)
For Teachers
vizwik
1. Teachers: Create a Classroom
2. Teachers: Copy a Template
3. Teachers: Share a Template
![Page 3: Basic Tutorial in Vizwik](https://reader033.vdocument.in/reader033/viewer/2022042701/55b05b191a28abd72a8b47e1/html5/thumbnails/3.jpg)
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
![Page 4: Basic Tutorial in Vizwik](https://reader033.vdocument.in/reader033/viewer/2022042701/55b05b191a28abd72a8b47e1/html5/thumbnails/4.jpg)
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
![Page 5: Basic Tutorial in Vizwik](https://reader033.vdocument.in/reader033/viewer/2022042701/55b05b191a28abd72a8b47e1/html5/thumbnails/5.jpg)
Students: Bonus
14. View 5aMap and related Scripts 5a
15. View 5eDrawing and related Scripts
vizwik
![Page 6: Basic Tutorial in Vizwik](https://reader033.vdocument.in/reader033/viewer/2022042701/55b05b191a28abd72a8b47e1/html5/thumbnails/6.jpg)
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
![Page 7: Basic Tutorial in Vizwik](https://reader033.vdocument.in/reader033/viewer/2022042701/55b05b191a28abd72a8b47e1/html5/thumbnails/7.jpg)
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
![Page 8: Basic Tutorial in Vizwik](https://reader033.vdocument.in/reader033/viewer/2022042701/55b05b191a28abd72a8b47e1/html5/thumbnails/8.jpg)
2. Teachers: Copy a Template
4. Click on “Copy” to create your own project from the template, and edit the project.
4
vizwik
![Page 9: Basic Tutorial in Vizwik](https://reader033.vdocument.in/reader033/viewer/2022042701/55b05b191a28abd72a8b47e1/html5/thumbnails/9.jpg)
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
![Page 10: Basic Tutorial in Vizwik](https://reader033.vdocument.in/reader033/viewer/2022042701/55b05b191a28abd72a8b47e1/html5/thumbnails/10.jpg)
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
![Page 11: Basic Tutorial in Vizwik](https://reader033.vdocument.in/reader033/viewer/2022042701/55b05b191a28abd72a8b47e1/html5/thumbnails/11.jpg)
1. Students: Create an Account
1. Click on En2. Click on Sign Up
2
1
vizwik
![Page 12: Basic Tutorial in Vizwik](https://reader033.vdocument.in/reader033/viewer/2022042701/55b05b191a28abd72a8b47e1/html5/thumbnails/12.jpg)
1. Students: Create an Account
3. Are you a teacher? Click No.
3
vizwik
![Page 13: Basic Tutorial in Vizwik](https://reader033.vdocument.in/reader033/viewer/2022042701/55b05b191a28abd72a8b47e1/html5/thumbnails/13.jpg)
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
![Page 14: Basic Tutorial in Vizwik](https://reader033.vdocument.in/reader033/viewer/2022042701/55b05b191a28abd72a8b47e1/html5/thumbnails/14.jpg)
1. Students: Create an Account
5. Fill in the required information.
5
vizwik
![Page 15: Basic Tutorial in Vizwik](https://reader033.vdocument.in/reader033/viewer/2022042701/55b05b191a28abd72a8b47e1/html5/thumbnails/15.jpg)
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
![Page 16: Basic Tutorial in Vizwik](https://reader033.vdocument.in/reader033/viewer/2022042701/55b05b191a28abd72a8b47e1/html5/thumbnails/16.jpg)
2. Students: Copy a Template
4. Click “Copy” to open and edit the project.
4
vizwik
![Page 17: Basic Tutorial in Vizwik](https://reader033.vdocument.in/reader033/viewer/2022042701/55b05b191a28abd72a8b47e1/html5/thumbnails/17.jpg)
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
![Page 18: Basic Tutorial in Vizwik](https://reader033.vdocument.in/reader033/viewer/2022042701/55b05b191a28abd72a8b47e1/html5/thumbnails/18.jpg)
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
![Page 19: Basic Tutorial in Vizwik](https://reader033.vdocument.in/reader033/viewer/2022042701/55b05b191a28abd72a8b47e1/html5/thumbnails/19.jpg)
5. View 2Profile: Change Properties and Information
1. Edit cover image2. Edit the profile image profile3. Edit the name label
1
2
3
vizwik
![Page 20: Basic Tutorial in Vizwik](https://reader033.vdocument.in/reader033/viewer/2022042701/55b05b191a28abd72a8b47e1/html5/thumbnails/20.jpg)
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
![Page 21: Basic Tutorial in Vizwik](https://reader033.vdocument.in/reader033/viewer/2022042701/55b05b191a28abd72a8b47e1/html5/thumbnails/21.jpg)
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
![Page 22: Basic Tutorial in Vizwik](https://reader033.vdocument.in/reader033/viewer/2022042701/55b05b191a28abd72a8b47e1/html5/thumbnails/22.jpg)
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
![Page 23: Basic Tutorial in Vizwik](https://reader033.vdocument.in/reader033/viewer/2022042701/55b05b191a28abd72a8b47e1/html5/thumbnails/23.jpg)
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
![Page 24: Basic Tutorial in Vizwik](https://reader033.vdocument.in/reader033/viewer/2022042701/55b05b191a28abd72a8b47e1/html5/thumbnails/24.jpg)
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
![Page 25: Basic Tutorial in Vizwik](https://reader033.vdocument.in/reader033/viewer/2022042701/55b05b191a28abd72a8b47e1/html5/thumbnails/25.jpg)
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
![Page 26: Basic Tutorial in Vizwik](https://reader033.vdocument.in/reader033/viewer/2022042701/55b05b191a28abd72a8b47e1/html5/thumbnails/26.jpg)
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
![Page 27: Basic Tutorial in Vizwik](https://reader033.vdocument.in/reader033/viewer/2022042701/55b05b191a28abd72a8b47e1/html5/thumbnails/27.jpg)
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
![Page 28: Basic Tutorial in Vizwik](https://reader033.vdocument.in/reader033/viewer/2022042701/55b05b191a28abd72a8b47e1/html5/thumbnails/28.jpg)
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
![Page 29: Basic Tutorial in Vizwik](https://reader033.vdocument.in/reader033/viewer/2022042701/55b05b191a28abd72a8b47e1/html5/thumbnails/29.jpg)
14. Bonus: View 5aMaps and Scripts 5a
Look at the Scripts that we made to show location on a Map.
3
5 4
vizwik
![Page 30: Basic Tutorial in Vizwik](https://reader033.vdocument.in/reader033/viewer/2022042701/55b05b191a28abd72a8b47e1/html5/thumbnails/30.jpg)
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
![Page 31: Basic Tutorial in Vizwik](https://reader033.vdocument.in/reader033/viewer/2022042701/55b05b191a28abd72a8b47e1/html5/thumbnails/31.jpg)
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
![Page 32: Basic Tutorial in Vizwik](https://reader033.vdocument.in/reader033/viewer/2022042701/55b05b191a28abd72a8b47e1/html5/thumbnails/32.jpg)
Thanks to our Partners!
vizwik