@@ 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;
}
}
@@ 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>
@@ 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 {