diff --git a/src/assets/icons/ico/correctAnswer.svg b/src/assets/icons/ico/correctAnswer.svg
new file mode 100644
index 0000000000000000000000000000000000000000..a825d14e496a28b578b423456d45961528d4a705
--- /dev/null
+++ b/src/assets/icons/ico/correctAnswer.svg
@@ -0,0 +1,50 @@
+<svg width="122" height="120" viewBox="0 0 122 120" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.9484 96.3467L47.2919 34.2589L81.1888 73.6924L14.9484 96.3467Z" fill="url(#paint0_linear)"/>
+<ellipse cx="64.6195" cy="53.6501" rx="26" ry="4.5" transform="rotate(49.3178 64.6195 53.6501)" fill="url(#paint1_radial)"/>
+<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="14" y="34" width="68" height="63">
+<path d="M14.9485 96.3477L47.292 34.2599L81.1889 73.6934L14.9485 96.3477Z" fill="url(#paint2_linear)"/>
+</mask>
+<g mask="url(#mask0)">
+<path d="M50.496 51.6839L47.4675 53.9425L48.6797 57.5207L45.5958 55.3383L42.5674 57.5969L43.6899 53.9896L40.606 51.8072L44.3837 51.7601L45.5062 48.1528L46.7184 51.731L50.496 51.6839Z" fill="#0C8284"/>
+<path d="M53.9496 66.0391L53.434 71.9651L58.9106 74.2867L53.1153 75.6276L52.5997 81.5536L49.5336 76.4562L43.7383 77.7971L47.6387 73.3059L44.5726 68.2086L50.0493 70.5302L53.9496 66.0391Z" fill="#0C8284"/>
+<path d="M73.9134 72.9168L72.5886 76.0504L75.1594 78.2787L71.7698 77.9871L70.4451 81.1207L69.675 77.8069L66.2854 77.5153L69.199 75.7588L68.4289 72.445L70.9997 74.6733L73.9134 72.9168Z" fill="#0C8284"/>
+<path d="M38.7964 69.3335L33.3095 70.209L32.4466 75.6978L29.9184 70.75L24.4315 71.6255L28.3559 67.6921L25.8277 62.7443L30.7813 65.2612L34.7057 61.3278L33.8428 66.8166L38.7964 69.3335Z" fill="#0C8284"/>
+<path d="M35.5566 90.1813L32.3889 90.6867L31.8908 93.8555L30.4312 90.9991L27.2635 91.5045L29.5291 89.2337L28.0696 86.3772L30.9294 87.8302L33.195 85.5594L32.6968 88.7283L35.5566 90.1813Z" fill="#0C8284"/>
+</g>
+<g clip-path="url(#clip0)">
+<path d="M63.2259 24.0809C63.2646 22.5569 63.1816 21.033 63.1374 19.5091C63.0986 17.9741 63.1595 16.4502 63.2314 14.9207C63.2978 13.452 63.4749 11.9392 64.421 10.7576C64.7031 10.4042 65.1126 10.1999 65.5054 9.99559C65.771 9.85756 66.2191 9.74161 66.4238 9.52075C66.54 9.39928 66.4238 8.95204 66.4072 8.84713C66.3187 8.32811 66.197 7.80909 66.0587 7.30112C65.9203 6.79314 65.771 6.28516 65.5828 5.78823C65.605 5.84345 65.3283 5.12566 65.2564 5.19743C65.0738 5.39069 64.6865 5.49559 64.4542 5.61154C64.0835 5.79928 63.6796 5.99253 63.3808 6.28516C62.3794 7.28455 62.1304 8.86921 62.0253 10.2109C61.7819 13.3195 62.0087 16.4115 61.9921 19.5257C61.97 22.5514 61.2618 25.3453 59.6352 27.9183C58.0694 30.3864 55.8784 32.4073 53.6488 34.268C53.5326 34.3674 53.6543 34.8643 53.6654 34.9416C53.7483 35.4606 53.8756 35.9796 54.0139 36.4876C54.0416 36.5981 54.7276 38.6631 54.8162 38.5913C57.0126 36.7637 59.1151 34.787 60.703 32.3962C62.3683 29.895 63.1484 27.0735 63.2259 24.0809Z" fill="#F28D61"/>
+<path d="M78.0038 62.9962C79.0163 65.4422 81.246 65.6299 83.6638 65.9281C86.3748 66.2594 88.3002 65.4643 90.6239 64.1281C91.8245 63.4379 92.9753 62.7643 94.3198 62.3999C93.9989 62.3336 93.678 62.2729 93.3571 62.2066C93.7942 62.3447 94.2313 62.4882 94.6683 62.6263C95.3987 62.8637 96.1456 63.079 96.8925 63.2281C99.1941 63.6809 102.221 64.5477 104.334 63.1563C104.251 63.2115 101.889 62.5103 101.64 62.4717C101.009 62.3778 99.4597 61.9416 98.8621 62.3336C97.5066 62.814 97.6947 63.0514 99.4375 63.0569C99.0005 62.9189 98.5634 62.7753 98.1263 62.6373C97.1581 62.3281 96.1677 62.0851 95.1718 61.8974C93.4511 61.5716 91.5092 61.1631 89.7442 61.3784C88.0291 61.5882 86.6238 62.4551 85.1576 63.3054C84.0953 63.9183 83.0441 64.487 81.8822 64.8901C80.239 65.2269 81.1906 65.4643 84.7371 65.5968C84.0455 65.2987 83.7412 64.4373 83.4812 63.8134C82.9943 62.6539 78.2085 63.4986 78.0038 62.9962Z" fill="#F2EC61"/>
+<path d="M72.9524 50.0429C76.0065 51.2742 76.1282 46.3656 77.196 44.6705C78.8945 41.976 82.3967 46.0122 84.5822 43.6877C85.3678 42.8539 85.1797 41.1975 85.2184 40.1594C85.2848 38.2656 85.7994 36.1398 87.3817 34.9361C88.3942 34.1686 89.8715 34.1631 91.0776 34.0748C92.9753 33.9367 94.9505 33.749 96.5163 32.5785C99.2218 30.5521 96.3005 26.1625 98.2701 23.8766C98.9064 23.1367 100.599 23.6558 101.396 23.722C103.294 23.8711 104.666 23.076 105.579 21.4472C106.337 20.0889 106.696 18.5926 107.892 17.5104C108.815 16.6766 110.199 16.8643 111.338 16.9748C112.351 17.0742 113.469 17.2785 114.426 16.8312C115.449 16.3508 115.239 14.7662 115.139 13.8883C115.106 13.6177 115.067 13.3416 115.023 13.0711C114.929 12.4306 114.868 11.5748 114.536 11.0005C114.464 10.8735 114.514 12.0827 114.536 12.2263C114.885 14.5508 110.077 13.4686 109.02 13.4962C105.883 13.5791 105.712 17.814 103.853 19.5257C102.68 20.6079 100.942 20.365 99.5039 20.1938C98.4472 20.0668 97.6837 20.1662 97.2466 21.2153C96.0072 24.2024 98.5246 28.0067 94.8786 29.8232C92.2395 31.1373 88.5768 29.8785 86.3139 31.9435C85.1797 32.9815 84.7482 34.8036 84.5932 36.2558C84.4494 37.6306 84.8201 39.414 83.791 40.5073C81.6775 42.749 78.5349 38.6907 76.5985 41.2858C75.3481 42.9643 75.4974 47.9281 72.3549 46.6582C72.6868 46.7852 72.211 49.7447 72.9524 50.0429Z" fill="#EF61F2"/>
+<path d="M74.1641 31.8446C75.9401 31.7066 74.817 29.3048 74.9221 28.2281C75.0936 26.5164 77.7549 27.6318 78.2583 25.9864C78.4354 25.3956 77.9485 24.6391 77.7161 24.1256C77.2956 23.1925 77.0301 22.044 77.5059 21.0833C77.8102 20.4704 78.5239 20.1115 79.0827 19.7802C79.9679 19.2612 80.8753 18.698 81.3511 17.7538C82.17 16.125 79.7024 14.7005 80.1063 13.1269C80.239 12.6189 81.1796 12.4643 81.5835 12.3042C82.5351 11.9232 83.0109 11.2109 83.0607 10.206C83.0995 9.36673 82.9114 8.55507 83.2323 7.74894C83.4812 7.12501 84.1949 6.88206 84.7703 6.6612C85.2794 6.46795 85.8769 6.29679 86.2255 5.85507C86.6072 5.36918 86.1203 4.65691 85.8603 4.25384C85.7773 4.13237 85.6943 4.00538 85.6058 3.8839C85.4066 3.59679 85.1687 3.19924 84.8699 3.00047C84.8035 2.9563 85.1189 3.53053 85.1632 3.59127C85.8935 4.6293 83.3042 5.25875 82.8007 5.52378C81.3013 6.31335 82.2419 8.40599 81.755 9.67593C81.4452 10.4821 80.5489 10.7802 79.813 11.0397C79.2708 11.233 78.9278 11.4649 78.9665 12.0778C79.0827 13.817 81.2183 15.0538 79.8905 16.8042C78.9278 18.0686 76.8586 18.3391 76.261 19.8796C75.9623 20.6526 76.1946 21.6354 76.4657 22.3753C76.7258 23.071 77.3344 23.8496 77.0965 24.6226C76.6151 26.2127 74.1199 25.0035 73.81 26.7207C73.6108 27.8305 74.8723 30.1937 73.0465 30.3373C73.2512 30.3318 73.7326 31.8778 74.1641 31.8446Z" fill="#61F26F"/>
+<path d="M84.3941 54.7639C85.6334 56.0393 86.7676 53.6375 87.6639 53.0356C89.0913 52.0749 89.9378 54.8301 91.5257 54.1565C92.0956 53.9135 92.3667 53.0577 92.6101 52.5497C93.0583 51.6277 93.7776 50.689 94.8177 50.4405C95.4872 50.2804 96.2175 50.6007 96.8316 50.816C97.7998 51.1583 98.8123 51.5007 99.8469 51.2577C101.628 50.8436 101.142 48.0387 102.613 47.3375C103.089 47.1111 103.808 47.735 104.19 47.9393C105.092 48.4252 105.944 48.3313 106.752 47.7295C107.427 47.2215 107.93 46.5645 108.755 46.2884C109.396 46.0786 110.038 46.4706 110.575 46.7743C111.051 47.0393 111.565 47.3872 112.13 47.3706C112.738 47.3596 112.982 46.5313 113.125 46.0731C113.17 45.9295 113.208 45.7859 113.247 45.6424C113.341 45.3056 113.496 44.8694 113.457 44.516C113.446 44.4332 113.208 45.0461 113.192 45.1178C112.854 46.3436 110.719 44.7589 110.193 44.5436C108.627 43.9031 107.615 45.9571 106.326 46.3988C105.512 46.6804 104.705 46.178 104.035 45.7804C103.537 45.4878 103.144 45.3718 102.696 45.7915C101.435 46.9951 101.844 49.4246 99.6478 49.5295C98.0599 49.6068 96.5218 48.1878 94.956 48.7123C94.1704 48.9773 93.5562 49.7835 93.1634 50.4681C92.7927 51.1142 92.5825 52.0804 91.8356 52.3951C90.303 53.0467 89.6335 50.3577 88.112 51.2191C87.1272 51.7767 86.1203 54.2614 84.8422 52.9473C84.975 53.0964 84.0898 54.4547 84.3941 54.7639Z" fill="#F26161"/>
+<path d="M65.107 43.136C65.5939 43.2685 66.0753 43.1028 66.529 42.9482C67.1818 42.7219 67.807 42.4127 68.4599 42.1808C68.6148 42.1256 67.5414 40.4912 67.4806 40.4084C67.3699 40.2427 66.446 38.7519 66.1638 38.8568C65.5663 39.0722 64.9909 39.3317 64.4044 39.5636C63.912 39.7568 63.3476 39.9611 62.811 39.8176C62.7446 39.7955 63.0599 40.4415 63.0267 40.3808C63.2591 40.7949 63.5192 41.1979 63.7903 41.59C64.0614 41.982 64.3435 42.3685 64.6534 42.7329C64.764 42.8599 64.9245 43.0863 65.107 43.136Z" fill="#61F28A"/>
+<path d="M65.5164 53.9793C65.8207 54.0511 66.1471 53.8523 66.4625 53.6591C66.9106 53.383 67.3477 53.0407 67.7959 52.7646C67.901 52.6984 67.3699 51.318 67.3367 51.2462C67.2813 51.1082 66.8332 49.8438 66.6395 49.9652C66.2301 50.2192 65.8262 50.5174 65.4223 50.7879C65.0848 51.0143 64.6976 51.2573 64.3601 51.18C64.3158 51.1689 64.4596 51.7266 64.4431 51.6714C64.5482 52.0303 64.681 52.3671 64.8193 52.6928C64.9521 53.0241 65.1014 53.3499 65.2619 53.6481C65.3228 53.764 65.4002 53.9517 65.5164 53.9793Z" fill="#F2B861"/>
+<path d="M74.5901 7.03599C74.8889 7.10777 75.2209 6.909 75.5362 6.71575C75.9844 6.43967 76.4215 6.09734 76.8696 5.82127C76.9747 5.75501 76.4436 4.37464 76.4104 4.30286C76.3551 4.16483 75.9069 2.90041 75.7133 3.02188C75.3039 3.27587 74.9 3.57403 74.4961 3.84458C74.153 4.07096 73.7713 4.31391 73.4338 4.23661C73.3895 4.22556 73.5334 4.77771 73.5168 4.72802C73.6274 5.08691 73.7547 5.42372 73.893 5.75501C74.0313 6.0863 74.1696 6.41207 74.3356 6.71023C74.3965 6.81513 74.4739 7.00838 74.5901 7.03599Z" fill="#61F0F2"/>
+<path d="M119.71 39.4413C120.014 39.5131 120.34 39.3143 120.656 39.121C121.104 38.845 121.541 38.5026 121.989 38.2265C122.094 38.1603 121.563 36.7799 121.53 36.7081C121.474 36.5701 121.026 35.3057 120.833 35.4272C120.423 35.6811 120.019 35.9793 119.615 36.2499C119.272 36.4762 118.885 36.7192 118.553 36.6419C118.509 36.6308 118.653 37.1885 118.636 37.1333C118.747 37.4922 118.874 37.829 119.012 38.1548C119.151 38.4861 119.289 38.8118 119.455 39.11C119.51 39.2259 119.593 39.4137 119.71 39.4413Z" fill="#61F0F2"/>
+<path d="M53.1619 26.0022C53.4662 26.0739 53.7926 25.8752 54.108 25.6874C54.5562 25.4114 54.9932 25.069 55.4414 24.7929C55.5465 24.7267 55.0154 23.3463 54.9822 23.2745C54.9268 23.1365 54.4787 21.8721 54.2851 21.9936C53.8756 22.2475 53.4717 22.5457 53.0679 22.8163C52.7304 23.0426 52.3431 23.2856 52.0056 23.2083C51.9613 23.1972 52.1052 23.7549 52.0886 23.6997C52.1937 24.0586 52.3265 24.3954 52.4593 24.7267C52.5976 25.058 52.7414 25.3837 52.9019 25.6819C52.9683 25.7813 53.0457 25.9745 53.1619 26.0022Z" fill="#61F0F2"/>
+<path d="M107.111 39.536C107.416 39.6078 107.748 39.409 108.058 39.2157C108.506 38.9397 108.943 38.5973 109.391 38.3213C109.496 38.255 108.965 36.8802 108.932 36.8029C108.876 36.6648 108.428 35.4004 108.235 35.5219C107.825 35.7759 107.427 36.074 107.017 36.3446C106.68 36.571 106.293 36.8139 105.955 36.7366C105.911 36.7256 106.055 37.2832 106.038 37.228C106.143 37.5869 106.276 37.9237 106.409 38.255C106.547 38.5863 106.691 38.9121 106.851 39.2102C106.918 39.3207 106.995 39.5084 107.111 39.536Z" fill="#F2D261"/>
+<path d="M78.4187 35.7532L76.9747 35.0133L75.5417 35.7808L75.8017 34.1851L74.6288 33.0642L76.2333 32.8157L76.9359 31.3525L77.6718 32.7992L79.2763 33.02L78.1255 34.163L78.4187 35.7532Z" fill="#61F0F2"/>
+<path d="M95.1608 9.68597L95.0668 8.9461L94.4028 8.60377L95.0778 8.28904L95.1995 7.55469L95.7086 8.09579L96.4444 7.97984L96.0848 8.63137L96.4223 9.29947L95.692 9.16144L95.1608 9.68597Z" fill="#61F0F2"/>
+<path d="M95.3433 42.5886L94.613 42.677L94.2755 43.334L93.9657 42.6659L93.2354 42.55L93.772 42.0475L93.6614 41.3242L94.3087 41.6776L94.9616 41.3463L94.8232 42.0641L95.3433 42.5886Z" fill="#61F0F2"/>
+<path d="M110.254 60.4238L108.832 59.59L107.349 60.2857L107.698 58.6845L106.575 57.4863L108.213 57.3262L109.009 55.8906L109.668 57.3925L111.278 57.7017L110.049 58.7949L110.254 60.4238Z" fill="#61F0F2"/>
+<path d="M69.0131 19.1453L68.9079 18.3116L68.161 17.9306L68.919 17.5717L69.0573 16.749L69.6272 17.3564L70.4571 17.2294L70.0532 17.9637L70.4294 18.7091L69.6051 18.5545L69.0131 19.1453Z" fill="#61F0F2"/>
+<path d="M116.578 27.6697L115.565 26.9851L114.431 27.4268L114.769 26.2618L114 25.3176L115.217 25.2789L115.875 24.252L116.29 25.4004L117.469 25.7096L116.506 26.455L116.578 27.6697Z" fill="#61F0F2"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear" x1="39.2152" y1="75.4871" x2="44.8158" y2="85.8376" gradientUnits="userSpaceOnUse">
+<stop stop-color="#61F0F2"/>
+<stop offset="1" stop-color="#48C2C4"/>
+</linearGradient>
+<radialGradient id="paint1_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(72.1195 57.6502) rotate(82.4053) scale(7.56637 43.7168)">
+<stop offset="0.1875" stop-color="#248B8C"/>
+<stop offset="1" stop-color="#29BEC0"/>
+</radialGradient>
+<linearGradient id="paint2_linear" x1="39.2153" y1="75.4881" x2="44.8159" y2="85.8386" gradientUnits="userSpaceOnUse">
+<stop stop-color="#61F0F2"/>
+<stop offset="1" stop-color="#48C2C4"/>
+</linearGradient>
+<clipPath id="clip0">
+<rect width="70" height="63" fill="white" transform="translate(52 3)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/assets/icons/ico/wrongAnswer.svg b/src/assets/icons/ico/wrongAnswer.svg
new file mode 100644
index 0000000000000000000000000000000000000000..fe91447b5e325187fad5e0dce9189439ee0d5e76
--- /dev/null
+++ b/src/assets/icons/ico/wrongAnswer.svg
@@ -0,0 +1,14 @@
+<svg width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M48.2801 30.2343L40 54.5818H49.8344L43.9952 83.9235L34.9424 92.0046C34.547 92.3588 34.0588 92.6012 33.5333 92.7042C33.0078 92.8072 32.466 92.7667 31.9692 92.5873C31.4725 92.408 31.0408 92.0969 30.723 91.6894C30.4052 91.2819 30.2141 90.7943 30.1713 90.2818L28.3016 68.2604L8.39532 57.6442C7.73617 57.2927 7.25421 56.7003 7.05535 55.9971C6.85648 55.294 6.95698 54.5375 7.33476 53.8941C7.64805 53.3648 8.12918 52.942 8.71351 52.6964L29.8939 43.7349L34.6064 21.9803C34.9392 20.484 36.4583 19.4981 38.0011 19.7794C38.6161 19.8907 39.1716 20.196 39.5805 20.6475L48.2801 30.2343Z" fill="url(#paint0_linear)"/>
+<path d="M63.7293 29.0577L57 42.3489H65.1245L46.6145 82.8884L53.759 80.0248L73.1784 92.0028C73.7083 92.3333 74.3437 92.4829 74.9693 92.4331C76.5467 92.3096 77.714 90.9854 77.574 89.471L75.5578 67.4625L93.297 53.5239C93.78 53.1423 94.1221 52.6191 94.263 52.0269C94.6333 50.5478 93.6621 49.0656 92.1171 48.7083L69.6945 43.5951L63.7293 29.0577Z" fill="url(#paint1_linear)"/>
+<defs>
+<linearGradient id="paint0_linear" x1="55.2506" y1="30.5972" x2="51.5507" y2="90.4625" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF7B7B"/>
+<stop offset="1" stop-color="#BE2121"/>
+</linearGradient>
+<linearGradient id="paint1_linear" x1="55.2506" y1="30.5972" x2="51.5507" y2="90.4625" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF7B7B"/>
+<stop offset="1" stop-color="#BE2121"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/components/Ecogesture/ecogestureCard.scss b/src/components/Ecogesture/ecogestureCard.scss
index 2f32bfb13f0e52ad469419cc8fcd980d1037c154..34fa1a3ac46622f013bd1e1b5fc92e35bc5a3079 100644
--- a/src/components/Ecogesture/ecogestureCard.scss
+++ b/src/components/Ecogesture/ecogestureCard.scss
@@ -28,7 +28,7 @@
flex-direction: column;
align-items: center;
justify-content: space-around;
- padding: 0;
+ padding: 1rem;
&.ec-content-unlocked {
padding: 0.4rem 0;
}
diff --git a/src/components/Quiz/QuizExplanationModal.tsx b/src/components/Quiz/QuizExplanationModal.tsx
index 31696d221b03ba85ebcef8e1ee031eeb349a2545..1483ebef7a66ed26eca43288235cb9293e9f28ea 100644
--- a/src/components/Quiz/QuizExplanationModal.tsx
+++ b/src/components/Quiz/QuizExplanationModal.tsx
@@ -2,8 +2,13 @@ import React, { useState, useEffect } from 'react'
import './quizExplanationModal.scss'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import { QuestionEntity } from 'models'
+
+import correctAnswer from 'assets/icons/ico/correctAnswer.svg'
+import wrongAnswer from 'assets/icons/ico/wrongAnswer.svg'
+
import Modal from 'components/CommonKit/Modal/Modal'
import StyledStopButton from 'components/CommonKit/Button/StyledStopButton'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
interface QuizExplanationModalProps {
question: QuestionEntity | undefined
@@ -34,17 +39,22 @@ const QuizExplanationModal: React.FC<QuizExplanationModalProps> = ({
<div className="em-content">
{question && (
<>
- <div
- className={
- question.answers[answerIndex].isTrue
- ? 'icon-check'
- : 'icon-cross'
- }
- ></div>
- <div className="text-22-bold answer-label">
- {question.answers[validAnswer].answerLabel}
+ {question.answers[answerIndex].isTrue ? (
+ <div>
+ <StyledIcon icon={correctAnswer} size={100} />
+ <p className="answer-result correct">{t('quiz.correct')}</p>
+ </div>
+ ) : (
+ <div>
+ <StyledIcon icon={wrongAnswer} size={100} />
+ <p className="answer-result wrong">{t('quiz.wrong')}</p>
+ </div>
+ )}
+ <div className="text-20-normal answer-label">
+ {t('quiz.rightAnswer')} <br />
+ <strong>{question.answers[validAnswer].answerLabel}</strong>
</div>
- <div className="text-16-bold">{question.explanation}</div>
+ <div className="text-16-normal">{question.explanation}</div>
</>
)}
diff --git a/src/components/Quiz/quizExplanationModal.scss b/src/components/Quiz/quizExplanationModal.scss
index fb212d4ce67b8deb1ed8b13f0f08a3c7625757dc..3b10c759872e3c7d8294cf3c696b4b85e2420188 100644
--- a/src/components/Quiz/quizExplanationModal.scss
+++ b/src/components/Quiz/quizExplanationModal.scss
@@ -1,67 +1,35 @@
@import '../../styles/base/color';
-
-.quiz-container{
- .modal-close-button{
+.quiz-container {
+ .modal-close-button {
display: none;
}
- .modal-overlay{
- .modal-box{
+ .modal-overlay {
+ .modal-box {
text-align: center;
padding: 1rem 0;
- &.modal-box-bordered{
+ &.modal-box-bordered {
border: none;
}
}
-
- .icon-check, .icon-cross{
- display: inline-block;
- margin: 1rem 0;
- position: relative;
- width: 59px;
- height: 43px;
- &:before, &::after{
- content: '';
- display: inline-block;
- height: 0.7rem;
- position: absolute;
- border-radius: 1rem;
- }
-
+ .modal-congrats .em-content {
+ padding: 1.5rem;
}
- .icon-check{
- &:before, &::after{
- background-color: $green;
- }
- &:before{
- width: 2rem;
- top: 25px;
- left: 0;
- transform: rotate(45deg);
- }
- &:after{
- width: 3.9rem;
- top: 14px;
- left: 11px;
- transform: rotate(-45deg);
- }
- }
- .icon-cross{
- &:before, &::after{
- background-color: $red-primary;
- width: 3.9rem;
- top: 0;
- left: 0;
- }
- &:before{
- transform: rotate(45deg);
- }
- &:after{
- transform: rotate(-45deg);
+ .answer-result {
+ font-weight: bold;
+ font-size: 1.7rem;
+ text-transform: uppercase;
+ margin-top: 0;
+ margin-bottom: 1rem;
+ &.correct {
+ color: $blue-light;
+ }
+ &.wrong {
+ color: $red-primary;
}
}
- .answer-label{
- margin-bottom: 2rem;
+ .answer-label {
+ margin-bottom: 1.5rem;
}
}
}
diff --git a/src/locales/fr.json b/src/locales/fr.json
index a6528287200923b4aa642ef78d194c7da0630ece..05af55bc223a80321b07adcba45c0b7e07dab99e 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -374,6 +374,9 @@
"quiz": {
"explanation": "Répondez correctement aux 5 questions et remportez 5 des 15 étoiles nécessaires pour débloquer le duel final",
"score_final": "SCORE FINAL",
+ "correct": "Bravo !",
+ "wrong": "Raté !",
+ "rightAnswer": "Bonne réponse :",
"earn": "Vous remportez",
"go_back": "Retour",
"youpi": "Youpi !",
diff --git a/src/styles/base/_typography.scss b/src/styles/base/_typography.scss
index 3fc5e477bb359cd03c14b472a8b421c2205e8c8b..08f78f4475727c63e66f445349c5938c8830cc7f 100644
--- a/src/styles/base/_typography.scss
+++ b/src/styles/base/_typography.scss
@@ -126,6 +126,13 @@ p {
font-size: 1.188rem;
line-height: 120%;
}
+.text-20-normal {
+ font-family: $text-font;
+ font-style: normal;
+ font-weight: normal;
+ font-size: 1.25rem;
+ line-height: 120%;
+}
.text-20-bold {
font-family: $text-font;
font-style: normal;