JI-5496 — Dialog Cards: Not restorgin flipped state

src/scripts/h5p-dialogcards-card-manager.js

@@ -10,9 +10,9 @@ class CardManager {
    * @param {object} callbacks Callbacks to parent.
    * @param {number} idCounter
    */
-  constructor(params, contentId, callbacks, idCounter) {
+  constructor(params, contentId, callbacks, idCounter, turned) {
     this.params = params;
-    this.cardPool = new CardPool(params, contentId, callbacks, idCounter);
+    this.cardPool = new CardPool(params, contentId, callbacks, idCounter, turned);
 
     this.reset(params.cardPiles);
 

src/scripts/h5p-dialogcards-card-pool.js

@@ -9,12 +9,13 @@ class CardPool {
    * @param {object} callbacks Callbacks to main component.
    * @param {number} idCounter
    */
-  constructor(params, contentId, callbacks, idCounter) {
+  constructor(params, contentId, callbacks, idCounter, turned) {
     this.params = params;
     this.contentId = contentId;
     this.callbacks = callbacks;
     this.idCounter = idCounter;
     this.cards = [];
+    this.turned = turned;
 
     this.params.dialogs.forEach((dialog, index) => {
       dialog.id = index;
@@ -68,8 +69,10 @@ class CardPool {
         id,
         this.contentId,
         this.callbacks,
-        this.idCounter);
+        this.idCounter,
+        this.turned);
     }
+
   }
 
 }

src/scripts/h5p-dialogcards-card.js

@@ -11,13 +11,15 @@ class Card {
    * @param {function} [callbacks.onCardSize] Call when card needs resize.
    * @param {function} [callbacks.onCardTurned] Call when card was turned.
    * @param {number} idCounter
+   * @param {boolean} turned
    */
-  constructor(card, params, id, contentId, callbacks = {}, idCounter) {
+  constructor(card, params, id, contentId, callbacks = {}, idCounter, turned) {
     this.card = card;
     this.params = params || {};
     this.id = id;
     this.contentId = contentId;
     this.callbacks = callbacks;
+    this.turned = turned;
 
     this.$cardWrapper = $('<div>', {
       'class': 'h5p-dialogcards-cardwrap',
@@ -303,18 +305,15 @@ class Card {
 
     // Removes tip, since it destroys the animation:
     $c.find('.joubel-tip-container').remove();
-
-    // Check if card has been turned before
-    const turned = $c.hasClass('h5p-dialogcards-turned');
-
+    this.turned = !this.turned;
     // Update HTML class for card
-    $c.toggleClass('h5p-dialogcards-turned', !turned);
+    $c.toggleClass('h5p-dialogcards-turned', !this.turned);
 
     setTimeout(() => {
       $ch.removeClass('h5p-dialogcards-collapse');
-      this.changeText(turned ? this.getText() : this.getAnswer());
+      this.changeText(this.turned ? this.getText() : this.getAnswer());
 
-      if (turned) {
+      if (this.turned) {
         $ch.find('.h5p-audio-inner').removeClass('hide');
       }
       else {
@@ -336,10 +335,10 @@ class Card {
       // Add backside tip
       // Had to wait a little, if not Chrome will displace tip icon
       setTimeout(() => {
-        this.addTipToCard($c, turned ? 'front' : 'back');
+        this.addTipToCard($c, this.turned ? 'front' : 'back');
 
         if (typeof this.callbacks.onCardTurned === 'function') {
-          this.callbacks.onCardTurned(turned);
+          this.callbacks.onCardTurned(this.turned);
         }
       }, 200);
 

src/scripts/h5p-dialogcards.js

@@ -85,6 +85,7 @@ class Dialogcards extends H5P.EventDispatcher {
     this.currentCardId = 0;
     this.round = 0; // 0 indicates that DOM needs to be set up
     this.results = this.previousState.results || [];
+    this.turned = this.previousState.turned || true;
 
     /**
      * Attach h5p inside the given container.
@@ -119,7 +120,7 @@ class Dialogcards extends H5P.EventDispatcher {
       this.cardManager = new CardManager(managerParams, this.id, {
         onCardTurned: this.handleCardTurned,
         onNextCard: this.nextCard
-      }, this.idCounter);
+      }, this.idCounter, this.turned);
 
       this.createDOM(this.round === 0);
 
@@ -173,7 +174,7 @@ class Dialogcards extends H5P.EventDispatcher {
 
       if (firstCall === true) {
         this.$cardSideAnnouncer = $('<div>', {
-          html: this.params.cardFrontLabel,
+          html: this.turned ? this.params.cardFrontLabel : this.params.cardBackLabel,
           'class': 'h5p-dialogcards-card-side-announcer',
           'aria-live': 'polite'
         });
@@ -348,6 +349,7 @@ class Dialogcards extends H5P.EventDispatcher {
      * @param {boolean} turned - True, if card is turned.
      */
     this.handleCardTurned = (turned) => {
+      this.turned = turned;
       // a11y notification
       this.$cardSideAnnouncer.html(turned ? this.params.cardFrontLabel : this.params.cardBackLabel);
 
@@ -898,7 +900,8 @@ class Dialogcards extends H5P.EventDispatcher {
           cardIds: this.cardIds,
           round: this.round,
           currentCardId: this.getCurrentSelectionIndex(),
-          results: this.results
+          results: this.results,
+          turned: this.turned
         }
         : undefined;
     };
@@ -925,7 +928,6 @@ class Dialogcards extends H5P.EventDispatcher {
 }
 
 Dialogcards.idCounter = 0;
-
 // Constants
 Dialogcards.SCALEINTERVAL = 0.2;
 Dialogcards.MAXSCALE = 16;