First card of second run of progressive mode wrongly flips

[hwgilbert16]

After the first run through of a progressive mode, if you start it a second time, the first card is flipped to the wrong side. This mistakenly reveals the answer.

[alan-cho]

The bug's behavior occurs only when the last card of the set is flipped in progressive mode. Regardless of how you answer (by term or definition), the state, this.side, is not switched before the second progressive run.

The issue lies within the conditional logic in changeCard of apps/front/src/app/study-set/study-set-flashcards/study-set-flashcards.component.ts.

// runs after a progressive mode round has completed
  if (this.index === this.cards.length - 1 && this.flashcardsMode === "progressive") {
    ...
  }

This conditional logic passes immediately after the first progressive run finishes. More precisely once you click either "don't know" or "know" on the last card.

Thus, it never makes it to this conditional right below:

  if (this.answer === "definition") {
    this.side = "term";
  } else {
    this.side = "definition";
  }

So the state (this.side) doesn't change appropriately.

A simple fix is just putting the conditional inside the one that runs after the first round of progressive mode finishes:

// runs after a progressive mode round has completed
    if (this.index === this.cards.length - 1 && this.flashcardsMode === "progressive") {
      // remove any cards that are known
      this.cards = this.cards.filter((c) => !this.knownCardIDs.includes(c.id));

      this.roundCompleted = true;

      // if the entire mode is not completed
      if (this.cards.length > 0) {
        this.index = 0;
        this.updateIndex();

        if (this.shufflingEnabled) this.cards = this.cards.sort(() => 0.5 - Math.random());
        
        // Ensures `this.side` is back to its appropriate state.
        if (this.answer === "definition") {
          this.side = "term";
        } else {
          this.side = "definition";
        }
        this.sideText = this.cards[0][this.side as keyof Card] as string;
      }

      this.flipped = false;
      this.flipInteraction = false;
      this.currentCard = this.cards[0];

      return;
    }