Saving the images and videos from your ClassDojo storyline

download-classdojo-media.js

/* run this in the console on the ClassDojo page */

function download(url) {
  fetch(url).then(function (t) {
    return t.blob().then((b) => {
      var a = document.createElement("a");
      a.href = URL.createObjectURL(b);
      var n = url.lastIndexOf("/");
      var filename = url.substring(n + 1);
      a.setAttribute("download", filename);
      a.click();
    });
  });
}

var els = document.querySelectorAll('[data-test-name="storyPostImage"]');

els.forEach(function (currentValue) {
  url = window
    .getComputedStyle(currentValue)
    .getPropertyValue("background-image");
  download(url.slice(5, -8));
});

var video_els = document.querySelectorAll('[type="video/mp4"]');

video_els.forEach(function (currentValue) {
  download(currentValue.src);
});

download-classdojo-media.md

Purpose

ClassDojo is a classroom communication app used to share reports between parents and teachers. Teachers track student behavior and upload photos or videos. The gamification style system teaches developmental skills through real-time feedback.

When your child's teacher shares a photo, it goes on your parent "storyline". Unfortunately, ClassDojo does not provide any means of saving these photos. In fact, the photos are displayed in a <div> using style: background-image('...'); so right-clicking and choosing "Save image" is not an option.

This script will download all currently loaded story post images and videos.

Usage

1. Load your parent storyline (ClassDojo homepage when logged in)
2. Make sure all photos and videos you want to save are loaded
3. Open the JavaScript console (Ctrl + Shift + J in Chrome)
4. Copy and paste all of the code above and press Enter