Timer across multiple pages

I am new to Ionic so I may not be using all the terms correctly. I’m making a quiz app that uses a countdown timer to alert the user that they should stop working. I was able to find a timer on the forums, but I am having some issues maintaining it across multiple pages. The questions are rendered on a page and the timer is a component in the title bar of the page template. There is a button at the bottom of the page that renders the next question. Because of how it is set up, the timer restarts every time a new question is rendered. I was wondering how I could set up the timer such that it would work across all the question pages.

I tried adding the timer function to a service, but it did not render the timer.

Here are the important code snippets:

timer.component.html

<div class="timer" *ngIf="countdownDisplay">
  <div>
    <p>{{countdownDisplay}}</p>
  </div>
</div>

timer.component.ts

import { Component, OnInit } from '@angular/core';
import { interval, Subject } from 'rxjs';
import { map, takeUntil, takeWhile } from 'rxjs/operators';
import { addSeconds, format } from 'date-fns';
import { FullPaperServiceService } from '../full-paper-service.service';

@Component({
  selector: 'app-timer',
  templateUrl: './timer.component.html',
  styleUrls: ['./timer.component.scss'],
})
export class TimerComponent implements OnInit {
  secs = 10;
  countdownDisplay?: string;
  starter$ = new Subject<void>();
  timerStarted: boolean = false;

  constructor(
    private FPService: FullPaperServiceService,
  ) { }

  ngOnInit() {

    if(this.FPService.timerStarted === true) {
      this.startCountdown();
    }
  }

  startCountdown(): void {
    this.starter$.next();
    let nsecs = this.secs;
    interval(1000)
      .pipe(
        takeUntil(this.starter$),
        takeWhile(countup => countup <= nsecs),
        map(countup => {
          let countdown = nsecs - countup;
          let d = new Date();
          d.setHours(0,0,0,0);
          d = addSeconds(d, countdown);
          let fmt = format(d, "HH:mm:ss");
          return fmt;
        })
      )
      .subscribe(cd => this.countdownDisplay = cd,
        (err) => console.log(err),
        () => this.FPService.endTest());
  }
}

full-paper-service.service.ts

import { Injectable } from '@angular/core';
import { interval, Subject } from 'rxjs';
import { map, takeUntil, takeWhile } from 'rxjs/operators';
import { addSeconds, format } from 'date-fns';

@Injectable({
  providedIn: 'root'
})
export class FullPaperServiceService {
  testStarted: boolean = false;
  timerStarted: boolean = false;
  starter$ = new Subject<void>();
  secs = 10;
  countdownDisplay: string;

  constructor() { }

  startTest() {
    this.testStarted = true;
  }

  startTimer() {
    this.timerStarted = true;
  }

  endTest() {
    this.testStarted = false;
  }

  startCountdown(): void {
    this.starter$.next();
    let nsecs = this.secs;
    interval(1000)
      .pipe(
        takeUntil(this.starter$),
        takeWhile(countup => countup <= nsecs),
        map(countup => {
          let countdown = nsecs - countup;
          let d = new Date();
          d.setHours(0,0,0,0);
          d = addSeconds(d, countdown);
          let fmt = format(d, "HH:mm:ss");
          return fmt;
        })
      )
      .subscribe(cd => this.countdownDisplay = cd,
        (err) => console.log(err),
        () => this.endTest());
  }
}

Function to start the test

startTest() {
    ...

        if(this.FPService.testStarted === true) {
          this.router.navigate(['./',this.questionnums[0]], {relativeTo: this.activatedRoute});
          this.FPService.startTimer();
        }
      });
    });
  }

There are quite a lot of pages, and since I can’t show them all, if there are any that will make answering the question easier, please let me know.

1 post - 1 participant

Read full topic