Difference between revisions of "Hour of Code Teacher Notes"

From Scalable Game Design wiki
Jump to navigation Jump to search
 
(28 intermediate revisions by 3 users not shown)
Line 1: Line 1:
[[Image:AgentCubes hour-of-code.gif|right|450px]] Created by the original inventors of drag-and-drop programming for education this tutorial reaches a new benchmark to unleash the creative energy of your students. With AgentCubes online your students can create their own 3D shapes, create 3D worlds, program these worlds and share them with their friends. Have your students move [[media:Beyond_minecraft.pdf | beyond Minecraft]]. This tutorial is unique because it gives your students a choice. They can either follow an interactive tutorial to build a 3D Frogger game or, after learning the basics, skip ahead and build a completely different game. In one hour your students can finish the first third of the activity. If they submit their games they can continue working on their games later. But don't just take our words for what your students are learning and how engaged they will be. Watch [[videos | videos of teachers and students]] who have used AgentCubes and AgentSheets not just for an hour but hours and hours of code.
+
[[Image:Hour of code 2016 thumbnail 3D Frogger.png|right|450px]]
 +
Your students can create a complete 3D Frogger game, or any other game, which they can share with their friends and run on mobile and regular browsers. An interactive tutorial guides them through all the steps including how to make 3D shapes, and how to program them. In one hour they will be able to create at least the first 3D shape (a frog or indeed any shape they want) and program that Frog. If, at the end of the lesson they submit their games then they will receive an email including a link to their project. With this link they can continue working on the project at home. The 3D Frogger activity will introduce your students to important [[computational thinking]] concepts.
 +
<br style="clear:both" />
  
