Use this information to customize USU Design Tools for an institution.
The following sections outline the parts of USU Design Tools found in the tools_variables.js
file that can be adjusted or customized for an institution.
The following labels are provided to point out areas that may need to be customized:
By default, USU Design Tools are available to anyone with permissions to edit content in a Canvas course. The following options are available for limiting access to USU Design Tools by Role or Canvas User ID.
// OPTIONAL: Limit tools loading by users role klLimitByRole: false, // Change klLimitByRole to "true" to limit to roles in the klRoleArray array // adjust roles as needed klRoleArray: [ 'student', 'teacher', 'admin' ],
If you wish to limit access to USU Design Tools by a user's Canvas Role
klLimitByRole
to true
klRoleArray
that you do not want to have access.// OPTIONAL: Limit tools to an array of Canvas user IDs klLimitByUser: false, // Change klLimitByUser to "true" to limit to users in the klUserArray array // klUserArray is the Canvas user ID not the SIS user ID klUserArray: [ '1234', '987654' ],
If you wish to limit access to USU Design Tools by a user's Canvas ID
klLimitByUser
to true
klUserArray
.
You can add or remove themes that you would like included in USU Design Tools.
The following are included in the tools by default. To customize the theme find the matching class in the CSS file.
// To add a theme, add the class here and add a thumbnail to the {toolspath}/images/template_thumbs folder // Frontpage thumbnails approx 225px X 106px klFrontPageThemeArray: [ 'kl_fp_horizontal_nav_2', 'kl_fp_panel_nav_2', 'kl_fp_squares_1x1', 'kl_fp_flat_sections', 'kl_fp_colored_headings', 'kl_fp_circles_1x1' ],
The following are included in the tools by default. To customize the theme find the matching class in the CSS file.
// To add a theme, add the class here and add a thumbnail to the {toolspath}/images/template_thumbs folder // WikiPage thumbnails approx 116px x 116px // Themes without a description div klPagesThemeArray: [ 'kl_generic', 'kl_basic_color', 'kl_bookmark', 'kl_apple', 'kl_basic_bar', 'kl_flat_sections', 'kl_colored_headings', 'kl_box_left', 'kl_box_left_2', 'kl_box_left_3', 'kl_square_right', 'kl_square_right_2', 'kl_square_right_3', 'kl_rounded_inset', 'kl_rounded_inset_2', 'kl_rounded_inset_3', 'kl_circle_left', 'kl_circle_left_2', 'kl_circle_left_3' ],
Themes in the following array will receive the grey default background color of Canvas.
// The templates in this list will match the Canvas background color klMatchCanvasBackgroundTemplates: [ 'kl_colored_headings', 'kl_fp_colored_headings' ],
By default the page title provided by Canvas will be hidden in favor of the page title created by USU Design Tools. Add a theme to this array to override that behavior.
// Templates in this list will not hide the Canvas page title by default klShowPageTitleTemplates: [ 'kl_basic_bar' ],
Themes in the following array will receive an additional section with a subtitle and a description area.
// Themes with a bottom banner div (includes subtitle and description) // To add a theme, add the class here and add a thumbnail to the {toolspath}/images/template_thumbs folder klBottomBannerPagesThemeArray: ['kl_emta'],
// Colors included in this array will be included as swatches in the colorpicker klThemeColors: [ ['#003366', '#AC8D73', '#A4AEB5', '#0F2439'], ['#000', '#444', '#666', '#999', '#ccc', '#eee', '#f3f3f3', '#fff'], ['#f4cccc', '#fce5cd', '#fff2cc', '#d9ead3', '#d0e0e3', '#cfe2f3', '#d9d2e9', '#ead1dc'], ['#ea9999', '#f9cb9c', '#ffe599', '#b6d7a8', '#a2c4c9', '#9fc5e8', '#b4a7d6', '#d5a6bd'], ['#e06666', '#f6b26b', '#ffd966', '#93c47d', '#76a5af', '#6fa8dc', '#8e7cc3', '#c27ba0'], ['#c00', '#e69138', '#f1c232', '#6aa84f', '#45818e', '#3d85c6', '#674ea7', '#a64d79'], ['#900', '#b45f06', '#bf9000', '#38761d', '#134f5c', '#0b5394', '#351c75', '#741b47'], ['#600', '#783f04', '#7f6000', '#274e13', '#0c343d', '#073763', '#20124d', '#4c1130'] ],
USU Design Tools can be used to select from additional objectives in the Syllabus portion of a Canvas course.
By default USU Design Tools supports IDEA Objectives. To replace the IDEA Objectives with another set of variables:
klUseAdditionalOutcomesTitle
value to match the new objectives.<span class="kl_additional_outcome_text"></span>
will be inserted into the syllabus editor when selected.To remove this feature from USU Design Tools change klUseAdditionalOutcomes
to false
.
USU Design Tools will add the Canvas CSS to the content editor to help the content match what it will look like when saved.
If the styles do not load properly, check the following against the CSS files loaded in the head of a Canvas page and update the numbers after the "?" if needed.
// To show Canvas styles in the editor, check the following against the stylesheets loaded in the head of a Canvas page // You may need to update the numbers at the end vendor_legacy_normal_contrast: '/assets/vendor_legacy_normal_contrast.css?1418937392', common_legacy_normal_contrast: '/assets/common_legacy_normal_contrast.css?1418937393',
Some of functions in USU Design Tools utilize the Canvas API and call to external PHP files. These include the ability to:
If you do not wish to use these additional functions, change usePHP
to false
.
// PHP Tools: Part of the tools allow you to pull content from existing pages including institutional policies and procedures // Change to false if you do not have access to PHP for this part of the tools usePHP: true,
USU Design Tools can import institutional policies and procedures from a Canvas course content page to insert into a course syllabus. These policies and procedures are updated each time a syllabus is saved allowing the information to be gathered in one place and eliminating the need for course creators to hunt down this information.
To utilize this aspect of the tools:
klToolTemplatesCourseID
to the ID of the created course// Institutional policies and procedures need to be included in a Canvas course with a page named "Policies and Procedures" include the Canvas course ID here klToolTemplatesCourseID: '343656',
This portion of USU Design Tools setup contains the default content for boilerplate sections. Each section can be configured according to need or left as is.
klPagesFooterSection
to contain a default email for current institution.Add some introductory text to discuss this module
' + '[Insert video(s) here]
' + 'Assignment Description
' + '
Each variable in the section above has a matching entry in the klPagesSections
array.
The text before the semicolon will be the ID given to the section when added to a course while the text after the semicolon points to the variable containing the boilerplate text.
To create a new section:
klPagesSections
arrayTo remove a section simply comment out or delete the entry from the klPagesSections
array.
// Array of section names and their corresponding html ('section id': variableHoldingHTML) klPagesSections: { 'kl_introduction': klToolsVariables.klPagesIntroductionSection, 'kl_objectives': klToolsVariables.klPagesObjectiveSection, 'kl_readings': klToolsVariables.klPagesReadingsSection, 'kl_lectures': klToolsVariables.klPagesLectureSection, 'kl_activities': klToolsVariables.klPagesActivitySection, 'kl_assignments': klToolsVariables.klPagesAssignmentSection, 'kl_banner': klToolsVariables.klPagesBanner, 'kl_banner_image': klToolsVariables.klPagesBannerImage, 'kl_navigation': klToolsVariables.klPagesNavSection, 'kl_image_attribution': klToolsVariables.klPagesAttributionSection, 'kl_modules': klToolsVariables.klPagesModulesSection, 'kl_contact_footer': klToolsVariables.klPagesFooterSection, 'kl_social_media': klToolsVariables.klPagesSocialMediaSection },
This portion of USU Design Tools setup contains the default content for syllabus boilerplate sections. Each section can be configured according to need or left as is.
klSyllabusCanvasInfo
should contain the Canvas login and support information for the current institution.klSyllabusCourseText
contains a link to institution's bookstore.klSyllabusInstructors
klSyllabusAdditionalInstructor
klSyllabusTeachingAssistants
klSyllabusAdditionalTeachingAssistant
Course Title | Term Year
' + 'List hours
' + 'List hours
' + 'Text
' + 'Upon completion of this course you will be able to:
' + 'Canvas is the where course content, grades, and communication will reside for this course.
' + 'Text
' + 'The text for this class will be' +
' The Course Syllabus: A Learning-Centered Approach by O’brein, Millis & Cohen, second edition, published by Jossey-Bass, ISDN#047019617.
' +
' You may purchase this book at the' +
' USU bookstore or online.' +
' Make sure you get the second edition!
Text
' + 'Text
' + 'Text
' + 'Register for CRN: #####.' + ' It is a weekly lab that will allow you to apply what you learn in class.
' + 'Text
Text
' + 'Text
' + 'Text
' + 'Please make sure your Canvas notification preferences are set so that you will receive course announcments ASAP or Daily (click the appropriate link to set your preference).
' + 'Text
' + 'Text
' + 'This syllabus is subject to change. I will notify the class regarding all changes.' + ' In the event of any discrepancy between this syllabus and content found in Canvas,' + ' the information in CANVAS WILL TAKE PRECENDENCE.
' + 'All electronic files must be submitted in word(.doc, .docx) or rich text file (.rtf) format, unless otherwise stated.' + ' Please name your file in the using the following convention: Assignmentname_Yourname.doc.
' + 'There are no course fees associated with this course.
' + 'Late work due to procrastination will not be accepted. Late work due to legitimate emergency may be accepted.' + ' The due date and time associated with each quiz, discussion, exam and assignment are stated clearly in Canvas.
' + '' + '
Your grade is based on the following:
' + 'The Syllabus portion of the USU Design Tools contains primary sections and subsections. The primary sections are:
klSyllabusInformation
)klSyllabusOutcomes
)klSyllabusResources
)klSyllabusActivities
)klSyllabusGrades
)klSyllabusPolicies
)The klSyllabusPrimarySections
contains a list of these sections and the variable where the boilerplate content is specified
The text before the semicolon will be the ID given to the section when added to a course while the text after the semicolon points to the variable containing the boilerplate text.
//// Array of section names and their corresponding html //// klSyllabusPrimarySections: { 'kl_syllabus_information': klToolsVariables.klSyllabusInformation, 'kl_syllabus_outcomes': klToolsVariables.klSyllabusOutcomes, 'kl_syllabus_resources': klToolsVariables.klSyllabusResources, 'kl_syllabus_activities': klToolsVariables.klSyllabusActivities, 'kl_syllabus_grades': klToolsVariables.klSyllabusGrades, 'kl_syllabus_policies': klToolsVariables.klSyllabusPolicies },
Each primary section wraps a series of subsections. The code below contains an array for each primary section with the list of subsection ID's and the variables holding the boilerplate text.
To create a new section:
To remove a section simply comment out or delete the entry from the matching subsection array.
//// Subsection Arrays //// klSyllabusInformationSubSections: { 'kl_syllabus_instructors': klToolsVariables.klSyllabusInstructors, 'kl_syllabus_teaching_assistant': klToolsVariables.klSyllabusTeachingAssistants, 'kl_syllabus_course_description': klToolsVariables.klSyllabusCourseDescription }, klSyllabusOutcomesSubSections: { 'kl_syllabus_learning_outcomes': klToolsVariables.klSyllabusLearningOutcomes }, klSyllabusResourcesSubSections: { 'kl_syllabus_canvas_info': klToolsVariables.klSyllabusCanvasInfo, 'kl_syllabus_software': klToolsVariables.klSyllabusCourseSoftware, 'kl_syllabus_textbook_readings': klToolsVariables.klSyllabusCourseText, 'kl_syllabus_videos': klToolsVariables.klSyllabusCourseVideos }, klSyllabusActivitiesSubSections: { 'kl_syllabus_activities_readings': klToolsVariables.klSyllabusCourseReadings, 'kl_syllabus_activities_videos': klToolsVariables.klSyllabusVideoActivities, 'kl_syllabus_labs': klToolsVariables.klSyllabusCourseLabs, 'kl_syllabus_discussions': klToolsVariables.klSyllabusCourseDiscussions, 'kl_syllabus_assignments': klToolsVariables.klSyllabusCourseAssignments, 'kl_syllabus_quizzes': klToolsVariables.klSyllabusCourseQuizzes, 'kl_syllabus_exams': klToolsVariables.klSyllabusCourseExams }, klSyllabusPoliciesSubSections: { 'kl_syllabus_notification_preferences': klToolsVariables.klSyllabusNotificationPreferences, 'kl_syllabus_instructor_feedback': klToolsVariables.klSyllabusCourseInstructorFeedback, 'kl_syllabus_student_feedback': klToolsVariables.klSyllabusCourseStudentFeedback, 'kl_syllabus_syllabus_changes': klToolsVariables.klSyllabusCoursesSyllabusChanges, 'kl_syllabus_submitting_files': klToolsVariables.klSyllabusCourseSubmitFiles, 'kl_syllabus_course_fees': klToolsVariables.klSyllabusCourseFees, 'kl_syllabus_late_work': klToolsVariables.klSyllabusCourseLateWork }, klSyllabusGradesSubSections: { 'kl_syllabus_course_assignments': klToolsVariables.klSyllabusCourseComponents, 'kl_syllabus_grade_scheme': klToolsVariables.klSyllabusCourseGradeScheme }
When a Front Page theme is selected, USU Design Tools creates a default set of navigation links. Among the links created is a “Start Here” page to introduce students to the instructor and the course.
When the “Start Here” link is clicked, it will create a page with the option of importing boilerplate “Start Here” content. The boilerplate text is specified in the klStartHereContent
variable.
Text of letter. Introduce yourself, describe how you got into this field and why you teach this class. Give a little insight as to why this course is important.' + ' Let the student know you are a human being invested in the course and in the student“s success and get the student as excited as the student will permit himself or herself to be.
' + 'First Last
' + 'First M. Last, Ph.D.
435-797-XXXX' +
' | first.last@usu.edu' +
' | website
Department
UMC Old Main Hill, Logan, UT 84322
' + '
Now, please follow the steps below to continue your orientation to this course.
' + 'The course syllabus' + ' will provide you with the course schedule, course objectives, explanations of assignments and assessments, grading policies, and instructor contact information.' + ' Please read it carefully. You should have a deep familiarity with the schedule and process of the course.
' + 'Your textbooks include:
' + 'Visit the library website to learn what services are provided for online students.
' + 'The Technical Requirements page identifies the browsers, operating systems, and plugins that work best with Canvas.' + ' If you are new to Canvas quickly review the Canvas Student Orientation materials.
' + 'All students at Utah State University agree on admission to abide by the university Honor Code.' + ' Please review this Academic Integrity tutorial to familiarize yourself with USU policies and procedures pertaining to the USU honor code.' + ' This tutorial links to an additional, in-depth review on how to' + ' avoid plagiarism and cite sources, which you are strongly encouraged to review.' + ' Also, please review the core rules of netiquette for some guidelines and expectations on how to behave in an online learning environment.
' + '