diff --git a/docs/components/topicComponent.md b/docs/components/topicComponent.md
index a23908b9a1..b78d745f0b 100644
--- a/docs/components/topicComponent.md
+++ b/docs/components/topicComponent.md
@@ -1,5 +1,140 @@
 # Topic Component - Video Playback Issues
 
+## Topic Attention Metrics
+
+### Purpose
+
+Topic tasks now send a non-blocking attention snapshot when an incomplete topic is marked complete. The metric is intended to help understand whether learners likely engaged with the topic content; it is not proof of reading or comprehension.
+
+The learner experience is unchanged in v1:
+
+- The "Mark as complete and continue" action is not blocked or delayed.
+- Already completed topics continue without posting another progress update or attention payload.
+- No raw topic text, pointer paths, keystrokes, or personal content is sent.
+
+### Payload
+
+`TopicComponent` emits a `TopicContinueEvent` with `{ topic, attention }`. Desktop and mobile pages pass `attention` into `TopicService.updateTopicProgress(id, 'completed', attention)`, which posts:
+
+```json
+{
+  "model": "topic",
+  "model_id": 123,
+  "state": "completed",
+  "meta": {
+    "attention": {
+      "version": 1,
+      "score": 80,
+      "confidence": "high",
+      "activeMs": 10000,
+      "visibleMs": 10000,
+      "estimatedReadMs": 9000,
+      "textWordCount": 30,
+      "contentExposureRatio": 1,
+      "mediaProgressRatio": 0,
+      "mediaPlayedMs": 0,
+      "filePreviewCount": 0,
+      "fileDownloadCount": 0,
+      "quickComplete": false
+    }
+  }
+}
+```
+
+Backend requirement: `api/v2/motivations/progress/create.json` must accept and persist optional `meta.attention` without changing existing topic progress semantics.
+
+### Signals And Scoring
+
+The tracker uses native browser APIs and existing component interactions:
+
+- Foreground visible time, paused while the document is hidden.
+- Quick-complete flag when foreground time is under 5 seconds.
+- Word count from the raw topic HTML retained during topic normalisation.
+- Maximum rendered content exposure for `app-description`.
+- Native audio/video and Plyr media progress/play time where available.
+- Attachment preview/download counts from existing file actions.
+
+Applicable signal weights are redistributed when a topic lacks that signal:
+
+- Text exposure: `0.35`
+- Reading-time ratio: `0.25`
+- Media progress: `0.25`
+- File interaction: `0.15`
+
+`score` is `0-100`. `confidence` is `high` at `>= 75`, `medium` at `>= 40`, otherwise `low`. A quick-complete session forces `confidence` to `low` unless the score is already `>= 75`.
+
+### Limitations
+
+- Attention confidence is an engagement heuristic, not a comprehension measure.
+- Embedded media providers may expose progress through Plyr inconsistently.
+- File interaction counts indicate opening/downloading, not whether the file was read.
+- v1 does not revive the old `stopped` progress state or add completion gating.
+
+## Local Topic Time Spent Indicator
+
+### Purpose
+
+Incomplete topic tasks show a small "Time spent" indicator below the topic title. This is a local learner-facing timer and is separate from the backend attention metric.
+
+### Storage And Lifecycle
+
+- Each topic uses localStorage key `topicTimeSpent:<topicId>`.
+- In activity navigation, the selected `Task.id` is the authoritative topic id for this key. This avoids continuing the previous topic timer while the next topic content is still loading asynchronously.
+- The timer starts when `TopicComponent` receives a topic.
+- The timer is persisted and stopped when the component changes topic, is destroyed, or leaves the page.
+- Returning to the same topic resumes from the persisted value.
+- Marking an incomplete topic complete removes the stored timer for that topic.
+- Already completed topics do not show the indicator and do not clear any timer through the continue-only path.
+- A direct mobile topic load refreshes the parent activity and matches its task by topic id, so a completed topic keeps its completed state after a browser refresh.
+
+### Format
+
+The visible timer uses `m:ss` until it reaches one hour, then `h:mm:ss`.
+
+## Topic Attention And Completion Flow
+
+The topic interaction is measurement-only in v1. The learner can complete the topic immediately; tracking does not block, delay, or require additional interaction.
+
+```text
+Topic loads
+  -> start attention tracking for the current topic session
+  -> start or resume the local topic time-spent timer
+
+Learner interacts with the topic
+  -> accumulate foreground-visible time
+  -> record maximum content exposure
+  -> record media play time and furthest media progress
+  -> record file preview and download actions
+
+Learner selects the completion action
+  -> build the aggregate attention snapshot
+  -> emit { topic, attention } from TopicComponent
+  -> remove the local timer for an incomplete topic
+
+Desktop or mobile page receives the event
+  -> if the task is already done, navigate to the next task without posting progress
+  -> otherwise post completed topic progress with optional meta.attention
+  -> refresh activity state and continue to the next task
+```
+
+The UI uses the task status to choose the completion state:
+
+- Incomplete topic: show `Time spent: m:ss` and `Mark as complete and continue`.
+- Completed topic: hide the time indicator and show `Continue`.
+- Completed topic continuation: skip `updateTopicProgress()` so attention is not submitted repeatedly.
+
+### Measurement Boundaries
+
+The local time-spent timer and backend attention metrics have different purposes and lifecycles:
+
+- `topicTimeSpent:<topicId>` is a learner-facing localStorage value that accumulates across visits to the same topic. It is persisted when the topic is left, the component is destroyed, or the selected topic changes, and is removed when an incomplete topic is completed.
+- The `attention` snapshot is created for the current TopicComponent session when the completion action is selected. It is sent only with the first completion request for an incomplete task.
+- The accumulated local timer is currently not included in `meta.attention` and does not contribute to the attention score.
+- `activeMs` and `visibleMs` currently represent the same foreground-visible session time. Hidden browser tabs pause this attention measurement; the local timer is stopped by page/component lifecycle events.
+- The tracker records aggregate interaction signals only. It does not send raw topic HTML, pointer paths, keystrokes, or personal content.
+
+On a direct mobile topic refresh, the page reloads the parent activity and matches the task by the route topic ID before rendering the completion state. This ensures a previously completed topic remains completed after refresh.
+
 ## Issue: YouTube Video Overlay Not Loading on Subsequent Visits
 
 ### Problem Description
diff --git a/projects/v3/src/app/components/topic/topic.component.html b/projects/v3/src/app/components/topic/topic.component.html
index a8c1e643c9..2343f18563 100644
--- a/projects/v3/src/app/components/topic/topic.component.html
+++ b/projects/v3/src/app/components/topic/topic.component.html
@@ -1,5 +1,9 @@
 <div *ngIf="topic" class="ion-padding main-content" style="min-height: 100%;">
   <div class="headline-2 topic-title" aria-live="polite" role="heading" [innerHTML]="sanitizedTitle"></div>
+  <div *ngIf="task?.status !== 'done'" class="topic-time-spent body-3" aria-live="polite">
+    <ion-icon name="time-outline" aria-hidden="true"></ion-icon>
+    <span i18n="topic time spent">Time spent: {{ formattedTopicTimeSpent }}</span>
+  </div>
   <div *ngIf="topic.videolink && topic.videolink !=='magiclink'" class="text-center topic-video">
     <div *ngIf="iframeHtml" class="video-embed" [innerHTML]="iframeHtml"></div>
     <video
diff --git a/projects/v3/src/app/components/topic/topic.component.scss b/projects/v3/src/app/components/topic/topic.component.scss
index e21c28df33..18bdb89a2c 100644
--- a/projects/v3/src/app/components/topic/topic.component.scss
+++ b/projects/v3/src/app/components/topic/topic.component.scss
@@ -1,6 +1,18 @@
 .topic-title {
   margin-bottom: 19px;
 }
