{"id":4897,"date":"2015-02-12T11:20:20","date_gmt":"2015-02-12T15:20:20","guid":{"rendered":"http:\/\/tiie.w3.uvm.edu\/blog\/?p=4897"},"modified":"2022-04-15T16:44:54","modified_gmt":"2022-04-15T20:44:54","slug":"2-tools-for-building-hidden-object-games-with-students","status":"publish","type":"post","link":"https:\/\/tiie.w3.uvm.edu\/blog\/2-tools-for-building-hidden-object-games-with-students\/","title":{"rendered":"2 tools for building hidden object games with students"},"content":{"rendered":"<h2>Tie video game authorship to language learning<\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-thumbnail wp-image-4901\" src=\"https:\/\/tiie.w3.uvm.edu\/blog\/wp-content\/uploads\/2015\/02\/hiddenpowerpoint2-150x150.jpg\" alt=\"2 tools for making hidden object games with students\" width=\"150\" height=\"150\" \/>Last time we looked at <a title=\"Using hidden object games to support language learning\" href=\"https:\/\/tiie.w3.uvm.edu\/blog\/using-hidden-object-games-to-support-language-learning\/\" target=\"_blank\" rel=\"noopener noreferrer\">how hidden object games can support language learning<\/a>, and how to assess students&#8217; work with them. The next logical step, of course (some students might say it&#8217;s the<em> first<\/em> logical step) is to provide students with the tools to build their own games.<\/p>\n<p>Let&#8217;s look at 2 tools for building hidden object games with students.<\/p>\n<p><!--more--><\/p>\n<p>Commercial hidden object games are generally written using either the <a href=\"http:\/\/www.microsoft.com\/silverlight\/\" target=\"_blank\" rel=\"noopener noreferrer\">Microsoft Silverlight<\/a> or <a href=\"http:\/\/unity3d.com\" target=\"_blank\" rel=\"noopener noreferrer\">Unity3D<\/a> or a <a href=\"http:\/\/www.adobe.com\/devnet\/games\/gaming_engines.html\" target=\"_blank\" rel=\"noopener noreferrer\">Flash-based engine<\/a>*, all of which are gonzo powerful, but there&#8217;s really no quick-start option to jumping in with them. That said, older or motivated students can find <a href=\"https:\/\/web.archive.org\/web\/20161214062556\/http:\/\/www.shazaml.com:80\/archives\/creating-a-hidden-object-game-in-silverlight-3\" target=\"_blank\" rel=\"noopener noreferrer\">tutorials<\/a> out there (hey look: <a href=\"https:\/\/github.com\/siberianluck\/PhotoHunt\" target=\"_blank\" rel=\"noopener noreferrer\">everything you need in python!<\/a>), but let&#8217;s look today at tools that can potentially be deployed during 1-2 class periods and by educators who are light on coding experience. Let&#8217;s build!<\/p>\n<h3>Use PowerPoint. Yes, <em>PowerPoint<\/em>.<\/h3>\n<p>Finally! A use for all the clip art Microsoft packages standard with PowerPoint: turn it into hidden object games!<\/p>\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=aylMfZwfLBc\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-4901 size-full\" src=\"https:\/\/tiie.w3.uvm.edu\/blog\/wp-content\/uploads\/2015\/02\/hiddenpowerpoint2.jpg\" alt=\"2 tools for making hidden object games with students\" width=\"505\" height=\"352\" srcset=\"https:\/\/tiie.w3.uvm.edu\/blog\/wp-content\/uploads\/2015\/02\/hiddenpowerpoint2.jpg 505w, https:\/\/tiie.w3.uvm.edu\/blog\/wp-content\/uploads\/2015\/02\/hiddenpowerpoint2-300x209.jpg 300w\" sizes=\"auto, (max-width: 505px) 100vw, 505px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>The skinny:\u00a0PowerPoint&#8217;s clip art features a ton of everyday objects of the type that may find their way into your vocabulary lessons. Have students upload an image to use as the background image, then drag and drop the clip art representing your vocabulary words on top of the background image. All on the same slide.<\/p>\n<p>Now here&#8217;s the key: PowerPoint provides a super-customizable Animation panel, so you create a custom animation path that links each hidden object to its written representation, timing it to be triggered when the item is clicked on.<\/p>\n<ul>\n<li><em>Pros:<\/em>\n<ul>\n<li>PowerPoint is fairly standard software<\/li>\n<li>low skill bar to entry<\/li>\n<li>platform-agnostic<\/li>\n<li>finished product can be exported to be stored in online portfolios.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<ul>\n<li><em>Cons:<\/em>\n<ul>\n<li>No scoring mechanism<\/li>\n<li>No incentive to collaborate.<\/li>\n<li>This could be more properly termed &#8220;build a hidden object scene with students&#8221;.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>Here&#8217;s an\u00a0exhaustive\u00a0step-by-step demonstration of building hidden object games (as well as a version of Jeopardy!) in PowerPoint (hidden object lesson starts at 9:40):<\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/www.youtube.com\/embed\/aylMfZwfLBc\" width=\"420\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<h3>Or: HTML5 Hidden Object Game Blueprint<\/h3>\n<p><a href=\"http:\/\/www.kiwijs.org\/blueprints\/hidden-object-blueprint\/\"><img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-thumbnail wp-image-4899\" src=\"https:\/\/tiie.w3.uvm.edu\/blog\/wp-content\/uploads\/2015\/02\/HTML5blueprint-150x150.jpg\" alt=\"3 tools for making hidden object games with students\" width=\"150\" height=\"150\" \/><\/a>Kiwi.js provides a free bootstrapping package called <a href=\"http:\/\/www.kiwijs.org\/blueprints\/hidden-object-blueprint\/\" target=\"_blank\" rel=\"noopener noreferrer\">HTML5 Hidden Object Game Blueprint<\/a>. What it consists of is a package of files that you download onto your desktop: some javascript files, a little css and an image library.\u00a0When you <a href=\"http:\/\/www.uvm.edu\/~choman\/HiddenObjectBlueprint\/\" target=\"_blank\" rel=\"noopener noreferrer\">host these on a server<\/a>, they form a small, basic\u00a0hidden object game that can be customized by swapping out the image files for new images, and by modifying the javascript.\u00a0The process of these two activities provides dual lessons in both game construction and javascript.<\/p>\n<p>I know, I know, but seriously, that&#8217;s how we all learn these coding languages, boots on the ground: take the code someone else wrote, host it, modify it, break it, sob wildly, bang head on desk and figure out how to fix it.<\/p>\n<ul>\n<li><em>Pros:<\/em>\n<ul>\n<li>So useful. Learn some HTML5 and javascript!<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<ul>\n<li><em>Cons:<\/em>\n<ul>\n<li>You need server space.<\/li>\n<li>Can be used as part of a language learning lesson, but the focus here is more on the language of code rather than target acquisition.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>Except you could always swap out one set of objects with buttons like&#8230;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-4909 size-full\" src=\"https:\/\/tiie.w3.uvm.edu\/blog\/wp-content\/uploads\/2015\/02\/UI_2.png\" alt=\"2 tools for making hidden object games with your students\" width=\"100\" height=\"70\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>And the to-be-found objects with images like&#8230;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-4910 size-thumbnail\" src=\"https:\/\/tiie.w3.uvm.edu\/blog\/wp-content\/uploads\/2015\/02\/hidden_2-150x150.png\" alt=\"2 tools for making hidden object games with your students\" width=\"150\" height=\"150\" \/><\/p>\n<p>All you&#8217;d need after that might be a<a href=\"https:\/\/adventuresinahallway.files.wordpress.com\/2013\/11\/colectivofifthward2.jpg\" target=\"_blank\" rel=\"noopener noreferrer\"> big background image of a food shop, released under Creative Commons reuse license<\/a>&#8230;<\/p>\n<p>Let us know how it works out.<\/p>\n<p>ETA: <a href=\"http:\/\/www.uvm.edu\/~choman\/HiddenObjectBlueprint2\/\">BOOM<\/a>. Foreign-language games anyone? Ooh, although it looks like the meat and butter somehow got tangled up. Should be easy enough to fix&#8230;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Tie video game authorship to language learning Last time we looked at how hidden object games can support language learning, and how to assess students&#8217; work with them. The next logical step, of course (some students might say it&#8217;s the first logical step) is to provide students with the tools to build their own games. &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/tiie.w3.uvm.edu\/blog\/2-tools-for-building-hidden-object-games-with-students\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;2 tools for building hidden object games with students&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":4900,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[26,90,296],"class_list":["post-4897","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-edugaming","tag-coding","tag-digital-literacy-tools","tag-hidden-object-games"],"_links":{"self":[{"href":"https:\/\/tiie.w3.uvm.edu\/blog\/wp-json\/wp\/v2\/posts\/4897","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tiie.w3.uvm.edu\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tiie.w3.uvm.edu\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tiie.w3.uvm.edu\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tiie.w3.uvm.edu\/blog\/wp-json\/wp\/v2\/comments?post=4897"}],"version-history":[{"count":3,"href":"https:\/\/tiie.w3.uvm.edu\/blog\/wp-json\/wp\/v2\/posts\/4897\/revisions"}],"predecessor-version":[{"id":31363,"href":"https:\/\/tiie.w3.uvm.edu\/blog\/wp-json\/wp\/v2\/posts\/4897\/revisions\/31363"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tiie.w3.uvm.edu\/blog\/wp-json\/wp\/v2\/media\/4900"}],"wp:attachment":[{"href":"https:\/\/tiie.w3.uvm.edu\/blog\/wp-json\/wp\/v2\/media?parent=4897"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tiie.w3.uvm.edu\/blog\/wp-json\/wp\/v2\/categories?post=4897"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tiie.w3.uvm.edu\/blog\/wp-json\/wp\/v2\/tags?post=4897"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}