Parents requested this at my school - multiple students

[petern]

In 2016 we ran a series of after school training sessions to show parents how to use Canvas. A comment that came up time and again was how can a parent easily switch the view from one child to the next in the website. This is not a new request and has come up in https://community.canvaslms.com/ideas/2512-parental-observation-in-canvas-complicated-with-three-chi... and  Parents Access to Canvas. The parent app has its flaws and until the greatest ones are ironed out, we won't be recommending its use.

To help parents, teaching assistants, learning support assistants and others may be observing more than one student at a time, here's a little bit of javascript you can add to your theme to make it easier to switch between students.  If there are multiple observees, a drop down should appear to choose between students.  This is what it looks like when completed.

To do this, the code picks up the observees of the current users and then a list of courses for these users.  As Canvas calendars only deal with 10 courses by default, we wanted to limit the courses picked up.  We did this by filtering for courses by certain terms that include the current year.  Everyone should check lines 23-25:

if ( course.term &&
 course.term.name.includes( (new Date()).getFullYear() ) 
 ) 

Hope this helps

Parents v3.0.js.zip

Parents v3.0.zip

[GideonWilliams]

Wow, this looks awesome Peter, where have you been hiding these skills ;O)

We have taken a slightly different route with the issue and removed the homework items from the calendar to place on a separate webpage..

I am not sure how much of this is transferable to other users as we have tied it to parental logins for our Gateway portal.

I will share some print screens of our working proof of concept when I am near a computer.

Great job..

[Renee_Carney]

This is a great share, petern‌

Thank you so much for sharing your talents with the Community.  I think you'll have quite a few people giving it a test run!  

To keep the community webs threading, I want to make sure and point readers to https://community.canvaslms.com/ideas/8649-parents-toggle-view-between-children" modifiedtitle="true..., which is currently open for voting.  Also, you say "The parent app has its flaws and until the greatest ones are ironed out, we won't be recommending its use."  As an anecdotal, this is always good to get feedback, but will you make sure the specifics are in our community as well?  Can you point to the feature ideas that are keeping you from using the Parent App?  Thanks!

[petern]

Thanks Renee.  With slight fear of repeating myself here are the things that need to be changed before we will adopt the parent app:

• Logging in button.  On the first screen in the app there appears to be two ways to log in.  More info here  Parents Access to Canvas 
• After we link parents to students using SIS imports in the website, they are not linked in the app.
• A percentage/grade appears next to each course.  This needs to be able to be switched off at the account level.  I've outlined reasons in the comments here https://community.canvaslms.com/ideas/2512-parental-observation-in-canvas-complicated-with-three-chi... 

[lalesi]

Can't wait to try it- my parents have been upset about it since we rolled it out to them in Sept. 

Linda

[Renee_Carney]

This summary is super helpful to have!  Thank you!

[petern]

I look forward to hearing how it goes in your school.  

[GideonWilliams]

When launching Canvas we made a promise to parents that all homework would be put onto the calendar of each course that it was relevant to. We worked with staff on how to make effective entries that included enough detail for parents without the need to go to the course. We encouraged staff to also include links to the course (modules) so students could quickly find the relevant supporting material.

As a school with UK curriculum, students have anywhere between  6 and 20 different subjects depending on the year they are in. We manage to get Canvas to increase our sites global calendar to show 15 courses'. We also had Michael Kop in our IT Support team write some code to include a link to the calendar on every course (see Calendars, calendars...and a thank you!  for the post and the code).

Five months since launch and with parents only having access to Canvas via an 'over the shoulder look' we have started to look at the options available. We have looked at both observer status in the web and the Canvas Parents App. My thoughts about each can be read as part of the question which led to Peter's work (see Parents Access to Canvas 

Michael Kop has now written a proof of concept design which has code that pulls out all the calendared homework entries of each child, creates a local cache and presents them in an (active server) web page. These are then accessible to parents when they log into our Gateway site and click on a link. The link is dynamic so it updates.

The entries are set out in Ascending order of Date Due in.

Here is a mock up of how it works (the name of the students have been changed)

When you click on an entry it opens it up as a pop-up on the same page to show you the Event details.

Parents then have the option of accessing the course (as observers) to see more (link at the bottom of the course).

For parents with two or more children there is a toggle feature at the top that allows them to move between entries:

The design is amazing and it does exactly what we want it to do. It acts like a homework diary and shows parents what homework a student has and when it is due in. There (should be) enough detail in the Event so that parents do not need to go to the course (but can do so if they wish). The feedback from the (teacher) parents is very positive indeed.

Next steps before release to parents is some branding, formatting and the addition of a title, text etc. There has also been some suggestions about whether this might be of use for students!

Obviously we are very fortunate both to have the expertise on site and the opportunities (parental accounts on Gateway which make creation of Observer accounts very easy indeed). 

[petern]

Wow.  This is exactly what parents want and it looks great.

The only login we've ever given to parents is their Canvas one, so we don't have a gateway.  This is what should appear for observers on their dashboards.  

[lalesi]

Thank you this helps.  I wish it could be done for the dashboard to.  I wish Canvas engineers realize how frustrating it is for us to be tech directors and Canvas have a parent app that requires a different account setup than a parent account.   Canvas should realize in the K-12 learning space parents are important members.  Logging in as a parent with multiple children is a chaotic and they've done nothing to fix it.

Linda

[GideonWilliams]

