Clone Course Workflow Improvements in Ares

README.markdown

Function to improve course cloning workflow for Ares Course Reserve system

Overview

Usability testing of faculty as well as historical support requests show that faculty do not understand the distinction that Atlas Systems has created between "Adding a new class" and "Cloning a class." Often, faculty choose to Add a new class rather than clone a class, and then find themselves too late with an empty class. This results either in faculty manually adding all of the items they meant to copy over to the new class, creating yet another new class through cloning, or calling Course Reserves staff to intervene and move the items over.

Testing and prototyping show that inserting a little friction into the course adding process can help direct faculty to the best way to get their new course created. This code adds a modal window to the "Add a new class" action that pulls up to the most recent 3 courses the instructor has created in course reserves (if they have used the service before) and offers to opportunity to create a new class "from scratch" or clone one of the three selected courses.

The goals of the prototype are:

• Introduce the technical difference between cloning a course and adding a new course without making the faculty understand the database structures or staff workflow of Ares.
• Reduce support calls from faculty, as well as ghost courses

Still needs:

• Does not include a handler function to remap the "Add New Course" button to the modal window. Based on the current architecture, it may need two such functions, one for if past courses are added, one for if only current courses are added.

For further investigation:

• Replace the technical term "cloning" with a more appropriate term. User research would need to talk to many faculty to get a better understanding of how they understand this action. Ares has baked in the concept of "cloning" so thoroughly as a staff concept yet it has leaked through to the public user interface.
• Test microcopy to improve the ability to communicate the difference between these two actions. For instance, non-native English speakers may not understand "from scratch."

z_clone.css

.overlay {
    		position: absolute;
    		left: 0;
    		top: 0;
    		background: rgba(0,0,0,.5);
    		z-index: 500;
    		width: 100%;
    		height: 100%;
		}
		.modal-box {
    		font-size: 1.2em;
    		width: 40em;
    		background-color: #fff;
    		padding: 1em;
    		position: fixed;
    		top: 20%;
    		left: 20%;
    		z-index: 1000;
    		box-shadow: 5px;
    		border: 2px solid #bbb;
		}
		.modal-box ul {
			list-style: none;
			margin: 0;
			padding: 0;
		}
		.modal-box ul li {
			margin: 1em 0;
		}
		.modal-box span.newCourseLink {
			float: right;
			margin-right: 2%;
		}
		.overlay p {
    		margin-bottom: .6em;
		}
		.newClassLabel {
			display: inline-block;
			margin-top: .75em;
		}
		@media screen and (min-width: 600px) {
			.close-button {
	    		cursor: pointer;
	    		position: absolute;
	    		top: -1em;
	    		right: 1em;
	    		margin-top: 1.5em;
	    		color: #888;
			}	
		}

z_clone.html

<!-- This modal window is added right before the closing </body> element -->

<div class="overlay" id="addClassModal" style="/*display:none;*/">
		<div class="modal-box">
			<h3 margin-bottom: 1em;">Clone a course you've already created, or add a new one</h4>
			
			
			<p style="margin: 1em 0; padding-bottom: 1.5em; border-bottom: 1px solid #bbb;"><span class="newClassLabel">Start a course from scratch</span> <span class="newCourseLink"><a href="ares.dll?Action=10&Form=111&Value=ICourseCreate" class="btn btn-small btn-primary">New Course</a></span></p>

			<h4>Your previous courses</h4>

			<ul style="list-style: none;" id="prevCourseContainer"></ul>

			<p id="showMore" style="display: none;"><a href="ares.dll?Action=10&Form=2&Value=IPreviousCourseList">Show More Courses</a></p>

			<button class="close-button" aria-label="Close">[x]</button>
		</div>
		<div id="pastClassesDiv" style="display: none;"></div>
	</div>

z_clone.js

// Check for number of current classes
		var cloneClasses = $('#main-table table tbody tr .table-action').length; 
		console.log('Number of classes: ' + cloneClasses);

    // Define variables
		var prevCourseList ='', courseSemester, courseName, courseNumber, courseSection, courseCloneLink, t=0;

		if(cloneClasses > 0) { // There are current classes

				var totalClasses = cloneClasses;

				// Build class list

				$('#main-table table tbody tr').each(function() {
					if(t < cloneClasses) {

						courseSemester = $(this).find('td:nth-child(4)').text();
						courseNumber = $(this).find('td:nth-child(2)').text();
						courseSection = $(this).find('td:nth-child(3)').text();
						courseName = $(this).find('td:nth-child(5)').text();
						courseCloneLink = $(this).find('td:nth-child(6)').find('a').attr('href');

						if(courseSection.length > 0) {
							courseNumber = courseNumber + '(' + courseSection + ')';
						}

						prevCourseList = prevCourseList + '<li><span class="newClassLabel">' + courseNumber + ' &#8211; ' + courseName + ' &#8211; ' + courseSemester + '</span> <span class="newCourseLink"><a href="' + courseCloneLink + '" class="btn btn-default">Clone Course</a></span></li>';

						t++;
					}
				});
		}

		if(cloneClasses < 3) { // Need to add previous clases
      
        // Must update target URL once moving to server
				$('#pastClassesDiv').load('past.html table.instructor-table', function() {
					console.log('Loading previous courses');

					// Get number of classes
					var prevCourseCount = $('#pastClassesDiv').find('tbody').find('tr').length;

					console.log('Past courses: ' + prevCourseCount);

					var totalClasses = prevCourseCount + cloneClasses;

					if(prevCourseCount > 0) { // There are previous courses

            // How many courses do we need to add to get to 3?
						var courseNeed = 3 - cloneClasses;
						var i = 0;

            // Get data from table to build list of new courses
						$('#pastClassesDiv').find('table tbody').find('tr').each(function() {
							if(i < courseNeed) {

								courseSemester = $(this).find('td:nth-child(2)').text();
								courseNumber = $(this).find('td:nth-child(3)').text();
								courseSection = $(this).find('td:nth-child(4)').text();
								courseName = $(this).find('td:nth-child(5)').text();
								courseCloneLink = $(this).find('td:nth-child(5)').find('a').attr('href');

								if((courseSection.trim()).length > 0) {
									courseNumber = courseNumber + '(' + courseSection + ')';
								}

								// Remove 'Clone Course' string from course name - just the way Ares is. Sigh.
								courseName = courseName.replace('Clone Course','');

								prevCourseList = prevCourseList + '<li><span class="newClassLabel">' + courseNumber + ' &#8211; ' + courseName + ' &#8211; ' + courseSemester + '</span> <span class="newCourseLink"><a href="' + courseCloneLink + '" class="btn btn-default">Clone Course</a></span></li>';

								i++;
							}

						});
            // Add the three classes to the modal window
						$('#prevCourseContainer').html(prevCourseList);
						console.log('Total classes: ' + totalClasses);

						if(totalClasses > 3) {
              // Show link to more previous classes
			        $('#showMore').show();
		        }
					} 
				}); 

		} else { // There were 3 or more current classes. 
			
      // Add the current classes to the modal window
      $('#prevCourseContainer').html(prevCourseList);
			console.log('Total classes: ' + totalClasses);
 
			if(totalClasses > 3) {
        // show link for more classes
			  $('#showMore').show();
		  }
	  }

Consider replacing <div class="close-button">[x]</div> with <button class="close-button" aria-label="Close">[x]</button> so that closing the dialog box is accessible by keyboard and includes a label for screen readers.

For more, MDN has a useful guide on how to use the aria dialog role and focus management recommendations: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_dialog_role

Good tip! I copied this from an old modal we made, and haven't run accessibility tests on it yet. Thanks, Jon!