feat(Activity): Add Title field

package.json

@@ -53,6 +53,7 @@
     "iframe-resizer": "^3.6.6",
     "jquery": "^3.6.0",
     "jwt-decode": "^3.1.2",
+    "lightningcss": "^1.33.0",
     "lz-string": "^1.4.4",
     "marked": "^18.0.3",
     "mathjax": "^3.2.2",
@@ -235,4 +236,4 @@
       ]
     ]
   }
-}
+}

src/app/possible-score/possible-score.component.ts

@@ -12,6 +12,6 @@ export class PossibleScoreComponent {
   constructor(private projectService: ProjectService) {}
 
   ngOnInit(): void {
-    this.hidePossibleScores = this.projectService.getThemeSettings().hidePossibleScores;
+    this.hidePossibleScores = this.projectService.getThemeSettings()?.hidePossibleScores;
   }
 }

src/assets/wise5/authoringTool/components/edit-component-dialog/edit-component-dialog.component.ts

@@ -10,11 +10,13 @@ import { Component as WISEComponent } from '../../../common/Component';
 import { EditComponentAdvancedComponent } from '../../../../../app/authoring-tool/edit-component-advanced/edit-component-advanced.component';
 import { TeacherProjectService } from '../../../services/teacherProjectService';
 import { ComponentInfoService } from '../../../services/componentInfoService';
