@@ 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'} ${answer['key']}" style="background-color: ${answer['background']}">
+ <div class="${answer['selected'] ? 'answer__option--selected' : 'answer__option'} 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>
@@ 47,11 47,11 @@ const AnswerTemplate = (index, total, qu
const ResultTemplate = (questions, selected_answers, options) => `
<table class="result">
<tbody>
- <tr class="logos">
+ <tr class="result__logos">
<td></td>
${options.map(option => `
<td>
- <img src="${option['logo']}" />
+ <img src="${option['logo']}" class="result__logo--${option['key']}" />
</td>
`).join('')}
</tr>
@@ 76,6 76,14 @@ const ResultTemplate = (questions, selec
return `<td>${icon}</td>`;
}).join('')}
</tr>`).join('')}
+ <tr class="result__actions">
+ <td></td>
+ ${options.map(option => `
+ <td>
+ <a href="${option['result_action']}" class="result__action result__action--${option['key']}">${option['result_text']}</a>
+ </td>
+ `).join('')}
+ </tr>
</tbody>
</table>
`;
@@ 24,18 24,32 @@
}
.question__action,
+.answer__action,
+.result__action {
+ border: none;
+ border-radius: 25px;
+ color: #fff;
+ white-space: nowrap;
+ background-color: #3c689b;
+ cursor: pointer;
+}
+.question__action,
.answer__action {
margin-top: 2rem;
- border: none;
height: 50px;
- border-radius: 25px;
font-size: 20px;
padding: 0 2rem;
- color: #fff;
- background-color: #3c689b;
- border: 1px solid #3c689b;
- cursor: pointer;
+
}
+.result__action {
+ height: 40px;
+ font-size: 16px;
+ padding: 0 1rem;
+ display: inline-flex;
+ align-items: center;
+ text-decoration: none;
+}
+
.question__action:first-child {
margin-right: 0.5rem;
}
@@ 118,7 132,7 @@
width: 100%;
border-collapse: collapse;
}
-.result img {
+.result__logos img {
max-width: 130px;
padding-left: 0.3rem;
padding-right: 0.3rem;