PBL with Digital Storytelling Tools

PBL with digital storytelling tools

This past semester my social studies methods class at the University of Portland partnered with the Oregon Jewish Museum and Center for Holocaust Education (OJMCHE) to design curriculum for the Oregon Holocaust Memorial in Washington Park here in Portland Ore. With historical memorials in the news and neo-Nazis on the march, this community-based challenge inspired my students to use a PBL approach to explore instructional design with purpose.

We explored the Holocaust Memorial and the Oregon Jewish Museum reflecting on how we could provide contextual information to enhance the visitor experience to the Memorial. Working with April Slabosheski, the OJMHE Manager of Museum and Holocaust Education, we envisioned interactive resources that would benefit a busy teacher bringing middle and high school students on a field trip to the Memorial. We knew that the same tools would be useful to any visitor to the memorial.

Oregon Holocaust Memorial Header

We designed a WordPress site – Oregon Holocaust Memorial to host the resources. Students used their class experience using a variety of storytelling tools from KnightLabs to create new content for our Memorial site. Other apps were integrated into the site included: ESRI StoryMap, ThingLink, SlideShare, Apple Keynote, iMovie and Garage Band.

 

Digital storytelling tools:

Place by Nancy Guidry offers insights into the geography of the holocaust. Nancy used JuxtaposeJS and ArcGIS Story Maps.

Time by James Bayless and Kelly Sutton features a timeline made using TimelineJS.

People by David Grabin and Taran Schwartz details both the millions murdered in the Holocaust and the stories of some of the survivors. It was made using StoryMapJS and Apple Keynote.

Visit by Paxton Deuel orients visitors to the site with an interactives made using ThingLink and Apple Keynote / SlideShare.

I like to collaborate in these projects, so I created a section called Voices. It uses SoundCite to add inline audio oral history clips of survivors talking about family members murdered in the Holocaust.


Paxton Deuel wrote a reflection on the project that captures the power of PBL:

What separates project-based-learning (PBL) from other instructional techniques, is that at the end of the day, after grades, and feedback, and anxiety filled finals week, students (that’s us) are left with a product that extends beyond the classroom. In this case, the product is the Oregon Holocaust Memorial website. But just imagine, if most classes were project driven, how many meaningful and authentic contributions could students produce? The possibilities are endless.

A common complaint of higher education is that it exists in a vacuum. A protected environment insulated from the demands of the real world. Professors and students fill their time with hypothetical musings and idyllic aspirations for the future…. PBL bridges the gap between academia and “real life” by giving students the opportunity to create products that will be used outside of school, outside of the university bubble. This makes the school work both meaningful and productive, qualities that every student should strive for–from pre-schoolers to Ph.D’s.


Image credit: Vintage Typewriter by Florian Klauer / Unsplash

Tour Japantown PDX with StoryMapJS and JuxtaposeJS

Northwestern University Knight Lab has produced some great free storytelling tools. I’ve previously posted about comparing images using JuxtaposeJS. It’s great for telling then and now stories when you have a good balance of continuity and change. Here’s a example of frame comparison I made using the tool. Use your mouse to grab the slider and move it up and down.

It shows one of Portland’s Japanese owned/managed hotels back in the heyday of Portland’s Japantown before the forceable removal and incarceration of its citizens during WWII. More on how to create with JuxtaposeJS

Another KnightLab tool is StoryMapJS, a free tool to help you tell stories on the web that highlight locational content. I’ve been playing around with StoryMap and thought it might be fun to see if I could embed JuxtaposeJS sliders into a StoryMap. I think the integration worked well – though it is better viewed from this direct link on your desktop / mobile device than in the embed below. (This embed messes a bit with the size of the feature photos.) As you go though the tour you’ll see I used a mix of static photographs and image blends I made with JuxtaposeJS.

I had lots of great content from my multi-touch book Portland’s Japantown Revealed. It featured engaging then / now photo widgets that allow the user to “paint” history into contemporary photos with a wipe of their finger. So I reused the then / now photo comparisons using the a different tool – JuxtaposeJS and then used them for image content in the StoryMap. Note: Historic images are supplied by Oregon Nikkei Legacy Center. I took the contemporary photos.

Backstory:  I was scheduled to visit Marisa Hirata’s 3rd graders at Portland’s Alameda Elementary School. Students had been researching Portland’s Japantown and had already designed a “shoebox” replica of the community. For my visit, I created this StoryMapJS “tour” and the students used each stop as writing prompts.  This StoryMap was great for helping students to visualize how people’s lives were lived in Portland’s thriving pre-WWII “Nihonmachi.”

Tell Then and Now Image Stories with JuxtaposeJS

Created with two archival photographs
Tom Torlino – a student at Carlisle Indian School, 1882 and 1885.
More about Tom at my post on Medium.
Pro tip: get the eyes aligned

I’m excited about JuxtaposeJS – a new free web-based “storytelling” tool from the Knight Lab at Northwestern University. As they describe it: “JuxtaposeJS helps storytellers compare two pieces of similar media, including photos, and GIFs. It’s ideal for highlighting then/now stories that explain slow changes over time (growth of a city skyline, regrowth of a forest, etc.) or before/after stories that show the impact of single dramatic events (natural disasters, protests, wars, etc.).”

I think it’s a great tool for students and teachers who want to explore themes of continuity and change. While it could be used to compare and contrast in subjects across the curriculum, I’ve created a few examples using historical content.

I selected pairs of historical and contemporary images with elements that are consistent and aspects that change. But the challenge is to size and crop the images so that the consistencies align. To accomplish that, I used another free tool – Google Slides – to position and crop each pair of images and export as JPGs before importing into JuxtaposeJS. (Scroll to the bottom of this post for my workflow video that illustrates each step of the process.)

 
Timeline slider

Created with archival photograph paired with a screenshot I took from Google Street View.
Portland Ore Engine No 2 – 510 NW 3rd Ave.
Pro tip: choose a historic image that is shot from an angle similar to Street View. Street View is made up of a series of still images. You may need to navigate slightly on the street to get a shot that matches. Street View has been shooting for years. Use the drop down timeline (highlighted here) in upper left of Street View that has the angle and lighting that works best for your Juxtapose

Archival photograph of paired with photograph I took in the same location.
Taylor Hotel entrance Circa 1920
Pro tip: bring along a print out of historic photo to line up you new shot. Maybe you’ll get lucky (like I did) and find a SUV parked in the right spot. 

Here’s a video that details my workflow for this project
You’ll see how I used the transparency feature in Google Slides to create two well-aligned images that I imported into JuxtaposeJS via Dropbox. JuxtaposeJS supports both vertical and horizontal sliders. Pick the orientation that does a better job of concealing or revealing the continuity and change. Once the images are “published” at JuxtaposeJS they can be imported into your web via an iFrame embed as I have done in this post.

Image credits:
Tom Torlino
Portland Ore Engine No 2
Taylor Hotel Entrance. 347 SW 3rd Ave Portland Oregon Courtesy of Oregon Nikkei Legacy Center ONLC 533