<section class="efl-bundle-quiz-hero-banner" data-behavior="efl-bundle-quiz-hero-banner">
<div class="efl-bundle-quiz-hero-banner__wrapper">
<picture>
<source media="(max-width: 819px)" srcset="/assets/example-content/bl-quiz-results-mob.jpg">
<source media="(min-width: 820px)" srcset="/assets/example-content/bl-quiz-results-desk.jpg">
<img src="/assets/example-content/bl-quiz-results-desk.jpg" alt="">
</picture>
<div class="efl-bundle-quiz-hero-banner__overlay">
<div class="efl-bundle-quiz-hero-banner__content" data-behavior="efl-bundle-quiz-hero-banner">
<div class="efl-bundle-quiz-hero-banner__content--quizresult">
<div class="efl-bundle-quiz-hero-banner__content--quizresult__progress">
<div class="progress" data-quiz-completed="3" data-quiz-total="3">
<canvas class="progress-circle" width="104px" height="104px"></canvas>
</div>
</div>
<div class="efl-bundle-quiz-hero-banner__content--quizresult__title">
<h1>Amazing job!</h1>
<p>You correctly answered 3 out of 3 questions.<br> Keep up the good work!</p>
</div>
</div>
</div>
<div class="efl-bundle-quiz-hero-banner__close">
<a class="close-quiz-results" aria-label="Close Quiz Results" tabindex="0"></a>
</div>
</div>
</div>
</section>
No notes defined.
{
"smallimage": "/assets/example-content/bl-quiz-results-mob.jpg",
"bigimage": "/assets/example-content/bl-quiz-results-desk.jpg",
"quiz-completed": "3",
"quiz-total": "3",
"title": "Amazing job!",
"copy": "Keep up the good work!",
"numberBarel": [
"0",
"1",
"2",
"3"
]
}
import { Rive, Fit, Layout } from '@rive-app/canvas';
export default parentElement => {
const MOBILE_BREAKPOINT = 820;
let DEFAULT_WIDTH = window.innerWidth;
const { quizCompleted } = parentElement.querySelector('.progress').dataset;
const canvasElement = parentElement.querySelector('.progress-circle');
const setCavasProgress = () => {
let canvasSize = 104;
if (MOBILE_BREAKPOINT < window.innerWidth) {
canvasSize = 152;
}
canvasElement.setAttribute('width', `${canvasSize}px`);
canvasElement.setAttribute('height', `${canvasSize}px`);
// Rive
const lyout = new Layout({
fit: Fit.Cover,
});
const riveAnimation = new Rive({
src: '/assets/example-content/quiz_score.riv',
canvas: canvasElement,
layout: lyout,
onLoad: () => {
riveAnimation.resizeDrawingSurfaceToCanvas();
},
});
riveAnimation.play(`${quizCompleted} out of 3`);
};
setCavasProgress();
window.addEventListener('resize', () => {
if (DEFAULT_WIDTH !== window.innerWidth) {
setCavasProgress();
DEFAULT_WIDTH = window.innerWidth;
}
});
};
.efl-bundle-quiz-hero-banner {
background-color: #004f9f;
color: $white;
position: relative;
height: 37.4rem;
&::before {
content: '';
background: url('./assets/images/bl-quiz-result-mob-1.png') no-repeat center;
position: absolute;
display: block;
width: 28.4rem;
height: 27.9rem;
background-size: 100%;
background-position-y: top;
z-index: 1;
}
&::after {
content: '';
position: absolute;
display: block;
background: url('./assets/images/bl-quiz-result-mob-2.png') no-repeat center;
background-size: cover;
width: 35.7rem;
height: 28.2rem;
bottom: 0;
right: 0;
}
&__overlay {
width: 100%;
max-width: 122.7rem;
position: absolute;
top: 0;
left: 0;
right: 0;
display: flex;
margin: 0 auto;
z-index: 2;
}
&__content {
display: flex;
width: 100%;
max-width: 70.6rem;
justify-content: center;
margin: 0 auto;
position: relative;
&--quizresult {
&__progress {
position: relative;
width: 12.4rem;
height: 12.4rem;
margin: 0 auto;
margin-top: 5.7rem;
.progress {
position: absolute;
width: 12.4rem;
height: 12.4rem;
}
.progress-circle {
width: 12.4rem;
height: 12.4rem;
}
.progress-circle-back {
fill: none;
stroke: $white;
stroke-width: 10px;
}
.progress-circle-prog {
fill: none;
stroke: $red;
stroke-width: 1rem;
stroke-dasharray: 0 999;
stroke-dashoffset: 0;
transition: stroke-dasharray 0.7s linear 0.3s;
}
}
&__title {
max-width: 33rem;
text-align: center;
h1 {
@extend .efl-heading-2;
letter-spacing: -0.01em;
margin-top: 1.6rem;
text-align: center;
font-size: 5.2rem;
}
p {
@extend .efl-p-medium;
color: $light-blue;
margin-top: 0.8rem;
}
}
}
}
&__wrapper {
min-height: 37.4rem;
justify-content: center;
margin: 0 auto;
position: relative;
picture {
width: 100%;
img {
height: 37.4rem;
object-fit: cover;
width: 100%;
}
}
}
&__close {
position: absolute;
right: 3.2rem;
top: 2.4rem;
.close-quiz-results {
background: url('./assets/images/bl-quiz-result-close.svg') no-repeat
center;
background-size: cover;
width: 4rem;
height: 4rem;
cursor: pointer;
display: flex;
border-radius: 50%;
overflow: hidden;
}
}
@media screen and (min-width: $mq-medium) {
height: 52rem;
& + .efl-column-layout.efl-profile-layout {
margin-top: -15.7rem;
}
&::before {
background: url('./assets/images/bl-quiz-result-desk-1.png') no-repeat
left top;
background-size: cover;
width: 60.8rem;
height: 45rem;
}
&::after {
background: url('./assets/images/bl-quiz-result-desk-2.png') no-repeat
center;
background-size: cover;
width: 61.5rem;
height: 49.8rem;
}
&__content {
&--quizresult {
&__progress {
width: 17.2rem;
height: 17.2rem;
.progress {
width: 17.2rem;
height: 17.2rem;
}
.progress-circle {
width: 17.2rem;
height: 17.2rem;
}
.progress-text {
top: 5.4rem;
font-size: 7rem;
line-height: 5.7rem;
ul {
height: 5.7rem;
}
span {
font-size: 2.9rem;
line-height: 3.3rem;
}
}
}
&__title {
p {
font-size: 2rem;
line-height: 3.2rem;
}
}
}
}
&__close {
background-size: cover;
right: 5.6rem;
top: 4.3rem;
.close-quiz-results {
width: 5.1rem;
height: 5.1rem;
background-color: rgba(255, 255, 255, 0);
&:hover {
background-color: rgba(255, 255, 255, 0.15);
}
}
}
&__wrapper {
min-height: 52rem;
picture {
img {
height: 52rem;
}
}
}
}
}
<section class="efl-bundle-quiz-hero-banner" data-behavior="efl-bundle-quiz-hero-banner">
<div class="efl-bundle-quiz-hero-banner__wrapper">
<picture>
<source media="(max-width: 819px)" srcset="{{smallimage}}">
<source media="(min-width: 820px)" srcset="{{bigimage}}">
<img src="{{bigimage}}" alt="">
</picture>
<div class="efl-bundle-quiz-hero-banner__overlay">
<div class="efl-bundle-quiz-hero-banner__content" data-behavior="efl-bundle-quiz-hero-banner">
<div class="efl-bundle-quiz-hero-banner__content--quizresult">
<div class="efl-bundle-quiz-hero-banner__content--quizresult__progress">
<div class="progress" data-quiz-completed="{{quiz-completed}}" data-quiz-total="{{quiz-total}}">
<canvas class="progress-circle" width="104px" height="104px"></canvas>
</div>
</div>
<div class="efl-bundle-quiz-hero-banner__content--quizresult__title">
<h1>{{title}}</h1>
<p>You correctly answered {{quiz-completed}} out of {{quiz-total}} questions.<br> {{copy}}</p>
</div>
</div>
</div>
<div class="efl-bundle-quiz-hero-banner__close">
<a class="close-quiz-results" aria-label="Close Quiz Results" tabindex="0"></a>
</div>
</div>
</div>
</section>