Show selected option on answer screen
3 files changed, 32 insertions(+), 16 deletions(-)

M src/index.js
M src/lib/dom.js
M src/styles.css
M src/index.js +15 -13
@@ 27,13 27,13 @@ class ComparisonTable {
       if (event.key === 'n' && _this.config.keyboard_events) {
         if (_this.mode === 'q') {
           _this.selected.push(false);
-        }
+        };
         _this.render();
-      }
+      };
       if (event.key === 'y' && _this.config.keyboard_events) {
         _this.selected.push(true);
         _this.render();
-      }
+      };
     });
     document.addEventListener('questionNext', (event) => {
       _this.mode = 'q';

          
@@ 62,19 62,21 @@ class ComparisonTable {
   renderAnswer(answer) {
     if (this.config['options'].length !== Object.keys(answer).length) {
       throw new ValidationError('Not enought options for the answer');
-    }
-    const question_title = this.questions[this.questionIndex - 1]['title'];
-    const formatted_answer = this.config['options'].map((item) => {
+    };
+    const last_selected = this.selected[this.selected.length - 1];
+    const question = this.questions[this.questionIndex - 1];
+    const formatted_answers = this.config['options'].map((item) => {
       let formatted = {};
       Object.assign(formatted, item);
       formatted['title'] = answer[item['key']];
+      formatted['selected'] = question[`${last_selected}`].includes(item['key']);
       return formatted;
     });
     const rendered_answer = AnswerTemplate(
       this.questionIndex - 1,
       this.questions.length,
-      question_title,
-      formatted_answer
+      question['title'],
+      formatted_answers
     );
     this.container.innerHTML = rendered_answer;
   }

          
@@ 93,7 95,7 @@ class ComparisonTable {
     this.renderQuestion(question);
     if (this.config.onNext && typeof this.config.onNext == 'function') {
       this.config.onNext();
-    }
+    };
     this.questionIndex += 1;
   }
 

          
@@ 102,7 104,7 @@ class ComparisonTable {
     this.renderAnswer(answer);
     if (this.config.onNext && typeof this.config.onNext == 'function') {
       this.config.onNext();
-    }
+    };
     this.answerIndex += 1;
   }
 

          
@@ 118,7 120,7 @@ class ComparisonTable {
     } else if (this.mode === 'a') {
       this.nextAnswer();
       this.mode = 'q';
-    }
+    };
   }
 
   init() {

          
@@ 126,13 128,13 @@ class ComparisonTable {
       throw new ValidationError(
         'Questions and Answer should be equals in size'
       );
-    }
+    };
     this.addEvents();
     this.renderQuestion(this.questions[this.questionIndex]);
     this.questionIndex = 1;
     if (this.config.onInit && typeof this.config.onInit == 'function') {
       this.config.onInit();
-    }
+    };
     this.initialized = true;
   }
 }

          
M src/lib/dom.js +1 -1
@@ 32,7 32,7 @@ const AnswerTemplate = (index, total, qu
             <h2 class="answer__title">${question}</h2>
             <div class="answer__options">
                 ${answers.map(answer => `
-                <div class="${answer['selected'] ? 'answer__option--selected' : 'answer__option'}" style="background-color: ${answer['background']}">
+                <div class="${answer['selected'] ? 'answer__option--selected' : 'answer__option'} ${answer['key']}" style="background-color: ${answer['background']}">
                     <img class="answer__option__logo" src="${answer['logo']}" />
                     <p class="answer__option__content" style="color: ${answer['color']}">${answer['title']}</p>
                 </div>

          
M src/styles.css +16 -2
@@ 48,19 48,33 @@ 
   flex-direction: row;
   justify-content: space-between;
 }
-.answer__option {
+.answer__option,
+.answer__option--selected {
   padding: 2rem 0.5rem 0;
   text-align: center;
   flex: 0 1 calc(50% - 2rem);
   border-radius: 5px;
 }
+.answer__option--selected {
+  position: relative;
+}
+.answer__option--selected::before {
+  content: "your pick";
+  background-color: #b0ddfb;
+  white-space: nowrap;
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  border-radius: 100px;
+  padding: 0.5rem 1rem;
+}
 .answer__option__logo {
   max-width: 200px;
 }
 .answer__option__content {
   line-height: 180%;
   font-size: 16px;
-  font-smooth: grayscale;
 }
 
 .progress-circle {