From 90958f6c9ef99f4056f77ff9f37505984503861b Mon Sep 17 00:00:00 2001
From: jd17md <chayanika.khatua@ing.com>
Date: Tue, 18 Feb 2020 16:02:21 +0100
Subject: [PATCH 01/13] feat: add interrupter init

---
 app/assets/questions.js    | 25 ++++++++++
 app/index.html             |  4 +-
 app/scripts/app.coffee     |  1 +
 app/scripts/interrupter.js | 93 ++++++++++++++++++++++++++++++++++++++
 app/styles/index.scss      |  9 ++++
 package.json               |  3 ++
 6 files changed, 133 insertions(+), 2 deletions(-)
 create mode 100644 app/assets/questions.js
 create mode 100644 app/scripts/interrupter.js
diff --git a/app/assets/questions.js b/app/assets/questions.js
new file mode 100644
index 0000000..0c339e8
--- /dev/null
+++ b/app/assets/questions.js
@@ -0,0 +1,25 @@
+module.exports = {
+  questions: [
+  {
+    id: 1,
+    "question": "What will happen if you try to install and use npm package called 'fs'?",
+    "options": [
+      "Nothing",
+      "Throws an error",
+      "External fs module will be installed",
+      "huh?"
+    ],
+    "answer": 0
+  },
+  { 
+    id: 2,
+    "question": "What is the output of the following statements \n 1 < 2 < 3; \n 3 > 2 > 1;",
+    "options": [
+      "true; false;",
+      "false; false;",
+      "true; true;",
+      "TypeError"
+    ],
+    "answer": 0
+  }
+]};
\ No newline at end of file
diff --git a/app/index.html b/app/index.html
index 57cb3b0..1d7fd15 100644
--- a/app/index.html
+++ b/app/index.html
@@ -4,7 +4,7 @@
   <meta charset="UTF-8">
   <title>Code in the Dark</title>
   <script src="bundle.js" inline></script>
-  <script src="questions.js"></script>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
 </head>
 <body>
   <div class="background"></div>
@@ -42,7 +42,7 @@ <h1>POWER MODE!</h1>
     <button class="instructions-button">Instructions</button>
     <button class="storybook-button">Storybook </button>
   </div>
-
+  <div id="questionModal" class="modal"></div>
   <iframe class="result" src="assets/result.html" frameborder="0"><iframe>
 </body>
 </html>
diff --git a/app/scripts/app.coffee b/app/scripts/app.coffee
index 2ac9928..7a97789 100644
--- a/app/scripts/app.coffee
+++ b/app/scripts/app.coffee
@@ -2,6 +2,7 @@ require "../styles/index"
 
 _ = require "underscore"
 $ = require "jquery"
+require "./interrupter"
 
 ace = require "brace"
 require "brace/mode/html"
diff --git a/app/scripts/interrupter.js b/app/scripts/interrupter.js
new file mode 100644
index 0000000..ef8ec31
--- /dev/null
+++ b/app/scripts/interrupter.js
@@ -0,0 +1,93 @@
+$ = require('jquery');
+require('jquery-modal');
+
+const { questions } = require('../assets/questions');
+
+$.modal.defaults = {
+  showClose: false,        // Shows a (X) icon/link in the top-right corner
+};
+
+class Interrupter {
+  // has the app set as a property
+  // Uses the time property of the app
+  // Shows time lost
+  // will do on setInterval
+  // keeps track of answered questions, pops correctly questions out, selects from remaining at random
+  // Shows correct or wrong
+  // number of questions in a row, shown
+  constructor(interval, requiredAnswers) {
+    console.log('Interrupter');
+    this.interval = interval; // no default value
+    // this.questions = JSON.parse(questions);
+    this.questions = [...questions];
+    this.requiredAnswers = requiredAnswers;
+    this.nAnsweredCorrectly = 0;
+    console.log(questions);
+    this._setQuestionTimeout();
+  }
+
+ _setQuestionTimeout() {
+    setTimeout(this._startQuestions.bind(this), this.interval);
+  }
+
+  _startQuestions() {
+    // show dialog, needs a submit button
+    // on submit check answer
+    console.log('start');
+    this._questionShown = false;
+    $('#questionModal').modal();
+    if (this.nAnsweredCorrectly === this.requiredAnswers) {
+      $.modal.close();
+    }
+    this._showQuestion().then(answeredCorrectly => {
+      this.nAnsweredCorrectly += answeredCorrectly ? 1 : 0;
+    });
+  }
+
+  _showQuestion() {
+    return new Promise((resolve, reject) => {
+      const question = this._getNextQuestion();
+      const optionContainerDiv = $('<div class="option"></div>');
+      question.options.forEach((option, i) => {
+        optionContainerDiv.append(
+        `
+        <input type="radio" id="${question.id}_${i}" value="${i}" name="${question.id}">
+        <label for="${question.id}_${i}">${option}</label><br>
+      `)});
+      const [ submitButton ] = $('<button>Submit</button>');
+      console.log(submitButton);
+      submitButton.onclick = () => this._checkAnswer(question, resolve);
+      // () => this._checkAnswer(question, resolve);
+      $('#questionModal').empty();
+      $('#questionModal').append(`<div class="question">${question.question}</div>`);
+      $('#questionModal').append(optionContainerDiv);
+      $('#questionModal').append(submitButton);
+    });
+  }
+
+  _checkAnswer(question, resolve) {
+    const options = $('#questionModal input');
+    let selected = 0;
+    for (let i = 0; i < options.length; i++) {
+      selected = options[i].checked ? i : selected;
+    }
+    if (selected === answer) {
+      resolve(true)
+    } else {
+      resolve(false);
+    }
+  }
+
+  _getNextQuestion() {
+    // pick an unanswered one at random
+    return this.questions.shift();
+  }
+
+}
+
+// Start this 5 minutes after name has been filled in. 4-6 minutes randomly
+new Interrupter(2000, 2);
+
+// Time bound to end of previous round
+
+// Every wrong answer adds delay on next button
\ No newline at end of file
diff --git a/app/styles/index.scss b/app/styles/index.scss
index 41c8ede..75e8d13 100644
--- a/app/styles/index.scss
+++ b/app/styles/index.scss
@@ -364,6 +364,15 @@ body.power-mode {
   }
 }
 
+#questionModal {
+  .question {
+    margin-bottom: 15px;
+  }
+  .option {
+    margin-bottom: 7px;
+  }
+}
+
 @keyframes pulse {
     0% {
         animation-timing-function: ease-out;
diff --git a/package.json b/package.json
index 65701cb..cbd0fc1 100644
--- a/package.json
+++ b/package.json
@@ -28,5 +28,8 @@
     "url-loader": "^0.5.5",
     "webpack": "^1.12.9",
     "webpack-dev-server": "^1.7.0"
+  },
+  "dependencies": {
+    "jquery-modal": "^0.9.2"
   }
 }

From f7204a2c7e25075c6d0e583988374a51e9fd9067 Mon Sep 17 00:00:00 2001
From: jd17md <chayanika.khatua@ing.com>
Date: Sat, 22 Feb 2020 17:31:55 +0100
Subject: [PATCH 02/13] feat: next button and results

---
 app/index.html             |  7 ++++-
 app/scripts/interrupter.js | 64 +++++++++++++++++++++++++++-----------
 app/styles/index.scss      |  3 ++
 3 files changed, 55 insertions(+), 19 deletions(-)

