Because of the layout of my room and the fact that I teach the same lessons to three different classes per semester, I decided to create an online arcade (which I called “Barrcade” since that’s my last name) using the web lab on Code.org. I displayed the games so students can see work by everyone, even those in other classes. Not only can they play each other’s games, but I created a Google Form for feedback. This gives the chance for students to give and receive final feedback from anyone, even those not in their class.
Note: I made different web projects for each class and linked them to cut down on the number of files per project since Code.org does not have folders for their web lab.
This is great! In the past (using Scratch) I’ve created a similar “arcade” (love your name by the way) in which the student pay to play and the money goes to support local clubs in the school. But without the feedback form you’ve created. Nice work!
This is a terrific idea! We’re having a family code night and have been brainstorming ideas for how to share our projects with others. I’m going to share this with my students.
How do you share the feedback with the teams? Is it a different form for each game or do you sort the data from one spreadsheet?
What I did was make one form that collected student emails so I could see who was leaving feedback (to keep comments constructive). Then I would export the data, sort the spreadsheet by the name of the game, omit the emails, and then redistribute the data to the students who made the games. It required a little bit of clean-up on my end, but overall it worked very well. The only issue I ran in to was games having the same or similar name. I’m going to have to keep a close eye on that in the future.
I do it this way so students can be honest about their feedback knowing it was anonymous, but also responsible since they knew I would know who wrote it. (I’ve had some ignorant remarks come through on past projects without including the ability to know who did it.)
How did you create the page where the students accessed the game. I love the idea and I think I know how I would do something like that but I don’t want to have to reinvent the wheel if I don’t have to. Thanks.
Because of the high number of images and pages, I had to make three different Web Lab projects and link each together.
The Code
You can “View Page Source” for each page to see the code I wrote, but I’ll do a screenshot of the back end. Because it is through Code.Org, you will have to start copying from <!DOCTYPE html>.
Feedback Form
If you click on the link to the feedback form, you can copy my feedback form to modify your own. You should see an icon in the top right corner that will allow you to copy it.
Embed Games
I made a page for each game. If you visit one, you can inspect the page for that code.
To get the code to embed the games, click the share button on each project and select “Show Advanced Options.” Switch to the “Embed” tab and it will give you the code. You can also select “Hide Ability to View Code.” This was probably the most time consuming because I had to go to each project to get the code. Next time, I will have to have the students provide it.
I love the barrcade idea. We shared our projects in the classroom too. We did it through 2 google forms and it gave us a chance to share feedback with each other. The first google form was used to collect the links to each students individual submissions. Once all of them had submitted, I exported the links to another sheet for feedback. So students did not know whose game they were playing unless the author shared it aloud in class It gave us an opportunity to give and receive constructive feed without feeling the glare of the spotlight.
Loving this idea but think we will take it a step further-have students add it in to their own Webpage and use the Webpage as an actual class portfolio of work.
One question-when playing the games through the webpages, the screen wants to scroll when using the up and down arrows to control the player. Any ideas as to how to stop the scrolling during game play? I know kids could rewrite the code to use other buttons for up and down but the arrow keys make the most sense. Thanks for the great idea!
I think that is a great idea! I’ve considered something similar by having their websites be their journals for the class but I wanted them to be interested in the content so I opened it up to being whatever they wanted. But to have them create a new Web Lab Project and add to it would be extremely beneficial and help them retain the content better. We’re in Unit 2 now, it might not be too late. I also want to use this same method for sharing websites, apps, and interactive greeting cards across my classes.
I just wish Code.org’s Web Lab allowed for folders to help keep files better organized. The more images you have to add, the longer it takes to load (which is also why I had to make three projects and link them together). It would also be better aligned with the way web developers manage files.
As for the button issue. I have noticed that but when the students would start playing a game, it tends to stop after some time. This issue varies with different screen resolutions. The best way to resolve this is to remove the header image or make it smaller so that the user won’t have to scroll to see all of the content on the page. Removing the need to scroll should prevent it from wanting to shift up and down. I believe I used CSS to control the header size on those pages so it would be quick to change it on those pages and see if that corrects it.
I had high hopes to create something like this but time got away from me. Thanks for the idea though because I created an arcade in Padlet, where my students posted the links to their games (the pink titles are links) and a picture of their games. They had to rate each other’s games and provide feedback. This was great because my students were able to see the games that the other classes did. So if you’re not as awesome as Chrissie and able to create an arcade, Padlet works well.
It gave us an opportunity to give and receive constructive feed without feeling the glare of the spotlight.