Show explicit tab switch prompt

coding-blocks · Mar 9, 2024 · 64624fb · 64624fb
1 parent dfb81c0
commit 64624fb
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 2 deletions.
diff --git a/app/pods/components/full-screen-contest-view/component.js b/app/pods/components/full-screen-contest-view/component.js
@@ -1,5 +1,7 @@
 import Component from '@ember/component';
+import { inject as service } from '@ember/service';
 
 export default class FullScreenContestView extends Component {
+  @service monitorer
   showSubmitDialog = false
 }
diff --git a/app/pods/components/full-screen-contest-view/template.hbs b/app/pods/components/full-screen-contest-view/template.hbs
@@ -99,4 +99,8 @@
     </div>
   </div>
 </ModalDialog>
-{{/if}}
+{{/if}}
+
+<WPulse @class="display-inline" @triggered={{monitorer.tabSwitchTrigger}}>
+  <div class="bottom-bar t-align-c bg-gradient-pink font-md">You Switched the tab. 10 minutes deducted.</div>
+</WPulse>
diff --git a/app/services/monitorer.js b/app/services/monitorer.js
@@ -7,6 +7,7 @@ export default Service.extend({
   api: service(),
   store: service(),
   isEventListenerAdded: false,
+  tabSwitchTrigger: false,
   monitoredRoutes: [
     'contests.contest.attempt.content.problem',
     'contests.contest.attempt.content.quiz',
@@ -44,7 +45,7 @@ export default Service.extend({
         fault_type: 'tab_switch'
       }
     })
-
+    this.setProperties('tabSwitchTrigger', true)
     await this.store.findRecord('contest-attempt', currentAttempt.id)
   },
 

diff --git a/app/styles/app.scss b/app/styles/app.scss
@@ -228,6 +228,13 @@ body{
   animation: pulse-animation-red 2s infinite;
 }
 
+.bottom-bar {
+  position: fixed;
+  bottom: 0;
+  padding: 2rem 4rem;
+  width: 100vw;
+}
+
 // Animations
 
 @keyframes dots {