hwgilbert16 / scholarsome

Web-based interactive flashcard learning software
http://scholarsome.com
GNU Affero General Public License v3.0
531 stars 30 forks source link

First card of second run of progressive mode wrongly flips #157

Open hwgilbert16 opened 6 months ago

hwgilbert16 commented 6 months ago

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 commented 4 months ago

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;
    }
johnmcguin commented 2 months ago

New here and looking for contributions. I cannot seem to reproduce this though. Is this still an issue?

miloshields commented 1 month ago

I'm still able to reproduce on mine! @johnmcguin