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, prefix) {
    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", prefix+filename);
            a.click();
        }
        );
    });
}

function eventFire(el, etype){
    if (el.fireEvent) {
        el.fireEvent('on' + etype);
    } else {
        var evObj = document.createEvent('Events');
        evObj.initEvent(etype, true, false);
        el.dispatchEvent(evObj);
    }
}

function parseDojoDate(postDate) {

    if(postDate.includes('ago')) {
        dateStringOut = new Date().toLocaleDateString('en-ca');	
    } else {

        if(postDate.split(' ').length == 3) {
            postYear = postDate.split(' ')[2];
        } else {
            postYear = new Date().getFullYear()
        }
    
        switch (postDate.split(' ')[0]) {
            case 'Jan':
                postMonth = '01';
                break;
            case 'Feb':
                postMonth = '02';
                break;
            case 'Mar':
                postMonth = '03';
                break;
            case 'Apr':
                postMonth = '04';
                break;
            case 'May':
                postMonth = '05';
                break;
            case 'Jun':
                postMonth = '06';
                break;
            case 'Jul':
                postMonth = '07';
                break;
            case 'Aug':
                postMonth = '08';
                break;
            case 'Sep':
                postMonth = '09';
                break;
            case 'Oct':
                postMonth = '10';
                break;
            case 'Nov':
                postMonth = '11';
                break;
            case 'Dec':
                postMonth = '12';
                break;
        }
    
        postDay = ('00' + postDate.split(' ')[1].replace(',', '')).slice(-2);
        dateStringOut = postYear + '-' + postMonth + '-' + postDay;
    }

    return dateStringOut;
}

var els = document.querySelectorAll('[data-test-name="storyPostContents"]');
                                
els.forEach(
    function(currentValue) {

        firstImage = true;
        lastImage = false;

        // loop in order to catch each image in a set
        while(firstImage == true || lastImage == false) {

            // Get content node
            contentNode = currentValue.childNodes[0].childNodes[0];

            // Get content for file name
            var headerNode = currentValue.parentNode.querySelector('[data-test-name="storyPostHeader"]');
			var metadata = headerNode.querySelectorAll('.nessie-text')
            var teacher = metadata[0].innerText;
            var className = metadata[1].innerText;
            var postDate = metadata[2].innerText;
   
            var filePrefix = parseDojoDate(postDate) + ' - ' + className + ' - ' + teacher + " ";

            console.log("Processing: " + filePrefix);

            // download image and video  
            var video_els = contentNode.querySelector('[type="video/mp4"]');
            if(video_els !== null) {
                download(video_els.src, filePrefix);
            }
            
            url = window.getComputedStyle(contentNode).getPropertyValue("background-image");
            if(url != 'none') {
                download(url.slice(5, -8), filePrefix);
            }
            
            // check if there are more images
            numDivs = contentNode.parentNode.childNodes.length;
            
            // click or set lastImage to true as necessary
            switch(numDivs) {
                case 1: 
                    lastImage = true;
                    break;
                case 3:
                    if (firstImage == true) {
                        lastImage = false;
                        eventFire(contentNode.nextSibling, 'click');
                    } else {
                        lastImage = true;
                    }
                    break;
                case 4: 
                    eventFire(contentNode.nextSibling.nextSibling, 'click');
                    break;
                default:
                    console.log('Unexpected post structure. ' + numDivs + ' divs found. Check for missing content.');
                    lastImage = true;
                    break;
            }
            
            firstImage = false;
        }

        // remove the node to simplify the page; this is useful for debugging because it allows you run a few items at a time.
        //currentValue.remove()
    });

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

When I run this code in my Mac Chrome's console, the fails with the error Undefined.
I really dont know what is going wrong bcoz I know nothing about JS.
I am using this https://gist.github.com/Patrick330/aa5d16efaacaee9ffb76e52ba4fb86f6.

Can @Patrick330, @travishorn or anyone else help me here??

Yes, I have the same issue. For some reason it doesn't work :(

Copying & pasting an insightful comment from @pedralmeida on the original gist.

The script isn't working because fields changed names again. "data-test-name" is now only "data-name", for instance. Even then it takes a few more tweaks because of the dates, I personally gave up.

if you have access to a PC, what I suggest, for a layman like you, is to use the ChromeCacheView app. it will allow you to bulk download every content loaded by the browser into its cache, in a very simple way.

Copying & pasting an insightful comment from @pedralmeida on the original gist.

The script isn't working because fields changed names again. "data-test-name" is now only "data-name", for instance. Even then it takes a few more tweaks because of the dates, I personally gave up.
if you have access to a PC, what I suggest, for a layman like you, is to use the ChromeCacheView app. it will allow you to bulk download every content loaded by the browser into its cache, in a very simple way.

Thank you so much, Travis! I am trying to use both methods :)

Try this: https://gist.github.com/travishorn/c2b6111a4e63efdbf87a1de84c833ab1?permalink_comment_id=4647516#gistcomment-4647516

Try this: https://gist.github.com/travishorn/c2b6111a4e63efdbf87a1de84c833ab1?permalink_comment_id=4647516#gistcomment-4647516

Works fine!