Basic Tutorial in Vizwik
0 likes1,672 views
The document serves as a tutorial for teachers and students to create an app using the Vizwik platform, outlining essential steps such as creating a classroom, copying a template, and personalizing app features. It provides detailed instructions on how to share the app and check it on mobile, as well as additional advanced options for app development. The tutorial emphasizes the importance of verifying student projects and includes bonus content for advanced users.
Basic Tutorial in Vizwik
- 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