+.topic-time-spent {
+  align-items: center;
+  color: var(--practera-grey-75);
+  display: flex;
+  gap: 6px;
+  margin: -8px 0 18px;
+
+  ion-icon {
+    color: var(--ion-color-primary);
+    font-size: 18px;
+  }
+}
 .topic-video {
   margin-bottom: 20px;
 }
diff --git a/projects/v3/src/app/components/topic/topic.component.spec.ts b/projects/v3/src/app/components/topic/topic.component.spec.ts
index 6dba060780..253303e3fc 100644
--- a/projects/v3/src/app/components/topic/topic.component.spec.ts
+++ b/projects/v3/src/app/components/topic/topic.component.spec.ts
@@ -39,7 +39,7 @@ describe('TopicComponent', () => {
     sharedSpy = jasmine.createSpyObj('SharedService', ['stopPlayingVideos']);
     routerSpy = jasmine.createSpyObj('Router', ['navigate']);
     notificationSpy = jasmine.createSpyObj('NotificationsService', ['alert', 'presentToast']);
-    storageSpy = jasmine.createSpyObj('BrowserStorageService', ['getUser', 'get', 'remove']);
+    storageSpy = jasmine.createSpyObj('BrowserStorageService', ['getUser', 'get', 'set', 'remove']);
     activitySpy = jasmine.createSpyObj('ActivityService', ['gotoNextTask']);
 
     await TestBed.configureTestingModule({
@@ -67,7 +67,7 @@ describe('TopicComponent', () => {
     utilsSpy = TestBed.inject(UtilsService) as jasmine.SpyObj<UtilsService>;
 
     storageSpy.getUser.and.returnValue({ teamId: 1, projectId: 2 });
-    storageSpy.get.and.returnValue({});
+    storageSpy.get.and.returnValue(null);
   });
 
   it('should create', () => {
@@ -80,6 +80,187 @@ describe('TopicComponent', () => {
     expect(sharedSpy.stopPlayingVideos).toHaveBeenCalledTimes(1);
   });
 
+  it('should emit topic and attention metrics when continuing', fakeAsync(() => {
+    const topic = {
+      id: 1,
+      title: 'Topic',
+      rawContent: '<p>Topic body</p>',
+      files: [],
+    } as any;
+    const attention = {
+      version: 1,
+      score: 20,
+      confidence: 'low',
+      activeMs: 1000,
+      visibleMs: 1000,
+      estimatedReadMs: 300,
+      textWordCount: 1,
+      contentExposureRatio: 1,
+      mediaProgressRatio: 0,
+      mediaPlayedMs: 0,
+      filePreviewCount: 0,
+      fileDownloadCount: 0,
+      quickComplete: true,
+    } as any;
+    spyOn<any>(component, 'getAttentionMetrics').and.returnValue(attention);
+    const emitSpy = spyOn(component.continue, 'emit');
+
+    component.ngOnInit();
+    component.actionBarContinue(topic);
+    tick();
+
+    expect(emitSpy).toHaveBeenCalledWith({ topic, attention });
+  }));
+
+  it('should reset attention tracking when topic changes', () => {
+    const stopSpy = spyOn<any>(component, 'stopAttentionTracking').and.callThrough();
+    const startSpy = spyOn<any>(component, 'startAttentionTracking').and.callThrough();
+    component.topic = {
+      id: 2,
+      title: 'New topic',
+      rawContent: '<p>New topic body</p>',
+      files: [],
+    } as any;
+
+    component.ngOnChanges({
+      topic: {
+        currentValue: component.topic,
+        previousValue: { id: 1 },
+        firstChange: false,
+        isFirstChange: () => false
+      }
+    });
+
+    expect(stopSpy).toHaveBeenCalled();
+    expect(startSpy).toHaveBeenCalledWith(component.topic);
+  });
+
+  it('should include file interactions in attention metrics', () => {
+    component.topic = {
+      id: 3,
+      title: 'File topic',
+      rawContent: '',
+      files: [{ url: 'https://example.com/file.pdf', name: 'file.pdf' }],
+    } as any;
+    component['startAttentionTracking'](component.topic);
+
+    component.actionBtnClick(component.topic.files[0], 0);
+
+    expect(component['getAttentionMetrics']().fileDownloadCount).toBe(1);
+  });
+
+  it('should clean up attention listeners', () => {
+    component.topic = {
+      id: 4,
+      title: 'Cleanup topic',
+      rawContent: '<p>Cleanup body</p>',
+      files: [],
+    } as any;
+
+    component['startAttentionTracking'](component.topic);
+    expect(component['attentionListeners'].length).toBeGreaterThan(0);
+
+    component['stopAttentionTracking']();
+    expect(component['attentionListeners'].length).toBe(0);
+  });
+
+  it('should resume persisted topic time from local storage', () => {
+    storageSpy.get.withArgs('topicTimeSpent:5').and.returnValue(61000);
+
+    component['startTopicTimeTracking'](5);
+
+    expect(component.formattedTopicTimeSpent).toBe('1:01');
+  });
+
+  it('should persist topic time when tracking stops', () => {
+    component.topic = { id: 6, title: 'Timed topic', files: [] } as any;
+    storageSpy.get.withArgs('topicTimeSpent:6').and.returnValue(0);
+    spyOn(Date, 'now').and.returnValues(1000, 1000, 4000, 4000);
+
+    component['startTopicTimeTracking'](6);
+    component['stopTopicTimeTracking']();
+
+    expect(storageSpy.set).toHaveBeenCalledWith('topicTimeSpent:6', 3000);
+  });
+
+  it('should switch timer storage when selected task changes before topic data updates', () => {
+    component.topic = { id: 8, title: 'Old topic', files: [] } as any;
+    component.task = { id: 8, type: 'Topic', status: 'in progress' } as any;
+    storageSpy.get.withArgs('topicTimeSpent:8').and.returnValue(0);
+    storageSpy.get.withArgs('topicTimeSpent:9').and.returnValue(120000);
+    spyOn(Date, 'now').and.returnValues(1000, 1000, 5000, 5000, 5000, 5000);
+
+    component['startTopicTimeTracking'](8);
+    component.task = { id: 9, type: 'Topic', status: 'in progress' } as any;
+    component.ngOnChanges({
+      task: {
+        currentValue: component.task,
+        previousValue: { id: 8, type: 'Topic', status: 'in progress' },
+        firstChange: false,
+        isFirstChange: () => false
+      }
+    });
+
+    expect(storageSpy.set).toHaveBeenCalledWith('topicTimeSpent:8', 4000);
+    expect(storageSpy.get).toHaveBeenCalledWith('topicTimeSpent:9');
+    expect(component.formattedTopicTimeSpent).toBe('2:00');
+  });
+
+  it('should remove topic time when marking an incomplete topic complete', fakeAsync(() => {
+    const topic = { id: 7, title: 'Complete topic', files: [] } as any;
+    component.topic = topic;
+    component.task = { id: 7, type: 'Topic', status: 'in progress' } as any;
+    spyOn<any>(component, 'getAttentionMetrics').and.returnValue({
+      version: 1,
+      score: 0,
+      confidence: 'low',
+      activeMs: 0,
+      visibleMs: 0,
+      estimatedReadMs: 0,
+      textWordCount: 0,
+      contentExposureRatio: 0,
+      mediaProgressRatio: 0,
+      mediaPlayedMs: 0,
+      filePreviewCount: 0,
+      fileDownloadCount: 0,
+      quickComplete: true,
+    });
+
+    component.ngOnInit();
+    component.actionBarContinue(topic);
+    tick();
+
+    expect(storageSpy.remove).toHaveBeenCalledWith('topicTimeSpent:7');
+    expect(component.formattedTopicTimeSpent).toBe('0:00');
+  }));
+
+  it('should remove timer using selected task id instead of stale topic id', fakeAsync(() => {
+    const topic = { id: 10, title: 'Stale topic', files: [] } as any;
+    component.topic = topic;
+    component.task = { id: 11, type: 'Topic', status: 'in progress' } as any;
+    spyOn<any>(component, 'getAttentionMetrics').and.returnValue({
+      version: 1,
+      score: 0,
+      confidence: 'low',
+      activeMs: 0,
+      visibleMs: 0,
+      estimatedReadMs: 0,
+      textWordCount: 0,
+      contentExposureRatio: 0,
+      mediaProgressRatio: 0,
+      mediaPlayedMs: 0,
+      filePreviewCount: 0,
+      fileDownloadCount: 0,
+      quickComplete: true,
+    });
+
+    component.ngOnInit();
+    component.actionBarContinue(topic);
+    tick();
+
+    expect(storageSpy.remove).toHaveBeenCalledWith('topicTimeSpent:11');
+  }));
+
   describe('ngOnChanges', () => {
     it('should embed video when video element found', fakeAsync(() => {
       const originalQSA = component['document'].querySelectorAll.bind(component['document']);
diff --git a/projects/v3/src/app/components/topic/topic.component.ts b/projects/v3/src/app/components/topic/topic.component.ts
index 0ffc235c3d..4c0603ea8b 100644
--- a/projects/v3/src/app/components/topic/topic.component.ts
+++ b/projects/v3/src/app/components/topic/topic.component.ts
@@ -13,6 +13,25 @@ import { Task } from '@v3/app/services/activity.service';
 import { ComponentCleanupService } from '@v3/app/services/component-cleanup.service';
 import { ModalController } from '@ionic/angular';
 import { FilePopupComponent } from '../file-popup/file-popup.component';
+import { buildTopicAttentionMetrics, TopicAttentionMetrics } from '@v3/app/models/topic-attention.model';
+import { BrowserStorageService } from '@v3/services/storage.service';
+
+export interface TopicContinueEvent {
+  topic: Topic;
+  attention: TopicAttentionMetrics;
+}
+
+interface MediaAttentionSource {
+  currentTime?: number;
+  duration?: number;
+}
+
+interface AttentionListener {
+  target: EventTarget;
+  eventName: string;
+  handler: EventListener;
+  options?: boolean | AddEventListenerOptions;
+}
 
 @Component({
   standalone: false,
@@ -24,7 +43,7 @@ export class TopicComponent implements OnInit, OnChanges, AfterViewChecked, OnDe
   @Input() topic: Topic;
   @Input() task: Task;
   continuing: boolean;
-  @Output() continue = new EventEmitter();
+  @Output() continue = new EventEmitter<TopicContinueEvent>();
   @Input() buttonDisabled$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
   @ViewChild('topicVideo', { static: false }) topicVideo: ElementRef<HTMLVideoElement>;
 
@@ -36,6 +55,7 @@ export class TopicComponent implements OnInit, OnChanges, AfterViewChecked, OnDe
   iframeHtml: SafeHtml;
   sanitizedTitle: SafeHtml;
   videoSrc: string;
+  formattedTopicTimeSpent = '0:00';
 
   private continueAction$ = new Subject<Topic>();
   private cleanupSub: Subscription;
@@ -44,6 +64,24 @@ export class TopicComponent implements OnInit, OnChanges, AfterViewChecked, OnDe
   private plyrInitialized = false;
   private destroy$ = new Subject<void>();
   private plyrInstances = new WeakMap<Element, Plyr>();
+  private attentionVisibleStartedAt = 0;
+  private attentionVisibleMs = 0;
+  private attentionTextWordCount = 0;
+  private attentionContentExposureRatio = 0;
+  private attentionFilePreviewCount = 0;
+  private attentionFileDownloadCount = 0;
+  private attentionMediaProgressRatio = 0;
+  private attentionMediaPlayedMs = 0;
+  private attentionMediaPlayStartedAt = new WeakMap<object, number>();
+  private attentionListeners: AttentionListener[] = [];
+  private trackedMediaSources = new WeakSet<object>();
+  private readonly handleAttentionVisibilityChange = () => this.updateVisibilityTracking();
+  private readonly handleAttentionExposureChange = () => this.updateContentExposureRatio();
+  private topicTimeSpentMs = 0;
+  private topicTimerStartedAt = 0;
+  private topicTimerIntervalId: ReturnType<typeof setInterval> | null = null;
+  private topicTimerStorageId: number | null = null;
+  private readonly topicTimeSpentStoragePrefix = 'topicTimeSpent';
 
   constructor(
     private embedService: EmbedVideoService,
@@ -56,10 +94,13 @@ export class TopicComponent implements OnInit, OnChanges, AfterViewChecked, OnDe
     private cleanupService: ComponentCleanupService,
     private cdr: ChangeDetectorRef,
     private modalController: ModalController,
+    private storage: BrowserStorageService,
     @Inject(DOCUMENT) private readonly document: Document
   ) {
     this.isMobile = this.utils.isMobile();
     this.cleanupSub = this.cleanupService.cleanup$.subscribe(() => {
+      this.stopTopicTimeTracking();
+      this.stopAttentionTracking();
       this.cleanupMedia();
     });
   }
@@ -71,7 +112,11 @@ export class TopicComponent implements OnInit, OnChanges, AfterViewChecked, OnDe
         this.continuing = true;
         this.buttonDisabled$.next(true);
 
-        this.continue.emit(topic);
+        this.continue.emit({
+          topic,
+          attention: this.getAttentionMetrics(),
+        });
+        this.clearTopicTimeTrackingIfComplete(topic);
 
         // 1sec cooldown to prevent multiple clicks
         return new Promise(resolve => setTimeout(resolve, 1000));
@@ -86,9 +131,18 @@ export class TopicComponent implements OnInit, OnChanges, AfterViewChecked, OnDe
 
   ngOnChanges(changes: SimpleChanges): void {
     this.continuing = false;
+    if (changes.task) {
+      if (this.task?.type === 'Topic' && this.task?.id) {
+        this.startTopicTimeTracking(this.task.id);
+      } else if (changes.task.previousValue?.type === 'Topic') {
+        this.stopTopicTimeTracking();
+      }
+    }
+
     if (this.topic && changes.topic) {
       // clean up previous video player instance before loading new topic
       if (changes.topic.previousValue) {
+        this.stopAttentionTracking();
         this.cleanupMedia();
 
         // force template to clear by setting null and triggering change detection
@@ -101,6 +155,8 @@ export class TopicComponent implements OnInit, OnChanges, AfterViewChecked, OnDe
       this.videoNeedsInit = false;
       this.plyrNeedsInit = false;
       this.plyrInitialized = false;
+      this.startAttentionTracking(this.topic);
+      this.startTopicTimeTracking(this.getCurrentTopicTimerId(this.topic));
 
       if (this.topic.videolink) {
         // this may set iframeHtml for youtube/vimeo embeds
@@ -155,12 +211,18 @@ export class TopicComponent implements OnInit, OnChanges, AfterViewChecked, OnDe
 
         requestAnimationFrame(() => {
           this._initVideoPlayer();
+          this.trackRenderedMediaElements();
         });
       }
     }
+
+    this.trackRenderedMediaElements();
+    this.updateContentExposureRatio();
   }
 
   ngOnDestroy(): void {
+    this.stopTopicTimeTracking();
+    this.stopAttentionTracking();
     this.destroy$.next();
     this.destroy$.complete();
     this.sharedService.stopPlayingVideos();
@@ -171,6 +233,7 @@ export class TopicComponent implements OnInit, OnChanges, AfterViewChecked, OnDe
   }
 
   ionViewWillLeave() {
+    this.stopTopicTimeTracking();
     this.sharedService.stopPlayingVideos();
   }
 
@@ -271,6 +334,7 @@ export class TopicComponent implements OnInit, OnChanges, AfterViewChecked, OnDe
 
       // store plyr instance reference for cleanup using WeakMap
       this.plyrInstances.set(embedVideo, plyrInstance);
+      this.trackMediaSource(plyrInstance as unknown as MediaAttentionSource & object);
 
       if (!this.utils.isMobile()) {
         embedVideo.classList.add('desktop-view');
@@ -289,6 +353,7 @@ export class TopicComponent implements OnInit, OnChanges, AfterViewChecked, OnDe
       try {
 
         const result = await this.filePreviewService.preview(file);
+        this.attentionFilePreviewCount += 1;
         this.isLoadingPreview = false;
         return result;
       } catch (err) {
@@ -304,6 +369,7 @@ export class TopicComponent implements OnInit, OnChanges, AfterViewChecked, OnDe
   actionBtnClick(file, index: number) {
     switch (index) {
       case 0:
+        this.attentionFileDownloadCount += 1;
         this.utils.downloadFile(file.url);
         break;
       case 1:
@@ -369,6 +435,7 @@ export class TopicComponent implements OnInit, OnChanges, AfterViewChecked, OnDe
    * @description preview browser-supported video file in modal with html5 video player
    */
   async previewVideoFile(file: { url: string; name: string }): Promise<void> {
+    this.attentionFilePreviewCount += 1;
     const modal = await this.modalController.create({
       component: FilePopupComponent,
       componentProps: {
@@ -428,4 +495,281 @@ export class TopicComponent implements OnInit, OnChanges, AfterViewChecked, OnDe
     const video = event.target as HTMLVideoElement;
     video.removeAttribute('disabled');
   }
+
+  private startAttentionTracking(topic: Topic): void {
+    this.stopAttentionTracking();
+    this.attentionTextWordCount = this.countWordsFromHtml(topic.rawContent || '');
+    this.attentionVisibleStartedAt = this.document.hidden ? 0 : Date.now();
+    this.attentionVisibleMs = 0;
+    this.attentionContentExposureRatio = 0;
+    this.attentionFilePreviewCount = 0;
+    this.attentionFileDownloadCount = 0;
+    this.attentionMediaProgressRatio = 0;
+    this.attentionMediaPlayedMs = 0;
+    this.attentionMediaPlayStartedAt = new WeakMap<object, number>();
+    this.trackedMediaSources = new WeakSet<object>();
+
+    this.addAttentionListener(this.document, 'visibilitychange', this.handleAttentionVisibilityChange);
+    this.addAttentionListener(this.document, 'scroll', this.handleAttentionExposureChange, true);
+    if (typeof window !== 'undefined') {
+      this.addAttentionListener(window, 'resize', this.handleAttentionExposureChange);
+    }
+
+    requestAnimationFrame(() => this.updateContentExposureRatio());
+  }
+
+  private stopAttentionTracking(): void {
+    this.stopAllMediaPlayTimers();
+    this.flushVisibleTime();
+    this.attentionListeners.forEach(listener => {
+      listener.target.removeEventListener(listener.eventName, listener.handler, listener.options);
+    });
+    this.attentionListeners = [];
+    this.attentionVisibleStartedAt = 0;
+  }
+
+  private getAttentionMetrics(): TopicAttentionMetrics {
+    this.flushVisibleTime();
+    this.stopAllMediaPlayTimers();
+    this.updateContentExposureRatio();
+    this.trackRenderedMediaElements();
+
+    return buildTopicAttentionMetrics({
+      activeMs: this.attentionVisibleMs,
+      visibleMs: this.attentionVisibleMs,
+      textWordCount: this.attentionTextWordCount,
+      contentExposureRatio: this.attentionContentExposureRatio,
+      mediaProgressRatio: this.attentionMediaProgressRatio,
+      mediaPlayedMs: this.attentionMediaPlayedMs,
+      filePreviewCount: this.attentionFilePreviewCount,
+      fileDownloadCount: this.attentionFileDownloadCount,
+      fileCount: this.topic?.files?.length || 0,
+      hasMedia: !!(this.topic?.videolink || this.topic?.audio),
+    });
+  }
+
+  private flushVisibleTime(): void {
+    if (this.attentionVisibleStartedAt > 0) {
+      this.attentionVisibleMs += Date.now() - this.attentionVisibleStartedAt;
+      this.attentionVisibleStartedAt = this.document.hidden ? 0 : Date.now();
+    }
+  }
+
+  private updateVisibilityTracking(): void {
+    if (this.document.hidden) {
+      this.flushVisibleTime();
+      this.stopAllMediaPlayTimers();
+      return;
+    }
+
+    if (this.attentionVisibleStartedAt === 0) {
+      this.attentionVisibleStartedAt = Date.now();
+    }
+  }
+
+  private updateContentExposureRatio(): void {
+    if (!this.topic?.id) {
+      return;
+    }
+
+    const contentElement = this.document.getElementById(`topic-description-${this.topic.id}`);
+    if (!contentElement) {
+      return;
+    }
+
+    const rect = contentElement.getBoundingClientRect();
+    const viewportHeight = window.innerHeight || this.document.documentElement.clientHeight || 0;
+    const elementHeight = Math.max(rect.height, 1);
+    const exposedHeight = Math.min(elementHeight, Math.max(0, viewportHeight - rect.top));
+    this.attentionContentExposureRatio = Math.max(
+      this.attentionContentExposureRatio,
+      Math.min(1, exposedHeight / elementHeight)
+    );
+  }
+
+  private trackRenderedMediaElements(): void {
+    this.document.querySelectorAll('audio, video').forEach((media: HTMLMediaElement) => {
+      this.trackMediaSource(media);
+    });
+  }
+
+  private trackMediaSource(source: MediaAttentionSource & object): void {
+    if (this.trackedMediaSources.has(source)) {
+      return;
+    }
+    this.trackedMediaSources.add(source);
+
+    const updateProgress = () => this.updateMediaProgress(source);
+    const startPlaying = () => this.startMediaPlayTimer(source);
+    const stopPlaying = () => this.stopMediaPlayTimer(source);
+
+    if (source instanceof HTMLMediaElement) {
+      this.addAttentionListener(source, 'timeupdate', updateProgress);
+      this.addAttentionListener(source, 'play', startPlaying);
+      this.addAttentionListener(source, 'pause', stopPlaying);
+      this.addAttentionListener(source, 'ended', stopPlaying);
+      return;
+    }
+
+    const plyrSource = source as Plyr;
+    plyrSource.on('timeupdate', updateProgress);
+    plyrSource.on('play', startPlaying);
+    plyrSource.on('pause', stopPlaying);
+    plyrSource.on('ended', stopPlaying);
+  }
+
+  private startMediaPlayTimer(source: object): void {
+    if (!this.document.hidden && !this.attentionMediaPlayStartedAt.get(source)) {
+      this.attentionMediaPlayStartedAt.set(source, Date.now());
+    }
+  }
+
+  private stopMediaPlayTimer(source: object): void {
+    const startedAt = this.attentionMediaPlayStartedAt.get(source);
+    if (startedAt) {
+      this.attentionMediaPlayedMs += Date.now() - startedAt;
+      this.attentionMediaPlayStartedAt.delete(source);
+    }
+    this.updateMediaProgress(source as MediaAttentionSource);
+  }
+
+  private stopAllMediaPlayTimers(): void {
+    this.document.querySelectorAll('audio, video').forEach((media: HTMLMediaElement) => {
+      this.stopMediaPlayTimer(media);
+    });
+
+    const plyrElements = this.document.querySelectorAll('.plyr__video-embed');
+    this.utils.each(plyrElements, (plyrEl: HTMLElement) => {
+      const plyrInstance = this.plyrInstances.get(plyrEl);
+      if (plyrInstance) {
+        this.stopMediaPlayTimer(plyrInstance);
+      }
+    });
+  }
+
+  private updateMediaProgress(source: MediaAttentionSource): void {
+    const duration = Number(source.duration);
+    const currentTime = Number(source.currentTime);
+    if (Number.isFinite(duration) && duration > 0 && Number.isFinite(currentTime)) {
+      this.attentionMediaProgressRatio = Math.max(
+        this.attentionMediaProgressRatio,
+        Math.min(1, Math.max(0, currentTime / duration))
+      );
+    }
+  }
+
+  private addAttentionListener(
+    target: EventTarget,
+    eventName: string,
+    handler: EventListener,
+    options?: boolean | AddEventListenerOptions
+  ): void {
+    target.addEventListener(eventName, handler, options);
+    this.attentionListeners.push({ target, eventName, handler, options });
+  }
+
+  private countWordsFromHtml(html: string): number {
+    if (!html) {
+      return 0;
+    }
+
+    const element = this.document.createElement('div');
+    element.innerHTML = html;
+    const text = element.textContent || '';
+    return text.match(/[\p{L}\p{N}]+/gu)?.length || 0;
+  }
+
+  private startTopicTimeTracking(topicId: number): void {
+    if (!topicId) {
+      return;
+    }
+
+    if (this.topicTimerStorageId === topicId && this.topicTimerStartedAt > 0) {
+      return;
+    }
+
+    this.stopTopicTimeTracking();
+    this.topicTimerStorageId = topicId;
+    this.topicTimeSpentMs = this.getPersistedTopicTimeSpent(topicId);
+    this.topicTimerStartedAt = Date.now();
+    this.updateTopicTimeSpentDisplay();
+    this.topicTimerIntervalId = setInterval(() => this.updateTopicTimeSpentDisplay(), 1000);
+  }
+
+  private stopTopicTimeTracking(): void {
+    if (this.topicTimerIntervalId) {
+      clearInterval(this.topicTimerIntervalId);
+      this.topicTimerIntervalId = null;
+    }
+
+    this.persistCurrentTopicTimeSpent();
+    this.topicTimerStartedAt = 0;
+    this.updateTopicTimeSpentDisplay();
+  }
+
+  private persistCurrentTopicTimeSpent(): void {
+    if (!this.topicTimerStorageId || this.topicTimerStartedAt === 0) {
+      return;
+    }
+
+    this.topicTimeSpentMs += Date.now() - this.topicTimerStartedAt;
+    this.topicTimerStartedAt = Date.now();
+    this.storage.set(this.getTopicTimeSpentStorageKey(this.topicTimerStorageId), Math.round(this.topicTimeSpentMs));
+  }
+
+  private clearTopicTimeTrackingIfComplete(topic: Topic): void {
+    if (this.task?.status === 'done') {
+      return;
+    }
+
+    const topicTimerId = this.getCurrentTopicTimerId(topic);
+    if (!topicTimerId) {
+      return;
+    }
+
+    this.stopTopicTimeTracking();
+    this.topicTimeSpentMs = 0;
+    this.topicTimerStorageId = null;
+    this.formattedTopicTimeSpent = this.formatTopicTimeSpent(0);
+    this.storage.remove(this.getTopicTimeSpentStorageKey(topicTimerId));
+  }
+
+  private getPersistedTopicTimeSpent(topicId: number): number {
+    const persistedTime = this.storage.get(this.getTopicTimeSpentStorageKey(topicId));
+    return Number.isFinite(persistedTime) && persistedTime > 0 ? persistedTime : 0;
+  }
+
+  private updateTopicTimeSpentDisplay(): void {
+    const currentSessionMs = this.topicTimerStartedAt > 0 ? Date.now() - this.topicTimerStartedAt : 0;
+    this.formattedTopicTimeSpent = this.formatTopicTimeSpent(this.topicTimeSpentMs + currentSessionMs);
+  }
+
+  private getTopicTimeSpentStorageKey(topicId: number): string {
+    return `${this.topicTimeSpentStoragePrefix}:${topicId}`;
+  }
+
+  private getCurrentTopicTimerId(topic?: Topic): number | null {
+    if (this.task?.type === 'Topic' && this.task?.id) {
+      return this.task.id;
+    }
+
+    return topic?.id || null;
+  }
+
+  private formatTopicTimeSpent(ms: number): string {
+    const totalSeconds = Math.max(0, Math.floor(ms / 1000));
+    const hours = Math.floor(totalSeconds / 3600);
+    const minutes = Math.floor((totalSeconds % 3600) / 60);
+    const seconds = totalSeconds % 60;
+
+    if (hours > 0) {
+      return `${hours}:${this.padTime(minutes)}:${this.padTime(seconds)}`;
+    }
+
+    return `${minutes}:${this.padTime(seconds)}`;
+  }
+
+  private padTime(value: number): string {
+    return value < 10 ? `0${value}` : `${value}`;
+  }
 }
diff --git a/projects/v3/src/app/models/topic-attention.model.spec.ts b/projects/v3/src/app/models/topic-attention.model.spec.ts
new file mode 100644
index 0000000000..128a13e832
--- /dev/null
+++ b/projects/v3/src/app/models/topic-attention.model.spec.ts
@@ -0,0 +1,117 @@
+import { buildTopicAttentionMetrics, calculateEstimatedReadMs } from './topic-attention.model';
+
+describe('Topic attention metrics', () => {
+  it('scores text-only attention from exposure and reading time', () => {
+    const metrics = buildTopicAttentionMetrics({
+      activeMs: 60000,
+      visibleMs: 60000,
+      textWordCount: 200,
+      contentExposureRatio: 1,
+      mediaProgressRatio: 0,
+      mediaPlayedMs: 0,
+      filePreviewCount: 0,
+      fileDownloadCount: 0,
+      fileCount: 0,
+      hasMedia: false,
+    });
+
+    expect(metrics.estimatedReadMs).toBe(60000);
+    expect(metrics.score).toBe(100);
+    expect(metrics.confidence).toBe('high');
+  });
+
+  it('keeps quick text completion low confidence unless the score is high', () => {
+    const metrics = buildTopicAttentionMetrics({
+      activeMs: 1000,
+      visibleMs: 1000,
+      textWordCount: 100,
+      contentExposureRatio: 1,
+      mediaProgressRatio: 0,
+      mediaPlayedMs: 0,
+      filePreviewCount: 0,
+      fileDownloadCount: 0,
+      fileCount: 0,
+      hasMedia: false,
+    });
+
+    expect(metrics.score).toBe(60);
+    expect(metrics.quickComplete).toBeTrue();
+    expect(metrics.confidence).toBe('low');
+  });
+
+  it('scores media-only topics from media progress', () => {
+    const metrics = buildTopicAttentionMetrics({
+      activeMs: 20000,
+      visibleMs: 20000,
+      textWordCount: 0,
+      contentExposureRatio: 0,
+      mediaProgressRatio: 0.8,
+      mediaPlayedMs: 16000,
+      filePreviewCount: 0,
+      fileDownloadCount: 0,
+      fileCount: 0,
+      hasMedia: true,
+    });
+
+    expect(metrics.score).toBe(80);
+    expect(metrics.confidence).toBe('high');
+  });
+
+  it('redistributes mixed-topic weights across applicable signals', () => {
+    const metrics = buildTopicAttentionMetrics({
+      activeMs: 30000,
+      visibleMs: 30000,
+      textWordCount: 200,
+      contentExposureRatio: 0.5,
+      mediaProgressRatio: 0.75,
+      mediaPlayedMs: 12000,
+      filePreviewCount: 1,
+      fileDownloadCount: 0,
+      fileCount: 1,
+      hasMedia: true,
+    });
+
+    expect(metrics.score).toBe(64);
+    expect(metrics.confidence).toBe('medium');
+  });
+
+  it('scores file-only topics from file interactions', () => {
+    const metrics = buildTopicAttentionMetrics({
+      activeMs: 10000,
+      visibleMs: 10000,
+      textWordCount: 0,
+      contentExposureRatio: 0,
+      mediaProgressRatio: 0,
+      mediaPlayedMs: 0,
+      filePreviewCount: 0,
+      fileDownloadCount: 1,
+      fileCount: 2,
+      hasMedia: false,
+    });
+
+    expect(metrics.score).toBe(50);
+    expect(metrics.confidence).toBe('medium');
+  });
+
+  it('returns low confidence when no signals apply', () => {
+    const metrics = buildTopicAttentionMetrics({
+      activeMs: 10000,
+      visibleMs: 10000,
+      textWordCount: 0,
+      contentExposureRatio: 0,
+      mediaProgressRatio: 0,
+      mediaPlayedMs: 0,
+      filePreviewCount: 0,
+      fileDownloadCount: 0,
+      fileCount: 0,
+      hasMedia: false,
+    });
+
+    expect(metrics.score).toBe(0);
+    expect(metrics.confidence).toBe('low');
+  });
+
+  it('estimates reading time at 200 words per minute', () => {
+    expect(calculateEstimatedReadMs(100)).toBe(30000);
+  });
+});
diff --git a/projects/v3/src/app/models/topic-attention.model.ts b/projects/v3/src/app/models/topic-attention.model.ts
new file mode 100644
index 0000000000..0dc3b2fd2e
--- /dev/null
+++ b/projects/v3/src/app/models/topic-attention.model.ts
@@ -0,0 +1,138 @@
+export type TopicAttentionConfidence = 'low' | 'medium' | 'high';
+
+export interface TopicAttentionMetrics {
+  version: 1;
+  score: number;
+  confidence: TopicAttentionConfidence;
+  activeMs: number;
+  visibleMs: number;
+  estimatedReadMs: number;
+  textWordCount: number;
+  contentExposureRatio: number;
+  mediaProgressRatio: number;
+  mediaPlayedMs: number;
+  filePreviewCount: number;
+  fileDownloadCount: number;
+  quickComplete: boolean;
+}
+
+export interface TopicAttentionSnapshotInput {
+  activeMs: number;
+  visibleMs: number;
+  textWordCount: number;
+  contentExposureRatio: number;
+  mediaProgressRatio: number;
+  mediaPlayedMs: number;
+  filePreviewCount: number;
+  fileDownloadCount: number;
+  fileCount: number;
+  hasMedia: boolean;
+}
+
+const READ_WORDS_PER_MINUTE = 200;
+const QUICK_COMPLETE_MS = 5000;
+const WEIGHTS = {
+  textExposure: 0.35,
+  readingTime: 0.25,
+  mediaProgress: 0.25,
+  fileInteraction: 0.15,
+};
+
+export function calculateEstimatedReadMs(textWordCount: number): number {
+  if (!Number.isFinite(textWordCount) || textWordCount <= 0) {
+    return 0;
+  }
+
+  return Math.ceil((textWordCount / READ_WORDS_PER_MINUTE) * 60000);
+}
+
+export function buildTopicAttentionMetrics(input: TopicAttentionSnapshotInput): TopicAttentionMetrics {
+  const activeMs = normaliseMs(input.activeMs);
+  const visibleMs = normaliseMs(input.visibleMs);
+  const textWordCount = Math.max(0, Math.round(input.textWordCount || 0));
+  const estimatedReadMs = calculateEstimatedReadMs(textWordCount);
+  const fileCount = Math.max(0, Math.round(input.fileCount || 0));
+  const filePreviewCount = Math.max(0, Math.round(input.filePreviewCount || 0));
+  const fileDownloadCount = Math.max(0, Math.round(input.fileDownloadCount || 0));
+  const contentExposureRatio = clampRatio(input.contentExposureRatio);
+  const mediaProgressRatio = clampRatio(input.mediaProgressRatio);
+  const mediaPlayedMs = normaliseMs(input.mediaPlayedMs);
+  const quickComplete = activeMs < QUICK_COMPLETE_MS;
+
+  const weightedSignals: Array<{ value: number; weight: number }> = [];
+  if (textWordCount > 0) {
+    weightedSignals.push({ value: contentExposureRatio, weight: WEIGHTS.textExposure });
+    weightedSignals.push({
+      value: estimatedReadMs > 0 ? clampRatio(activeMs / estimatedReadMs) : 0,
+      weight: WEIGHTS.readingTime,
+    });
+  }
+
+  if (input.hasMedia) {
+    weightedSignals.push({ value: mediaProgressRatio, weight: WEIGHTS.mediaProgress });
+  }
+
+  if (fileCount > 0) {
+    weightedSignals.push({
+      value: clampRatio((filePreviewCount + fileDownloadCount) / fileCount),
+      weight: WEIGHTS.fileInteraction,
+    });
+  }
+
+  const totalWeight = weightedSignals.reduce((sum, signal) => sum + signal.weight, 0);
+  const score = totalWeight > 0
+    ? Math.round(weightedSignals.reduce((sum, signal) => sum + signal.value * signal.weight, 0) / totalWeight * 100)
+    : 0;
+
+  return {
+    version: 1,
+    score,
+    confidence: calculateConfidence(score, quickComplete),
+    activeMs,
+    visibleMs,
+    estimatedReadMs,
+    textWordCount,
+    contentExposureRatio: roundRatio(contentExposureRatio),
+    mediaProgressRatio: roundRatio(mediaProgressRatio),
+    mediaPlayedMs,
+    filePreviewCount,
+    fileDownloadCount,
+    quickComplete,
+  };
+}
+
+function calculateConfidence(score: number, quickComplete: boolean): TopicAttentionConfidence {
+  if (quickComplete && score < 75) {
+    return 'low';
+  }
+
+  if (score >= 75) {
+    return 'high';
+  }
+
+  if (score >= 40) {
+    return 'medium';
+  }
+
+  return 'low';
+}
+
+function clampRatio(value: number): number {
+  if (!Number.isFinite(value)) {
+    return 0;
+  }
+
+  return Math.min(1, Math.max(0, value));
+}
+
+function roundRatio(value: number): number {
+  return Math.round(clampRatio(value) * 100) / 100;
+}
+
+function normaliseMs(value: number): number {
+  if (!Number.isFinite(value) || value <= 0) {
+    return 0;
+  }
+
+  return Math.round(value);
+}
diff --git a/projects/v3/src/app/pages/activity-desktop/activity-desktop.page.html b/projects/v3/src/app/pages/activity-desktop/activity-desktop.page.html
index f32ea8e406..748bed9762 100644
--- a/projects/v3/src/app/pages/activity-desktop/activity-desktop.page.html
+++ b/projects/v3/src/app/pages/activity-desktop/activity-desktop.page.html
@@ -99,7 +99,7 @@
     *ngIf="currentTask?.type === 'Topic'"
     [topic]="topic"
     [task]="currentTask"
-    (continue)="topicComplete(currentTask)"
+    (continue)="topicComplete(currentTask, $event)"
     [buttonDisabled$]="btnDisabled$"
     tabindex="0"
     id="task-content-topic"
diff --git a/projects/v3/src/app/pages/activity-desktop/activity-desktop.page.spec.ts b/projects/v3/src/app/pages/activity-desktop/activity-desktop.page.spec.ts
index 517f10ed3c..9bda580dff 100644
--- a/projects/v3/src/app/pages/activity-desktop/activity-desktop.page.spec.ts
+++ b/projects/v3/src/app/pages/activity-desktop/activity-desktop.page.spec.ts
@@ -194,8 +194,35 @@ describe('ActivityDesktopPage', () => {
       expect(activitySpy.getActivity).toHaveBeenCalled();
     }));
 
+    it('should pass attention metrics when updating progress', fakeAsync(() => {
+      const attention = {
+        version: 1,
+        score: 80,
+        confidence: 'high',
+        activeMs: 10000,
+        visibleMs: 10000,
+        estimatedReadMs: 9000,
+        textWordCount: 30,
+        contentExposureRatio: 1,
+        mediaProgressRatio: 0,
+        mediaPlayedMs: 0,
+        filePreviewCount: 0,
+        fileDownloadCount: 0,
+        quickComplete: false,
+      } as any;
+      const task = { ...NormalisedTaskFixture, status: 'in progress' };
+      component.topicComplete(task, { topic: { id: task.id } as any, attention });
+      activitySpy.getActivity = jasmine.createSpy().and.callFake((id, anything, currentTask, cb) => {
+        cb();
+      });
+
+      tick();
+
+      expect(topicSpy.updateTopicProgress).toHaveBeenCalledWith(task.id, 'completed', attention);
+    }));
+
     it('should go to next task when task is done', () => {
-      const task = NormalisedTaskFixture;
+      const task = { ...NormalisedTaskFixture };
       task.status = 'done';
       component.topicComplete(task);
       expect(topicSpy.updateTopicProgress).not.toHaveBeenCalled();
diff --git a/projects/v3/src/app/pages/activity-desktop/activity-desktop.page.ts b/projects/v3/src/app/pages/activity-desktop/activity-desktop.page.ts
index dacbae7d94..fc1589e943 100644
--- a/projects/v3/src/app/pages/activity-desktop/activity-desktop.page.ts
+++ b/projects/v3/src/app/pages/activity-desktop/activity-desktop.page.ts
@@ -11,7 +11,7 @@ import { Topic, TopicService } from '@v3/app/services/topic.service';
 import { UtilsService } from '@v3/app/services/utils.service';
 import { BehaviorSubject, Observable, firstValueFrom } from 'rxjs';
 import { delay, filter, tap, distinctUntilChanged, takeUntil, debounceTime } from 'rxjs/operators';
-import { TopicComponent } from '@v3/app/components/topic/topic.component';
+import { TopicComponent, TopicContinueEvent } from '@v3/app/components/topic/topic.component';
 import { ComponentCleanupService } from '@v3/app/services/component-cleanup.service';
 
 const SAVE_PROGRESS_TIMEOUT = 10000;
@@ -466,7 +466,7 @@ export class ActivityDesktopPage {
     }
   }
 
-  async topicComplete(task: Task) {
+  async topicComplete(task: Task, event?: TopicContinueEvent) {
     this.loading = true;
     this.btnDisabled$.next(true);
     if (task.status === 'done') {
@@ -478,7 +478,7 @@ export class ActivityDesktopPage {
     }
     // mark the topic as complete
     await firstValueFrom(this.topicService
-      .updateTopicProgress(task.id, 'completed'));
+      .updateTopicProgress(task.id, 'completed', event?.attention));
 
     // get the latest activity tasks and navigate to the next task
     return this.activityService.getActivity(
diff --git a/projects/v3/src/app/pages/topic-mobile/topic-mobile.page.html b/projects/v3/src/app/pages/topic-mobile/topic-mobile.page.html
index 2e5482881f..5da7016c83 100644
--- a/projects/v3/src/app/pages/topic-mobile/topic-mobile.page.html
+++ b/projects/v3/src/app/pages/topic-mobile/topic-mobile.page.html
@@ -17,7 +17,7 @@
   <app-topic
     [topic]="topic$ | async"
     [task]="currentTask"
-    (continue)="continue()"
+    (continue)="continue($event)"
     [buttonDisabled$]="btnDisabled$"
   ></app-topic>
 </ion-content>
diff --git a/projects/v3/src/app/pages/topic-mobile/topic-mobile.page.spec.ts b/projects/v3/src/app/pages/topic-mobile/topic-mobile.page.spec.ts
index b7153091a3..8a536fa4da 100644
--- a/projects/v3/src/app/pages/topic-mobile/topic-mobile.page.spec.ts
+++ b/projects/v3/src/app/pages/topic-mobile/topic-mobile.page.spec.ts
@@ -66,7 +66,7 @@ describe('TopicMobilePage', () => {
 
     topicServiceSpy.updateTopicProgress.and.returnValue(of(true) as any);
     activityServiceSpy.getActivity.and.callFake((_activityId: number, _refresh: boolean, _task: any, callback: Function) => {
-      callback();
+      callback({ tasks: [] });
       return Promise.resolve(true) as any;
     });
 
@@ -80,15 +80,31 @@ describe('TopicMobilePage', () => {
   it('should initialise topic and current task from streams', () => {
     routeParams$.next({ id: 12, activityId: 44 });
     topic$.next({ id: 12, title: 'Topic A' } as any);
-    currentTask$.next({ id: 999, type: 'Topic', status: 'in progress' } as any);
+    currentTask$.next({ id: 12, type: 'Topic', status: 'in progress' } as any);
 
     expect(topicServiceSpy.getTopic).toHaveBeenCalledWith(12);
     expect(component.activityId).toBe(44);
     expect(component.topic).toEqual(jasmine.objectContaining({ id: 12, title: 'Topic A' }));
-    expect(component.currentTask).toEqual(jasmine.objectContaining({ id: 999 }));
+    expect(component.currentTask).toEqual(jasmine.objectContaining({ id: 12 }));
     expect(utilsSpy.setPageTitle).toHaveBeenCalledWith('Topic A - Practera');
   });
 
+  it('should restore a completed topic task status after a direct page refresh', () => {
+    activityServiceSpy.getActivity.and.callFake((_activityId: number, _refresh: boolean, _task: any, callback: Function) => {
+      callback({
+        tasks: [
+          { id: 12, type: 'Topic', name: 'Topic A', status: 'done' },
+        ],
+      });
+      return Promise.resolve(true) as any;
+    });
+
+    routeParams$.next({ id: 12, activityId: 44 });
+
+    expect(activityServiceSpy.getActivity).toHaveBeenCalledWith(44, false, null, jasmine.any(Function));
+    expect(component.currentTask).toEqual(jasmine.objectContaining({ id: 12, status: 'done' }));
+  });
+
   it('should continue with done task by going directly to next task', async () => {
     component.topic = { id: 7, title: 'Done Topic' } as any;
     component.currentTask = { id: 7, type: 'Topic', status: 'done' } as any;
@@ -107,11 +123,36 @@ describe('TopicMobilePage', () => {
 
     await component.continue();
 
-    expect(topicServiceSpy.updateTopicProgress).toHaveBeenCalledWith(9, 'completed');
+    expect(topicServiceSpy.updateTopicProgress).toHaveBeenCalledWith(9, 'completed', undefined);
     expect(activityServiceSpy.getActivity).toHaveBeenCalled();
     expect(component.btnDisabled$.value).toBeFalse();
   });
 
+  it('should pass attention metrics when continuing incomplete task', async () => {
+    const attention = {
+      version: 1,
+      score: 80,
+      confidence: 'high',
+      activeMs: 10000,
+      visibleMs: 10000,
+      estimatedReadMs: 9000,
+      textWordCount: 30,
+      contentExposureRatio: 1,
+      mediaProgressRatio: 0,
+      mediaPlayedMs: 0,
+      filePreviewCount: 0,
+      fileDownloadCount: 0,
+      quickComplete: false,
+    } as any;
+    component.topic = { id: 10, title: 'Attention Topic' } as any;
+    component.activityId = 88;
+    component.currentTask = { id: 10, type: 'Topic', status: 'in progress' } as any;
+
+    await component.continue({ topic: component.topic, attention });
+
+    expect(topicServiceSpy.updateTopicProgress).toHaveBeenCalledWith(10, 'completed', attention);
+  });
+
   it('should build fallback current task when missing', async () => {
     component.topic = { id: 11, title: 'Fallback Topic' } as any;
     component.activityId = 55;
@@ -120,7 +161,7 @@ describe('TopicMobilePage', () => {
     await component.continue();
 
     expect(component.currentTask).toEqual(jasmine.objectContaining({ id: 11, type: 'Topic', name: 'Fallback Topic' }));
-    expect(topicServiceSpy.updateTopicProgress).toHaveBeenCalledWith(11, 'completed');
+    expect(topicServiceSpy.updateTopicProgress).toHaveBeenCalledWith(11, 'completed', undefined);
   });
 
   it('should go back to activity-mobile page', () => {
diff --git a/projects/v3/src/app/pages/topic-mobile/topic-mobile.page.ts b/projects/v3/src/app/pages/topic-mobile/topic-mobile.page.ts
index 23b2a0d3a8..1c0b87218a 100644
--- a/projects/v3/src/app/pages/topic-mobile/topic-mobile.page.ts
+++ b/projects/v3/src/app/pages/topic-mobile/topic-mobile.page.ts
@@ -4,6 +4,7 @@ import { ActivityService, Task } from '@v3/app/services/activity.service';
 import { TopicService, Topic } from '@v3/app/services/topic.service';
 import { UtilsService } from '@v3/services/utils.service';
 import { BehaviorSubject, Observable, firstValueFrom } from 'rxjs';
+import { TopicContinueEvent } from '@v3/app/components/topic/topic.component';
 
 @Component({
   standalone: false,
@@ -18,6 +19,8 @@ export class TopicMobilePage implements OnInit {
   topic: Topic;
   activityId: number;
   currentTask: Task;
+  private topicId: number;
+  private selectedTask: Task;
 
   constructor(
     private route: ActivatedRoute,
@@ -36,14 +39,46 @@ export class TopicMobilePage implements OnInit {
         this.utils.setPageTitle(`${res.title} - Practera`);
       }
     });
-    this.activityService.currentTask$.subscribe(res => this.currentTask = res);
+    this.activityService.currentTask$.subscribe(task => {
+      this.selectedTask = task;
+      if (this.isCurrentTopicTask(task)) {
+        this.currentTask = task;
+      }
+    });
     this.route.params.subscribe(params => {
-      this.topicService.getTopic(params.id);
       this.activityId = +params.activityId;
+      this.topicId = +params.id;
+      this.currentTask = this.isCurrentTopicTask(this.selectedTask) ? this.selectedTask : null;
+      this.topicService.getTopic(this.topicId);
+      this.restoreCurrentTaskStatus();
+    });
+  }
+
+  private isCurrentTopicTask(task: Task): boolean {
+    return task?.id === this.topicId && task?.type === 'Topic';
+  }
+
+  // Restore the current task status from the activity service
+  private restoreCurrentTaskStatus() {
+    const activityId = this.activityId;
+    const topicId = this.topicId;
+
+    this.activityService.getActivity(activityId, false, null, (activity) => {
+      // Ignore a late response from a topic route that has since changed.
+      if (this.activityId !== activityId || this.topicId !== topicId) {
+        return;
+      }
+
+      const task = activity?.tasks?.find(candidate =>
+        candidate.id === topicId && candidate.type === 'Topic'
+      );
+      if (task) {
+        this.currentTask = task;
+      }
     });
   }
 
-  async continue() {
+  async continue(event?: TopicContinueEvent) {
     this.btnDisabled$.next(true);
     if (!this.currentTask) {
       this.currentTask = {
@@ -62,7 +97,7 @@ export class TopicMobilePage implements OnInit {
     }
 
     // mark the topic as completer
-    await firstValueFrom(this.topicService.updateTopicProgress(this.topic.id, 'completed'));
+    await firstValueFrom(this.topicService.updateTopicProgress(this.topic.id, 'completed', event?.attention));
     // get the latest activity tasks and navigate to the next task
     return this.activityService.getActivity(this.activityId, true, this.currentTask, () => {
       this.btnDisabled$.next(false);
diff --git a/projects/v3/src/app/services/topic.service.spec.ts b/projects/v3/src/app/services/topic.service.spec.ts
index f035e0dc9d..431f72ddf7 100644
--- a/projects/v3/src/app/services/topic.service.spec.ts
+++ b/projects/v3/src/app/services/topic.service.spec.ts
@@ -84,6 +84,7 @@ describe('TopicService', () => {
       service.getTopic(1);
       service.topic$.subscribe(res => {
         expect(res.videolink).toEqual('video');
+        expect(res.rawContent).toEqual('content');
       });
     });
     describe('should throw error', () => {
@@ -113,5 +114,46 @@ describe('TopicService', () => {
     requestSpy.post.and.returnValue(of(''));
     service.updateTopicProgress(1, '').subscribe();
     expect(requestSpy.post.calls.count()).toBe(1);
+    expect(requestSpy.post).toHaveBeenCalledWith({
+      endPoint: 'api/v2/motivations/progress/create.json',
+      data: {
+        model: 'topic',
+        model_id: 1,
+        state: '',
+      },
+    });
+  });
+
+  it('when testing updateTopicProgress(), it should post attention metrics when provided', () => {
+    const attention = {
+      version: 1,
+      score: 80,
+      confidence: 'high',
+      activeMs: 10000,
+      visibleMs: 10000,
+      estimatedReadMs: 9000,
+      textWordCount: 30,
+      contentExposureRatio: 1,
+      mediaProgressRatio: 0,
+      mediaPlayedMs: 0,
+      filePreviewCount: 0,
+      fileDownloadCount: 0,
+      quickComplete: false,
+    } as any;
+    requestSpy.post.and.returnValue(of(''));
+
+    service.updateTopicProgress(1, 'completed', attention).subscribe();
+
+    expect(requestSpy.post).toHaveBeenCalledWith({
+      endPoint: 'api/v2/motivations/progress/create.json',
+      data: {
+        model: 'topic',
+        model_id: 1,
+        state: 'completed',
+        meta: {
+          attention,
+        },
+      },
+    });
   });
 });
diff --git a/projects/v3/src/app/services/topic.service.ts b/projects/v3/src/app/services/topic.service.ts
index 98a584c560..9cb5b7e6a0 100644
--- a/projects/v3/src/app/services/topic.service.ts
+++ b/projects/v3/src/app/services/topic.service.ts
@@ -7,11 +7,13 @@ import { DomSanitizer } from '@angular/platform-browser';
 import { environment } from '@v3/environments/environment';
 import { DemoService } from './demo.service';
 import { ApiResponse } from '@v3/app/models/api.model';
+import { TopicAttentionMetrics } from '@v3/app/models/topic-attention.model';
 
 export interface Topic {
   id: number;
   title: string;
   content: any;
+  rawContent?: string;
   videolink?: string;
   files: Array<any>;
   audio?: {
@@ -139,6 +141,7 @@ export class TopicService {
     // if API return empty string ("") to content, utils.has (lodash) take it as a value and this if statement works and set json to content
     // to privent that we checking topic content is not equels to empty string.
     if (this.utils.has(thisTopic.Story, 'content') && !this.utils.isEmpty(thisTopic.Story.content)) {
+      topic.rawContent = thisTopic.Story.content;
       thisTopic.Story.content = thisTopic.Story.content.replace(/text-align: center;/gi, 'text-align: center; text-align: -webkit-center;');
       thisTopic.Story.content = thisTopic.Story.content.replace(/(<iframe)/g, '<div class="video-embed"><iframe').replace(/(<\/iframe>)/g, '</iframe></div>');
       thisTopic.Story.content = thisTopic.Story.content.replace(/(<video)/g, '<video  class="video-embed"');
@@ -163,18 +166,31 @@ export class TopicService {
     return topic;
   }
 
-  updateTopicProgress(id, state): Observable<ApiResponse<any>> {
+  updateTopicProgress(id, state, attention?: TopicAttentionMetrics): Observable<ApiResponse<any>> {
     if (environment.demo) {
       // eslint-disable-next-line no-console
-      console.log('mark topic as ', state);
+      console.log('mark topic as ', state, attention);
       return this.demo.normalResponse('observable') as Observable<any>;
     }
-    const postData = {
+    const postData: {
+      model: string;
+      model_id: number;
+      state: string;
+      meta?: {
+        attention: TopicAttentionMetrics;
+      };
+    } = {
       model: 'topic',
       model_id: +id,
       state: state
     };
 
+    if (attention) {
+      postData.meta = {
+        attention,
+      };
+    }
+
     return this.request.post({
       endPoint: api.post.updateProgress,
       data: postData,