+import { EditComponentTitleComponent } from '../edit-component-title/edit-component-title.component';
 
 @Component({
   encapsulation: ViewEncapsulation.None,
   imports: [
     EditComponentComponent,
+    EditComponentTitleComponent,
     EditComponentAdvancedComponent,
     FormsModule,
     MatButtonModule,
@@ -36,8 +38,9 @@ import { ComponentInfoService } from '../../../services/componentInfoService';
       @if (advancedMode) {
         <edit-component-advanced class="h-full" [component]="component" />
       } @else {
+        <edit-component-title class="block pt-4" [componentContent]="data.componentContent" />
         <edit-component
-          class="block h-full py-4"
+          class="block h-full pb-4"
           [componentContent]="data.componentContent"
           [nodeId]="data.nodeId"
         />

src/assets/wise5/authoringTool/components/edit-component-title/edit-component-title.component.ts

@@ -0,0 +1,27 @@
+import { Component, inject, Input } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { ComponentContent } from '../../../common/ComponentContent';
+import { TeacherProjectService } from '../../../services/teacherProjectService';
+
+@Component({
+  imports: [FormsModule, MatFormFieldModule, MatInputModule],
+  selector: 'edit-component-title',
+  template: `
+    <mat-form-field class="w-full">
+      <mat-label i18n>Activity Title</mat-label>
+      <input matInput [(ngModel)]="componentContent.title" (ngModelChange)="titleChanged()" />
+    </mat-form-field>
+  `
+})
+export class EditComponentTitleComponent {
+  private projectService = inject(TeacherProjectService);
+
+  @Input() componentContent: ComponentContent;
+  private title: string = '';
+
+  titleChanged(): void {
+    this.projectService.saveProject();
+  }
+}

src/assets/wise5/authoringTool/components/edit-component/edit-component.component.ts

@@ -37,7 +37,7 @@ export class EditComponentComponent {
       nodeId: this.nodeId
     });
     this.applicationRef.attachView(this.componentRef.hostView);
-    setTimeout(() => hostElement.focus());
+    setTimeout(() => hostElement.focus({ preventScroll: true }));
   }
 
   ngOnDestroy(): void {

src/assets/wise5/common/ComponentContent.ts

@@ -13,6 +13,7 @@ export interface ComponentContent {
   cRaterRubric?: CRaterRubric;
   dynamicPrompt?: DynamicPrompt;
   excludeFromTotalScore?: boolean;
+  title?: string;
   maxScore?: number;
   maxSubmitCount?: number;
   prompt?: string;

src/assets/wise5/components/embedded/embedded-student/embedded-student.component.html

@@ -1,3 +1,4 @@
+<component-header [component]="component" />
 <div class="main-div">
   @if (isShowAddToNotebookButton) {
     <add-to-notebook-button [isDisabled]="isDisabled" (snipImage)="snipModel()" />

src/assets/wise5/components/embedded/embedded-student/embedded-student.component.ts

@@ -1,3 +1,4 @@
+import { ComponentHeaderComponent } from '../../../directives/component-header/component-header.component';
 import html2canvas from 'html2canvas';
 import { ChangeDetectorRef, Component } from '@angular/core';
 import { AnnotationService } from '../../../services/annotationService';
@@ -19,6 +20,7 @@ import { ComponentAnnotationsComponent } from '../../../directives/componentAnno
 
 @Component({
   imports: [
+    ComponentHeaderComponent,
     AddToNotebookButtonComponent,
     ComponentSaveSubmitButtonsComponent,
     ComponentAnnotationsComponent

src/assets/wise5/components/html/html-student/html-student.component.html

@@ -1 +1,2 @@
+<component-header [component]="component" />
 <div [innerHTML]="html"></div>

src/assets/wise5/components/html/html-student/html-student.component.ts

@@ -9,9 +9,11 @@ import { NotebookService } from '../../../services/notebookService';
 import { StudentAssetService } from '../../../services/studentAssetService';
 import { StudentDataService } from '../../../services/studentDataService';
 import { ComponentStudent } from '../../component-student.component';
+import { ComponentHeaderComponent } from '../../../directives/component-header/component-header.component';
 import { ComponentService } from '../../componentService';
 
 @Component({
+  imports: [ComponentHeaderComponent],
   selector: 'html-student',
   styleUrl: 'html-student.component.scss',
   templateUrl: 'html-student.component.html'

src/assets/wise5/components/outsideURL/outside-url-student/outside-url-student.component.html

@@ -1,3 +1,4 @@
+<component-header [component]="component" />
 <div class="outside-content">
   <div style="width: {{ width }}; height: {{ height }}">
     <iframe [src]="url" width="100%" height="100%" allowfullscreen> </iframe>

src/assets/wise5/components/outsideURL/outside-url-student/outside-url-student.component.ts

@@ -8,9 +8,11 @@ import { NotebookService } from '../../../services/notebookService';
 import { StudentAssetService } from '../../../services/studentAssetService';
 import { StudentDataService } from '../../../services/studentDataService';
 import { ComponentStudent } from '../../component-student.component';
+import { ComponentHeaderComponent } from '../../../directives/component-header/component-header.component';
 import { ComponentService } from '../../componentService';
 
 @Component({
+  imports: [ComponentHeaderComponent],
   selector: 'outside-url-student',
   templateUrl: 'outside-url-student.component.html'
 })

src/assets/wise5/components/summary/summary-student/summary-student.component.html

@@ -1,3 +1,4 @@
+<component-header [component]="component" />
 <div class="summary">
   @if (componentContent.prompt) {
     <div [innerHTML]="prompt" class="prompt"></div>

src/assets/wise5/components/summary/summary-student/summary-student.component.ts

@@ -1,3 +1,4 @@
+import { ComponentHeaderComponent } from '../../../directives/component-header/component-header.component';
 import { Component, Input } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { AnnotationService } from '../../../services/annotationService';
@@ -13,7 +14,8 @@ import { CompletionService } from '../../../services/completionService';
 import { StudentSummaryDisplay } from '../../../directives/student-summary-display/student-summary-display.component';
 
 @Component({
-  imports: [StudentSummaryDisplay],
+  imports: [
+    ComponentHeaderComponent,StudentSummaryDisplay],
   styles: ['.prompt { font-weight: 500; padding-bottom: 8px; }'],
   templateUrl: 'summary-student.component.html'
 })

src/assets/wise5/directives/component-header/component-header.component.html

@@ -1,6 +1,9 @@
-<div class="component-header flex flex-wrap gap-1">
+@if (title) {
+  <div class="mat-headline-6">{{ title }}</div>
+}
+<div class="flex flex-wrap gap-1 mb-4">
   <prompt
-    [prompt]="component.content.prompt"
+    [prompt]="prompt"
     [nodeId]="component.nodeId"
     [componentId]="component.id"
     [dynamicPrompt]="dynamicPrompt"

src/assets/wise5/directives/component-header/component-header.component.ts

@@ -1,5 +1,4 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 import { Component as WISEComponent } from '../../common/Component';
 import { FeedbackRule } from '../../components/common/feedbackRule/FeedbackRule';
 import { DynamicPrompt } from '../dynamic-prompt/DynamicPrompt';
@@ -9,19 +8,24 @@ import { PromptComponent } from '../prompt/prompt.component';
 @Component({
   imports: [PossibleScoreComponent, PromptComponent],
   selector: 'component-header',
-  styles: ['.component-header { padding-bottom: 8px; } .prompt { font-weight: 500; }'],
   templateUrl: 'component-header.component.html'
 })
 export class ComponentHeaderComponent {
   @Input() component: WISEComponent;
   protected dynamicPrompt: DynamicPrompt;
   @Output() dynamicPromptChanged: EventEmitter<FeedbackRule> = new EventEmitter<FeedbackRule>();
-  protected prompt: SafeHtml;
 
-  constructor(protected sanitizer: DomSanitizer) {}
+  constructor() {}
+
+  protected get title(): string {
+    return this.component.content.title || '';
+  }
+
+  protected get prompt(): string {
+    return this.component.content.prompt || '';
+  }
 
   ngOnInit(): void {
-    this.prompt = this.sanitizer.bypassSecurityTrustHtml(this.component.content.prompt);
     this.dynamicPrompt = new DynamicPrompt(this.component.content.dynamicPrompt);
   }
 

src/assets/wise5/services/createComponentService.ts

@@ -2,11 +2,13 @@ import { Injectable } from '@angular/core';
 import { TeacherProjectService } from './teacherProjectService';
 import { ComponentServiceLookupService } from './componentServiceLookupService';
 import { Node } from '../common/Node';
+import { ComponentInfoService } from './componentInfoService';
 
 @Injectable()
 export class CreateComponentService {
   constructor(
     private componentServiceLookupService: ComponentServiceLookupService,
+    private componentInfoService: ComponentInfoService,
     private projectService: TeacherProjectService
   ) {}
 
@@ -22,6 +24,7 @@ export class CreateComponentService {
     const node = this.projectService.getNode(nodeId);
     const service = this.componentServiceLookupService.getService(componentType);
     const component = service.createComponent();
+    component.title = this.componentInfoService.getInfo(componentType).getLabel();
     if (service.componentHasWork(component)) {
       if (node.showSaveButton == false) {
         if (this.projectService.doesAnyComponentInNodeShowSubmitButton(node.id)) {

src/assets/wise5/services/projectService.ts

@@ -804,7 +804,7 @@ export class ProjectService {
    */
   getThemeSettings(): any {
     let themeSettings = {};
-    if (this.project.themeSettings) {
+    if (this.project?.themeSettings) {
       if (this.project.theme) {
         // TODO: check if this is a valid theme (using ConfigService) rather than just truthy
         themeSettings = this.project.themeSettings[this.project.theme];
@@ -1873,7 +1873,7 @@ export class ProjectService {
   }
 
   getSpeechToTextSettings(): any {
-    return this.project.speechToText;
+    return this.project?.speechToText;
   }
 
   getPreviousNodeId(nodeId: string): string {

src/messages.xlf

@@ -11173,14 +11173,14 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         <source>Edit: <x id="INTERPOLATION" equiv-text="{{ componentIndex }}"/>. <x id="INTERPOLATION_1" equiv-text="{{ componentTypeLabel }}"/></source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/components/edit-component-dialog/edit-component-dialog.component.ts</context>
-          <context context-type="linenumber">29,30</context>
+          <context context-type="linenumber">31,32</context>
         </context-group>
       </trans-unit>
       <trans-unit id="6201638315245239510" datatype="html">
         <source>Advanced</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/components/edit-component-dialog/edit-component-dialog.component.ts</context>
-          <context context-type="linenumber">32,35</context>
+          <context context-type="linenumber">34,37</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/components/edit-node-advanced-button/edit-node-advanced-button.component.ts</context>
@@ -11191,7 +11191,7 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         <source> Close </source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/components/edit-component-dialog/edit-component-dialog.component.ts</context>
-          <context context-type="linenumber">49,54</context>
+          <context context-type="linenumber">52,57</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/node/advanced/node-advanced-authoring/node-advanced-authoring.component.html</context>
@@ -11202,6 +11202,13 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
           <context context-type="linenumber">114,119</context>
         </context-group>
       </trans-unit>
+      <trans-unit id="6423582700668158689" datatype="html">
+        <source>Activity Title</source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/assets/wise5/authoringTool/components/edit-component-title/edit-component-title.component.ts</context>
+          <context context-type="linenumber">13,14</context>
+        </context-group>
+      </trans-unit>
       <trans-unit id="3021342818793175999" datatype="html">
         <source>Authoring Tool Menu</source>
         <context-group purpose="location">
@@ -22071,7 +22078,7 @@ If this problem continues, let your teacher know and move on to the next activit
         <source>Credit: <x id="INTERPOLATION" equiv-text="{{ infoString }}"/></source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/components/outsideURL/outside-url-student/outside-url-student.component.html</context>
-          <context context-type="linenumber">7,9</context>
+          <context context-type="linenumber">8,10</context>
         </context-group>
       </trans-unit>
       <trans-unit id="5734555357630269297" datatype="html">
@@ -22508,28 +22515,28 @@ If this problem continues, let your teacher know and move on to the next activit
         <source>You must submit work on &quot;<x id="PH" equiv-text="this.otherStepTitle"/>&quot; to view the summary.</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/components/summary/summary-student/summary-student.component.ts</context>
-          <context context-type="linenumber">134</context>
+          <context context-type="linenumber">136</context>
         </context-group>
       </trans-unit>
       <trans-unit id="3834814461916183420" datatype="html">
         <source>You must complete &quot;<x id="PH" equiv-text="this.otherStepTitle"/>&quot; to view the summary.</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/components/summary/summary-student/summary-student.component.ts</context>
-          <context context-type="linenumber">136</context>
+          <context context-type="linenumber">138</context>
         </context-group>
       </trans-unit>
       <trans-unit id="1745852243024604075" datatype="html">
         <source>You must submit work on &quot;<x id="PH" equiv-text="this.otherStepTitle"/>&quot; to view the class summary.</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/components/summary/summary-student/summary-student.component.ts</context>
-          <context context-type="linenumber">142</context>
+          <context context-type="linenumber">144</context>
         </context-group>
       </trans-unit>
       <trans-unit id="8412691431688558361" datatype="html">
         <source>You must complete &quot;<x id="PH" equiv-text="this.otherStepTitle"/>&quot; to view the class summary.</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/components/summary/summary-student/summary-student.component.ts</context>
-          <context context-type="linenumber">144</context>
+          <context context-type="linenumber">146</context>
         </context-group>
       </trans-unit>
       <trans-unit id="6594489851569621957" datatype="html">