Convert Canvas quiz results to JSON instantly!

! Canvas Quiz To JSON.md

Canvas Quiz -> JSON Converter

To run, copy and paste the script below into the browser console on the quiz results page, then click enter to execute. It will automatically skip any non-multiple choice questions.

// copy+paste into browser devtools to execute -- see canvasquiztojson.js for non-minifed version
{const e=document.getElementsByClassName("question"),t=[];for(const o of e){if(!o.classList.contains("multiple_choice_question")){console.warn("Encountered non-multiple choice question. Skipping!");continue}const e=o.id.replace("question_",""),r=o.classList.contains("correct"),s=o.querySelector(".text"),n=s.querySelector(".question_text"),c=n.textContent.trim(),l=Array.from(n.querySelectorAll("img")).map(e=>e.src),i=s.querySelector(".answers").querySelector(".answers_wrapper").querySelectorAll(".answer"),a=[];for(const e of i){const t=e.querySelector(".select_answer").querySelector("label").querySelector(".answer_text").textContent,o=e.classList.contains("correct_answer");a.push({text:t,correct:o})}t.push({description:{images:l,text:c},answers:a,gotCorrect:r,id:e})}console.log(t);const o=JSON.stringify(t);prompt('Press "Ctrl+C, Enter" to Copy to Clipboard:',o)}

Alternatively, you can use this tool as a bookmarklet.

Copy and paste the code below into your browser's bookmark creator for use:

javascript:(function()%7Bconst%20e%3Ddocument.getElementsByClassName(%22question%22)%2Ct%3D%5B%5D%3Bfor(const%20o%20of%20e)%7Bif(!o.classList.contains(%22multiple_choice_question%22))%7Bconsole.warn(%22Encountered%20non-multiple%20choice%20question.%20Skipping!%22)%3Bcontinue%7Dconst%20e%3Do.id.replace(%22question_%22%2C%22%22)%2Cr%3Do.classList.contains(%22correct%22)%2Cs%3Do.querySelector(%22.text%22)%2Cn%3Ds.querySelector(%22.question_text%22)%2Cc%3Dn.textContent.trim()%2Cl%3DArray.from(n.querySelectorAll(%22img%22)).map(e%3D%3Ee.src)%2Ci%3Ds.querySelector(%22.answers%22).querySelector(%22.answers_wrapper%22).querySelectorAll(%22.answer%22)%2Ca%3D%5B%5D%3Bfor(const%20e%20of%20i)%7Bconst%20t%3De.querySelector(%22.select_answer%22).querySelector(%22label%22).querySelector(%22.answer_text%22).textContent%2Co%3De.classList.contains(%22correct_answer%22)%3Ba.push(%7Btext%3At%2Ccorrect%3Ao%7D)%7Dt.push(%7Bdescription%3A%7Bimages%3Al%2Ctext%3Ac%7D%2Canswers%3Aa%2CgotCorrect%3Ar%2Cid%3Ae%7D)%7Dconsole.log(t)%3Bconst%20o%3DJSON.stringify(t)%3Bprompt('Press%20%22Ctrl%2BC%2C%20Enter%22%20to%20Copy%20to%20Clipboard%3A'%2Co)%7D)()

The JSON generated by this script will be in the following form:

[
    {
        "description": {
            "text": "Question text here",
            "images": ["https://example.com/image/if/present.jpg"] // empty array if none
        },
        "answers": [
            {
                "text": "Answer choice 1",
                "correct": true // false if not the correct answer
            },
            ...
        ],
        "gotCorrect": true,
        "id": "1234567" // globally unique canvas question ID
    },
    ...
]

License: MIT. Please use responsibly!

canvasquiztojson.js

// ### Canvas Quiz -> JSON Converter
// ### Run in the browser console on the quiz results page

{
    const questions = document.getElementsByClassName("question");
    const result = [];

    for (const question of questions) {
        // ensure mc
        if (!question.classList.contains("multiple_choice_question")) {
            console.warn("Encountered non-multiple choice question. Skipping!");
            continue;
        }

        const id = question.id.replace("question_", "");

        const gotCorrect = question.classList.contains("correct");

        const questionContent = question.querySelector(".text");

        const questionDescriptionContent =
            questionContent.querySelector(".question_text");

        const text = questionDescriptionContent.textContent.trim();
        const images = Array.from(
            questionDescriptionContent.querySelectorAll("img")
        ).map((img) => img.src);

        const questionAnswers = questionContent
            .querySelector(".answers")
            .querySelector(".answers_wrapper")
            .querySelectorAll(".answer");

        const answers = [];

        for (const answer of questionAnswers) {
            const answerText = answer
                .querySelector(".select_answer")
                .querySelector("label")
                .querySelector(".answer_text").textContent;

            const correct = answer.classList.contains("correct_answer");

            answers.push({ text: answerText, correct });
        }

        result.push({
            description: {
                images,
                text,
            },
            answers,
            gotCorrect,
            id,
        });
    }

    console.log(result);
    const strResult = JSON.stringify(result);

    prompt('Press "Ctrl+C, Enter" to Copy to Clipboard:', strResult);
}