== Localization / Lokalisation / localización ==
+
== Classroom Management ==
* We have tutorials, videos and software in English language available.
+
[[Image:Www.GIFCreator.me g054bf.gif|right]]
* Unsere Tutorials, Videos und Software sind auf [http://web.fhnw.ch/plattformen/scalablegamedesign/mediawiki/index.php/Hour_of_Code_Infos_f%C3%BCr_Lehrpersonen Deutsch] verfügbar.
+
To introduce the game design activity [[media:Frogger Design slides.pptx.zip | use these slides]] to explain the game play. Show them the text and have your students:
* Nuestro software y el video de como crear un juego de Frogger en 3D existen en español.
+
* shout out the names of the nouns (these will be the objects called agents in AgentCubes), and
 +
* shout out the verbs (these will be the actions of the agents)
  
== Here's How it Works ==
+
After this introduction run the design and programming activity using one of these strategies:
 +
* (good) You demonstrate on the video projected classroom computer. Run each video segment, typically 2 minutes, and have your students follow the instructions. Have them work in pairs if possible.
 +
* (better) Ask for a student volunteer (no experience required) to run each video segment. This allows you to walk around in the classroom to make sure nobody gets lost.
 +
* (also good) if you have headsets have your students follow the instructions individually. Make it a policy that if your students are confused to have them first play the video segment again, or ask their neighbors for help before they raise a hand and ask you.
 +
<br style="clear:both" />
  
* There is a three part video tutorial. The first part takes around 45 minutes.
+
== Create 3D objects and worlds, program them and share them with your friends ==
* If the video doesn't work, you can download and print the [[media:Part_1_3DFrogger.pdf | Frogger lesson plan as handout]].
+
[[Image:AgentCubes hour-of-code.gif|right]]
* If you're in a classroom, consider playing the tutorial video on a projector.
+
Simply watch the video for a short while and begin to create a 3D Frogger game, or any other game you would like to build. The interactive table of contents allows you to skip to relevant topics.  
* We strongly encourage you to submit every game! (Even if the game is incomplete) If you provide an email address when you submit, you will receive a link to continue working on the game as well * as a certificate of completion.
 
* Parts 2 and 3 of the video tutorial may take more than an hour to complete and are provided only for completeness. Submitted projects can be worked on later at school or at home.
 
* [http://agentsheets.com/Documentation/COPPA.pdf Coppa compliance]
 
  
== Browser Recommendations ==
+
# '''Create 3D Objects''': Draw 2D images and turn them into amazing 3D shapes.
 +
# '''Create 3D Worlds''': Assemble the shapes you just built into exciting worlds.
 +
# '''Rule your World''': Bring your world to life by programming using simple drag and drop rules.
 +
# '''Share the world with your friends''': Click the "submit your game" (up, right in the programming environment) to send yourself a link to your game. With this link you can continue working on the game or share it with friends through email or Facebook. The game can be played on Smartphones. You even receive a Programming Certificate with your name.
  
* The AgentCubes Online activity uses webGL and requires a modern browser [http://get.webgl.org/ Check if you browser supports webGL]
+
== Tech Setup ==
* AgentCubes Online works best with: Chrome, Safari or Firefox.
+
[[Image:WebGL test cube.png|right|450px]]
* AgentCubes Online also works with Internet Explorer 11 but we would recommend using one of the browsers listed above if possible.
+
AgentCubes online does not require any installation but you may still want to check:
 +
* Make sure your browsers work. Run this [http://get.webgl.org little Browser Test]. If you do NOT SEE a spinning cube you may be to configure your browser (e.g., on older Macs you may need to enable WebGL in the Safari browser) or use a different version of a browser such as Google Chrome or Firefox.
 +
* YouTube may be blocked in your school. Make sure the video is playing.
 +
<br style="clear:both" />
 +
 
 +
== Beyond one Hour ==
 +
[[Image:First 3D printed color frog.jpg|right|450px]]
 +
* Agent shapes in AgentCubes can be printed with 3D printers. This feature is still experimental.
 +
* Finish your Frogger 3D game. Add more levels. Add layers.
 +
* Create [[Featured_Lesson_Plans#AgentCubes_Online_Curricular_Materials | more sophisticated games]].
 +
* Create STEM Simulations. Here is a [https://www.agentcubesonline.com/project/58718 Predators and Prey simulation]
 +
 
 +
<br style="clear:both" />
 +
 
 +
== Efficacy ==
 +
[[Image:Figure 3 Retention of Flow and Continuation Probabiity with annotations.jpg|right|450px]]
 +
Our activity is somewhat unusual in the sense that it includes a complete activity that can be programmed in an hour but ends with a "cliffhanger" leading to more programming. In the first hour students do create a first and already playable part of a game but the tutorial continues to allow students to create an elaborate game if they want to. Does the cliffhanger approach really work? Yes, we do have evidence comparing the [[media:SIGCSE Retention of Flow SIGCSE2016.pdf| 2013 3D Frogger activity]] with the [http://stanford.edu/~cpiech/bio/papers/inferringProblemSolvingPolicies.pdf 2013 Angry Birds (main) activity] and the retention in the first hour is slighty higher with the Frogger 3D activity. We can now [[media:Retention_of_Flow_Model_Camera_Ready.pdf | model and compare tutorials.]] Further, we also have data showing that students do indeed continue beyond the first hour.
 +
 
 +
What is learned?
 +
* Computational Thinking Pattern: 5 main object interaction abstractions
 +
**collision (frog, car)
 +
** user control (cursor controlled frog)
 +
**generate (tunnels generate cars)
 +
** absorb (tunnels absorb cars)
 +
** transport (turtles transport frogs)
 +
* Media/Authoring:
 +
** creating 3D shapes
 +
** composing 3D worlds
 +
** 3D camera control
 +
 
 +
For details on learning on motivation:  Repenning, A., Webb, D. C., Koh, K. H., Nickerson H., Miller, S. B., Brand, C., et al., [[media:TOCE_2015_Repenning.pdf | "Scalable Game Design: A Strategy to Bring Systemic Computer Science Education to Schools through Game Design and Simulation Creation,"]] Transactions on Computing Education (TOCE), vol. 15, pp. 1-31, 2015.
 +
<br style="clear:both" />
 +
== International Support ==
 +
{| style="float:right; margin-left: 10px;"
 +
| <embedvideo service="youtube" dimensions="[600]">https://www.youtube.com/watch?v=unDgy6jKpYY</embedvideo>
 +
|-
 +
| [http://www.youtube.com/watch?v=-QhjbFzzG-o Spanish version] &nbsp;&nbsp;&nbsp;&nbsp; [http://www.youtube.com/watch?v=1lJ-944CiGs German version]
 +
|}
 +
 
 +
* The video and the user interface can be changed to other languages: German, French, Italian, Spanish and Dutch.
 +
* Some countries have their own support sites for the 3D Frogger activity: [http://www.csedweek.ch Switzerland], [http://www.facebook.com/scalablegamedesignmx Mexico]
 +
<br style="clear:both" />
 +
 
 +
== ISTE Standards ==
 +
* ISTE S--4 '''Computational Thinker''': Show theory and practice of Computational Thinking Tools allowing students to create games and STEM simulations.
 +
* ISTE C--4 '''Professional development and program evaluation''': Outline the use of cognitive (Computational Thinking Pattern Analysis) and affective (Retention of Flow) learning assessment instruments. Share data of teacher professional development efficacy.
 +
* ISTE T--1 '''Facilitate and inspire student learning and creativity''': Explain the Zones of Proximal Flow learning framework to motivate and empower students through creative processes including the design and implementation of games and simulations.
 +
 
 +
== Sponsors ==
 +
&nbsp;&nbsp;
 +
[[File:Logo NSF.png | 100px | link= | alt="NSF Logo"]] &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 +
[[File:Logo Google.png | 215px | link= | alt="Google Logo"]] &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 +
[[File:Logo AgentSheets CT Tools.png | 225px | link= | alt="AgentSheets Logo"]]
 +
 
 +
 
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 +
[[File:Logo CU Boulder.png | 250px | link= | alt="CU Boulder Logo"]] &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 +
[[File:Monterrey Logo.png | 275px | link= | alt="Tecnologico de Monterrey Logo"]]
 +
 
 +
 
 +
<hoccounter/>

Latest revision as of 08:37, 19 November 2016

Hour of code 2016 thumbnail 3D Frogger.png

Your students can create a complete 3D Frogger game, or any other game, which they can share with their friends and run on mobile and regular browsers. An interactive tutorial guides them through all the steps including how to make 3D shapes, and how to program them. In one hour they will be able to create at least the first 3D shape (a frog or indeed any shape they want) and program that Frog. If, at the end of the lesson they submit their games then they will receive an email including a link to their project. With this link they can continue working on the project at home. The 3D Frogger activity will introduce your students to important computational thinking concepts.

Classroom Management

Www.GIFCreator.me g054bf.gif

To introduce the game design activity use these slides to explain the game play. Show them the text and have your students:

  • shout out the names of the nouns (these will be the objects called agents in AgentCubes), and
  • shout out the verbs (these will be the actions of the agents)

After this introduction run the design and programming activity using one of these strategies:

  • (good) You demonstrate on the video projected classroom computer. Run each video segment, typically 2 minutes, and have your students follow the instructions. Have them work in pairs if possible.
  • (better) Ask for a student volunteer (no experience required) to run each video segment. This allows you to walk around in the classroom to make sure nobody gets lost.
  • (also good) if you have headsets have your students follow the instructions individually. Make it a policy that if your students are confused to have them first play the video segment again, or ask their neighbors for help before they raise a hand and ask you.


Create 3D objects and worlds, program them and share them with your friends

AgentCubes hour-of-code.gif

Simply watch the video for a short while and begin to create a 3D Frogger game, or any other game you would like to build. The interactive table of contents allows you to skip to relevant topics.

  1. Create 3D Objects: Draw 2D images and turn them into amazing 3D shapes.
  2. Create 3D Worlds: Assemble the shapes you just built into exciting worlds.
  3. Rule your World: Bring your world to life by programming using simple drag and drop rules.
  4. Share the world with your friends: Click the "submit your game" (up, right in the programming environment) to send yourself a link to your game. With this link you can continue working on the game or share it with friends through email or Facebook. The game can be played on Smartphones. You even receive a Programming Certificate with your name.

Tech Setup

WebGL test cube.png

AgentCubes online does not require any installation but you may still want to check:

  • Make sure your browsers work. Run this little Browser Test. If you do NOT SEE a spinning cube you may be to configure your browser (e.g., on older Macs you may need to enable WebGL in the Safari browser) or use a different version of a browser such as Google Chrome or Firefox.
  • YouTube may be blocked in your school. Make sure the video is playing.


Beyond one Hour

First 3D printed color frog.jpg


Efficacy

Figure 3 Retention of Flow and Continuation Probabiity with annotations.jpg

Our activity is somewhat unusual in the sense that it includes a complete activity that can be programmed in an hour but ends with a "cliffhanger" leading to more programming. In the first hour students do create a first and already playable part of a game but the tutorial continues to allow students to create an elaborate game if they want to. Does the cliffhanger approach really work? Yes, we do have evidence comparing the 2013 3D Frogger activity with the 2013 Angry Birds (main) activity and the retention in the first hour is slighty higher with the Frogger 3D activity. We can now model and compare tutorials. Further, we also have data showing that students do indeed continue beyond the first hour.

What is learned?

  • Computational Thinking Pattern: 5 main object interaction abstractions
    • collision (frog, car)
    • user control (cursor controlled frog)
    • generate (tunnels generate cars)
    • absorb (tunnels absorb cars)
    • transport (turtles transport frogs)
  • Media/Authoring:
    • creating 3D shapes
    • composing 3D worlds
    • 3D camera control

For details on learning on motivation: Repenning, A., Webb, D. C., Koh, K. H., Nickerson H., Miller, S. B., Brand, C., et al., "Scalable Game Design: A Strategy to Bring Systemic Computer Science Education to Schools through Game Design and Simulation Creation," Transactions on Computing Education (TOCE), vol. 15, pp. 1-31, 2015.

International Support

<embedvideo service="youtube" dimensions="[600]">https://www.youtube.com/watch?v=unDgy6jKpYY</embedvideo>
Spanish version      German version
  • The video and the user interface can be changed to other languages: German, French, Italian, Spanish and Dutch.
  • Some countries have their own support sites for the 3D Frogger activity: Switzerland, Mexico


ISTE Standards

  • ISTE S--4 Computational Thinker: Show theory and practice of Computational Thinking Tools allowing students to create games and STEM simulations.
  • ISTE C--4 Professional development and program evaluation: Outline the use of cognitive (Computational Thinking Pattern Analysis) and affective (Retention of Flow) learning assessment instruments. Share data of teacher professional development efficacy.
  • ISTE T--1 Facilitate and inspire student learning and creativity: Explain the Zones of Proximal Flow learning framework to motivate and empower students through creative processes including the design and implementation of games and simulations.

Sponsors

   "NSF Logo"             "Google Logo"           "AgentSheets Logo"


                "CU Boulder Logo"       "Tecnologico de Monterrey Logo"


<hoccounter/>