diff --git a/app/index.html b/app/index.html
index 1d7fd15..d91681e 100644
--- a/app/index.html
+++ b/app/index.html
@@ -42,7 +42,12 @@ <h1>POWER MODE!</h1>
     <button class="instructions-button">Instructions</button>
     <button class="storybook-button">Storybook </button>
   </div>
-  <div id="questionModal" class="modal"></div>
+  <div id="questionModal" class="modal">
+    <div id="questionContainer"></div>
+    <button id="submitButton">Submit</button>
+    <button id="nextButton" class="right">Next</button>
+
+  </div>
   <iframe class="result" src="assets/result.html" frameborder="0"><iframe>
 </body>
 </html>
diff --git a/app/scripts/interrupter.js b/app/scripts/interrupter.js
index ef8ec31..59de8d4 100644
--- a/app/scripts/interrupter.js
+++ b/app/scripts/interrupter.js
@@ -27,26 +27,54 @@ class Interrupter {
   }
 
  _setQuestionTimeout() {
-    setTimeout(this._startQuestions.bind(this), this.interval);
+    setTimeout(() => {
+      this._questionsShown = false;
+      this._startQuestions();
+    }, this.interval);
   }
 
   _startQuestions() {
     // show dialog, needs a submit button
     // on submit check answer
-    console.log('start');
-    this._questionShown = false;
-    $('#questionModal').modal();
-    if (this.nAnsweredCorrectly === this.requiredAnswers) {
+    if (this.nAnsweredCorrectly >= this.requiredAnswers) {
       $.modal.close();
+    } else {
+      if (!this._questionsShown) {
+        $('#questionModal').modal();
+        this._questionsShown = true;
+      }
+      this._showQuestion().then(answeredCorrectly => {
+        this.nAnsweredCorrectly += answeredCorrectly ? 1 : 0;
+        this._processAnswer(answeredCorrectly);
+      });
     }
-    this._showQuestion().then(answeredCorrectly => {
-      this.nAnsweredCorrectly += answeredCorrectly ? 1 : 0;
-    });
+  }
+
+  _processAnswer(correct) {
+    $('#submitButton').hide();
+    $('#nextButton').show();
+    // append next button
+    const buttonText = this.nAnsweredCorrectly >= this.requiredAnswers ? 'Exit' : 'Next';
+    // const [ nextButton ] = $(`<button class="right">Next</button>`);
+    const nextButton = $('#nextButton');
+    nextButton.html(buttonText);
+    nextButton.click(() => this._startQuestions());
+    
+
+    // append correct or wrong
+    if (correct) {
+      $('#questionContainer').append('<div>That\'s right 🎉</div>');
+    } else {
+      $('#questionContainer').append('<div>Oh no! That\'s not right 😿</div>');
+    }
+    // $('#questionModal').append(nextButton);
+    // this._startQuestions();
   }
 
   _showQuestion() {
     return new Promise((resolve, reject) => {
       const question = this._getNextQuestion();
+      $('#nextButton').hide();
       const optionContainerDiv = $('<div class="option"></div>');
       question.options.forEach((option, i) => {
         optionContainerDiv.append(
@@ -54,25 +82,25 @@ class Interrupter {
         <input type="radio" id="${question.id}_${i}" value="${i}" name="${question.id}">
         <label for="${question.id}_${i}">${option}</label><br>
       `)});
-      const [ submitButton ] = $('<button>Submit</button>');
-      console.log(submitButton);
-      submitButton.onclick = () => this._checkAnswer(question, resolve);
-      // () => this._checkAnswer(question, resolve);
-      $('#questionModal').empty();
-      $('#questionModal').append(`<div class="question">${question.question}</div>`);
-      $('#questionModal').append(optionContainerDiv);
-      $('#questionModal').append(submitButton);
+      $('#submitButton').click(() => {
+        this._checkAnswer(question, resolve);
+      });
+      $('#submitButton').show();
+      $('#questionContainer').empty();
+      $('#questionContainer').append(`<div class="question">${question.question}</div>`);
+      $('#questionContainer').append(optionContainerDiv);
     });
   }
 
   _checkAnswer(question, resolve) {
-    const options = $('#questionModal input');
+    const options = $('#questionContainer input');
+    const { answer } = question;
     let selected = 0;
     for (let i = 0; i < options.length; i++) {
       selected = options[i].checked ? i : selected;
     }
     if (selected === answer) {
-      resolve(true)
+      resolve(true);
     } else {
       resolve(false);
     }
diff --git a/app/styles/index.scss b/app/styles/index.scss
index 75e8d13..e349905 100644
--- a/app/styles/index.scss
+++ b/app/styles/index.scss
@@ -371,6 +371,9 @@ body.power-mode {
   .option {
     margin-bottom: 7px;
   }
+  .right {
+    float: right;
+  }
 }
 
 @keyframes pulse {

From 792be18cd375553ab462a47298402af2e953b02b Mon Sep 17 00:00:00 2001
From: jd17md <chayanika.khatua@ing.com>
Date: Sun, 23 Feb 2020 12:34:46 +0100
Subject: [PATCH 03/13] feat: add time and other properties to localStorage

---
 app/scripts/app.coffee     |  9 +++-
 app/scripts/interrupter.js | 87 ++++++++++++++++++++++++++++++++------
 2 files changed, 82 insertions(+), 14 deletions(-)

diff --git a/app/scripts/app.coffee b/app/scripts/app.coffee
index 7a97789..a5bf9d9 100644
--- a/app/scripts/app.coffee
+++ b/app/scripts/app.coffee
@@ -2,7 +2,7 @@ require "../styles/index"
 
 _ = require "underscore"
 $ = require "jquery"
-require "./interrupter"
+Interrupter = require "./interrupter"
 
 ace = require "brace"
 require "brace/mode/html"
@@ -43,6 +43,9 @@ class App
   "Whoah!", ":O", "Nice!", "Splendid!", "Wild!", "Grand!", "Impressive!",
   "Stupendous!", "Extreme!", "Awesome!"]
 
+  REQUIRED_RIGHT_ANSWERS: 2
+  MAX_QUESTIONS: 10
+
   currentStreak: 0
   powerMode: false
   particles: []
@@ -82,6 +85,7 @@ class App
     @$nameTag.on "click", => @getName true
 
     @getName()
+    @initInterrupter()
 
     window.requestAnimationFrame? @onFrame
 
@@ -105,6 +109,9 @@ class App
     canvas.height = window.innerHeight
     canvas
 
+  initInterrupter: ->
+    new Interrupter(@REQUIRED_RIGHT_ANSWERS, @MAX_QUESTIONS)
+
   getName: (forceUpdate) ->
     name = (not forceUpdate and localStorage["name"]) || prompt "What's your name?"
     localStorage["name"] = name
diff --git a/app/scripts/interrupter.js b/app/scripts/interrupter.js
index 59de8d4..a5703cc 100644
--- a/app/scripts/interrupter.js
+++ b/app/scripts/interrupter.js
@@ -10,26 +10,84 @@ $.modal.defaults = {
 class Interrupter {
   // has the app set as a property
   // Uses the time property of the app
-  // Shows time lost
-  // will do on setInterval
   // keeps track of answered questions, pops correctly questions out, selects from remaining at random
   // Shows correct or wrong
   // number of questions in a row, shown
-  constructor(interval, requiredAnswers) {
+  constructor(requiredAnswers, maxQuestions) {
     console.log('Interrupter');
-    this.interval = interval; // no default value
+    this._restoreState();
+    this._computeQuestions();
+    this._calculateTimeout();
     // this.questions = JSON.parse(questions);
-    this.questions = [...questions];
+    
     this.requiredAnswers = requiredAnswers;
     this.nAnsweredCorrectly = 0;
-    console.log(questions);
+    // console.log(questions);
     this._setQuestionTimeout();
   }
 
+  _restoreState() {
+    // TODO: push question id to this when answered correctly
+    const questionsAnswered = localStorage.getItem('questionsAnswered');
+    this._questionsAnswered = questionsAnswered && JSON.parse(questionsAnswered);
+    
+    // TODO: clear this when question dialog is shown and set questions active to true
+    const nextQuestionsStart = localStorage.getItem('nextQuestionsStart');
+    this._nextQuestionsStart = nextQuestionsStart && new Date();
+
+    const questionsActive = localStorage.getItem('questionsActive');
+    this._questionsActive = JSON.parse(questionsActive);
+  }
+
+  _setState({ newQuestionAnswered, nextQuestionsStart, questionsActive }, clearValues) {
+    if (newQuestionAnswered) {
+      const questionsAnswered = this._questionsAnswered || [];
+      questionsAnswered.push(newQuestionAnswered);
+      localStorage.setItem('questionsAnswered', JSON.stringify(questionsAnswered));
+      this._computeQuestions();
+    }
+    if (nextQuestionsStart) {
+      localStorage.setItem('nextQuestionsStart', nextQuestionsStart.toString());
+    } else if (clearValues) {
+      localStorage.removeItem('nextQuestionsStart');
+    }
+    if (questionsActive) {
+      localStorage.setItem('questionsActive', questionsActive);
+    } else if (clearValues) {
+      localStorage.removeItem('questionsActive');
+    }
+  }
+
+  _computeQuestions() {
+    this.questions = questions.filter(question => !this._questionsAnswered.find(answeredId => answeredId === question.id));
+    console.log(this.questions.length);
+  }
+
+  _calculateTimeout() {
+    if (this._questionsActive) {
+      this.interval = 0;
+    } else if (this._nextQuestionsStart) {
+      this.interval = this._nextQuestionsStart - new Date();
+    } else {
+      // Not set yet
+      const currentDate = new Date();
+      // compute diff 0-2 mins, add to currentDate + 4 mins
+      const diff = ( Math.ceil(Math.random()) + 4 ) * 120000; // 4 to 6 mins
+      const questionStart = currentDate + diff;
+      console.log(questionStart);
+      this._nextQuestionsStart = questionStart;
+      this._setState({ nextQuestionsStart : questionStart });
+      this.interval = diff;
+    }
+    
+  }
+
  _setQuestionTimeout() {
+   console.log(this.interval);
     setTimeout(() => {
       this._questionsShown = false;
       this._startQuestions();
+      this._setState({ questionsActive: true }, true);
     }, this.interval);
   }
 
@@ -43,14 +101,15 @@ class Interrupter {
         $('#questionModal').modal();
         this._questionsShown = true;
       }
-      this._showQuestion().then(answeredCorrectly => {
-        this.nAnsweredCorrectly += answeredCorrectly ? 1 : 0;
-        this._processAnswer(answeredCorrectly);
+      this._showQuestion().then(({ correct, id }) => {
+        this.nAnsweredCorrectly += correct ? 1 : 0;
+        this._setState({ newQuestionAnswered: id });
+        this._processAnswer(correct);
       });
     }
   }
 
-  _processAnswer(correct) {
+  _processAnswer() {
     $('#submitButton').hide();
     $('#nextButton').show();
     // append next button
@@ -100,9 +159,9 @@ class Interrupter {
       selected = options[i].checked ? i : selected;
     }
     if (selected === answer) {
-      resolve(true);
+      resolve({ id: question.id, correct: true });
     } else {
-      resolve(false);
+      resolve({ id: question.id, correct: false });
     }
   }
 
@@ -113,8 +172,10 @@ class Interrupter {
 
 }
 
+module.exports = Interrupter;
+
 // Start this 5 minutes after name has been filled in. 4-6 minutes randomly
-new Interrupter(2000, 2);
+// new Interrupter(2000, 2);
 
 // Time bound to end of previous round
 

From d425e25a7cb866c58615c18e0c329de9976da8a9 Mon Sep 17 00:00:00 2001
From: jd17md <chayanika.khatua@ing.com>
Date: Sun, 23 Feb 2020 12:55:50 +0100
Subject: [PATCH 04/13] feat: interrupter localStorage fixes

---
 app/scripts/interrupter.js | 32 +++++++++++++++++++++++++-------
 1 file changed, 25 insertions(+), 7 deletions(-)

diff --git a/app/scripts/interrupter.js b/app/scripts/interrupter.js
index a5703cc..2c2c507 100644
--- a/app/scripts/interrupter.js
+++ b/app/scripts/interrupter.js
@@ -21,7 +21,7 @@ class Interrupter {
     // this.questions = JSON.parse(questions);
     
     this.requiredAnswers = requiredAnswers;
-    this.nAnsweredCorrectly = 0;
+    // this.nAnsweredCorrectly = 0;
     // console.log(questions);
     this._setQuestionTimeout();
   }
@@ -37,21 +37,32 @@ class Interrupter {
 
     const questionsActive = localStorage.getItem('questionsActive');
     this._questionsActive = JSON.parse(questionsActive);
+
+    const answeredInSession = localStorage.getItem('answeredInSession');
+    this.nAnsweredCorrectly = answeredInSession ? JSON.parse(answeredInSession) : 0;
   }
 
-  _setState({ newQuestionAnswered, nextQuestionsStart, questionsActive }, clearValues) {
+  _setState({
+    newQuestionAnswered,
+    nextQuestionsStart,
+    questionsActive,
+    answeredInSession,
+  }, clearValues) {
     if (newQuestionAnswered) {
       const questionsAnswered = this._questionsAnswered || [];
       questionsAnswered.push(newQuestionAnswered);
       localStorage.setItem('questionsAnswered', JSON.stringify(questionsAnswered));
       this._computeQuestions();
     }
+    if (answeredInSession != null) {
+      localStorage.setItem('answeredInSession', answeredInSession);
+    }
     if (nextQuestionsStart) {
       localStorage.setItem('nextQuestionsStart', nextQuestionsStart.toString());
     } else if (clearValues) {
       localStorage.removeItem('nextQuestionsStart');
     }
-    if (questionsActive) {
+    if (questionsActive != null) {
       localStorage.setItem('questionsActive', questionsActive);
     } else if (clearValues) {
       localStorage.removeItem('questionsActive');
@@ -72,7 +83,7 @@ class Interrupter {
       // Not set yet
       const currentDate = new Date();
       // compute diff 0-2 mins, add to currentDate + 4 mins
-      const diff = ( Math.ceil(Math.random()) + 4 ) * 120000; // 4 to 6 mins
+      const diff = ( Math.ceil(Math.random()) + 4 ) * 2 * 60000; // 4 to 6 mins
       const questionStart = currentDate + diff;
       console.log(questionStart);
       this._nextQuestionsStart = questionStart;
@@ -83,11 +94,12 @@ class Interrupter {
   }
 
  _setQuestionTimeout() {
-   console.log(this.interval);
     setTimeout(() => {
       this._questionsShown = false;
       this._startQuestions();
-      this._setState({ questionsActive: true }, true);
+      this._setState({
+        questionsActive: true,
+      }, true);
     }, this.interval);
   }
 
@@ -96,6 +108,12 @@ class Interrupter {
     // on submit check answer
     if (this.nAnsweredCorrectly >= this.requiredAnswers) {
       $.modal.close();
+      this._setState({
+        questionsActive: false,
+      }, true);
+      // setup for next round
+      this._calculateTimeout();
+      this.nAnsweredCorrectly = 0;
     } else {
       if (!this._questionsShown) {
         $('#questionModal').modal();
@@ -103,7 +121,7 @@ class Interrupter {
       }
       this._showQuestion().then(({ correct, id }) => {
         this.nAnsweredCorrectly += correct ? 1 : 0;
-        this._setState({ newQuestionAnswered: id });
+        this._setState({ newQuestionAnswered: id, answeredInSession: this.nAnsweredCorrectly });
         this._processAnswer(correct);
       });
     }

From 48f33aa8a2064f63ecf8e4abb9a39fcd64e12544 Mon Sep 17 00:00:00 2001
From: jd17md <chayanika.khatua@ing.com>
Date: Sun, 23 Feb 2020 13:57:16 +0100
Subject: [PATCH 05/13] feat: fix click handler on next button

---
 app/scripts/interrupter.js | 59 ++++++++++++++++++++++++--------------
 1 file changed, 38 insertions(+), 21 deletions(-)

diff --git a/app/scripts/interrupter.js b/app/scripts/interrupter.js
index 2c2c507..32f6eb1 100644
--- a/app/scripts/interrupter.js
+++ b/app/scripts/interrupter.js
@@ -19,38 +19,41 @@ class Interrupter {
     this._computeQuestions();
     this._calculateTimeout();
     // this.questions = JSON.parse(questions);
-    
+    this._questionsShown = false;
     this.requiredAnswers = requiredAnswers;
     // this.nAnsweredCorrectly = 0;
     // console.log(questions);
+    this._submitButton = $('#submitButton');
+    this._nextButton = $('#nextButton');
+    this._nextButton.click(() => this._startQuestions());
     this._setQuestionTimeout();
   }
 
   _restoreState() {
     // TODO: push question id to this when answered correctly
     const questionsAnswered = localStorage.getItem('questionsAnswered');
-    this._questionsAnswered = questionsAnswered && JSON.parse(questionsAnswered);
+    this._questionsAnswered = questionsAnswered ? JSON.parse(questionsAnswered) : [];
     
     // TODO: clear this when question dialog is shown and set questions active to true
     const nextQuestionsStart = localStorage.getItem('nextQuestionsStart');
     this._nextQuestionsStart = nextQuestionsStart && new Date();
 
     const questionsActive = localStorage.getItem('questionsActive');
-    this._questionsActive = JSON.parse(questionsActive);
+    this._questionsActive = JSON.parse(questionsActive) || false;
 
     const answeredInSession = localStorage.getItem('answeredInSession');
     this.nAnsweredCorrectly = answeredInSession ? JSON.parse(answeredInSession) : 0;
   }
 
   _setState({
-    newQuestionAnswered,
+    questionsAnswered,
     nextQuestionsStart,
     questionsActive,
     answeredInSession,
   }, clearValues) {
-    if (newQuestionAnswered) {
+    if (questionsAnswered) {
       const questionsAnswered = this._questionsAnswered || [];
-      questionsAnswered.push(newQuestionAnswered);
+      // questionsAnswered = [ ...questionsAnswered ];
       localStorage.setItem('questionsAnswered', JSON.stringify(questionsAnswered));
       this._computeQuestions();
     }
@@ -71,7 +74,6 @@ class Interrupter {
 
   _computeQuestions() {
     this.questions = questions.filter(question => !this._questionsAnswered.find(answeredId => answeredId === question.id));
-    console.log(this.questions.length);
   }
 
   _calculateTimeout() {
@@ -83,9 +85,9 @@ class Interrupter {
       // Not set yet
       const currentDate = new Date();
       // compute diff 0-2 mins, add to currentDate + 4 mins
-      const diff = ( Math.ceil(Math.random()) + 4 ) * 2 * 60000; // 4 to 6 mins
+      const diff = this._getDiff(.5, 1); // 4 to 6 mins
       const questionStart = currentDate + diff;
-      console.log(questionStart);
+      console.log({ questionStart });
       this._nextQuestionsStart = questionStart;
       this._setState({ nextQuestionsStart : questionStart });
       this.interval = diff;
@@ -93,13 +95,14 @@ class Interrupter {
     
   }
 
+  // Gets the difference in milliseconds given the min and max diff in minutes
+  _getDiff(min, max) {
+    return Math.ceil((Math.random() * (max - min) + min)  * 60000);
+  }
+
  _setQuestionTimeout() {
     setTimeout(() => {
-      this._questionsShown = false;
       this._startQuestions();
-      this._setState({
-        questionsActive: true,
-      }, true);
     }, this.interval);
   }
 
@@ -110,24 +113,38 @@ class Interrupter {
       $.modal.close();
       this._setState({
         questionsActive: false,
+        answeredInSession: 0,
       }, true);
       // setup for next round
+      this._questionsShown = false;
+      this._questionsActive = false;
       this._calculateTimeout();
       this.nAnsweredCorrectly = 0;
+      this._setQuestionTimeout();
     } else {
       if (!this._questionsShown) {
         $('#questionModal').modal();
         this._questionsShown = true;
+        this._questionsActive = true;
+        this._nextQuestionsStart = undefined;
+        this._setState({
+          questionsActive: true,
+        }, true);
       }
       this._showQuestion().then(({ correct, id }) => {
         this.nAnsweredCorrectly += correct ? 1 : 0;
-        this._setState({ newQuestionAnswered: id, answeredInSession: this.nAnsweredCorrectly });
+        this._questionsAnswered.push(id);
+        this._setState({
+          questionsAnswered: this._questionsAnswered,
+          answeredInSession: this.nAnsweredCorrectly,
+        });
+        this._computeQuestions();
         this._processAnswer(correct);
       });
     }
   }
 
-  _processAnswer() {
+  _processAnswer(correct) {
     $('#submitButton').hide();
     $('#nextButton').show();
     // append next button
@@ -135,8 +152,6 @@ class Interrupter {
     // const [ nextButton ] = $(`<button class="right">Next</button>`);
     const nextButton = $('#nextButton');
     nextButton.html(buttonText);
-    nextButton.click(() => this._startQuestions());
-    
 
     // append correct or wrong
     if (correct) {
@@ -159,7 +174,8 @@ class Interrupter {
         <input type="radio" id="${question.id}_${i}" value="${i}" name="${question.id}">
         <label for="${question.id}_${i}">${option}</label><br>
       `)});
-      $('#submitButton').click(() => {
+      this._submitButton.unbind();
+      this._submitButton.click(() => {
         this._checkAnswer(question, resolve);
       });
       $('#submitButton').show();
@@ -172,7 +188,7 @@ class Interrupter {
   _checkAnswer(question, resolve) {
     const options = $('#questionContainer input');
     const { answer } = question;
-    let selected = 0;
+    let selected;
     for (let i = 0; i < options.length; i++) {
       selected = options[i].checked ? i : selected;
     }
@@ -184,8 +200,9 @@ class Interrupter {
   }
 
   _getNextQuestion() {
-    // pick an unanswered one at random
-    return this.questions.shift();
+    // Pick an unanswered question at random
+    const questionIndex = Math.floor(Math.random() * this._questionsAnswered.length);
+    return this.questions[questionIndex];
   }
 
 }

From 9216bcbc360b177c6912174ddfa386f3634f7ccc Mon Sep 17 00:00:00 2001
From: jd17md <chayanika.khatua@ing.com>
Date: Sun, 23 Feb 2020 14:00:38 +0100
Subject: [PATCH 06/13] feat: bug fixes in storage data

---
 app/scripts/interrupter.js | 17 ++++++-----------
 1 file changed, 6 insertions(+), 11 deletions(-)

diff --git a/app/scripts/interrupter.js b/app/scripts/interrupter.js
index 32f6eb1..994ffd4 100644
--- a/app/scripts/interrupter.js
+++ b/app/scripts/interrupter.js
@@ -85,7 +85,7 @@ class Interrupter {
       // Not set yet
       const currentDate = new Date();
       // compute diff 0-2 mins, add to currentDate + 4 mins
-      const diff = this._getDiff(.5, 1); // 4 to 6 mins
+      const diff = this._getDiff(4, 6); // 4 to 6 mins
       const questionStart = currentDate + diff;
       console.log({ questionStart });
       this._nextQuestionsStart = questionStart;
@@ -145,13 +145,10 @@ class Interrupter {
   }
 
   _processAnswer(correct) {
-    $('#submitButton').hide();
-    $('#nextButton').show();
-    // append next button
+    this._submitButton.hide();
+    this._nextButton.show();
     const buttonText = this.nAnsweredCorrectly >= this.requiredAnswers ? 'Exit' : 'Next';
-    // const [ nextButton ] = $(`<button class="right">Next</button>`);
-    const nextButton = $('#nextButton');
-    nextButton.html(buttonText);
+    this._nextButton.html(buttonText);
 
     // append correct or wrong
     if (correct) {
@@ -159,14 +156,12 @@ class Interrupter {
     } else {
       $('#questionContainer').append('<div>Oh no! That\'s not right 😿</div>');
     }
-    // $('#questionModal').append(nextButton);
-    // this._startQuestions();
   }
 
   _showQuestion() {
     return new Promise((resolve, reject) => {
       const question = this._getNextQuestion();
-      $('#nextButton').hide();
+      this._nextButton.hide();
       const optionContainerDiv = $('<div class="option"></div>');
       question.options.forEach((option, i) => {
         optionContainerDiv.append(
@@ -178,7 +173,7 @@ class Interrupter {
       this._submitButton.click(() => {
         this._checkAnswer(question, resolve);
       });
-      $('#submitButton').show();
+      this._submitButton.show();
       $('#questionContainer').empty();
       $('#questionContainer').append(`<div class="question">${question.question}</div>`);
       $('#questionContainer').append(optionContainerDiv);

From 7137cf8af3b76846686243265e8e612ee7670360 Mon Sep 17 00:00:00 2001
From: jd17md <chayanika.khatua@ing.com>
Date: Sun, 23 Feb 2020 14:15:50 +0100
Subject: [PATCH 07/13] chore: remove outdated comments Intertupter

---
 app/scripts/interrupter.js | 11 -----------
 1 file changed, 11 deletions(-)

diff --git a/app/scripts/interrupter.js b/app/scripts/interrupter.js
index 994ffd4..2cd08bb 100644
--- a/app/scripts/interrupter.js
+++ b/app/scripts/interrupter.js
@@ -8,21 +8,15 @@ $.modal.defaults = {
 };
 
 class Interrupter {
-  // has the app set as a property
-  // Uses the time property of the app
   // keeps track of answered questions, pops correctly questions out, selects from remaining at random
   // Shows correct or wrong
-  // number of questions in a row, shown
   constructor(requiredAnswers, maxQuestions) {
     console.log('Interrupter');
     this._restoreState();
     this._computeQuestions();
     this._calculateTimeout();
-    // this.questions = JSON.parse(questions);
     this._questionsShown = false;
     this.requiredAnswers = requiredAnswers;
-    // this.nAnsweredCorrectly = 0;
-    // console.log(questions);
     this._submitButton = $('#submitButton');
     this._nextButton = $('#nextButton');
     this._nextButton.click(() => this._startQuestions());
@@ -30,11 +24,9 @@ class Interrupter {
   }
 
   _restoreState() {
-    // TODO: push question id to this when answered correctly
     const questionsAnswered = localStorage.getItem('questionsAnswered');
     this._questionsAnswered = questionsAnswered ? JSON.parse(questionsAnswered) : [];
     
-    // TODO: clear this when question dialog is shown and set questions active to true
     const nextQuestionsStart = localStorage.getItem('nextQuestionsStart');
     this._nextQuestionsStart = nextQuestionsStart && new Date();
 
@@ -53,7 +45,6 @@ class Interrupter {
   }, clearValues) {
     if (questionsAnswered) {
       const questionsAnswered = this._questionsAnswered || [];
-      // questionsAnswered = [ ...questionsAnswered ];
       localStorage.setItem('questionsAnswered', JSON.stringify(questionsAnswered));
       this._computeQuestions();
     }
@@ -107,8 +98,6 @@ class Interrupter {
   }
 
   _startQuestions() {
-    // show dialog, needs a submit button
-    // on submit check answer
     if (this.nAnsweredCorrectly >= this.requiredAnswers) {
       $.modal.close();
       this._setState({

From 2704f684d15bffb4da4c41131c882c3d497d673a Mon Sep 17 00:00:00 2001
From: jd17md <chayanika.khatua@ing.com>
Date: Sun, 23 Feb 2020 22:03:05 +0100
Subject: [PATCH 08/13] feat: add next button delay

---
 app/assets/questions.js    | 333 ++++++++++++++++++++++++++++++++++---
 app/index.html             |   8 +-
 app/scripts/interrupter.js |  59 +++++--
 app/styles/index.scss      |  12 ++
 4 files changed, 376 insertions(+), 36 deletions(-)

diff --git a/app/assets/questions.js b/app/assets/questions.js
index 0c339e8..73db6de 100644
--- a/app/assets/questions.js
+++ b/app/assets/questions.js
@@ -1,25 +1,318 @@
-module.exports = {
-  questions: [
+const questions = [
   {
     id: 1,
-    "question": "What will happen if you try to install and use npm package called 'fs'?",
-    "options": [
-      "Nothing",
-      "Throws an error",
-      "External fs module will be installed",
-      "huh?"
+    question: `What will be in the console when running the script in Node?
+      <pre>
+      const fs = require('fs')
+
+      setTimeout(() => console.log('timeout out'))
+      setImmediate(() => console.log('immediate out'))
+      
+      fs.readFile('./events.js', (err, data) => {
+        console.log('fs')
+        process.nextTick(() => console.log('next in'))
+        setTimeout(() => console.log('timeout in'))
+        setImmediate(() => console.log('immediate in'))
+      })
+      
+      const next = () => {
+        console.log('next')
+        process.nextTick(next)
+      }
+      
+      process.nextTick(next)
+    </pre>`,
+    options: [
+      `
+      timeout out
+      immediate out
+      next
+      fs
+      next in
+      immediate in
+      timeout in
+      `,
+      `
+      timeout out
+      immediate out
+      next
+      next
+      next
+      next
+      next
+      next
+      ...
+      `,
+      `
+      next
+      immediate out
+      timeout out
+      fs
+      next in
+      immediate in
+      timeout in
+      `,
+      `
+      next
+      next
+      next
+      next
+      next
+      next
+      ...
+      `,
     ],
-    "answer": 0
-  },
-  { 
+    answer: 4
+  }, 
+  {
     id: 2,
-    "question": "What is the output of the following statements \n 1 < 2 < 3; \n 3 > 2 > 1;",
-    "options": [
-      "true; false;",
-      "false; false;",
-      "true; true;",
-      "TypeError"
-    ],
-    "answer": 0
+    question: 'What would be the result of the following expression <i>(1 < 2 < 3) < (3 > 2 > 1)</i>?',
+    options: [
+      'true',
+      'false',
+      'error'
+    ],
+    answer: 1
+  },
+  {
+    id: 3,
+    question: 'What will happen if you try to install and use npm package called "fs"?',
+    options: [
+      'Error, the package already exists as a built-in',
+      'Nothing will be installed',
+      'The package will be installed, but can not be used',
+      'No problem, fs package can be installed and used normally'
+    ],
+    answer: 2
+  },
+  {
+    id: 4,
+    question: 'Are setTimeout and setInterval functions part of JavaScript?',
+    options: [
+      'Both yes',
+      'setTimeout - yes, setInterval - no',
+      'Both no'
+    ],
+    answer: 2
+  },
+  {
+    id: 5,
+    question: 'As a JavaScript interpreter, compile the following expression - console.log.call.call.call.call.call.apply(a => a, "What is gonna be printed in the console?".split(" "))?',
+    options: [
+      'Error',
+      'undefined',
+      '"is"',
+      '"console?"'
+    ],
+    answer: 2
+  },
+  {
+    id: 6,
+    question: 'As a JavaScript interpreter, compile the following expression - "b" + "a" + +"a"  + "a"?',
+    options: [
+      'baaa',
+      'baa',
+      'baNaNa',
+      'ba1a',
+      'batruea'
+    ],
+    answer: 3
+  },
+  {
+    id: 7,
+    question: 'Which expression will remove all digits from a string?',
+    options: [
+      'str.replace(/\b/g, "")',
+      'str.replace(/\d/g, "")',
+      'str.replace(/\d/gm, "")',
+      'str.replace(/[^0-9]/gm, "")'
+    ],
+    answer: 2
+  },
+  {
+    id: 8,
+    question: 'How to send instant event from one tab to another without a server and additional helpers?',
+    options: [
+      'xhr',
+      'Cookie',
+      'jQuery.sendEvent',
+      'localStorage'
+    ],
+    answer: 4
+  },
+  {
+    id: 9,
+    question: 'What is the third argument in the addEventListener function of the EventTarget class?',
+    options: [
+      'Nothing',
+      'options (capture phase)',
+      'Callback function',
+      'Event type'
+    ],
+    answer: 2
+  },
+  {
+    id: 10,
+    question: 'Which function is slower - http://output.jsbin.com/feloni/3/quiet ? Use DevTools in a separate window to analyze',
+    options: [
+      'onSortOne',
+      'onSortTwo',
+      'equal'
+    ],
+    answer: 1
+  },
+  {
+    id: 11,
+    question: 'What are the difference between setTimeout and setInterval in browser and in Node.js?',
+    options: [
+      'It doesn\' exist in Node.js',
+      'In Node.js both return an object',
+      'setInterval doesn\' exist in Node.js',
+      'In Node.js timeouts can\'t be cancelled'
+    ],
+    answer: 2
+  },
+  {
+    id: 12,
+    question: 'Remember best parts of JavaScript, what is `typeof NaN`?',
+    options: [
+      '"number"',
+      '"object"',
+      'NaN',
+      '"undefined"'
+    ],
+    answer: 1
+  },
+  {
+    id: 13,
+    question: 'Is this experssion valid in JavaScript `$: document.title = title`?',
+    options: [
+      'Yes',
+      'No',
+      'Only with jQuery'
+    ],
+    answer: 1
+  },
+  {
+    id: 14,
+    question: `What the following code will output?
+      <pre>
+      try { 
+        new Promise(() => {
+          throw new Error('test') 
+        })
+
+        console.log('no error')
+      } catch(e) { 
+        console.log('error')
+      }
+      </pre>
+    `,
+    options: [
+      'no error',
+      'error',
+      `no error \n Uncaught (in promise) Error: test`,
+      'Uncaught (in promise) Error: test'
+    ],
+    answer: 3
+  },
+  {
+    id: 15,
+    question: `What will the following code will output?
+    <pre>
+      function a() {
+        const b = () => console.log(arguments);
+        b(2)
+      }
+      
+      a(1)
+    </pre>
+    `,
+    options: [
+      '1',
+      '2',
+      'Error',
+    ],
+    answer: 1
+  },
+  {
+    id: 16,
+    question: 'How to remove all items from a JavaScript array?',
+    options: [
+      'arr.length = 0',
+      'delete arr.length',
+      'arr.slice(0, 0)'
+    ],
+    answer: 1
+  },
+  {
+    id: 17,
+    question: 'Which of the following storages are not available in browsers?',
+    options: [
+      'localStorage',
+      'sessionStorage',
+      'couchDB',
+      'indexedDB'
+    ],
+    answer: 3
+  },
+  {
+    id: 18,
+    question: 'Which states can a Promise take?',
+    options: [
+      'fulfilled, rejected, cancelled',
+      'pending, fulfilled, rejected',
+      'cancelled, pending, fulfilled, rejected'
+    ],
+    answer: 2
+  },
+  {
+    id: 19,
+    question: 'Which of the following ways of loading a script will block the page rendering?',
+    options: [
+      '<script async>',
+      '<script defer>',
+      '<script>',
+      '<script type="module">',
+    ],
+    answer: 3
+  },
+  {
+    id: 20,
+    question: 'Choose an incorrect CSS selector or a general answer',
+    options: [
+      '.my-class.other-class',
+      'div > a',
+      'input[disabled]',
+      'All correct',
+      'All incorrect'
+    ],
+    answer: 4
+  },
+  {
+    id: 21,
+    question: 'What will be the context of a twice bounded function - fn.bind(1)(2)?',
+    options: [
+      '1',
+      '2',
+      'undefined',
+      'null',
+      'Error, code will not compile'
+    ],
+    answer: 1
+  },
+  {
+    id: 22,
+    question: 'Choose an incorrect CSS selector or a general answer',
+    options: [
+      '#my-id.other-class',
+      'div ~ a',
+      'a[href]',
+      '#my-id#other-id',
+      'All correct'
+    ],
+    answer: 5
   }
-]};
\ No newline at end of file
+];
+
+module.exports = { questions };
\ No newline at end of file
diff --git a/app/index.html b/app/index.html
index d91681e..1c72fa5 100644
--- a/app/index.html
+++ b/app/index.html
@@ -44,9 +44,11 @@ <h1>POWER MODE!</h1>
   </div>
   <div id="questionModal" class="modal">
     <div id="questionContainer"></div>
-    <button id="submitButton">Submit</button>
-    <button id="nextButton" class="right">Next</button>
-
+    <div id="delayContainer"></div>
+    <div>
+      <button id="submitButton">Submit</button>
+      <button id="nextButton" class="right">Next</button>
+    </div>
   </div>
   <iframe class="result" src="assets/result.html" frameborder="0"><iframe>
 </body>
diff --git a/app/scripts/interrupter.js b/app/scripts/interrupter.js
index 2cd08bb..b29465b 100644
--- a/app/scripts/interrupter.js
+++ b/app/scripts/interrupter.js
@@ -12,6 +12,8 @@ class Interrupter {
   // Shows correct or wrong
   constructor(requiredAnswers, maxQuestions) {
     console.log('Interrupter');
+    this._startDelay = 10000;
+    this._delayIncrement = 5000;
     this._restoreState();
     this._computeQuestions();
     this._calculateTimeout();
@@ -28,13 +30,16 @@ class Interrupter {
     this._questionsAnswered = questionsAnswered ? JSON.parse(questionsAnswered) : [];
     
     const nextQuestionsStart = localStorage.getItem('nextQuestionsStart');
-    this._nextQuestionsStart = nextQuestionsStart && new Date();
+    this._nextQuestionsStart = nextQuestionsStart && new Date(nextQuestionsStart);
 
     const questionsActive = localStorage.getItem('questionsActive');
     this._questionsActive = JSON.parse(questionsActive) || false;
 
     const answeredInSession = localStorage.getItem('answeredInSession');
     this.nAnsweredCorrectly = answeredInSession ? JSON.parse(answeredInSession) : 0;
+
+    const currentDelay = localStorage.getItem('currentDelay');
+    this._currentDelay = currentDelay ? JSON.parse(currentDelay) : this._startDelay;
   }
 
   _setState({
@@ -71,14 +76,15 @@ class Interrupter {
     if (this._questionsActive) {
       this.interval = 0;
     } else if (this._nextQuestionsStart) {
-      this.interval = this._nextQuestionsStart - new Date();
+      console.log(this._nextQuestionsStart);
+      this.interval = this._nextQuestionsStart - Date.now();
+      console.log(this.interval);
     } else {
       // Not set yet
-      const currentDate = new Date();
       // compute diff 0-2 mins, add to currentDate + 4 mins
       const diff = this._getDiff(4, 6); // 4 to 6 mins
-      const questionStart = currentDate + diff;
-      console.log({ questionStart });
+      const questionStart = new Date(Date.now() + diff);
+      console.log(questionStart.toString());
       this._nextQuestionsStart = questionStart;
       this._setState({ nextQuestionsStart : questionStart });
       this.interval = diff;
@@ -121,13 +127,15 @@ class Interrupter {
         }, true);
       }
       this._showQuestion().then(({ correct, id }) => {
-        this.nAnsweredCorrectly += correct ? 1 : 0;
-        this._questionsAnswered.push(id);
-        this._setState({
-          questionsAnswered: this._questionsAnswered,
-          answeredInSession: this.nAnsweredCorrectly,
-        });
-        this._computeQuestions();
+        if (correct) {
+          this.nAnsweredCorrectly += 1;
+          this._questionsAnswered.push(id);
+          this._setState({
+            questionsAnswered: this._questionsAnswered,
+            answeredInSession: this.nAnsweredCorrectly,
+          });
+          this._computeQuestions();
+        }
         this._processAnswer(correct);
       });
     }
@@ -136,6 +144,22 @@ class Interrupter {
   _processAnswer(correct) {
     this._submitButton.hide();
     this._nextButton.show();
+    if (!correct) {
+      $('#delayContainer').show();
+      this._nextButton.prop('disabled', true);
+      let delay = this._currentDelay;
+      this._currentDelay += this._delayIncrement;
+      $('#delayContainer').html(this._formatMilliseconds(delay));
+      const int = setInterval(() => {
+        delay -= 1000;
+        if (delay === 0) {
+          clearInterval(int);
+          this._nextButton.prop('disabled', false);
+        }
+        $('#delayContainer').html(this._formatMilliseconds(delay));
+      }, 1000);
+    }
+    
     const buttonText = this.nAnsweredCorrectly >= this.requiredAnswers ? 'Exit' : 'Next';
     this._nextButton.html(buttonText);
 
@@ -147,9 +171,16 @@ class Interrupter {
     }
   }
 
+  _formatMilliseconds(ms) {
+    const minutes = Math.floor(ms / 60000);
+    const seconds = ((ms % 60000) / 1000).toFixed(0);
+    return minutes + ":" + (seconds < 10 ? '0' : '') + seconds;
+  }
+
   _showQuestion() {
     return new Promise((resolve, reject) => {
       const question = this._getNextQuestion();
+      $('#delayContainer').hide();
       this._nextButton.hide();
       const optionContainerDiv = $('<div class="option"></div>');
       question.options.forEach((option, i) => {
@@ -176,7 +207,9 @@ class Interrupter {
     for (let i = 0; i < options.length; i++) {
       selected = options[i].checked ? i : selected;
     }
-    if (selected === answer) {
+    // option inputs are 0 indexed
+    // answers are 1 indexed
+    if (selected === (answer - 1)) {
       resolve({ id: question.id, correct: true });
     } else {
       resolve({ id: question.id, correct: false });
diff --git a/app/styles/index.scss b/app/styles/index.scss
index e349905..62d4870 100644
--- a/app/styles/index.scss
+++ b/app/styles/index.scss
@@ -33,6 +33,11 @@ button {
     box-shadow: none;
     outline: none;
   }
+
+  &:disabled {
+    background-color: #9aa6a0;
+    cursor: wait;
+  }
 }
 
 .instructions-container {
@@ -367,6 +372,7 @@ body.power-mode {
 #questionModal {
   .question {
     margin-bottom: 15px;
+    word-break: break-word;
   }
   .option {
     margin-bottom: 7px;
@@ -376,6 +382,12 @@ body.power-mode {
   }
 }
 
+#delayContainer {
+  color: red;
+  text-align: right;
+  margin-bottom: 5px;
+}
+
 @keyframes pulse {
     0% {
         animation-timing-function: ease-out;

From c416b96fd050e3c52231395d7242a771007c4c54 Mon Sep 17 00:00:00 2001
From: jd17md <chayanika.khatua@ing.com>
Date: Sun, 23 Feb 2020 22:24:01 +0100
Subject: [PATCH 09/13] feat: add max questions

---
 app/assets/questions.js    | 22 +++++++++++-----------
 app/scripts/interrupter.js | 18 +++++++++++++-----
 2 files changed, 24 insertions(+), 16 deletions(-)

diff --git a/app/assets/questions.js b/app/assets/questions.js
index 73db6de..fa779d4 100644
--- a/app/assets/questions.js
+++ b/app/assets/questions.js
@@ -266,17 +266,17 @@ const questions = [
     ],
     answer: 2
   },
-  {
-    id: 19,
-    question: 'Which of the following ways of loading a script will block the page rendering?',
-    options: [
-      '<script async>',
-      '<script defer>',
-      '<script>',
-      '<script type="module">',
-    ],
-    answer: 3
-  },
+  // {
+  //   id: 19,
+  //   question: 'Which of the following ways of loading a script will block the page rendering?',
+  //   options: [
+  //     '<script async>',
+  //     '<script defer>',
+  //     '<script>',
+  //     '<script type="module">',
+  //   ],
+  //   answer: 3
+  // },
   {
     id: 20,
     question: 'Choose an incorrect CSS selector or a general answer',
diff --git a/app/scripts/interrupter.js b/app/scripts/interrupter.js
index b29465b..7281315 100644
--- a/app/scripts/interrupter.js
+++ b/app/scripts/interrupter.js
@@ -12,16 +12,18 @@ class Interrupter {
   // Shows correct or wrong
   constructor(requiredAnswers, maxQuestions) {
     console.log('Interrupter');
-    this._startDelay = 10000;
-    this._delayIncrement = 5000;
+    this._startDelay = 1000;
+    this._delayIncrement = 1000;
     this._restoreState();
     this._computeQuestions();
     this._calculateTimeout();
     this._questionsShown = false;
     this.requiredAnswers = requiredAnswers;
+    this.maxQuestions = 5;
     this._submitButton = $('#submitButton');
     this._nextButton = $('#nextButton');
     this._nextButton.click(() => this._startQuestions());
+    this._questionStreak = 0; //TODO: read from localStorage
     this._setQuestionTimeout();
   }
 
@@ -103,8 +105,12 @@ class Interrupter {
     }, this.interval);
   }
 
+  _shouldExitQuestions() {
+    return this.nAnsweredCorrectly >= this.requiredAnswers || this._questionStreak >= this.maxQuestions;
+  }
+
   _startQuestions() {
-    if (this.nAnsweredCorrectly >= this.requiredAnswers) {
+    if (this._shouldExitQuestions()) {
       $.modal.close();
       this._setState({
         questionsActive: false,
@@ -115,6 +121,7 @@ class Interrupter {
       this._questionsActive = false;
       this._calculateTimeout();
       this.nAnsweredCorrectly = 0;
+      this._questionStreak = 0;
       this._setQuestionTimeout();
     } else {
       if (!this._questionsShown) {
@@ -136,6 +143,7 @@ class Interrupter {
           });
           this._computeQuestions();
         }
+        this._questionStreak += 1;
         this._processAnswer(correct);
       });
     }
@@ -160,7 +168,7 @@ class Interrupter {
       }, 1000);
     }
     
-    const buttonText = this.nAnsweredCorrectly >= this.requiredAnswers ? 'Exit' : 'Next';
+    const buttonText = this._shouldExitQuestions() ? 'Exit' : 'Next';
     this._nextButton.html(buttonText);
 
     // append correct or wrong
@@ -218,7 +226,7 @@ class Interrupter {
 
   _getNextQuestion() {
     // Pick an unanswered question at random
-    const questionIndex = Math.floor(Math.random() * this._questionsAnswered.length);
+    const questionIndex = Math.floor(Math.random() * this.questions.length);
     return this.questions[questionIndex];
   }
 

From 0dbfce04c85d7a9c979a55de96b7608f964a83da Mon Sep 17 00:00:00 2001
From: jd17md <chayanika.khatua@ing.com>
Date: Sun, 23 Feb 2020 22:25:23 +0100
Subject: [PATCH 10/13] fix: add no questions to exit conditions

---
 app/scripts/interrupter.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/scripts/interrupter.js b/app/scripts/interrupter.js
index 7281315..dc9be22 100644
--- a/app/scripts/interrupter.js
+++ b/app/scripts/interrupter.js
@@ -12,8 +12,8 @@ class Interrupter {
   // Shows correct or wrong
   constructor(requiredAnswers, maxQuestions) {
     console.log('Interrupter');
-    this._startDelay = 1000;
-    this._delayIncrement = 1000;
+    this._startDelay = 5000;
+    this._delayIncrement = 2000;
     this._restoreState();
     this._computeQuestions();
     this._calculateTimeout();
@@ -106,7 +106,7 @@ class Interrupter {
   }
 
   _shouldExitQuestions() {
-    return this.nAnsweredCorrectly >= this.requiredAnswers || this._questionStreak >= this.maxQuestions;
+    return this.nAnsweredCorrectly >= this.requiredAnswers || this._questionStreak >= this.maxQuestions || !this.questions.length;
   }
 
   _startQuestions() {

From c75d4759b02d7bca2e42c03899b0a81cca4489d7 Mon Sep 17 00:00:00 2001
From: jd17md <chayanika.khatua@ing.com>
Date: Mon, 24 Feb 2020 17:08:52 +0100
Subject: [PATCH 11/13] chore: removed some questions

---
 app/assets/questions.js    | 20 ++++++++++----------
 app/scripts/interrupter.js |  1 +
 2 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/app/assets/questions.js b/app/assets/questions.js
index fa779d4..d71367d 100644
--- a/app/assets/questions.js
+++ b/app/assets/questions.js
@@ -151,16 +151,16 @@ const questions = [
     ],
     answer: 2
   },
-  {
-    id: 10,
-    question: 'Which function is slower - http://output.jsbin.com/feloni/3/quiet ? Use DevTools in a separate window to analyze',
-    options: [
-      'onSortOne',
-      'onSortTwo',
-      'equal'
-    ],
-    answer: 1
-  },
+  // {
+  //   id: 10,
+  //   question: 'Which function is slower - http://output.jsbin.com/feloni/3/quiet ? Use DevTools in a separate window to analyze',
+  //   options: [
+  //     'onSortOne',
+  //     'onSortTwo',
+  //     'equal'
+  //   ],
+  //   answer: 1
+  // },
   {
     id: 11,
     question: 'What are the difference between setTimeout and setInterval in browser and in Node.js?',
diff --git a/app/scripts/interrupter.js b/app/scripts/interrupter.js
index dc9be22..1198131 100644
--- a/app/scripts/interrupter.js
+++ b/app/scripts/interrupter.js
@@ -122,6 +122,7 @@ class Interrupter {
       this._calculateTimeout();
       this.nAnsweredCorrectly = 0;
       this._questionStreak = 0;
+      this._currentDelay = 5000;
       this._setQuestionTimeout();
     } else {
       if (!this._questionsShown) {

From 4711643607fed8942fd36ce167cb8071fb21731f Mon Sep 17 00:00:00 2001
From: jd17md <chayanika.khatua@ing.com>
Date: Mon, 24 Feb 2020 17:39:06 +0100
Subject: [PATCH 12/13] chore: fix delay

---
 app/scripts/interrupter.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/scripts/interrupter.js b/app/scripts/interrupter.js
index 1198131..b1826cc 100644
--- a/app/scripts/interrupter.js
+++ b/app/scripts/interrupter.js
@@ -12,8 +12,8 @@ class Interrupter {
   // Shows correct or wrong
   constructor(requiredAnswers, maxQuestions) {
     console.log('Interrupter');
-    this._startDelay = 5000;
-    this._delayIncrement = 2000;
+    this._startDelay = 10000;
+    this._delayIncrement = 3000;
     this._restoreState();
     this._computeQuestions();
     this._calculateTimeout();
@@ -122,7 +122,7 @@ class Interrupter {
       this._calculateTimeout();
       this.nAnsweredCorrectly = 0;
       this._questionStreak = 0;
-      this._currentDelay = 5000;
+      this._currentDelay = 10000;
       this._setQuestionTimeout();
     } else {
       if (!this._questionsShown) {

From 6b8732c37d7b80414d69bbb78fa20a6fb17f9e2a Mon Sep 17 00:00:00 2001
From: jd17md <chayanika.khatua@ing.com>
Date: Tue, 25 Feb 2020 12:19:09 +0100
Subject: [PATCH 13/13] chore: add more questions

---
 app/assets/questions.js | 33 ++++++++++++++++++++++++++++++++-
 1 file changed, 32 insertions(+), 1 deletion(-)

diff --git a/app/assets/questions.js b/app/assets/questions.js
index d71367d..a8ebb13 100644
--- a/app/assets/questions.js
+++ b/app/assets/questions.js
@@ -218,7 +218,7 @@ const questions = [
   },
   {
     id: 15,
-    question: `What will the following code will output?
+    question: `What will the following code output?
     <pre>
       function a() {
         const b = () => console.log(arguments);
@@ -312,6 +312,37 @@ const questions = [
       'All correct'
     ],
     answer: 5
+  },
+  {
+    id: 23,
+    question: 'JavaScript hasn\'t always been called that. What other name has it been released as?',
+    options: [
+      'Latte',
+      'BScript',
+      'SpiderMonkey',
+      'Mocha'
+    ],
+    answer: 4
+  },
+  {
+    id: 24,
+    question: 'null is an object. Yes or no?',
+    options: [
+      'Yes',
+      'No'
+    ],
+    answer: 1
+  },
+  {
+    id: 25,
+    question: 'Which of the  following is not a reserved keyword in JavaScript?',
+    options: [
+      'default',
+      'throw',
+      'finally',
+      'undefined'
+    ],
+    answer: 4
   }
 ];
 
