A tutorial is sort of like a tutor without a person. In other words, when someone visits a tutor (or goes to after school “tutoring”), they are meeting with someone who can teach. On the other hand, if you pick up a tutorial, that means you’re reading something on your own without anyone there to help. So a good tutorial has to clearly explain a goal (what it will look like at the end). It also has to have some clearly written steps about how to reach that goal, along with some good pictures or images that make it easy to understand what the written steps are trying to say. Below are the most important things you need for today’s Variable Manipulation Tutorial.

STEP 1: DON’T FORGET NOTES
Before you can write this tutorial, you still have to go through all the same basics that you’re already familiar. That means downloading the code, looking for variables, and as always, writing notes. The more notes you have, the easier it will be to work with your partner on Step 2.

STEP 2: FOUR STEPS
Your tutorial must have exactly four steps. No more. No less. That means you need to discuss, with your team, the most important four steps you’ll need to teach in your tutorial. But please understand that if you are using PowerPoint (which most of you probably will), steps are NOT the same as slides. You might need to use 6-7 slides even if you are only teaching 4 steps.

STEP 3: INTRODUCTION
Your tutorial must have an introduction on one of the first slides. This does not count as a step because an introduction is basically just an explanation of what the tutorial will teach a person how to do. An introduction is your way of helping the reader know what they will be doing. It might help if you get a “before” screenshot and an “after” screenshot (from before you start and also from after you finish your manipulations).

STEP 4: SCREENSHOTS
Screenshots are basically just images or pictures of the screen. You can get screenshots by using the “Snipping Tool” application on your computer or by doing a CTRL-PRINTSCREEN and then pasting it into a Paint program to edit. When you open a Screenshot with a Paint program, you can also draw on it (with arrows and lines and circles as needed). This can be very helpful to someone reading your tutorial.

STEP 5: CLEAR AND EFFECTIVE
When you write out your introduction and your steps, it’s extremely important that you proofread. A poorly written tutorial might make the goal or the steps harder to understand.

STEP 6: TIME MANAGEMENT
The assignment below (Variable Manipulation #7) will last for 60 minutes. But it would be silly to start writing a Tutorial BEFORE you have spent any time with the code. So spend the first 15 minutes exploring the code together and manipulating variables, values, and operations. After 15 minutes, you will be encouraged to go back and get the zip file again so you can start gathering before/after screenshots as well as any other screenshots you want. This is also a great time to start planning which of the many manipulations that you want to include in your PowerPoint (remember, only 4 steps… no more, no less). The last 30 minutes should be your time for building a tutorial.

A GREAT STUDENT TUTORIAL DEMO

This is a Graded Variable Manipulation
A = 15+ JavaScript Comments (per team) + A Clearly Written 4 Step Tutorial
B = 12-14 JavaScript Comments (per team) + A Clearly Written 4 Step Tutorial
C = 10-11 JavaScript Comments (per team) + A Clearly Written 2-3 Step Tutorial
D = 6-9 JavaScript Comments (per team) + A Clearly Written 1 Step Tutorial
F = 0-5 JavaScript Comments (per team) + NO TUTORIAL WRITTEN

STEP 1: DOWNLOAD THE ZIP – Click here to download the Zip File for Variable Manipulation #7

STEP 2: FIND THE DOWNLOAD – If you clicked on the download above and it automatically downloaded, that means your Zip folder is sitting in your Downloads folder. Simply go get it and move it to your LG7_threejs folder. But if you clicked on the download above and it asked you where to save the file, please make sure you put it in your LG7_threejs folder.

STEP 3: EXTRACT ALL – You cannot work with, change, or even open files very well if you’re looking inside the zipped version. To get the regular folder opened, you need to RIGHT-CLICK on the zip file and choose EXTRACT ALL. And that will be the folder you can go into and change things.

STEP 4: OPEN HTML – Your zip folder has many files, but the only one you can open with a browser is the HTML file. So go ahead and open cameraangles.html with Chrome or Firefox to see what it looks like.

STEP 5: MANIPULATION – You should see 2 JS files and 1 HTML file, but only one of those files are worth manipulating. In the HTML file, you can change any of the SCRIPT variables or values. The others are considered DEPENDENT VARIABLES. Remember that variable manipulation can be more than just numbers. Variables can also be positive/negative, true/false, multiply/divide, add/subtract, etc.

STEP 6: WRITING COMMENTS – Be careful not to change a bunch of things at once or you’ll never know what happened. Try changing one thing at a time, refreshing your browser to see if anything changed, then writing a note about it in the SCRIPT with the // slashes. You’ll need to get in this habit because your learning goal project will require it.

STEP 7: TUTORIAL DEMO – Now that you have gone through the code, written comments, and gotten comfortable with the design, your next challenge is to create a simple tutorial, with screenshots, that could teach someone how to achieve the same results as you just did. That doesn’t mean you have to teach every single manipulation, but you should probably use your tutorial to teach someone the most important steps to achieve your final results.

STEP 8: ONLINE TIMER – At this point, your teacher will have already started the 60 minute clock. For the first 15 minutes, don’t worry about building a Tutorial. Spend that time just getting comfortable with the code and manipulating variables/values/operations. After fifteen minutes, you can go back through what you’ve done and start building.

STEP 1: DOWNLOAD THE ZIP – Click here to download the Zip File for Variable Manipulation #8

STEP 2: FIND THE DOWNLOAD – If you clicked on the download above and it automatically downloaded, that means your Zip folder is sitting in your Downloads folder. Simply go get it and move it to your LG7_threejs folder. But if you clicked on the download above and it asked you where to save the file, please make sure you put it in your LG7_threejs folder.

STEP 3: EXTRACT ALL – You cannot work with, change, or even open files very well if you’re looking inside the zipped version. To get the regular folder opened, you need to RIGHT-CLICK on the zip file and choose EXTRACT ALL. And that will be the folder you can go into and change things.

STEP 4: OPEN HTML – Your zip folder has many files, but the only one you can open with a browser is the HTML file. So go ahead and open shapeclipping.html with Chrome or Firefox to see what it looks like.

STEP 5: MANIPULATION – You should see 4 JS files and 1 HTML file, but only one two of those files are worth manipulating. In the HTML file, you can change any of the SCRIPT variables. In the OrbitControls.js, there are a few things you can try to change that might actually make an impact. All of the other files are part of the 3JS library you learned about in Level 7.1. They are considered DEPENDENT VARIABLES. Remember that variable manipulation can be more than just numbers. Variables can also be positive/negative, true/false, multiply/divide, add/subtract, etc.

STEP 6: WRITING COMMENTS – Be careful not to change a bunch of things at once or you’ll never know what happened. Try changing one thing at a time, refreshing your browser to see if anything changed, then writing a note about it in the SCRIPT with the // slashes. You’ll need to get in this habit because your learning goal project will require it.

STEP 7: ONLINE TIMER – At this point, your teacher will have already started the 20-25 minute clock. Be sure to use your time wisely and manipulate as many variables as you can in the time you have.

STEP 8: MANIPULATION TOUR – When the timer goes off at 20-25 minutes, you will be given 2 minutes to tour the classroom and see what others did with their codes.