348 lines
14 KiB
HTML
348 lines
14 KiB
HTML
|
<script>
|
||
|
|
let observer;
|
||
|
|
|
||
|
|
let config = {
|
||
|
|
attributes: true,
|
||
|
|
childList: true,
|
||
|
|
subtree: true
|
||
|
|
};
|
||
|
|
let eoqMutationObserver = () => {
|
||
|
|
let observeStarter = () => {
|
||
|
|
observer.observe(document,config);
|
||
|
|
}
|
||
|
|
|
||
|
|
let callback = () => {
|
||
|
|
if(document.querySelector('[data-test="activity-title"]').innerHTML == 'Survey' || document.querySelector('[data-test="activity-title"]').innerHTML == 'Try It'){
|
||
|
|
document.querySelector('[data-test="continue-button"]').click();
|
||
|
|
}
|
||
|
|
observer.disconnect();
|
||
|
|
observeStarter();
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
observer = new MutationObserver(() => {
|
||
|
|
if(document.querySelector('[data-test="quiz-summary"]')){
|
||
|
|
callback();
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
observer.observe(document, config);
|
||
|
|
}
|
||
|
|
|
||
|
|
eoqMutationObserver();
|
||
|
|
</script>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.nGiSq {
|
||
|
|
margin-bottom: 15px;
|
||
|
|
padding-bottom: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Accordion styles */
|
||
|
|
|
||
|
|
.fr-view .accordion,
|
||
|
|
div[data-test='additional-information'] .accordion {
|
||
|
|
background-color: transparent;
|
||
|
|
border-top: 1px solid #000;
|
||
|
|
cursor: pointer;
|
||
|
|
padding: 25px 0;
|
||
|
|
width: 100%;
|
||
|
|
text-align: left;
|
||
|
|
outline: none;
|
||
|
|
transition: 0.4s;
|
||
|
|
font-size: 26px;
|
||
|
|
line-height: 125%;
|
||
|
|
position:relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
.fr-view .accordion:before,
|
||
|
|
div[data-test='additional-information'] .accordion:before,
|
||
|
|
.fr-view .accordion:after,
|
||
|
|
div[data-test='additional-information'] .accordion:after {
|
||
|
|
content: '';
|
||
|
|
width:24px;
|
||
|
|
height:24px;
|
||
|
|
position:absolute;
|
||
|
|
right:0;
|
||
|
|
top:50%;
|
||
|
|
transform:translateY(-50%);
|
||
|
|
background-color:#000;
|
||
|
|
transition:opacity 0.2s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.fr-view .accordion:before,
|
||
|
|
div[data-test='additional-information'] .accordion:before {
|
||
|
|
width:14px;
|
||
|
|
height:2px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.fr-view .accordion:after,
|
||
|
|
div[data-test='additional-information'] .accordion:after {
|
||
|
|
width:2px;
|
||
|
|
height:14px;
|
||
|
|
right:6px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.fr-view .accordion.active:after,
|
||
|
|
div[data-test='additional-information'] .accordion.active:after {
|
||
|
|
opacity:0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.fr-view .accordion-panel,
|
||
|
|
div[data-test='additional-information'] .accordion-panel {
|
||
|
|
padding: 0;
|
||
|
|
background-color: transparent;
|
||
|
|
max-height: 0;
|
||
|
|
overflow: hidden;
|
||
|
|
transition: max-height 0.2s ease-out;
|
||
|
|
font-size: 20px;
|
||
|
|
line-height: 150%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.fr-view .accordion-panel .accordion-panel-content,
|
||
|
|
div[data-test='additional-information'] .accordion-panel .accordion-panel-content {
|
||
|
|
padding-bottom:25px;
|
||
|
|
max-width:600px;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.fr-view .accordion-panel p,
|
||
|
|
div[data-test='additional-information'] .accordion-panel p {
|
||
|
|
font-size: 20px;
|
||
|
|
line-height: 150%;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
.fr-view .accordion-panel:last-of-type,
|
||
|
|
div[data-test='additional-information'] .accordion-panel:last-of-type {
|
||
|
|
border-bottom:1px solid #000;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/* Labels styling */
|
||
|
|
|
||
|
|
.fr-view .info-box, div[data-test='additional-information'] .info-box {
|
||
|
|
padding: 64px 20px 20px;
|
||
|
|
background: #f0f0ff;
|
||
|
|
border-left: 4px solid #2d29fc;
|
||
|
|
position: relative;
|
||
|
|
font-weight: 500;
|
||
|
|
font-size: 16px;
|
||
|
|
line-height: 150%;
|
||
|
|
margin-bottom: 25px;
|
||
|
|
}
|
||
|
|
.fr-view .info-box:after, div[data-test='additional-information'] .info-box:after {
|
||
|
|
content: "";
|
||
|
|
position: absolute;
|
||
|
|
width: 24px;
|
||
|
|
height: 24px;
|
||
|
|
top: 20px;
|
||
|
|
left: 20px;
|
||
|
|
background-image: url("data:image/svg+xml,%0A%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z' stroke='%232D29FC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 16V12' stroke='%232D29FC' stroke-width='2' stroke-linecap='square' stroke-linejoin='round'/%3E%3Cpath d='M12 8H12.01' stroke='%232D29FC' stroke-width='2' stroke-linecap='square' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
|
||
|
|
background-size: contain;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background-position: center;
|
||
|
|
}
|
||
|
|
.fr-view .info-box.general, div[data-test='additional-information'] .info-box.general {
|
||
|
|
background: #f0f0ff;
|
||
|
|
}
|
||
|
|
.fr-view .info-box.general:after, div[data-test='additional-information'] .info-box.general:after {
|
||
|
|
background-image: url("data:image/svg+xml,%0A%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z' stroke='%232D29FC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 16V12' stroke='%232D29FC' stroke-width='2' stroke-linecap='square' stroke-linejoin='round'/%3E%3Cpath d='M12 8H12.01' stroke='%232D29FC' stroke-width='2' stroke-linecap='square' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
|
||
|
|
}
|
||
|
|
.fr-view .info-box.people, div[data-test='additional-information'] .info-box.people {
|
||
|
|
background: #ead9e3;
|
||
|
|
font-weight: 600;
|
||
|
|
}
|
||
|
|
.fr-view .info-box.people:after, div[data-test='additional-information'] .info-box.people:after {
|
||
|
|
background-image: url("data:image/svg+xml,%0A%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 21V15L3 15V21' stroke='%232D29FC' stroke-width='2'/%3E%3Cpath d='M9 11C11.2091 11 13 9.20914 13 7C13 4.79086 11.2091 3 9 3C6.79086 3 5 4.79086 5 7C5 9.20914 6.79086 11 9 11Z' stroke='%232D29FC' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M21 21V15H18.5' stroke='%232D29FC' stroke-width='2'/%3E%3Cpath d='M16 3.13C16.8604 3.35031 17.623 3.85071 18.1676 4.55232C18.7122 5.25392 19.0078 6.11683 19.0078 7.005C19.0078 7.89318 18.7122 8.75608 18.1676 9.45769C17.623 10.1593 16.8604 10.6597 16 10.88' stroke='%232D29FC' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
|
||
|
|
}
|
||
|
|
.fr-view .info-box.glossary, div[data-test='additional-information'] .info-box.glossary {
|
||
|
|
background: #e8e8e8;
|
||
|
|
}
|
||
|
|
.fr-view .info-box.glossary:after, div[data-test='additional-information'] .info-box.glossary:after {
|
||
|
|
background-image: url("data:image/svg+xml,%0A%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18 3H6V21L12 17L18 21V3Z' stroke='%232D29FC' stroke-width='2'/%3E%3C/svg%3E%0A");
|
||
|
|
}
|
||
|
|
.fr-view .info-box.resources, div[data-test='additional-information'] .info-box.resources {
|
||
|
|
background: #eff8fa;
|
||
|
|
}
|
||
|
|
.fr-view .info-box.resources .resource-blocks, div[data-test='additional-information'] .info-box.resources .resource-blocks {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
}
|
||
|
|
.fr-view .info-box.resources .resource-blocks a, div[data-test='additional-information'] .info-box.resources .resource-blocks a {
|
||
|
|
color: #333132;
|
||
|
|
background-color: #fff;
|
||
|
|
padding: 20px 20px 54px;
|
||
|
|
display: block;
|
||
|
|
font-weight: 400;
|
||
|
|
font-size: 20px;
|
||
|
|
line-height: 150%;
|
||
|
|
margin-bottom: 25px;
|
||
|
|
width: 100%;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
.fr-view .info-box.resources .resource-blocks a span, div[data-test='additional-information'] .info-box.resources .resource-blocks a span {
|
||
|
|
display: block;
|
||
|
|
font-weight: 600;
|
||
|
|
font-size: 14px;
|
||
|
|
line-height: 150%;
|
||
|
|
}
|
||
|
|
.fr-view .info-box.resources .resource-blocks a:hover, div[data-test='additional-information'] .info-box.resources .resource-blocks a:hover {
|
||
|
|
color: #2d29fc;
|
||
|
|
}
|
||
|
|
.fr-view .info-box.resources .resource-blocks a:after, div[data-test='additional-information'] .info-box.resources .resource-blocks a:after {
|
||
|
|
content: "";
|
||
|
|
position: absolute;
|
||
|
|
width: 24px;
|
||
|
|
height: 24px;
|
||
|
|
bottom: 20px;
|
||
|
|
right: 20px;
|
||
|
|
background-image: url("data:image/svg+xml,%0A%3Csvg width='25' height='24' viewBox='0 0 25 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.32812 17L17.3281 7' stroke='%232D29FC' stroke-width='2'/%3E%3Cpath d='M7.32812 7H17.3281V17' stroke='%232D29FC' stroke-width='2'/%3E%3C/svg%3E%0A");
|
||
|
|
background-size: contain;
|
||
|
|
background-position: center;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
}
|
||
|
|
.fr-view .info-box.resources:after, div[data-test='additional-information'] .info-box.resources:after {
|
||
|
|
background-image: url("data:image/svg+xml,%0A%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z' stroke='%232D29FC' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M16.2417 7.76001L14.1217 14.12L7.76172 16.24L9.88172 9.88001L16.2417 7.76001Z' stroke='%232D29FC' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E%0A");
|
||
|
|
}
|
||
|
|
.fr-view .info-box.alert, div[data-test='additional-information'] .info-box.alert {
|
||
|
|
background: #fff0f0;
|
||
|
|
border-left: 4px solid #ff2a26;
|
||
|
|
}
|
||
|
|
.fr-view .info-box.alert:after, div[data-test='additional-information'] .info-box.alert:after {
|
||
|
|
background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.76619 20L12 2.94365L22.2338 20H1.76619Z' stroke='%23990300' stroke-width='2'/%3E%3Cpath d='M12 9V13' stroke='%23990300' stroke-width='2' stroke-linecap='square' stroke-linejoin='round'/%3E%3Cpath d='M12 17H12.01' stroke='%23990300' stroke-width='2' stroke-linecap='square' stroke-linejoin='round'/%3E%3C/svg%3E");
|
||
|
|
}
|
||
|
|
.fr-view .info-box.alert a, div[data-test='additional-information'] .info-box.alert a {
|
||
|
|
color: #990300;
|
||
|
|
}
|
||
|
|
.fr-view .info-box.course, div[data-test='additional-information'] .info-box.course {
|
||
|
|
background-color: #f5f6ff;
|
||
|
|
border-left: 4px solid #2e29fc;
|
||
|
|
}
|
||
|
|
.fr-view .info-box.course:after, div[data-test='additional-information'] .info-box.course:after {
|
||
|
|
background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='album 1'%3E%3Cpath id='Vector' d='M11 3V11L14 8L17 11V3' stroke='%232D29FC' stroke-width='2' stroke-linecap='square'/%3E%3Crect id='Rectangle 566' x='3' y='3' width='18' height='18' stroke='%232D29FC' stroke-width='2'/%3E%3Cpath id='Vector 115' d='M7 3V21' stroke='%232D29FC' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E%0A");
|
||
|
|
}
|
||
|
|
.fr-view .info-box.course .courses-wrapper, div[data-test='additional-information'] .info-box.course .courses-wrapper {
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
}
|
||
|
|
.fr-view .info-box.course .courses-wrapper a, div[data-test='additional-information'] .info-box.course .courses-wrapper a {
|
||
|
|
color: #333132;
|
||
|
|
background-color: #fff;
|
||
|
|
padding: 15px;
|
||
|
|
display: flex;
|
||
|
|
font-weight: 400;
|
||
|
|
font-size: 20px;
|
||
|
|
line-height: 150%;
|
||
|
|
margin-bottom: 10px;
|
||
|
|
width: 100%;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
.fr-view .info-box.course .courses-wrapper a img, div[data-test='additional-information'] .info-box.course .courses-wrapper a img {
|
||
|
|
margin-right: 20px;
|
||
|
|
width: 140px;
|
||
|
|
object-fit: cover;
|
||
|
|
}
|
||
|
|
.fr-view .info-box.course .courses-wrapper a > div, div[data-test='additional-information'] .info-box.course .courses-wrapper a > div {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
}
|
||
|
|
.fr-view .info-box.course .courses-wrapper a .title, div[data-test='additional-information'] .info-box.course .courses-wrapper a .title {
|
||
|
|
color: #242424;
|
||
|
|
font-size: 18px;
|
||
|
|
line-height: normal;
|
||
|
|
font-weight: 600;
|
||
|
|
margin-bottom: 10px;
|
||
|
|
}
|
||
|
|
.fr-view .info-box.course .courses-wrapper a .subtitle, div[data-test='additional-information'] .info-box.course .courses-wrapper a .subtitle {
|
||
|
|
color: #6b686a;
|
||
|
|
font-size: 11px;
|
||
|
|
font-weight: 500;
|
||
|
|
line-height: 14px;
|
||
|
|
}
|
||
|
|
.fr-view .info-box.course .courses-wrapper a .level, div[data-test='additional-information'] .info-box.course .courses-wrapper a .level {
|
||
|
|
color: #2e29fc;
|
||
|
|
font-size: 12px;
|
||
|
|
font-weight: 600;
|
||
|
|
margin-top: auto;
|
||
|
|
}
|
||
|
|
.fr-view .info-box.course .courses-wrapper a:after, div[data-test='additional-information'] .info-box.course .courses-wrapper a:after {
|
||
|
|
content: "";
|
||
|
|
position: absolute;
|
||
|
|
width: 24px;
|
||
|
|
height: 24px;
|
||
|
|
background-image: url("data:image/svg+xml,%0A%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 12H19' stroke='%232D29FC' stroke-width='2'/%3E%3Cpath d='M12 5L19 12L12 19' stroke='%232D29FC' stroke-width='2'/%3E%3C/svg%3E");
|
||
|
|
background-size: contain;
|
||
|
|
background-position: center;
|
||
|
|
right: 15px;
|
||
|
|
bottom: 15px;
|
||
|
|
}
|
||
|
|
.fr-view .info-box.course .courses-wrapper a:hover, div[data-test='additional-information'] .info-box.course .courses-wrapper a:hover {
|
||
|
|
text-decoration: none;
|
||
|
|
}
|
||
|
|
@media (min-width: 768px) {
|
||
|
|
.fr-view .info-box, div[data-test='additional-information'] .info-box {
|
||
|
|
padding: 20px 20px 20px 64px;
|
||
|
|
}
|
||
|
|
.fr-view .info-box.resources .resource-blocks, div[data-test='additional-information'] .info-box.resources .resource-blocks {
|
||
|
|
flex-direction: row;
|
||
|
|
}
|
||
|
|
.fr-view .info-box.resources .resource-blocks a, div[data-test='additional-information'] .info-box.resources .resource-blocks a {
|
||
|
|
margin: 0 10px;
|
||
|
|
}
|
||
|
|
.fr-view .info-box.resources .resource-blocks a:first-child, div[data-test='additional-information'] .info-box.resources .resource-blocks a:first-child {
|
||
|
|
margin-left: 0;
|
||
|
|
}
|
||
|
|
.fr-view .info-box.resources .resource-blocks a:last-child, div[data-test='additional-information'] .info-box.resources .resource-blocks a:last-child {
|
||
|
|
margin-right: 0;
|
||
|
|
}
|
||
|
|
.fr-view .info-box.course .courses-wrapper, div[data-test='additional-information'] .info-box.course .courses-wrapper {
|
||
|
|
margin-left: -10px;
|
||
|
|
margin-right: -10px;
|
||
|
|
}
|
||
|
|
.fr-view .info-box.course .courses-wrapper a, div[data-test='additional-information'] .info-box.course .courses-wrapper a {
|
||
|
|
margin: 0 10px 20px;
|
||
|
|
width: calc(50% - 20px);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
window.addEventListener("DOMContentLoaded", () => {
|
||
|
|
handleAccordions()
|
||
|
|
|
||
|
|
window.Northpass.subscribe("activityRender", (data) => {
|
||
|
|
handleAccordions()
|
||
|
|
})
|
||
|
|
})
|
||
|
|
|
||
|
|
function handleAccordions() {
|
||
|
|
if (
|
||
|
|
document.querySelectorAll(".accordion").length > 0 &&
|
||
|
|
document.querySelectorAll(".accordion-panel").length > 0
|
||
|
|
) {
|
||
|
|
var acc = document.getElementsByClassName("accordion");
|
||
|
|
toggleAccordions(acc);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function toggleAccordions(acc) {
|
||
|
|
var i;
|
||
|
|
for (i = 0; i < acc.length; i++) {
|
||
|
|
acc[i].addEventListener("click", function () {
|
||
|
|
this.classList.toggle("active");
|
||
|
|
var panel = this.nextElementSibling;
|
||
|
|
if (panel.style.maxHeight) {
|
||
|
|
panel.style.maxHeight = null;
|
||
|
|
} else {
|
||
|
|
panel.style.maxHeight = panel.scrollHeight + "px";
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|