[#10245] UAT Round 2: Fix Help Page Links (#10274)

src/web/app/components/question-types/question-statistics/contribution-question-statistics/contribution-question-statistics.component.html

@@ -51,7 +51,7 @@
       </strong>
     </div>
     <div class="col-sm-8" style="text-align: right;">
-      [<a href="/web/instructor/help#team-contribution-questions" rel="noopener noreferrer" target="_blank">How do I interpret/use these values?</a>]
+      [<a routerLink="/web/instructor/help" [queryParams]="{questionId: QuestionsSectionQuestions.CONTRIBUTION, section: Sections.questions}" rel="noopener noreferrer" target="_blank">How do I interpret/use these values?</a>]
     </div>
   </div>
   <div class="row">

src/web/app/components/question-types/question-statistics/contribution-question-statistics/contribution-question-statistics.component.ts

@@ -3,6 +3,8 @@ import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { ContributionStatistics } from '../../../../../types/api-output';
 import { DEFAULT_CONTRIBUTION_QUESTION_DETAILS } from '../../../../../types/default-question-structs';
 import { SortBy } from '../../../../../types/sort-properties';
+import { QuestionsSectionQuestions } from '../../../../pages-help/instructor-help-page/instructor-help-questions-section/questions-section-questions';
+import { Sections } from '../../../../pages-help/instructor-help-page/sections';
 import { ColumnData, SortableTableCellData } from '../../../sortable-table/sortable-table.component';
 import {
   ContributionQuestionStatisticsCalculation,
@@ -21,6 +23,10 @@ import { ContributionComponent } from './contribution.component';
 export class ContributionQuestionStatisticsComponent extends ContributionQuestionStatisticsCalculation
     implements OnInit, OnChanges {
 
+  // enum
+  QuestionsSectionQuestions: typeof QuestionsSectionQuestions = QuestionsSectionQuestions;
+  Sections: typeof Sections = Sections;
+
   @Input() displayContributionStats: boolean = true;
 
   columnsData: ColumnData[] = [];

src/web/app/components/session-edit-form/session-edit-form.component.ts

@@ -231,7 +231,7 @@ export class SessionEditFormComponent implements OnInit {
    * Handles session 'Help' link click event.
    */
   sessionHelpHandler(): void {
-    this.navigationService.openNewWindow(`${environment.frontendUrl}/web/instructor/help#sessions`);
+    this.navigationService.openNewWindow(`${environment.frontendUrl}/web/instructor/help?questionId=sessions&section=sessions`);
   }
 
   /**

src/web/app/pages-help/instructor-help-page/instructor-help-courses-section/courses-section-questions.ts

@@ -0,0 +1,104 @@
+/**
+ * Unique identifiers for each question in the courses section of instructor help page
+ */
+export enum CoursesSectionQuestions {
+  /**
+   * How do I add students to a course?
+   */
+  COURSE_ADD_STUDENTS = 'course-add-students',
+
+  /**
+   * Is there a size limit for a course?
+   */
+  SIZE_LIMIT = 'size-limit',
+
+  /**
+   * What should I do if my course doesn’t have teams?
+   */
+  NO_TEAMS = 'no-teams',
+
+  /**
+   * What are sections meant for?
+   */
+  SECTIONS = 'sections',
+
+  /**
+   * How do I enroll students into sections?
+   */
+  ENROLL_SECTIONS = 'enroll-sections',
+
+  /**
+   * How do I add instructors to my course?
+   */
+  COURSE_ADD_INSTRUCTOR = 'course-add-instructor',
+
+  /**
+   * How do I edit the information of an instructor in my course?
+   */
+  COURSE_EDIT_INSTRUCTOR = 'course-edit-instructor',
+
+  /**
+   * How do I set an instructor's access level?
+   */
+  COURSE_INSTRUCTOR_ACCESS = 'course-instructor-access',
+
+  /**
+   * How do I set custom privileges for an instructor?
+   */
+  PRIVILEGES = 'privileges',
+
+  /**
+   * How do I view a list of students in a course?
+   */
+  COURSE_VIEW_STUDENTS = 'course-view-students',
+
+  /**
+   * How do I change a student's section?
+   */
+  CHANGE_SECTION = 'change-section',
+
+  /**
+   * What should I do if a student says his/her courses have disappeared from the system?
+   */
+  DISAPPEARED_COURSE = 'disappeared-course',
+
+  /**
+   * How do I delete students from a course?
+   */
+  DEL_STUDENTS = 'del-students',
+
+  /**
+   * How do I archive a course?
+   */
+  COURSE_ARCHIVE = 'course-archive',
+
+  /**
+   * How do I view courses I have archived?
+   */
+  COURSE_VIEW_ARCHIVED = 'course-view-archived',
+
+  /**
+   * How do I unarchive an archived course?
+   */
+  COURSE_UNARCHIVE = 'course-unarchive',
+
+  /**
+   * How do I view courses I have deleted?
+   */
+  COURSE_VIEW_DELETED = 'course-view-deleted',
+
+  /**
+   * How do I restore a deleted course?
+   */
+  COURSE_RESTORE = 'course-restore',
+
+  /**
+   * How do I permanently delete a course?
+   */
+  PERM_DEL = 'perm-del',
+
+  /**
+   * How do I restore/delete all courses from Recycle Bin?
+   */
+  RESTORE_ALL = 'restore-all',
+}

src/web/app/pages-help/instructor-help-page/instructor-help-courses-section/instructor-help-courses-section.component.ts

@@ -4,6 +4,9 @@ import { PageScrollService } from 'ngx-page-scroll-core';
 import { environment } from '../../../../environments/environment';
 import { collapseAnim } from '../../../components/teammates-common/collapse-anim';
 import { InstructorHelpSectionComponent } from '../instructor-help-section.component';
+import { StudentsSectionQuestions } from '../instructor-help-students-section/students-section-questions';
+import { Sections } from '../sections';
+import { CoursesSectionQuestions } from './courses-section-questions';
 
 /**
  * Courses section of the Instructor Help Page
@@ -16,29 +19,37 @@ import { InstructorHelpSectionComponent } from '../instructor-help-section.compo
 })
 export class InstructorHelpCoursesSectionComponent extends InstructorHelpSectionComponent implements OnInit {
 
+  // enum
+  StudentsSectionQuestions: typeof StudentsSectionQuestions = StudentsSectionQuestions;
+  CoursesSectionQuestions: typeof CoursesSectionQuestions = CoursesSectionQuestions;
+  Sections: typeof Sections = Sections;
+
   readonly supportEmail: string = environment.supportEmail;
 
-  isAddStudentsCollapsed: boolean = false;
-  isSizeLimitCollapsed: boolean = false;
-  isNoTeamsCollapsed: boolean = false;
-  isSectionsCollapsed: boolean = false;
-  isEnrollSectionsCollapsed: boolean = false;
-  isAddInstructorCollapsed: boolean = false;
-  isEditInstructorCollapsed: boolean = false;
-  isInstructorAccessCollapsed: boolean = false;
-  isPrivilegesCollapsed: boolean = false;
-  isViewStudentsCollapsed: boolean = false;
-  isChangeSectionCollapsed: boolean = false;
-  isDisappearedCourseCollapsed: boolean = false;
-  isDelStudentsCollapsed: boolean = false;
-  isArchiveCourseCollapsed: boolean = false;
-  isViewArchivedCollapsed: boolean = false;
-  isCourseUnarchiveCollapsed: boolean = false;
-  isViewDelCollapsed: boolean = false;
-  isRestoreCollapsed: boolean = false;
-  isDelCollapsed: boolean = false;
-  isRestoreAllCollapsed: boolean = false;
-  @Output() collapseStudentEditDetails: EventEmitter<boolean> = new EventEmitter<boolean>();
+  questionsToCollapsed: Record<string, boolean> = {
+    [CoursesSectionQuestions.COURSE_ADD_STUDENTS]: false,
+    [CoursesSectionQuestions.SIZE_LIMIT]: false,
+    [CoursesSectionQuestions.NO_TEAMS]: false,
+    [CoursesSectionQuestions.SECTIONS]: false,
+    [CoursesSectionQuestions.ENROLL_SECTIONS]: false,
+    [CoursesSectionQuestions.COURSE_ADD_INSTRUCTOR]: false,
+    [CoursesSectionQuestions.COURSE_EDIT_INSTRUCTOR]: false,
+    [CoursesSectionQuestions.COURSE_INSTRUCTOR_ACCESS]: false,
+    [CoursesSectionQuestions.PRIVILEGES]: false,
+    [CoursesSectionQuestions.COURSE_VIEW_STUDENTS]: false,
+    [CoursesSectionQuestions.CHANGE_SECTION]: false,
+    [CoursesSectionQuestions.DISAPPEARED_COURSE]: false,
+    [CoursesSectionQuestions.DEL_STUDENTS]: false,
+    [CoursesSectionQuestions.COURSE_ARCHIVE]: false,
+    [CoursesSectionQuestions.COURSE_VIEW_ARCHIVED]: false,
+    [CoursesSectionQuestions.COURSE_UNARCHIVE]: false,
+    [CoursesSectionQuestions.COURSE_VIEW_DELETED]: false,
+    [CoursesSectionQuestions.COURSE_RESTORE]: false,
+    [CoursesSectionQuestions.PERM_DEL]: false,
+    [CoursesSectionQuestions.RESTORE_ALL]: false,
+  };
+
+  @Output() collapseStudentEditDetails: EventEmitter<any> = new EventEmitter();
 
   constructor(private pageScrollService: PageScrollService,
               @Inject(DOCUMENT) private document: any) {
@@ -57,9 +68,10 @@ export class InstructorHelpCoursesSectionComponent extends InstructorHelpSection
       scrollTarget: `#${target}`,
       scrollOffset: 70,
     });
-    if (target === 'student-edit-details') {
-      this.collapseStudentEditDetails.emit(true);
-    }
     return false;
   }
+
+  expand(questionId: string): void {
+    this.questionsToCollapsed[questionId] = true;
+  }
 }

src/web/app/pages-help/instructor-help-page/instructor-help-getting-started/instructor-help-getting-started.component.html

@@ -33,15 +33,15 @@ <h2 id="course-setup">1. Set up a course</h2>
         </tm-example-box>
       </li>
       <li>
-        <b><a [routerLink]="instructorHelpPath" fragment="course-add-students">Enroll students in the course</a></b><br>
+        <b><a [routerLink]="instructorHelpPath" [queryParams]="{questionId: CoursesSectionQuestions.COURSE_ADD_STUDENTS, section: Sections.courses}">Enroll students in the course</a></b><br>
         Go to the <b>Courses</b> page and click the <button class="btn btn-secondary btn-sm">Enroll</button> button of the corresponding course.<br>
         Students can be enrolled into teams (e.g. project groups) and sections (e.g. tutorial classes, lecture groups) to facilitate giving feedback in and among these smaller groups.<br>
         TEAMMATES will <b>not</b> automatically notify students that they have been enrolled. However, if you would like students to access TEAMMATES sooner (e.g. if you would like them to fill in their profile page in advance), click the <button class="btn btn-sm btn-secondary">View</button> button of the course in the <b>Courses</b> page. Then, click <button class="btn btn-sm btn-primary"><i class="far fa-envelope"></i> Remind Students to Join</button> button, which will send them instructions to access TEAMMATES immediately.
       </li>
       <li>
-        <b><a [routerLink]="instructorHelpPath" fragment="course-add-instructor">Add instructors to the course</a></b><br>
+        <b><a [routerLink]="instructorHelpPath" [queryParams]="{questionId: CoursesSectionQuestions.COURSE_ADD_INSTRUCTOR, section: Sections.courses}">Add instructors to the course</a></b><br>
         From the <b>Courses</b> page, click the <button class="btn btn-secondary btn-sm" type="button">Edit</button> button of the course you would like to add instructors to. You will be directed to the <b>Edit Course</b> page where you can add a new instructor to your course.
-        You can specify the <a [routerLink]="instructorHelpPath" fragment="course-instructor-access">access level</a> of any instructor you add to a course. For more information about how to add an instructor to your course, click <a [routerLink]="instructorHelpPath" fragment="course-add-instructor">here</a>.
+        You can specify the <a [routerLink]="instructorHelpPath" [queryParams]="{questionId: CoursesSectionQuestions.COURSE_INSTRUCTOR_ACCESS, section: Sections.courses}">access level</a> of any instructor you add to a course. For more information about how to add an instructor to your course, click <a [routerLink]="instructorHelpPath" [queryParams]="{questionId: CoursesSectionQuestions.COURSE_ADD_INSTRUCTOR, section: Sections.courses}">here</a>.
       </li>
     </ol>
   </div>
@@ -74,12 +74,12 @@ <h2 id="session-setup">2. Create a session</h2>
         </ul>
       </ul>
       <li>
-        <b><a [routerLink]="instructorHelpPath" fragment="session-questions">Add questions</a> to your session to suit your needs.</b><br>
+        <b><a [routerLink]="instructorHelpPath" [queryParams]="{questionId: SessionsSectionQuestions.SESSION_QUESTIONS, section: Sections.sessions}">Add questions</a> to your session to suit your needs.</b><br>
         For each question, you can set the following:
       </li>
       <ul>
         <li>
-          Question type: the style of question being asked. Choose from our 10 different <a [routerLink]="instructorHelpPath" fragment="questions">question types</a>.
+          Question type: the style of question being asked. Choose from our 10 different <a [routerLink]="instructorHelpPath" [queryParams]="{questionId: QuestionsSectionQuestions.ESSAY, section: Sections.questions}">question types</a>.
         </li>
         <li>
           Question feedback path: the feedback giver and feedback recipient
@@ -90,7 +90,7 @@ <h2 id="session-setup">2. Create a session</h2>
       </ul>
       <li>
         <b>Preview your session</b><br>
-        After you have finished setting up your session, <a [routerLink]="instructorHelpPath" fragment="session-preview">preview the session</a> as a student or another instructor.
+        After you have finished setting up your session, <a [routerLink]="instructorHelpPath" [queryParams]="{questionId: SessionsSectionQuestions.SESSION_PREVIEW, section: Sections.sessions}">preview the session</a> as a student or another instructor.
       </li>
     </ol>
   </div>
@@ -139,19 +139,19 @@ <h2 id="session-results">4. View and publish session results</h2>
     </p>
     <ul>
       <li>
-        <a [routerLink]="instructorHelpPath" fragment="session-view-results">View responses</a>: see what respondents have answered, even if the session is still ongoing. Go to the <b>Sessions</b> page and click the corresponding <button class="btn btn-secondary btn-sm">Results</button> button.
+        <a [routerLink]="instructorHelpPath" [queryParams]="{questionId: SessionsSectionQuestions.SESSION_VIEW_RESULTS, section: Sections.sessions}">View responses</a>: see what respondents have answered, even if the session is still ongoing. Go to the <b>Sessions</b> page and click the corresponding <button class="btn btn-secondary btn-sm">Results</button> button.
       </li>
       <li>
         Moderate responses: edit inappropriate responses from respondents before publishing the responses.
       </li>
       <li>
-        <a [routerLink]="instructorHelpPath" fragment="session-add-comments">Add comments to responses</a>: reply to respondents' answers, or add your own notes on a response. You can make your comment visible to other instructors, the response giver, and/or the response giver's team.
+        <a [routerLink]="instructorHelpPath" [queryParams]="{questionId: SessionsSectionQuestions.SESSION_ADD_COMMENTS, section: Sections.sessions}">Add comments to responses</a>: reply to respondents' answers, or add your own notes on a response. You can make your comment visible to other instructors, the response giver, and/or the response giver's team.
       </li>
       <li>
         Remind students to submit responses: TEAMMATES automatically sends reminders to students; however, you can also manually send reminder emails to students at any time while a session is open. Click the <button class="btn btn-sm btn-secondary">Remind</button> button of the session from the <b>Home</b> or <b>Sessions</b> page.
       </li>
       <li>
-        <a [routerLink]="instructorHelpPath" fragment="session-cannot-submit">Submit responses for students</a>: if a student has missed the closing time of the session, or is unable to submit the evaluation due to technical problems, you can submit the student's responses on his/her behalf.
+        <a [routerLink]="instructorHelpPath" [queryParams]="{questionId: SessionsSectionQuestions.SESSION_CANNOT_SUBMIT, section: Sections.sessions}">Submit responses for students</a>: if a student has missed the closing time of the session, or is unable to submit the evaluation due to technical problems, you can submit the student's responses on his/her behalf.
       </li>
     </ul>
     <p>
@@ -179,19 +179,19 @@ <h2 id="other-actions">5. Learn about other actions you can perform</h2>
     </p>
     <ul>
       <li>
-        <a [routerLink]="instructorHelpPath" fragment="student-view-profile">View a student's profile</a> and <a [routerLink]="instructorHelpPath" fragment="student-view-responses">all past records of a student</a>: view the profile that any enrolled student has written for him/herself, and see in one place all submissions given/received by a student. Handy for examining how a student progressed through a course.
+        <a [routerLink]="instructorHelpPath" [queryParams]="{questionId: StudentsSectionQuestions.STUDENT_VIEW_PROFILE, section: Sections.students}">View a student's profile</a> and <a [routerLink]="instructorHelpPath" [queryParams]="{questionId: StudentsSectionQuestions.STUDENT_VIEW_RESPONSES, section: Sections.students}">all past records of a student</a>: view the profile that any enrolled student has written for him/herself, and see in one place all submissions given/received by a student. Handy for examining how a student progressed through a course.
       </li>
       <li>
-        <a [routerLink]="instructorHelpPath" fragment="student-edit-details">Edit a student's data</a>: change a student's registered name, section or team name, or email address. You can also note down comments on students, for example to inform other instructors of information about a student that they should take note of.
+        <a [routerLink]="instructorHelpPath" [queryParams]="{questionId: StudentsSectionQuestions.STUDENT_EDIT_DETAILS, section: Sections.students}">Edit a student's data</a>: change a student's registered name, section or team name, or email address. You can also note down comments on students, for example to inform other instructors of information about a student that they should take note of.
       </li>
       <li>
-        <a [routerLink]="instructorHelpPath" fragment="student-email">Email a group of students</a>: contact students regarding their feedback responses, or the course in general. Also handy for locating the email address of past students.
+        <a [routerLink]="instructorHelpPath" [queryParams]="{questionId: StudentsSectionQuestions.STUDENT_EMAIL, section: Sections.students}">Email a group of students</a>: contact students regarding their feedback responses, or the course in general. Also handy for locating the email address of past students.
       </li>
       <li>
-        Search: <a [routerLink]="instructorHelpPath" fragment="student-search">search for students, teams or sections</a>, or <a [routerLink]="instructorHelpPath" fragment="session-search">search for questions, responses or comments</a>.
+        Search: <a [routerLink]="instructorHelpPath" [queryParams]="{questionId: StudentsSectionQuestions.STUDENT_SEARCH, section: Sections.students}">search for students, teams or sections</a>, or <a [routerLink]="instructorHelpPath" [queryParams]="{questionId: SessionsSectionQuestions.SESSION_SEARCH, section: Sections.sessions}">search for questions, responses or comments</a>.
       </li>
       <li>
-        <a [routerLink]="instructorHelpPath" fragment="course-archive">Archive old courses</a>: archive old courses that you no longer need actively.
+        <a [routerLink]="instructorHelpPath" [queryParams]="{questionId: CoursesSectionQuestions.COURSE_ARCHIVE, section: Sections.courses}">Archive old courses</a>: archive old courses that you no longer need actively.
       </li>
     </ul>
   </div>

src/web/app/pages-help/instructor-help-page/instructor-help-getting-started/instructor-help-getting-started.component.ts

@@ -1,6 +1,11 @@
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { environment } from '../../../../environments/environment';
+import { CoursesSectionQuestions } from '../instructor-help-courses-section/courses-section-questions';
+import { QuestionsSectionQuestions } from '../instructor-help-questions-section/questions-section-questions';
+import { SessionsSectionQuestions } from '../instructor-help-sessions-section/sessions-section-questions';
+import { StudentsSectionQuestions } from '../instructor-help-students-section/students-section-questions';
+import { Sections } from '../sections';
 
 /**
  * Getting Started Section for Instructors
@@ -11,6 +16,14 @@ import { environment } from '../../../../environments/environment';
   styleUrls: ['./instructor-help-getting-started.component.scss'],
 })
 export class InstructorHelpGettingStartedComponent implements OnInit {
+
+  // enum
+  StudentsSectionQuestions: typeof StudentsSectionQuestions = StudentsSectionQuestions;
+  CoursesSectionQuestions: typeof CoursesSectionQuestions = CoursesSectionQuestions;
+  SessionsSectionQuestions: typeof SessionsSectionQuestions = SessionsSectionQuestions;
+  QuestionsSectionQuestions: typeof QuestionsSectionQuestions = QuestionsSectionQuestions;
+  Sections: typeof Sections = Sections;
+
   readonly supportEmail: string = environment.supportEmail;
   instructorHelpPath: string = '';