{"id":1553,"date":"2026-04-18T00:10:00","date_gmt":"2026-04-18T08:10:00","guid":{"rendered":"https:\/\/edtechuvic.ca\/ied336\/?p=1553"},"modified":"2026-04-28T07:25:06","modified_gmt":"2026-04-28T15:25:06","slug":"topic-10-computational-thinking","status":"publish","type":"post","link":"https:\/\/edtechuvic.ca\/ied336\/2026\/04\/18\/topic-10-computational-thinking\/","title":{"rendered":"Topic 10 &#8211; Computational Thinking, &amp; Interactive Stories"},"content":{"rendered":"\n<p>Today we will take a closer look at coding and computational thinking as cross-curricular tools we can use to enrich our curriculum, and potentially recommend tools our learners can use to aid them in their inquiries. I hope that there aren&#8217;t too many groans while I tell yet another fainting miniature goat story to illustrate an example of computational thinking. In the hands-on portion of today&#8217;s class, we will all create a &#8220;choose your own adventure&#8221; story with the Twine web application on our laptops, and optionally do a bit of fun coding! <\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><b>Learning Objectives<\/b><\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span style=\"font-weight: 400\">Describe how computation thinking can help learners become better problem solvers.<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400\">Identify non-math-related opportunities for integrating coding and computational thinking into your subject area\u2019s curriculum.<\/span><\/li>\n\n\n\n<li>Describe how computation thinking or coding can turn math abstractions into concrete form to aid students with their inquiries.<\/li>\n\n\n\n<li>Create a &#8220;choose your own adventure story&#8221; using Twine and then link to it from your topic reflection blog post.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><b>Class Time<\/b><\/h2>\n\n\n\n<p>Let&#8217;s learn a bit more about what we mean when we talk about computation thinking in K-12 by <span style=\"font-weight: 400\">watching the following Digital Literacy + Computation Thinking for Children video:<\/span><\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Best of  Digital Literacy  + Computational Thinking for Children\" width=\"676\" height=\"380\" src=\"https:\/\/www.youtube.com\/embed\/mUXo-S7gzds?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><figcaption class=\"wp-element-caption\">(4 min)<\/figcaption><\/figure>\n\n\n\n<p><span style=\"font-weight: 400\">Skim SD 61\u2019s <\/span><a href=\"https:\/\/learn.sd61.bc.ca\/coding\/computational-thinking\/\"><span style=\"font-weight: 400\">Computational Thinking<\/span><\/a><span style=\"font-weight: 400\"> resource web page.<\/span> <\/p>\n\n\n\n<p><span style=\"font-weight: 400\">Watch this overview of a curriculum that can help you integrate computation thinking with English &amp; Language Arts using fun and engaging coding activities:<\/span><\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"EDU in 90: CS First for ELA Instruction\" width=\"676\" height=\"380\" src=\"https:\/\/www.youtube.com\/embed\/WY-biNE94Do?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><figcaption class=\"wp-element-caption\">(3 min)<\/figcaption><\/figure>\n\n\n\n<p>Please reflect on possible ways could &#8220;coding&#8221; be used to enrich one of your favourite non-math subjects. Also, reflect on possible strengths and weaknesses of using coding in your classroom? <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Hands-on Lab Time<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Coding with Scratch by MIT<\/h3>\n\n\n<div class=\"wp-block-image is-resized\">\n<figure class=\"alignright size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"538\" src=\"https:\/\/edtechuvic.ca\/ied336\/wp-content\/uploads\/sites\/18\/2022\/03\/anna-elsa-1024x538.png\" alt=\"Anna &amp; Elsa coding with scratch to make geometric shapes\" class=\"wp-image-3267\" srcset=\"https:\/\/edtechuvic.ca\/ied336\/wp-content\/uploads\/sites\/18\/2022\/03\/anna-elsa-1024x538.png 1024w, https:\/\/edtechuvic.ca\/ied336\/wp-content\/uploads\/sites\/18\/2022\/03\/anna-elsa-300x158.png 300w, https:\/\/edtechuvic.ca\/ied336\/wp-content\/uploads\/sites\/18\/2022\/03\/anna-elsa-768x403.png 768w, https:\/\/edtechuvic.ca\/ied336\/wp-content\/uploads\/sites\/18\/2022\/03\/anna-elsa-600x315.png 600w, https:\/\/edtechuvic.ca\/ied336\/wp-content\/uploads\/sites\/18\/2022\/03\/anna-elsa-945x496.png 945w, https:\/\/edtechuvic.ca\/ied336\/wp-content\/uploads\/sites\/18\/2022\/03\/anna-elsa.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n<p>This is optional, but consider <a rel=\"noopener\" href=\"https:\/\/scratch.mit.edu\/join\" target=\"_blank\">creating a Scratch account<\/a> at MIT&#8217;s free Scratch website. You can use Scratch without creating an account, but you cannot save and share your programs with other people without an account. Note: Scratch is hosted by the <a rel=\"noopener\" href=\"https:\/\/web.mit.edu\/\" target=\"_blank\">Massachusetts Institute of Technology<\/a> (MIT), and the data is stored in the USA and is subject to the <a rel=\"noopener\" href=\"https:\/\/en.wikipedia.org\/wiki\/Patriot_Act\" target=\"_blank\">US Patriot Act<\/a>.<\/p>\n\n\n\n<p>See what a finished, or nearly finished Scratch games look like by playing one of the games below in your favourite subject areas. This will allow you to see some examples of finished coding projects that are geared toward K-12 learners:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span style=\"font-weight: 400\">Storytelling: <\/span><a href=\"https:\/\/scratch.mit.edu\/projects\/204967236\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400\">Multimedia &amp; Interactive Storytelling<\/span><\/a><\/li>\n\n\n\n<li><span style=\"font-weight: 400\">Social Studies: <\/span><a href=\"https:\/\/hourofcode.com\/rmagicequity\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400\">Equity vs Equality<\/span><\/a><\/li>\n\n\n\n<li><span style=\"font-weight: 400\">Physics: <\/span><a href=\"https:\/\/scratch.mit.edu\/projects\/523697\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400\">Ballistic Arcs with Artillery<\/span><\/a><span style=\"font-weight: 400\">&nbsp;<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400\">Math &amp; geometry: <\/span><a href=\"https:\/\/scratch.mit.edu\/projects\/159289014\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400\">Regiomontanus&#8217; angle maximization problem<\/span><\/a><span style=\"font-weight: 400\">&nbsp;<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400\">Logic, Looping, &amp; Fun: <\/span><a href=\"https:\/\/scratch.mit.edu\/projects\/249341978\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400\">Star Catcher<\/span><\/a><span style=\"font-weight: 400\">\u00a0<\/span><\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">OPTIONAL: Start work on one of the two coding activities to get a feel for what they are like:<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Learn to code with <a href=\"https:\/\/studio.code.org\/s\/frozen\/stage\/1\/puzzle\/1\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400\">Anna &amp; Elsa<\/span><\/a> from Frozen<\/li>\n\n\n\n<li>Learn to code with<span style=\"font-weight: 400\">&nbsp;<a rel=\"noopener\" href=\"https:\/\/studio.code.org\/flappy\/1\" target=\"_blank\">Flappy Birds<\/a><\/span> (very fun!)<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Vibe Coding<\/h3>\n\n\n\n<p><strong>There is no requirement to Vibe code in our class, but please review the vibe coding process below so that you are familiar with what&nbsp;<\/strong>. If you\u2019d like, feel free to create your own Portuguese soundboard for a language of your choice (I see you French Imersion teachers \ud83d\ude09 That said, I will provide audio files for Portuguese, that you can use as places holders if you are vibe coding a soundboard for another language, but unless you record mp3 audio files for the language you chose you will be stuck with Porgutuese.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Portugues Soundboard Step-by-Step<\/h4>\n\n\n\n<p>Here are the steps I used to vibe code the Brazilian Portuguese Sound Board web application:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>You can use any Generative AI tool, for this activity but for coding I\u2019d strongly recommend using\u00a0<a href=\"https:\/\/claude.ai\/\" target=\"_blank\" rel=\"noreferrer noopener\">Claude<\/a>\u00a0for this assignment as it currently does as good a job as Google\u2019s\u00a0Gemini and is much more user friendly for people who do not have a \u201ccode editor\u201d already installed on their laptops:<\/li>\n\n\n\n<li>Copy and paste the following prompt into your GenAI tool (feel free to change the language of course) and then press\u00a0<strong>Enter<\/strong>\u00a0on your keyboard:<br><em>I\u2019d like to create a HTML web application, to help people learn to say the letter of the Brazilian Portuguese alphabet properly. When a user clicks on a letter the web app will use the computer speaker to correctly pronounce the letter. I will provide the sound files for each Portuguese letter, and put them in a directory called \u201cassets\u201d and the filenames will be all lowercase. Put a phonetic pronunciation for English language speakers under each letter. Here is an example of what I would like for the alphabet of a different language: https:\/\/dom-aya.github.io\/ayajuthem-soundboard\/<\/em><\/li>\n\n\n\n<li>Next we need wait a minute or two for Claude to create the HTML file for you. Once you see the\u00a0<strong>Download<\/strong>\u00a0button, click on it and make note of where you saved it on your laptop.<\/li>\n\n\n\n<li>Download the zip file that contains all the MP3 audio files for each Portuguese letter to the same folder where you downloaded the HTML file Claude created for you:\n<ul class=\"wp-block-list\">\n<li>Download the Portuguese letter zip file called:<strong>\u00a0<a href=\"https:\/\/richmccue.github.io\/brasil-letters\/assets.zip\" target=\"_blank\" rel=\"noreferrer noopener\">assets.zip<\/a><\/strong><\/li>\n\n\n\n<li>Find the assets.zip file on your laptop and unzip it. On a\u00a0 \u00a0Mac you simply\u00a0<strong>double-click<\/strong>\u00a0on the file and it will unzip. On Windows you right mouse click on the file and select\u00a0<strong>Extract All\u2026<\/strong><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Now that you have the audio files folder in the same place as the HTML file you downloaded, you can open it in your file manager by double clicking on it and it should be making sounds for each of the letters.<\/li>\n\n\n\n<li>If you created the Soundboard in Claude, it should look something like this:\u00a0<a href=\"https:\/\/richmccue.github.io\/brasil-letters\/claude.html\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/richmccue.github.io\/brasil-letters\/claude.html<\/a><\/li>\n\n\n\n<li>If you are having any problems, please let Rich know and he can give you a hand in a breakout room.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/edtechuvic.ca\/edci336\/wp-content\/uploads\/sites\/2\/2026\/02\/vibe-claude-download.png\" alt=\"\" \/><\/figure>\n\n\n\n<p><strong>Reflection<\/strong>: Are there any web based game you\u2019d like to try creating?<\/p>\n\n\n\n<p><strong>Reflection<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>How might the language revitalization teacher include some of their high school learners in helping to develop the tutorial further?<\/li>\n\n\n\n<li>Do any ideas come to mind for customized web based tutorials or games that could help your learners in the discipline that you plan on teaching?<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Interactive Storytelling with Twine<\/h3>\n\n\n\n<p><a href=\"http:\/\/twinery.org\/2\/\" target=\"_blank\" rel=\"noreferrer noopener\">Twine<\/a>&nbsp;is an open-source tool that can be used to create stories that are interactive and non-linear. Twine can be used for other purposes including Guided Interviews or storytelling including embedded images, video, and audio if desired. Twine can also create game-based experiences which give readers options and choices throughout the the story. <\/p>\n\n\n\n<p>All reader choices and selections in Twine stories are saved locally in the readers\u2019 web browser and there is also no need to create an account, which means that there are little to no privacy concerns when using Twine in educational settings.<\/p>\n\n\n\n<p>This workshop is primarily hands-on practice with Twine in order to learn to get some experience and be able to create your own interactive story. Please watch the following short introductory video for Twine to  prepare you for the hands-on activities (note: we will be using the <a href=\"https:\/\/twinery.org\/2\/\" target=\"_blank\" rel=\"noreferrer noopener\">Online version of Twine<\/a> in our class):<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Introduction to Twine for Interactive and Non-linear Stories\" width=\"676\" height=\"380\" src=\"https:\/\/www.youtube.com\/embed\/3oHb5DKjjrg?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><figcaption class=\"wp-element-caption\">(8 min)<\/figcaption><\/figure>\n\n\n\n<p>Please work through at least the first <a rel=\"noreferrer noopener\" href=\"https:\/\/lib.uvic.ca\/tw\" target=\"_blank\">Twine workshop<\/a> activity below, and if you enjoy it please feel free to  work through the other activities as well:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a rel=\"noreferrer noopener\" href=\"https:\/\/uviclibraries.github.io\/twine\/getting-started.html\" target=\"_blank\">Create your first Twine Story<\/a>\n<ul class=\"wp-block-list\">\n<li>Here is the sample Cree story, <a rel=\"noreferrer noopener\" href=\"https:\/\/richmccue.github.io\/twine.html\" target=\"_blank\">Napi and the Rock<\/a> that uses some innovative coding techniques to help make the story a language revitalization tool.<\/li>\n\n\n\n<li>Below is the code to flip words back and forth between English and another language. In this example the Spanish words displayed are &#8220;Buenos Dias&#8221; and the English words are &#8220;Good Morning.&#8221;<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>|2&gt;&#091;(link-rerun:\"&#091;Buenos Dias]\")&#091;(show:?1)(hide:?2)]]|1)&#091;(link-rerun:\"&#091;Good Morning]\")&#091;(hide:?1)(show:?2)]]<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>OPTIONAL: <a href=\"https:\/\/uviclibraries.github.io\/twine\/github.html\" target=\"_blank\" rel=\"noreferrer noopener\">Publish your story to the world using GitHub Pages for free!<\/a><a href=\"https:\/\/uviclibraries.github.io\/twine\/#learning-objectives\"><\/a><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Topic Blog Post<\/h2>\n\n\n\n<p>In your topic blog post, please include a photo, video, or screenshot of your Vibe Code project, Twine Story or Coding project and respond to two of the following prompts (or make your own critical evaluation of this topic or technology):<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Describe how computation thinking could help learners become better problem solvers.<\/li>\n\n\n\n<li>Identify potential non-math-related opportunities for integrating computational thinking and\/or coding into your language revitalization curriculum.<\/li>\n\n\n\n<li>Reflect on the pros and cons of possibly using Twine in the classroom.<\/li>\n\n\n\n<li>Reflect on the pros and cons of possibly using Vibe Coding in the classroom.<\/li>\n\n\n\n<li>OPTIONAL: Link to a vidbe code, Twine or coding project you created.<\/li>\n\n\n\n<li>Submit your blog URL to the Brightspace assignment for this topic.<\/li>\n<\/ul>\n\n\n\n<p><strong>Note<\/strong>: Catch up on previous Topic Blog Posts and submit them to BrightSpace!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Today we will take a closer look at coding and computational thinking as cross-curricular tools we can use to enrich our curriculum, and potentially recommend tools our learners can use to aid them in their inquiries. I hope that there&#8230; <a class=\"more-link\" href=\"https:\/\/edtechuvic.ca\/ied336\/2026\/04\/18\/topic-10-computational-thinking\/\">Continue Reading &rarr;<\/a><\/p>\n","protected":false},"author":11,"featured_media":3267,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_s2mail":"yes","footnotes":""},"categories":[19],"tags":[47,48,50,49,52],"class_list":["post-1553","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-rich","tag-coding","tag-computational-thinking","tag-cross-curricular","tag-logic","tag-vibe-coding"],"_links":{"self":[{"href":"https:\/\/edtechuvic.ca\/ied336\/wp-json\/wp\/v2\/posts\/1553","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/edtechuvic.ca\/ied336\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/edtechuvic.ca\/ied336\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/edtechuvic.ca\/ied336\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/edtechuvic.ca\/ied336\/wp-json\/wp\/v2\/comments?post=1553"}],"version-history":[{"count":43,"href":"https:\/\/edtechuvic.ca\/ied336\/wp-json\/wp\/v2\/posts\/1553\/revisions"}],"predecessor-version":[{"id":4369,"href":"https:\/\/edtechuvic.ca\/ied336\/wp-json\/wp\/v2\/posts\/1553\/revisions\/4369"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/edtechuvic.ca\/ied336\/wp-json\/wp\/v2\/media\/3267"}],"wp:attachment":[{"href":"https:\/\/edtechuvic.ca\/ied336\/wp-json\/wp\/v2\/media?parent=1553"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/edtechuvic.ca\/ied336\/wp-json\/wp\/v2\/categories?post=1553"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/edtechuvic.ca\/ied336\/wp-json\/wp\/v2\/tags?post=1553"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}