Handle dropouts in interactive experiments

Author: marcelklehr

i18n/de.json

@@ -51,6 +51,9 @@
       "statusYouLeft": "Sie haben den Chat verlassen",
       "statusParticipantJoined": "{user} ist dem Chat beigetreten",
       "statusParticipantLeft": "{user} hat den Chat verlassen"
+    },
+    "general": {
+      "aborted": "Das Experiment kann leider nicht zu Ende geführt werden, weil eine*r der Teilnehmenden die Sitzung verlassen hat. Sie springen nun zum Ende des Experiments."
     }
   }
 }

i18n/en.json

@@ -52,6 +52,9 @@
       "statusYouLeft": "You left",
       "statusParticipantJoined": "{user} joined",
       "statusParticipantLeft": "{user} left"
+    },
+    "general": {
+      "aborted": "The experiment cannot be continued, because a collaborator has left the session. Please proceed to result submission."
     }
   }
 }

src/Socket.js

@@ -228,9 +228,10 @@ export default class Socket extends EventEmitter {
 
     this.roomChannel.on('presence_diff', (diff) => {
       Object.keys(diff.joins).forEach((id) => this.participants.push(id));
-      Object.keys(diff.leaves).forEach((id) =>
-        this.participants.splice(this.participants.indexOf(id), 1)
-      );
+      Object.keys(diff.leaves).forEach((id) => {
+        this.participants.splice(this.participants.indexOf(id), 1);
+        this.leaveHandler && this.leaveHandler();
+      });
     });
 
     setInterval(() => {

src/components/Experiment.vue

@@ -135,6 +135,20 @@ export default {
     this.$magpie.experiment = this;
     window.$magpie = this.$magpie;
 
+    if (this.$magpie.socketUrl) {
+      let previousParticipantCount = 0;
+      this.$watch('$magpie.socket.participants', (val) => {
+        if (val.length - previousParticipantCount < 0) {
+          window.alert(this.$t('interactive.general.aborted'));
+          const screens = this.$slots.default.filter(
+            (c) => !!c.componentOptions
+          );
+          this.$magpie.nextScreen(screens.length - 1);
+        }
+        previousParticipantCount = val.length;
+      });
+    }
+
     if (this.title) {
       document.title = this.title;
     }
@@ -185,6 +199,7 @@ export default {
       window.scrollTo(0, window.scrollY + expPos.top);
     }
   },
+
   /**
    * The contents of this slot will be visible during the entire experiment
    * @slot title