# HG changeset patch
# User Oscar Cortez <oscar@netlandish.com>
# Date 1609303038 21600
#      Tue Dec 29 22:37:18 2020 -0600
# Node ID 51817f99c53e5809776f09e7a7f0ab1b9e806a32
# Parent  7a9c3482e54b4ba2455a7c6ce67b34dca3dfc5fd
Show selected option on answer screen

diff --git a/src/index.js b/src/index.js
--- a/src/index.js
+++ b/src/index.js
@@ -27,13 +27,13 @@
       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 @@
   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 @@
     this.renderQuestion(question);
     if (this.config.onNext && typeof this.config.onNext == 'function') {
       this.config.onNext();
-    }
+    };
     this.questionIndex += 1;
   }
 
@@ -102,7 +104,7 @@
     this.renderAnswer(answer);
     if (this.config.onNext && typeof this.config.onNext == 'function') {
       this.config.onNext();
-    }
+    };
     this.answerIndex += 1;
   }
 
@@ -118,7 +120,7 @@
     } else if (this.mode === 'a') {
       this.nextAnswer();
       this.mode = 'q';
-    }
+    };
   }
 
   init() {
@@ -126,13 +128,13 @@
       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;
   }
 }
diff --git a/src/lib/dom.js b/src/lib/dom.js
--- a/src/lib/dom.js
+++ b/src/lib/dom.js
@@ -32,7 +32,7 @@
             <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>
diff --git a/src/styles.css b/src/styles.css
--- a/src/styles.css
+++ b/src/styles.css
@@ -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 {