We are about to launch ours after Half Term. We have also added a link to the Canvas course that lets students see this overview. The frustration by being limited to 15 courses to show was a major reason for this move. I cannot see why we don't have more flexibility in this regard?

[jsimon3]

I liked this a lot so I implemented it. I took this script and got rid of the jQuery(since canvas will be stopping outsides scripts from using jQ in the future) I also changed the ajax request to fetch request. Might need a few tweaks but it has been working for us for a few months.

function addChooseChild() {
  if (ENV["current_user_roles"].includes("observer") &&
    window.location.href.includes("calendar")) {
    const fetchObservees = `/api/v1/users/self/observees?per_page=50`;
    const options = {
      credentials: "same-origin",
      headers: {
        accept: "application/json"
      },
      timeout: 5000
    };
    fetch(fetchObservees, options).then(async response => {
        const data = await response.json();
        const res = ({
            data: data,
            ok: response.ok
        });
        if (res.ok) {
            const children = res.data;
            let p = [];
            children.forEach(child => {
                p.push(new Promise(function (resolve) {
                    let childId = child.id;
                    const fetchCourses = `/api/v1/users/${childId}/courses?per_page=50&include[]=term`;
                    const options0 = {
                        credentials: "same-origin",
                        headers: {
                            accept: "application/json"
                        },
                        timeout: 5000
                    };
                    fetch(fetchCourses, options0).then(async response0 => {
                        const data0 = await response0.json();
                        const courses = ({
                            data: data0,
                            ok: response.ok
                        });
                        if (courses.ok) {
                            let listCourses = [];
                            courses.data.forEach(courseX => {
                                if (courseX.term &&
                                    Date.now() > Date.parse(courseX.term.start_at) &&
                                    Date.now() < Date.parse(courseX.term.end_at)) {
                                    listCourses.push("course_" + courseX.id);
                                }
                            });
                            resolve({
                                childName: child.name,
                                courses1: listCourses
                            });
                        }
                    });
                }));
            });
            Promise.all(p).then(outPut => {
                document.querySelector("#calendar_header").innerHTML += `
              <select id="calendar_children" onchange="location = this.value;">
                <option class="calendar_child">Select Child</option>
                ${outPut.map(x => `<option class="calendar_child" value="calendar?include_contexts=${x.courses1}">${x.childName}</option>`)}
              </select>
            `;
            });
        }
    });
  }
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[jbriggs]

We too have been working on this issue. We built it into our theme JS but I also made a bookmarklet for any parent to use (doesn't work in edge). You can find the code here: EPS Bookmarklet for Calendar Buttons (it has not been de-jqueried yet). this is the bookmarklet itself: EPS Calendar Buttons

It creates the buttons inline with the UI at the top of the page.

This code goes does the following:

Waits for the document to load

  Checks to see if it is on the calendar page

     Initializes the calendar

        goes through the api as the logged in user to find observer enrollments

           builds a data structure for each student first name and their associated courses

              simulates clicking calendars on and off for the user

Here's the source, you can add this into your theme JS or you can share the bookmarklet with people:

var EPS = {};

/* From Ryan's Global JavaScript Presentation - InstCon13 */

EPS.onPage = function(regex, fn) {

  if (location.pathname.match(regex)) fn();

}

EPS.calendar = {

   students: {},

   students_loaded: false,

   setup_students: function(){

    var url = "/api/v1/users/self/enrollments?include[]=observed_users&type=ObserverEnrollment&state[]=active&per_page=50";

    $.get(url,{'canvas_id':ENV.current_user_id}).done((res) => {

                                                          this.parseEnrollments(res);

                                                          this.load_calendar_buttons();

    });

  },

  switch_student: function(stu){

    $('ul#context-list li.checked span.context-list-toggle-box').click(); //turn off all calendars

    $('.eps-calendar-tabs').removeClass('active');

    $(this.students[stu]).each(

      function(i,id){

        $('li[data-context="course_'+id+'"] span.context-list-toggle-box').click();

      }

    );

    $('#eps-calendar-student-'+stu.toLowerCase()).addClass('active');

  },

  load_calendar_buttons: function(){

    var count = 0;

    var html = "<span class='btn-group' role='radiogroup'>";

    Object.keys(this.students).forEach(function(stu){

      html += "<button class='btn eps-calendar-tabs' role='radio' id='eps-calendar-student-" + stu.toLowerCase() + "onclick='EPS.calendar.switch_student(\"" + stu + "\")'>" + stu + "</button>";

    });

    html += "</span>";

    $($('.calendar_action_buttons')[0]).prepend(html);

  },

  parseEnrollments: function (res){

    var students = []

    $.each(res, function(){

      var name = this.observed_user.sortable_name.split(", ")[1]

      $.each(this.observed_user.enrollments, function(){

        course = this.course_id

        if (!students[name]) {

            students[name] = []

        }

        students[name].push(course);

      })

    })

    this.students = students;

    this.students_loaded = true;

  },

  init: function(){

      this.setup_students();

      console.log("Calendar Buttons brought to you by Eastside Prep, Kirkland, WA")

  }

}

//Put into your document.ready section

$(document).ready(function(){

  EPS.onPage("calendar", function(){

    EPS.calendar.init()

  });

});

[dtod]

Here's an enhancement to the Observee list based on some similar principles - GitHub - dcartertod/canvas-javascript: Bits of code I use in Canvas 

[jsimon3]

Actually there are some really cool things that we can do with the new API endpoints... I created observerdashboard - YouTube  for parents it is found in the Missing Assignments Observer‌