Тест с подарком и сбором контактов из блока BF918 в Tilda

Рюкзаки в мужском стиле — стильные и прочные

Незаменимы в командировках, путешествиях и в повседневной жизни.
Всегда, когда нужны свободные руки

Вместительные
Влезет много разных вещей
Компактные
Идеально подходят для ручной клади
Полиуретановые
Легко моются и тяжело пачкаются
Крепкие
Широкие молнии и швы из крепкой нити

Тест с подарком и сбором контактов из блока BF918 в Tilda

Создали блок BF918 и заполнили его вопросами.
У блока должен быть только результат

Создали 3 popup окна и задали им ссылки

Добавили код в блок Другое - Т123
В коде прописали ссылку и диапазон баллов, при котором действует каждая ссылка
[3,"#popup:loose"],
[5,"#popup:prize1"],
[7,"#popup:prize2"]

Библиотека для примера


<script>
document.addEventListener("DOMContentLoaded", function(){

let linkArr = [
    [3,"#popup:loose"],
    [5,"#popup:prize1"],
    [7,"#popup:prize2"]
];

let btnResult = document.getElementsByClassName("t806__btn_result");     
for (let i = 0; i < btnResult.length; i++) {
    btnResult[i].addEventListener('click', function() {
        let rAnswer = document.getElementsByClassName("t806__test");  
        rAnswer = Number(rAnswer[0].getAttribute('data-count'));    
        let nLink = '';
        for (let i = 0; i < linkArr.length; i++) {
            if (rAnswer<=linkArr[i][0]){
                nLink = linkArr[i][1];
                break;
            };
        };    
        let resultWrap = document.getElementsByClassName("t806__result");  
        let restartBtnWR = resultWrap[0].getElementsByClassName("t806__btn-wrapper");  
        let insideResultWrap = restartBtnWR[0].innerHTML;
        restartBtnWR[0].innerHTML = '<a href="'+nLink+'">'+insideResultWrap+'</a>';
    });
};
});
</script>

<style>
.t806 .t806__btn_restart {
    pointer-events: none;
    margin: 0;
    display: block;
}
.t806__btn-wrapper {
    width: max-content;
    margin: 0 auto;
    cursor: pointer;
    margin-top: 45px;
}
</style>

Библиотека для примера

Скрыть проценты и правильные ответы


<script>
document.addEventListener("DOMContentLoaded", function(){

let radioWrap = document.querySelectorAll(".t806__answer .t-radio__wrapper label");     
for (let i = 0; i < radioWrap.length; i++) {
    radioWrap[i].addEventListener('click', function() {
        this.closest('.t-radio__wrapper').classList.add('t806-active');
        this.closest('.t806__answers').classList.add('t806-disable');
    });
};

let checkboxWrap = document.querySelectorAll(".t806__answer .t-checkbox");     
for (let i = 0; i < checkboxWrap.length; i++) {
    checkboxWrap[i].addEventListener('change', function() {
        this.closest('label').classList.toggle('t806-active-box');
    });
};

});
</script>

<style>
/*Cкрыть проценты*/
.t806 .t-vote__btn-res {display: none !important}
/*Скрыть правильные и неправильные ответы*/
.t806 .t806__answers.t806__answers_answered .t806__answer_wrong label{
    color:   inherit !important;
}
.t806 .t806__answers.t806__answers_answered .t806__answer_wrong label .t806__answer-indicator, .t806 .t806__answers.t806__answers_answered .t806__answer_wrong label .t806__answer-indicator::after {
    border-color: inherit !important;
    background-color: inherit !important;
}
.t806 .t806__answers.t806__answers_answered .t806__answer_correct label, .t806 .t806__answers.t806__answers_answered .t806__answer_correct .t-vote__btn-res {
    color: #000000!important;
}
.t806 .t806__answers.t806__answers_answered .t806__answer { opacity: 1}
.t806-disable{  pointer-events:none}
.t806__answer-indicator { display: none !important}
.t806 .t-radio__wrapper label:before {
    content: "";
    width: 16px;
    height: 16px;
    border: 1px solid #000;
    position: absolute;
    top: 4px;
    left: 0;
    border-radius: 50%;
}
label.t806__answer-text {padding-left: 30px}
.t806 .t-radio__wrapper.t806-active label:after {
    content: "";
    width: 8px;
    height: 8px;
    background-color: #707070;
    position: absolute;
    top: 9px;
    left: 5px;
    border-radius: 50%;
}
label.t806__answer-text.t-checkbox__control:before {
    content: "";
    width: 16px;
    height: 16px;
    border: 1px solid #000;
    position: absolute;
    top: 4px;
    left: 0;
}
label.t806__answer-text.t-checkbox__control {padding-left: 30px}
label.t806__answer-text.t-checkbox__control.t806-active-box:after {
    content: "";
    width: 8px;
    height: 8px;
    background-color: #707070;
    position: absolute;
    top: 9px;
    left: 5px;
}
@media screen and (max-width: 1200px){
.t806 .t-radio__wrapper:before {top: 2px}
.t806 .t-radio__wrapper.t806-active:after {top: 7px}
label.t806__answer-text.t-checkbox__control:before {top: 2px}
label.t806__answer-text.t-checkbox__control.t806-active-box:after {top: 7px}
}

@media screen and (max-width: 640px){
.t806 .t-radio__wrapper:before {top: 0px}
.t806 .t-radio__wrapper.t806-active:after {top: 5px}
label.t806__answer-text.t-checkbox__control:before {top: 0px}
label.t806__answer-text.t-checkbox__control.t806-active-box:after {top: 5px}
}
</style>