Fixes the practice page 400 error (oppia#21830)

* fix practice page

* fix frontend tests

Author: HardikGoyal2003

core/templates/pages/oppia-root/routing/access-validation-backend-api.service.spec.ts

@@ -143,7 +143,7 @@ describe('Access validation backend api service', () => {
   it('should validate access to practice session page', fakeAsync(() => {
     let classroomUrlFragment = 'classroom';
     let topicUrlFragment = 'topic';
-    let selectedSubtopicIds = [1, 2, 3];
+    let selectedSubtopicIds = '[1,2,3]';
 
     spyOn(urlInterpolationService, 'interpolateUrl').and.returnValue(
       '/access_validation_handler/can_access_practice_session_page/' +

core/templates/pages/oppia-root/routing/access-validation-backend-api.service.ts

@@ -191,7 +191,7 @@ export class AccessValidationBackendApiService {
   validateAccessToPracticeSessionPage(
     classroomUrlFragment: string,
     topicUrlFragment: string,
-    selectedSubtopicIds: number[]
+    selectedSubtopicIds: string
   ): Promise<void> {
     let url = this.urlInterpolationService.interpolateUrl(
       this.PRACTICE_SESSION_PAGE_ACCESS_VALIDATOR,
@@ -202,7 +202,7 @@ export class AccessValidationBackendApiService {
     );
     const params = new HttpParams().set(
       'selected_subtopic_ids',
-      JSON.stringify(selectedSubtopicIds)
+      selectedSubtopicIds
     );
     return this.http.get<void>(url, {params}).toPromise();
   }

core/templates/pages/practice-session-page/practice-session-page-auth.guard.ts

@@ -41,7 +41,7 @@ export class PracticeSessionAccessGuard implements CanActivate {
     route: ActivatedRouteSnapshot,
     state: RouterStateSnapshot
   ): Promise<boolean> {
-    const selectedSubtopicIds = route.queryParams.selected_subtopic_ids;
+    const selectedSubtopicIds = route.queryParams.selected_subtopic_ids || '';
     const classroomUrlFragment =
       route.paramMap.get('classroom_url_fragment') || '';
     const topicUrlFragment = route.paramMap.get('topic_url_fragment') || '';