// JS Global Variables   
    var allQuestions = [];
    var backgroundImageMain;
    const phnx = window.location.host;
    const urlPath = window.location.pathname;
    const urlParts = urlPath.split('/');
    const xml = urlParts[urlParts.length - 1] || ''; 
    var selectedAnswers = []
    var answer = null;
    var answerSelected = false;
    var nextQuestionIndex;
    var previousObject = {}
    var currentIndex;
    var resultData;
    const shopifyCustomerId = ShopifyAnalytics.meta.page.customerId;

    
    //Add jquery before owl-carousel
    let head = document.getElementsByTagName('head')[0];
    let script = document.createElement('script');
    script.type = 'text/javascript';
    script.setAttribute("src","https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js")
    head.appendChild(script);
    script.setAttribute("src","https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js")
    head.appendChild(script);
    script.setAttribute("src","https://shopapp.chargezen.co/packs/js/mixpanel-81ff3abfd21329a7deb5.js")
    head.appendChild(script);

    script.setAttribute("src","https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js")
    head.appendChild(script);

    script = document.createElement('script');
    script.type = 'text/javascript';
    script.setAttribute("src","https://unpkg.com/aos@2.3.1/dist/aos.js")
    head.appendChild(script);
    

    let  stylesheet = document.createElement('link');
    stylesheet.setAttribute("rel", "stylesheet");
    stylesheet.setAttribute("href", "https://shopapp.chargezen.co/assests/cloudfare_rebuy.css");
    document.head.appendChild(stylesheet);

    let mixScript = document.createElement('script');
    mixScript.setAttribute("src","http://cdn.mxpnl.com/libs/mixpanel-2-latest.min.js")
    head.appendChild(mixScript );

    setTimeout(()=>{
        stylesheet.setAttribute("rel", "stylesheet");
        stylesheet.setAttribute("href", "https://unpkg.com/aos@2.3.1/dist/aos.css");
        document.head.appendChild(stylesheet);
    },500)
    
var gloabalMixpanelId;

let scriptInner = document.createElement('script');
scriptInner.type = "text/javascript";
scriptInner.innerHTML = `(function (f, b) {
    if (!b.__SV) {
        var e, g, i, h; window.mixpanel = b; b._i = []; b.init = function (e, f, c) {
            function g(a, d) { var b = d.split("."); 2 == b.length && (a = a[b[0]], d = b[1]); a[d] = function () { a.push([d].concat(Array.prototype.slice.call(arguments, 0))) } } var a = b; "undefined" !== typeof c ? a = b[c] = [] : c = "mixpanel"; a.people = a.people || []; a.toString = function (a) { var d = "mixpanel"; "mixpanel" !== c && (d += "." + c); a || (d += " (stub)"); return d }; a.people.toString = function () { return a.toString(1) + ".people (stub)" }; i = "disable time_event track track_pageview track_links track_forms track_with_groups add_group set_group remove_group register register_once alias unregister identify name_tag set_config reset opt_in_tracking opt_out_tracking has_opted_in_tracking has_opted_out_tracking clear_opt_in_out_tracking start_batch_senders people.set people.set_once people.unset people.increment people.append people.union people.track_charge people.clear_charges people.delete_user people.remove".split(" ");
            for (h = 0; h < i.length; h++)g(a, i[h]); var j = "set set_once union unset remove delete".split(" "); a.get_group = function () { function b(c) { d[c] = function () { call2_args = arguments; call2 = [c].concat(Array.prototype.slice.call(call2_args, 0)); a.push([e, call2]) } } for (var d = {}, e = ["get_group"].concat(Array.prototype.slice.call(arguments, 0)), c = 0; c < j.length; c++)b(j[c]); return d }; b._i.push([e, f, c])
        }; b.__SV = 1.2; e = f.createElement("script"); e.type = "text/javascript"; e.async = !0; e.src = "undefined" !== typeof MIXPANEL_CUSTOM_LIB_URL ?
            MIXPANEL_CUSTOM_LIB_URL : "file:" === f.location.protocol && "https://cdn.mxpnl.com/libs/mixpanel-2-latest.min.js"; g = f.getElementsByTagName("script")[0]; g.parentNode.insertBefore(e, g)
        
            mixpanel.init("467d5df251a711e7b0ae20d18c8fb2e1", {
                debug: true,cross_subdomain_cookie : false, 'loaded': function () {
                    gloabalMixpanelId = mixpanel.get_distinct_id().split(":").pop();
                    defaultFunction(xml, phnx );
                }
            });
        
            global_mixpanel = mixpanel
        
            console.log("mixpanel", mixpanel);
        
            mixpanelIdentify = function (id) {
                mixpanel.identify(id)
            }
        
            mixpanelGetIdentify = function () {
                mixpanel.identify()
            }
        
            mixpanelTrack = function (name, props) {
                if (props) {
                    mixpanel.track(name, props)
                } else {
                    mixpanel.track(name)
                }
            }
        
            mixpanelPeopleSetOnce = async function (props) {
                let response = await mixpanel.people.set_once(props);
                return response;
            }
        
            mixpanelAlias = function (value) {
                mixpanel.alias(value)
            }
    }
}) (document, window.mixpanel || []); `;
head.appendChild(scriptInner);

    function removeNullElements(array) {
        var filtered = array?.filter(function (el) {
            return el != null;
        });
        return filtered
    }
    function setAnswers(type, questionNumber, selectedAnswer = null) {
        answerSelected = true;
        $(".quiz-kit-question-next-button").removeAttr("disabled");
        $(".quiz-kit-question-next-button").removeClass("disabled");
        selectedAnswers = selectedAnswers.map((val) => {
            if (val?.questionNumber != +questionNumber) {
                return val;
            }
        })
        let obj = { questionNumber: +questionNumber, answers: [] }
        let currentQuestion = allQuestions?.find((q) => q.id == +questionNumber)
        if (type == "radio-buttons") {
            let selected_answer = +$('input[name="answers"]:checked').val()
            $('input[name="answers"]:checked').each(function () {
                obj?.answers.push(+this.value);
            });
            if (!currentQuestion?.multisection) {
                let questionNumber = currentQuestion?.answers?.find((a) => +a.id == +selectedAnswer)?.next_question_id
                let nextQuestion = allQuestions?.findIndex((q) => +q?.id == +currentQuestion?.id) + 1
                // if (questionNumber) {
                //     let prev = allQuestions?.findIndex((q) => q?.id == currentQuestion.id)
                //     takeQuiz(null, questionNumber, prev)
                // }
                if (allQuestions[nextQuestion]) {
                    console.log("nextQuestion", nextQuestion, currentQuestion)
                    setTimeout(() => {
                        takeQuiz(nextQuestion, currentQuestion.id, selected_answer)

                    }, 500)
                }
            }

        } else if (type == "checkbox") {
            $('input[name="answers[]"]:checked').each(function () {
                obj?.answers.push(+this.value);
            });

        } else if (type == "slider") {
            answer = selectedAnswer;
            obj?.answers.push(+selectedAnswer)
            $(".parent_slider_wrapper").removeClass("active-class")
            $(".selector_main").removeClass("active-class")
            $(".selector_range_" + selectedAnswer).addClass("active-class")
            $("button.selector_range_" + selectedAnswer).addClass("active-class")
            $('input[name="answers"]').val(answer)
            if (!currentQuestion?.multisection) {
                let questionNumber = currentQuestion?.answers?.find((a) => +a.id == +selectedAnswer)?.next_question_id
                let nextQuestion = allQuestions?.findIndex((q) => +q?.id == +currentQuestion?.id) + 1
                // if (questionNumber) {
                //     let prev = allQuestions?.findIndex((q) => q?.id == currentQuestion.id)
                //     takeQuiz(null, questionNumber, prev)
                // }
                if (allQuestions[nextQuestion]) {
                    console.log("nextQuestion", nextQuestion, currentQuestion)
                    setTimeout(() => {
                        takeQuiz(nextQuestion)
                    }, 500)
                }
            }
        }
        selectedAnswers.push(obj);

        selectedAnswers = selectedAnswers.filter(function (element) {
            return element !== undefined;
        });
    }

    function addToCart(variant_id) {
        let formData = {
            'items': [{
                'id': variant_id,
                'quantity': 1
            }]
        };
        fetch(window.Shopify.routes.root + 'cart/add.js', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(formData)
        })
            .then(response => {
                document.querySelector(".js-cart-toggle-trigger").click()
            })
            .catch((error) => {
                console.error('Error:', error);
            });

    }

    function addAllProductsToBag() {
        let formData = {}
        formData["items"] = []
        removeNullElements(resultData.priorty_products)?.map((p) => {
            formData["items"].push({ id: p.variant?.variant_id, quantity: 1 })
        })
        removeNullElements(resultData.support_products)?.map((p) => {
            formData["items"].push({ id: p.variant?.variant_id, quantity: 1 })
        })
        removeNullElements(resultData.additional_products)?.map((p) => {
            formData["items"].push({ id: p.variant?.variant_id, quantity: 1 })
        })

        fetch(window.Shopify.routes.root + 'cart/add.js', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(formData)
        })
            .then(response => {
                document.querySelector(".js-cart-toggle-trigger").click()
            })
            .catch((error) => {
                console.error('Error:', error);
            });
    }

    function takeQuiz(i, previousQuestionId = null, answerId = null) {
        answerSelected = false;
        let previousQuestion = allQuestions?.find((q) => q?.id == previousQuestionId)
        let previousIndex = allQuestions?.findIndex((q) => q.id == previousQuestionId)
        let selectedAnswer = previousQuestion?.answers?.find((a) => a.id == +answerId)
        i = previousQuestionId && selectedAnswer?.next_question_id ? selectedAnswer?.next_question_id - 1 : i
        let nextIndex = i + 1;
        previousObject[i] = previousQuestionId ? previousIndex : previousObject[i]
        let prev_index = previousQuestionId ? previousIndex : i - 1;
        if ($(".answer_main_container").html()) {

            $.ajax({
                type: "post",
                data: $(".answer_main_container").serialize() + "&mixpanel_id=" + gloabalMixpanelId,
                url: 'https://' + phnx + '/a/chargezen/saveAnswer'
            })
        }
        // let currentQuestion = i ? allQuestions[i] : allQuestions?.find((a) => +a.question_number == +questionNumber);
        // let prev_index = i ? i - 1 : previousIndex
        let currentQuestion = allQuestions[i]

        let selectedInputAnswer = +selectedAnswers.find((val) => { return +val?.questionNumber === +currentQuestion?.id })?.answers[0]

        let getSelectedInputAnswer = currentQuestion?.answers?.find((ans) => ans?.id == +selectedInputAnswer)
        nextIndex = getSelectedInputAnswer?.next_question_id ? getSelectedInputAnswer?.next_question_id - 1 : nextIndex

        if (!currentQuestion || selectedAnswer?.redirect_url == "result_page") {
            let answers = []
            selectedAnswers?.map((val) => { answers.push(val.answers) })
            mixpanel.track("Submitted Beauty Quiz")
            $.ajax({
                type: "post",
                data: "answers=" + answers?.flat(),
                url: 'https://' + phnx + '/a/chargezen/showResult',
                success: function (response) {
                    resultData = response
                    $("#quiz-kit-container").html(
                        `<div class="result_main quiz_questions_wrapper">
                            <div class="result_heading">YOU DID IT!</div>
                            <div class="result_sub_heading">You are one step closer to a truly custom protocol that supports YOUR goals and YOUR life.</div>
                            <h2 class="product_title">Priority</h2>
                                <div class="products">
                                    ${removeNullElements(response?.priorty_products)?.map((val) => {
                            return (`
                                            <div class="product_card">
                                                <div class="card_img">
                                                    <a href="${val?.variant?.preview_url}" target="_blank">
                                                        <img class="result_image" src="${val?.variant?.image}">
                                                    </a>
                                                </div>
                                                <div class="card_body">
                                                    <div class="title">${val?.variant?.title}</div>
                                                    <div class="price">${val?.variant?.price}</div>
                                                    <div class="add_to_cart_button">
                                                        <button class="addToCart_button" onclick="addToCart(${val?.variant?.variant_id})">Add to bag</button>
                                                    </div>
                                                </div>
                                            </div>
                                        `)
                        }).join('')
                        }</div>
                            <h2 class="product_title">Support</h2>
                            <div class="products">
                                ${removeNullElements(response?.support_products)?.map((val) => {
                            return (`
                                                    <div class="product_card">
                                                        <div class="card_img">
                                                            <a href="${val?.variant?.preview_url}" target="_blank">
                                                                <img class="result_image" src="${val?.variant?.image}">
                                                            </a>
                                                        </div>
                                                        <div class="card_body">
                                                            <div class="title">${val?.variant?.title}</div>
                                                            <div class="price">${val?.variant?.price}</div>
                                                            <div class="add_to_cart_button">
                                                                <button class="addToCart_button" onclick="addToCart(${val?.variant?.variant_id})">Add to bag</button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                `)
                        }).join('')
                        }
                            </div>

                            <h2 class="product_title">Additional Benefit</h2>
                            <div class="products">
                                ${removeNullElements(response?.additional_products)?.map((val) => {
                            return (`
                                                    <div class="product_card">
                                                        <div class="card_img">
                                                            <a href="${val?.variant?.preview_url}" target="_blank">
                                                                <img class="result_image" src="${val?.variant?.image}">
                                                            </a>
                                                        </div>
                                                        <div class="card_body">
                                                            <div class="title">${val?.variant?.title}</div>
                                                            <div class="price">${val?.variant?.price}</div>
                                                            <div class="add_to_cart_button">
                                                                <button class="addToCart_button" onclick="addToCart(${val?.variant?.variant_id})">Add to bag</button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                `)
                        }).join('')
                        }
                            </div>
                            <div class="result_footer_wrapper">
                                <button class="action_button add_all_bag" onclick="addAllProductsToBag()">Add all to bag</button>
                                <button class="action_button retake" onclick="takeQuiz(0)">Retake quiz</button>
                            </div>
                            
                        <div>`
                    )
                }
            })
        } else {

            console.log("currentQuestion", currentQuestion)
            $("#quiz-kit-container").html(`
                <div class="header_navigation quiz-kit-question-navigation" data-aos="fade-left" data-aos-delay="600" data-aos-offset="-300" class="sc-fzoXzr next_button_main_container aos-init aos-animate" style="font-family: Jost;">
                    ${allQuestions[prev_index] ? `
                    <button tabindex="0" onclick="takeQuiz(${prev_index})" class="quiz-kit-question-prev-button sc-fzpjYC eaigtm" style="height: auto; min-height: auto; width: auto; font-family: inherit; font-size: 14px; color: rgb(1, 78, 59); font-weight: 600; background: none; border: none;"><svg width="12px" height="10px" viewBox="0 0 14 12" version="1.1"><title>Back</title><g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="Next/Back-Buttons" transform="translate(0.000000, -54.000000)" fill="#014e3b" fill-rule="nonzero" stroke="#014e3b"><g id="Group" transform="translate(0.000000, 50.000000)"><path d="M7.02814142,4 C7.10303865,4.00628851 7.17617741,4.03773106 7.2334898,4.09432766 L11.9032854,8.70580175 C12.0322382,8.83314409 12.0322382,9.03960679 11.9032854,9.16694917 C11.7743325,9.29429148 11.5652587,9.29429148 11.4363058,9.16694917 L7.33008912,5.11198996 L7.33104051,16.4516973 L7.32572085,16.5103293 C7.29776369,16.6624347 7.1629516,16.7777778 7.00085901,16.7777778 C6.81848843,16.7777778 6.67064429,16.6317903 6.67063168,16.4516973 L6.6696803,5.11198996 L2.56369419,9.16694917 C2.44906944,9.28014233 2.27113919,9.29271938 2.14244655,9.2046802 L2.09671464,9.16694917 C1.96776179,9.03960679 1.96776179,8.83314409 2.09671464,8.70580175 L6.76651023,4.09432766 C6.82382262,4.03773106 6.89696138,4.00628851 6.97185861,4 L7.02814142,4 Z" id="Path" transform="translate(7.000000, 10.388889) rotate(-90.000000) translate(-7.000000, -10.388889) "></path></g></g></g></svg><span>Back</span></button>
                    ` : ``}
                    
                    <button onclick="takeQuiz(${nextIndex})" tabindex="0" ${currentQuestion.answers.length == 0 ? "" : "disabled"} class="quiz-kit-question-next-button sc-fzpjYC hqAaHa ${currentQuestion.answers.length == 0 ? "" : "disabled"}" color="#000000" letter-spacing="1" style="height: auto; min-height: auto; width: auto; font-family: inherit; font-size: 14px; color: rgb(0, 0, 0); font-weight: 600; background: none; border: none;">
                    <span>${allQuestions[nextIndex] ? "Next" : "See Results"}</span>
                    <svg width="12px" height="10px" viewBox="0 0 14 12" version="1.1">
                        <title>${allQuestions[nextIndex] ? "Next" : "See Results"}</title>
                        <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                        <g id="Next/Back-Buttons" transform="translate(-263.000000, -54.000000)" fill="#000000" fill-rule="nonzero" stroke="#000000">
                        <g id="Group-3-Copy" transform="translate(0.000000, 50.000000)"><g id="Group-2" transform="translate(214.000000, 0.000000)">
                        <path d="M56.0281414,4 C56.1030387,4.00628851 56.1761774,4.03773106 56.2334898,4.09432766 L60.9032854,8.70580175 C61.0322382,8.83314409 61.0322382,9.03960679 60.9032854,9.16694917 C60.7743325,9.29429148 60.5652587,9.29429148 60.4363058,9.16694917 L56.3300891,5.11198996 L56.3310405,16.4516973 L56.3257208,16.5103293 C56.2977637,16.6624347 56.1629516,16.7777778 56.000859,16.7777778 C55.8184884,16.7777778 55.6706443,16.6317903 55.6706317,16.4516973 L55.6696803,5.11198996 L51.5636942,9.16694917 C51.4490694,9.28014233 51.2711392,9.29271938 51.1424466,9.2046802 L51.0967146,9.16694917 C50.9677618,9.03960679 50.9677618,8.83314409 51.0967146,8.70580175 L55.7665102,4.09432766 C55.8238226,4.03773106 55.8969614,4.00628851 55.9718586,4 L56.0281414,4 Z" id="Path-Copy" transform="translate(56.000000, 10.388889) rotate(-270.000000) translate(-56.000000, -10.388889) "></path></g></g></g></g>
                    </svg>
                    </button>
                </div>    

                <div class="quiz_questions_wrapper aos-init aos-animate" >
                <div class="quiz-kit-container" class="sc-AxirZ quiz_question_main aos-init aos-animate" >
                <h1 class="quiz-kit-question-title"  data-aos="fade-left" data-aos-delay="200" data-aos-offset="-300">
                ${currentQuestion?.content}
                </h1>
                <p id="quiz-kit-question-description aos-init aos-animate" data-aos="fade-left" data-aos-delay="300" data-aos-offset="-300" >
                ${currentQuestion?.sub_heading}
                </p>
                <div class="aos-init aos-animate quiz-kit-question-grid aos-init aos-animate" data-aos="fade-left" data-aos-delay="500" data-aos-offset="-300" >
                <form class="aos-init aos-animate answer_main_container sc-fznBtT quiz_form ${currentQuestion?.answer_type == "slider" ? "slider-stick" : ""}">
                    ${currentQuestion?.answer_type == "radio-buttons" && !currentQuestion?.multisection ?
                    currentQuestion?.answers?.map((answer, index) => {
                        console.log("aaaaaa",)
                        return (`
                                    <div class="answer_main aos-init aos-animate"  data-aos="fade-left" data-aos-delay="500" data-aos-offset="-600">
                                        <input type="radio" id="answer_${answer.id}" name="answers" value="${answer?.id}" onchange="setAnswers('radio-buttons',${currentQuestion?.id})" ${selectedAnswers.find((val) => { return +val?.questionNumber === +currentQuestion?.id })?.answers?.includes(+answer?.id) ? "checked" : ""}>
                                        <label class="radio-label radio-label-${answer.id}" data-aos="fade-left" data-aos-delay="500" data-aos-offset="-600" for="answer_${answer.id}">${answer?.title}</label>
                                    </div>`)
                    }).join('')
                    : currentQuestion?.answer_type == "Checkbox" || currentQuestion?.multisection ?
                        currentQuestion?.answers?.map((answer) => {
                            return (`
                                        <div class="answer_main aos-init aos-animate"  data-aos="fade-left" data-aos-delay="500" data-aos-offset="-600">
                                            <input type="checkbox" id="answer_${answer.id}" name="answers[]" value="${answer?.id}" onchange="setAnswers('checkbox',${currentQuestion?.id})" ${selectedAnswers.find((val) => { return +val?.questionNumber === +currentQuestion?.id })?.answers?.includes(answer?.id) ? "checked" : ""}>
                                            <label class="radio-label radio-label-${answer.id}" data-aos="fade-left" data-aos-delay="500" data-aos-offset="-600" for="answer_${answer.id}">${answer?.title}</label>
                                        </div>
                                    `)
                        }).join('') : currentQuestion?.answer_type == "slider" ?
                            `

                            <div id="quiz-kit-question-grid" data-aos="fade-left" data-aos-delay="500" data-aos-offset="-600" >
                                <input type="hidden" value="${selectedAnswers.find((val) => { return +val?.questionNumber === +currentQuestion?.id })?.answers?.includes(answer?.id) ? answer?.id : ""}" name="answers">
                                ${currentQuestion?.answers?.map((answer) => {
                                return (`
                                            <button style="width: calc(100%/${currentQuestion?.answers.length})" type="button" class="${selectedAnswers.find((val) => { return +val?.questionNumber === +currentQuestion?.id })?.answers?.includes(answer?.id) ? "active-class" : ""} selector_range_${answer.id} parent_slider_wrapper quiz-kit-question-slider" data-answer="${answer.id}" onclick="setAnswers('slider', ${currentQuestion?.id}, ${answer.id} )" data-aos="fade-left" data-aos-delay="500" data-aos-offset="-600" >
                                                <div onclick="setAnswers('slider', ${currentQuestion?.id}, ${answer.id} )" class="selector_main selector_range_${answer.id} ${selectedAnswers.find((val) => { return +val?.questionNumber === +currentQuestion?.id })?.answers?.includes(answer?.id) ? "active-class" : ""}">&nbsp;</div>
                                            </button>
                                        `)
                            }).join('')
                            }
                            </div>` : ``
                }
                </form>
            </div>
            <div data-aos="fade-left" data-aos-delay="500" data-aos-offset="-300" id="quiz-kit-question-tooltip" class="sc-fzpdyU tooltip_main_container aos-init aos-animate">
            <div class="sc-fzppip tooltip_svg_container show_tooltip ${currentQuestion?.tooltip_heading || currentQuestion?.tooltip_desc ? "" : "hidden"}">
                <svg xmlns="http://www.w3.org/2000/svg" width="34" height="34" viewBox="0 0 34 34"><defs><clipPath id="l23ga"><path fill="#ffffff" d="M5 18c0-7.732 5.373-14 12-14s12 6.268 12 14-5.373 14-12 14S5 25.732 5 18z"></path></clipPath></defs><g><g><path fill="#ffffff" d="M5 18c0-7.732 5.373-14 12-14s12 6.268 12 14-5.373 14-12 14S5 25.732 5 18z"></path><path fill="none" stroke="#707070" stroke-miterlimit="20" stroke-width="2" d="M5 18c0-7.732 5.373-14 12-14s12 6.268 12 14-5.373 14-12 14S5 25.732 5 18z" clip-path="url(&quot;#l23ga&quot;)"></path></g><g><path fill="#fa3d0d" d="M16.992 11.786c-.924 0-1.676-.703-1.676-1.635s.76-1.626 1.676-1.626c.932 0 1.692.694 1.692 1.626 0 .932-.76 1.635-1.692 1.635zm1.56 13.06h-3.121V13.07h3.122zM17 0C7.61 0 0 7.61 0 17s7.61 17 17 17 17-7.61 17-17S26.39 0 17 0z" style="
                    fill: #fa3d0d;
                "></path></g></g></svg>
            </div>
            <div data-content="true" transform="translateX(-50%)" class="sc-fznBMq tooltip_sub_container show_tooltip">
                <h1 >
                    ${currentQuestion?.tooltip_heading}
                </h1>
                <p >
                    ${currentQuestion?.tooltip_desc}
                </p>
            </div>
            </div>
            <div class="quiz-kit-question-navigation" data-aos="fade-left" data-aos-delay="600" data-aos-offset="-300" class="sc-fzoXzr next_button_main_container aos-init aos-animate" style="font-family: Jost;">
            ${allQuestions[prev_index] ? `
            <button tabindex="0" onclick="takeQuiz(${prev_index})" class="quiz-kit-question-prev-button sc-fzpjYC eaigtm" style="height: auto; min-height: auto; width: auto; font-family: inherit; font-size: 14px; color: rgb(1, 78, 59); font-weight: 600; background: none; border: none;"><svg width="12px" height="10px" viewBox="0 0 14 12" version="1.1"><title>Back</title><g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="Next/Back-Buttons" transform="translate(0.000000, -54.000000)" fill="#014e3b" fill-rule="nonzero" stroke="#014e3b"><g id="Group" transform="translate(0.000000, 50.000000)"><path d="M7.02814142,4 C7.10303865,4.00628851 7.17617741,4.03773106 7.2334898,4.09432766 L11.9032854,8.70580175 C12.0322382,8.83314409 12.0322382,9.03960679 11.9032854,9.16694917 C11.7743325,9.29429148 11.5652587,9.29429148 11.4363058,9.16694917 L7.33008912,5.11198996 L7.33104051,16.4516973 L7.32572085,16.5103293 C7.29776369,16.6624347 7.1629516,16.7777778 7.00085901,16.7777778 C6.81848843,16.7777778 6.67064429,16.6317903 6.67063168,16.4516973 L6.6696803,5.11198996 L2.56369419,9.16694917 C2.44906944,9.28014233 2.27113919,9.29271938 2.14244655,9.2046802 L2.09671464,9.16694917 C1.96776179,9.03960679 1.96776179,8.83314409 2.09671464,8.70580175 L6.76651023,4.09432766 C6.82382262,4.03773106 6.89696138,4.00628851 6.97185861,4 L7.02814142,4 Z" id="Path" transform="translate(7.000000, 10.388889) rotate(-90.000000) translate(-7.000000, -10.388889) "></path></g></g></g></svg><span>Back</span></button>
            ` : ``}
            
            <button onclick="takeQuiz(${nextIndex})" tabindex="0" ${(answerSelected || currentQuestion.answers.length == 0) ? "" : "disabled"} class="quiz-kit-question-next-button sc-fzpjYC hqAaHa ${(answerSelected || currentQuestion.answers.length == 0) ? "" : "disabled"}" color="#000000" letter-spacing="1" style="height: auto; min-height: auto; width: auto; font-family: inherit; font-size: 14px; color: rgb(0, 0, 0); font-weight: 600; background: none; border: none;">
            <span>${allQuestions[nextIndex] ? "Next" : "See Results"}</span>
            <svg width="12px" height="10px" viewBox="0 0 14 12" version="1.1">
                <title>Next</title>
                <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                <g id="Next/Back-Buttons" transform="translate(-263.000000, -54.000000)" fill="#000000" fill-rule="nonzero" stroke="#000000">
                <g id="Group-3-Copy" transform="translate(0.000000, 50.000000)"><g id="Group-2" transform="translate(214.000000, 0.000000)">
                <path d="M56.0281414,4 C56.1030387,4.00628851 56.1761774,4.03773106 56.2334898,4.09432766 L60.9032854,8.70580175 C61.0322382,8.83314409 61.0322382,9.03960679 60.9032854,9.16694917 C60.7743325,9.29429148 60.5652587,9.29429148 60.4363058,9.16694917 L56.3300891,5.11198996 L56.3310405,16.4516973 L56.3257208,16.5103293 C56.2977637,16.6624347 56.1629516,16.7777778 56.000859,16.7777778 C55.8184884,16.7777778 55.6706443,16.6317903 55.6706317,16.4516973 L55.6696803,5.11198996 L51.5636942,9.16694917 C51.4490694,9.28014233 51.2711392,9.29271938 51.1424466,9.2046802 L51.0967146,9.16694917 C50.9677618,9.03960679 50.9677618,8.83314409 51.0967146,8.70580175 L55.7665102,4.09432766 C55.8238226,4.03773106 55.8969614,4.00628851 55.9718586,4 L56.0281414,4 Z" id="Path-Copy" transform="translate(56.000000, 10.388889) rotate(-270.000000) translate(-56.000000, -10.388889) "></path></g></g></g></g>
            </svg>
            </button>
            </div>
            </div>
            </div>
            `)

            currentQuestion?.answers?.map((answer, index) => {
                console.log("testing", selectedAnswers.find((val) => { return +val?.questionNumber === +currentQuestion?.id })?.answers?.includes(+answer?.id))
                let selectedAnwser = selectedAnswers.find((val) => { return +val?.questionNumber === +currentQuestion?.id })?.answers?.includes(+answer?.id)
                if (selectedAnwser) {
                    answerSelected = true;
                    $(".quiz-kit-question-next-button").removeAttr("disabled");
                    $(".quiz-kit-question-next-button").removeClass("disabled");
                    if (selectedAnwser?.redirect_url == "result_page") {
                        $(".quiz-kit-question-next-button").html("See Results")
                    }
                }
            })

            $('.show_tooltip').hover(mouseEnter, mouseLeave);
            function mouseEnter() {
                $(".tooltip_sub_container").css("visibility", "visible")
                $(".tooltip_sub_container").css("opacity", "1")
            };
            function mouseLeave() {
                $(".tooltip_sub_container").css("visibility", "hidden")
                $(".tooltip_sub_container").css("opacity", "0")
            };
        }
    }
    function mapMixpanelWithCustomer() {
        if (shopifyCustomerId) {
            const response = fetch('https://' + phnx + '/a/chargezen/map_mixpanel_with_customer?customer_id=' + shopifyCustomerId + "&mixpanel_id=" + gloabalMixpanelId, {
                method: "GET"
            }).then((response) => response.json())
                .then((data) => {
                    if (data?.satus) {
                        console.log("Customer Successfully mapped")
                    } else {
                        console.log(data?.error)
                    }
                })
        }
    }
async function defaultFunction(xml, phnx) {
        var apiData
        if (xml) {
            var dataUrl = 'https://' + phnx + '/a/chargezen/getQuiz?id=' + xml + '&mixpanel_id=' + gloabalMixpanelId;
            const template = (data) => `
            <div class="main_div_container">
            <style>
                .result_main .result_image{
                    width: 100%;
                }
                .result_main .result_heading {
                    font-size: 2em!important;
                    font-weight: 500!important;
                    color: #014e3b!important;
                    line-height: 1.15!important;
                }
            
                .result_main .result_sub_heading {
                    font-family: "Roc Grotesk";
                    font-weight: 400;
                    width: 100%;
                    margin: 0px auto 20px;
                    line-height: 1.5;
                    font-size: 16px;
                    color: rgb(0, 0, 0);
                    text-transform: none;
                    letter-spacing: initial;
                }

                .page__head {
                    display: none !important;
                }
                .result_main .product_card {
                    position: relative;
                    padding: 0px 10px 40px;
                    width: 30.3333%;
                    max-width: 100%;
                    text-align: center;
                    -webkit-box-align: center;
                    align-items: center;
                }
            
                .result_main .products {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin-top: 55px;
                    flex-wrap: wrap;
                }
            
                .result_main .title {
                    font-family: "Roc Grotesk";
                    font-weight: 400;
                    width: 100%;
                    margin: 30px auto 10px;
                    line-height: 1.2;
                    font-size: 16px;
                    color: rgb(0, 0, 0);
                    text-transform: none;
                    letter-spacing: initial;
                }
            
                .result_main .card_img {
                    max-width: 142px;
                    width: 100%;
                    text-align: center;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin: auto;
                }
                
                button.quiz-kit-question-slider {
                    height: auto;
                    min-height: auto;
                    position: relative;
                    text-align: center;
                    float: left;
                    font-family: "Roc Grotesk";
                    font-size: 16px;
                    font-weight: 400;
                    transition: all 215ms ease 0s;
                    cursor: pointer;
                    outline: none;
                    border: none;
                    padding: 0px;
                    letter-spacing: initial;
                    color: rgb(1, 78, 59) !important;
                    background: none !important;
                }
                
                button.quiz-kit-question-slider::before {
                    content: "";
                    position: relative;
                    display: block;
                    margin: 0px auto 20px;
                    width: 2px;
                    height: 46px;
                    background-color: rgb(0, 0, 0);
                    z-index: 5;
                    transition: background-color 215ms ease-in-out 0s;
                }
                
                button.quiz-kit-question-slider:after {
                    content: "";
                    position: absolute;
                    top: 22px;
                    left: -50%;
                    width: 100%;
                    height: 2px;
                    background-color: rgb(0, 0, 0);
                    z-index: 0;
                }
                
               
                
                .quiz-kit-question-grid {
                }
                
                div#quiz-kit-question-grid {
                    width: 100%;
                }
                
                .quiz-kit-question-slider span {
                    display: none;
                }
                
                .selector_main {
                    position: absolute;
                    top: 10px;
                    left: calc(50% - 12px);
                    border-radius: 50%;
                    width: 24px;
                    height: 24px;
                    line-height: 30px;
                    background-color: transparent;
                    border: 2px solid transparent;
                    z-index: 5;
                    transition: all 215ms ease-in-out 0s;
                }
                
                .selector_main.active-class {
                    background-color: rgb(255, 255, 255);
                    border-color: rgb(1, 78, 59);
                }
                
                button.quiz-kit-question-slider:hover div {
                    background-color: rgb(255, 255, 255);
                    border-color: rgb(1, 78, 59);
                }


                .main_div_container {
                    height: fit-content;
                }

                .answer_main_container{
                    display: flex;
                    justify-content: space-between;
                    margin: auto;
                    width: 100%;
                    flex-wrap: wrap;
                }

                .answer_main_container .answer_main{
                    width: 50%;
                }

                .answer_main_container .answer_main input[type="radio"]:checked + label,
                .answer_main_container .answer_main input[type="checkbox"]:checked + label,
                .answer_main_container .answer_main .radio-label:hover {
                    background: #014e3b;
                    color: #fff;
                    border-color: #014e3b;
                    box-shadow: #00000026;
                }
                .answer_main_container .answer_main .radio-label {
                    font-family: "Roc Grotesk";
                    display: flex;
                    -webkit-box-align: center;
                    align-items: center;
                    margin: 0;
                    color: rgb(1, 78, 59);
                    cursor: pointer;
                    border: 1px solid rgb(1, 78, 59);
                    border-radius: 15px;
                    background: rgb(255, 255, 255);
                    outline: none;
                    transition: all 0.25s ease 0s;
                    letter-spacing: initial;
                    text-align: left;
                    width: auto;
                    min-height: 60px;
                    padding: 20px;
                    font-size: 16px;
                    height: 100%;
                }   
                .quiz_questions_wrapper .quiz-kit-container .quiz-kit-question-title {
                    font-family: "Roc Grotesk";
                    font-weight: 400;
                    width: 100%;
                    margin: 0px auto 20px;
                    line-height: 1.2 !important;
                    font-size: 30px;
                    color: rgb(1, 78, 59);
                    text-transform: none;
                    letter-spacing: initial;
                }
        
                .quiz_kit_sub {
                    position: relative;
                    width: 100%;
                    height: 100%;
                    min-height: 700px;
                    z-index: 0;
                }
        
                .quiz-kit-content_main {
                    min-height: 700px;
                    position: relative;
                    display: flex;
                    flex-direction: row;
                    width: 100%;
                    height: 100%;
                }
        
                .quiz_kit_sub *,
                .quiz_kit_sub ::before,
                .quiz_kit_sub ::after {
                    box-sizing: border-box;
                }
        
                .quiz_kit_question_image {
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    border-radius: inherit;
                }
        
                .quiz_kit_question_image picture {
                    width: 100%;
                    height: 100%;
                    border-radius: inherit;
                }
        
                .quiz_kit_question_image img {
                    display: block;
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    border-radius: inherit;
                }
        
                .quiz_body_main.bottom-center,
                .quiz_body_main.center-center,
                .quiz_body_main.top-center {
                    text-align: center;
                }
        
                .quiz_questions_wrapper{
                    position: relative;
                    max-width: 1060px;
                    margin: 0px auto;
                    width: 100%;
                    text-align: center;
                    visibility: visible;
                    z-index: 3;
                    padding: 15px 50px 60px;
                }
        
                .quiz_intro_main {
                    position: relative;
                    display: flex;
                    flex-direction: column;
                    -webkit-box-pack: center;
                    justify-content: center;
                    -webkit-box-align: center;
                    align-items: center;
                    width: 100%;
                    height: auto;
                    min-height: unset;
                    background-color: rgb(255, 255, 255);
                }
        
        
                body * {
                    transition-timing-function: ease;
                    transition-duration: .3s;
                    pointer-events: auto;
                    transition-property: opacity, transform;
                    transition-delay: .3s;
                }
        
                .quiz_intro_overlay {
                    position: absolute;
                    inset: 0px;
                    width: 100%;
                    height: 100%;
                    z-index: 2;
                }
        
                .quiz_heading_main {
                    white-space: normal;
                    max-width: 100%;
                    text-align: inherit;
                }
        
                .quiz_button_main {
                    position: relative;
                    display: inline-flex;
                    -webkit-box-align: center;
                    align-items: center;
                    -webkit-box-pack: center;
                    justify-content: center;
                    text-transform: uppercase;
                    max-width: 100%;
                    cursor: pointer;
                    outline: none;
                    transition: all 0.25s ease 0s;
                }
        
                /* For questions */
                .quiz_question_main {
                    position: relative;
                    max-width: 1060px;
                    margin: 0px auto;
                    width: 100%;
                    text-align: center;
                    visibility: visible;
                    z-index: 3;
                    padding: 150px 55px 100px;
                }
        
                .form_main_container {
                    display: flex;
                    flex-wrap: wrap;
                    width: calc(100% + 20px);
                    margin: 50px -10px 0px;
                    text-align: center;
                }
        
                .quiz_form {
                    max-width: 100%;
                }
        
                input,
                textarea,
                select {
                    display: block;
                    position: relative;
                    font-family: "Work Sans", sans-serif;
                    font-weight: 400;
                    font-style: normal;
                    font-size: 14px;
                    line-height: 1.5;
                    font-size: 14px;
                    line-height: normal;
                    border: 0;
                    padding: 10px 14px;
                    -webkit-appearance: none;
                    -moz-appearance: none;
                }
        
                .input_answer_main {
                    width: 370px;
                    height: 55px;
                    max-width: calc(100% - 20px);
                    font-weight: 600;
                    margin: 0px 10px;
                    border: 1px solid rgb(0, 0, 0);
                    border-radius: 30px;
                    font-size: 16px;
                    font-family: Jost;
                    color: rgb(0, 0, 0);
                    background: rgb(255, 255, 255);
                    padding: 10px 20px;
                    outline: none;
                    transition: all 0.3s ease 0s;
                    letter-spacing: initial;
                    display: initial !important;
                }
        
                .tooltip_main_container {
                    font-family: Cartograph-Mono, sans-serif;
                    font-size: 14px;
                    position: relative;
                    width: 34px;
                    cursor: pointer;
                    margin: 30px auto;
                    z-index: 1;
                }
        
                .tooltip_svg_container {
                    font-size: 14px;
                }
        
                svg:not(:root) {
                    overflow: hidden;
                }
        
                .tooltip_sub_container {
                    width: 300px;
                    background: rgb(255, 255, 255);
                    position: absolute;
                    inset: auto auto calc(100% + -5px) 50%;
                    transform: translateX(-50%);
                    z-index: -1;
                    opacity: 0;
                    visibility: hidden;
                    box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 5px;
                    padding: 15px 15px 20px;
                    max-height: 195px;
                    overflow: auto;
                }
        
                .next_button_main_container {
                    position: relative;
                    display: flex;
                    -webkit-box-align: center;
                    align-items: center;
                    -webkit-box-pack: center;
                    justify-content: center;
                    margin: 40px 0px 0px;
                    max-width: 100%;
                }
        
                .quiz_questions_wrapper {
                    position: relative;
                    display: flex;
                    flex-direction: column;
                    -webkit-box-pack: center;
                    justify-content: center;
                    -webkit-box-align: center;
                    align-items: center;
                    width: 100%;
                    height: 100%;
                    min-height:unset;
                }
                
                h1#quiz_intro_title {
                    font-weight: 600;
                    width: 100%;
                    margin: 0px auto 20px;
                    line-height: 1.2;
                    font-size: 40px;
                    color: rgb(1, 78, 59);
                    text-transform: none;
                    letter-spacing: initial;
                }
                p#quiz_intro_text {
                    font-weight: 400;
                    width: 100%;
                    margin: 0px auto 20px;
                    line-height: 1.5;
                    font-size: 18px;
                    color: rgb(0, 0, 0);
                    text-transform: none;
                    letter-spacing: initial;
                }

                button#take_quiz_button {
                    padding: 16px;
                    border-radius: 100px;
                    width: auto;
                    min-width: 160px;
                    font-size: 13px;
                    font-family: "Roc Grotesk";
                    font-weight: 600;
                    margin: 10px 0px 0px;
                    color: rgb(255, 255, 255);
                    background-color: rgb(250, 61, 13);
                    border: 1px solid rgb(250, 61, 13);
                    line-height: 1.3;
                    height: auto;
                    min-height: auto;
                    letter-spacing: initial;
                }

                .tooltip_sub_container h1 {
                    font-family: "Roc Grotesk";
                    font-weight: 600;
                    width: 100%;
                    margin: 0px auto 10px;
                    line-height: 1.2;
                    font-size: 14px;
                    color: rgb(0, 0, 0);
                    text-transform: none;
                    letter-spacing: initial;
                }
                
                .tooltip_sub_container p {
                    font-family: "Roc Grotesk";
                    font-weight: 400;
                    width: 100%;
                    margin: 0px auto;
                    line-height: 1.5;
                    font-size: 12px;
                    color: rgb(0, 0, 0);
                    text-transform: none;
                    letter-spacing: initial;
                }

                .quiz_intro_main div#quiz-kit-container {
    width: 100%;
}

.quiz_intro_main div#quiz-kit-container .header_navigation.quiz-kit-question-navigation {
    position: relative;
    z-index: 1;
}

.quiz-kit-question-navigation button.quiz-kit-question-prev-button svg, .quiz-kit-question-navigation button.quiz-kit-question-next-button svg {
    position: relative;
    top: -1px;
}

.quiz_intro_main div#quiz-kit-container .header_navigation.quiz-kit-question-navigation {
    position: relative;
    z-index: 1;
    justify-content: space-between;
    padding: 0 5vw;
}

.quiz_intro_overlay {
    width: 0;
    height: 0;
}
.quiz_questions_wrapper .quiz-kit-container {
    width: 100%;
}

                @media screen and (max-width: 767px) {
                    .quiz_questions_wrapper {
                        width: 100%;
                        min-width: 100%;
                        min-height: 350px;
                        -webkit-box-pack: center !important;
                        justify-content: center !important;
                        -webkit-box-align: center !important;
                        align-items: center !important;
                    }
        
                    .next_button_main_container {
                        -webkit-box-pack: center;
                        justify-content: center;
                    }
        
                    .tooltip_main_container {
                        margin: 30px auto;
                    }
        
                    .quiz_question_main {
                        padding: 100px 20px;
                        text-align: center !important;
                    }
        
                    .quiz_kit_sub {
                        min-height: 350px;
                    }
        
                    .quiz-kit-content_main {
                        flex-direction: column-reverse;
                        min-height: 350px;
                    }
        
                    .quiz_intro_main {
                        width: 100%;
                        min-width: 100%;
                        min-height: 350px;
                        -webkit-box-pack: center !important;
                        justify-content: center !important;
                        -webkit-box-align: center !important;
                        align-items: center !important;
                    }
        
                    .quiz_heading_main {
                        font-size: 30px !important;
                    }
        
                    .helping_text_main {
                        font-size: 15px !important;
                    }
        
                    .helping_text_main {
                        white-space: normal;
                        max-width: 100%;
                        text-align: inherit;
                    }
        
                    .form_main_container {
                        -webkit-box-pack: center !important;
                        justify-content: center !important;
                    }

                    .quiz_questions_wrapper .quiz-kit-container .quiz-kit-question-description{
                        font-family: "Roc Grotesk";
                        font-weight: 400;
                        width: 100%;
                        margin: 0px auto 20px;
                        line-height: 1.5;
                        font-size: 16px;
                        color: rgb(0, 0, 0);
                        text-transform: none;
                        letter-spacing: initial;
                        text-align: center;
                    }
                    .answer_main_container .answer_main {
                        width: 100%;
                    }
                    .answer_main_container .answer_main .radio-label {
                        min-width: 100%;
                    }
                    .quiz_questions_wrapper .quiz-kit-container .quiz-kit-question-title {
                        line-height: 30px;
                        font-size: 24px;

                    }
                    .answer_main_container .answer_main .radio-label {
                        margin: 0px 0px 15px;
                    
                    }
                }

                @media(max-width:567px){
                    .quiz_body_main {
                        padding: 20px 20px 20px;
                    }
                    .answer_main_container .answer_main .radio-label {
                        margin: 0px 0px 15px;

                    }
                    .quiz_questions_wrapper .quiz-kit-container .quiz-kit-question-title {
                        font-size: 20px;
                    }
                }
 
                /* ------ new quiz css ------ */ 
                .header .header__actions .btn:after {
                    display:none;
                    }
                    
                    .header .header__actions .btn {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        background: #FA3D0D;
                        border: 1px solid #FA3D0D;
                        font-size: 18px;
                        line-height: normal;
                    }

                    .header .header__actions .btn:hover {
                        color: #fa3d0d;
                        background: #fff;
                        border-color: #014e3b;
                    }

                    .quiz_intro_main div#quiz-kit-question-image {
                        top: 0;
                    }

                    p#quiz-kit-question-description {
                font-family: "Roc Grotesk";
            }

 .quiz_intro_main {
    padding-top: 200px;
    padding-bottom: 60px;
}
.quiz-kit-question-navigation button {
    letter-spacing: 1px;
}


                    .quiz_body_main p#quiz-kit-question-description {
                        font-family: "Roc Grotesk";
                        font-size: 16px;
                        margin: 0 0 20px;
                    }

                    .quiz_body_main .quiz-kit-question-grid {
                        margin: 50px 0px 0;
                    }

                    .quiz_body_main .quiz-kit-question-grid .answer_main {
                        position: relative;
                    }

                    .quiz_body_main .quiz-kit-question-grid .answer_main input {
                        position: absolute;
                        left: 18px;
                    }

                    .tooltip_main_container {
                        margin: 20px auto 30px;
                     }

                     .quiz-kit-question-navigation {
                        position: relative;
                        display: flex;
                        -webkit-box-align: center;
                        align-items: center;
                        -webkit-box-pack: center;
                        justify-content: center;
                        margin: 60px 0px 0px;
                        max-width: 100%;
                    }

                    .quiz-kit-question-navigation button {
                        color: rgb(1, 78, 59) !important;
                        pointer-events: none;
                        font-family: "Roc Grotesk" !important;
                        display: inline-flex;
                        align-items: center;
                        gap: 10px;
                        font-size: 14px !important;
                        text-transform: uppercase;
                    }

                    .quiz-kit-question-navigation  button.disabled {
                        opacity: 0.5;
                    }

                    .quiz-kit-question-navigation button svg g {
                        fill: rgb(1, 78, 59) !important;
                        stroke: rgb(1, 78, 59) !important;
                    }

                    .quiz-kit-question-navigation button.quiz-kit-question-prev-button {
                        margin-right: 150px;
                    }

                    .answer_main_container {
                        display: grid;
                        grid-template-columns: repeat(2,1fr);
                        gap: 20px;
                    }
                    .answer_main_container .answer_main {
                        width: 100%;
                    }

                    .header_navigation.quiz-kit-question-navigation {
                        position: static;
                    }
                    
                   
                 .header_navigation.quiz-kit-question-navigation {
                        margin: 0;
                    }

                    .quiz_body_main .quiz-kit-question-grid .answer_main label.radio-label:before, .quiz_body_main .quiz-kit-question-grid .answer_main label.radio-label:after {
                        opacity: 0;
                        position: absolute;
                        display:none;
                    }

                    form.answer_main_container.sc-fznBtT.quiz_form.slider-stick div#quiz-kit-question-grid button.quiz-kit-question-slider:nth-child(2)::after {
                        width: 0;
                        left: 0;
                    }
                    form.answer_main_container.sc-fznBtT.quiz_form.slider-stick {
                        display: flex;
                        flex-wrap: wrap;
                    }
                    .quiz_intro_main div#quiz-kit-container .header_navigation.quiz-kit-question-navigation button {
                      letter-spacing: 0;
                    }
                    .quiz_intro_main div#quiz-kit-container .header_navigation.quiz-kit-question-navigation button.quiz-kit-question-next-button {
                        margin-left: auto;
                    }

                        .result_main {
                            position: relative;
                        }

                        .result_main.quiz_questions_wrapper {
                            padding-top: 50px;
                        }

                        .result_main.quiz_questions_wrapper .result_heading {
                            margin: 0 0 20px;
                        }

                        .result_main.quiz_questions_wrapper>h2.product_title {
                            width: 100%;
                            text-align: left;
                            font-size: 24px;
                            font-weight: 500;
                            color: #014e3b;
                            line-height: 1.15;
                        }

                        .result_main.quiz_questions_wrapper>h2.product_title {
                            width: 100%;
                            text-align: left;
                            font-size: 24px;
                            font-weight: 500;
                            color: #014e3b;
                            line-height: 1.15;
                            margin: 0 0 50px;
                        }

                        .result_main.quiz_questions_wrapper>.products {
                            width: 100%;
                            margin: 0;
                        }

                        .result_main.quiz_questions_wrapper>.products {
                            width: 100%;
                            display: grid;
                            grid-template-columns: repeat(3,1fr);
                            gap: 20px;
                            margin: 0 0 80px;
                            grid-row-gap: 40px;
                        }

                        .result_main.quiz_questions_wrapper>.products>.product_card {
                            padding: 0;
                            width: 100%;
                        }

                        .result_main.quiz_questions_wrapper>.products>.product_card .card_img {
                            max-width: 100% !important;
                        }

                        .result_main.quiz_questions_wrapper>.products>.product_card .card_img img.result_image {
                            height: 211px;
                            width: auto;
                            object-fit: contain;
                            margin: 0;
                        }
                        .result_main.quiz_questions_wrapper>.products>.product_card .card_body {
                            margin: 50px 0 0;
                        }

                        .result_main.quiz_questions_wrapper>.products>.product_card .card_body .title {
                            margin: 0 0 10px;
                        }

                        .result_main.quiz_questions_wrapper>.products>.product_card .card_body .price {
                            font-family: "Roc Grotesk";
                            font-weight: 400;
                            width: 100%;
                            margin: 0px auto 20px;
                            line-height: 1.2;
                            font-size: 16px;
                            color: rgb(0, 0, 0);
                            text-transform: none;
                            letter-spacing: initial;
                        }   

                        .result_main.quiz_questions_wrapper>.products>.product_card .card_body .add_to_cart_button button.addToCart_button {
                            padding: 13px;
                            border-radius: 30px;
                            width: 100%;
                            min-width: 100px;
                            font-size: 13px;
                            font-family: "Roc Grotesk";
                            font-weight: 500;
                            margin: 10px 0px 0px;
                            color: rgb(255, 255, 255);
                            background-color: rgb(1, 78, 59);
                            border: 1px solid rgb(1, 78, 59);
                            line-height: 13px;
                            height: 41px;
                            min-height: auto;
                            letter-spacing: 1px;
                            max-width: 200px;
                        }

                        .result_main.quiz_questions_wrapper>.products>.product_card .card_body .add_to_cart_button button.addToCart_button:hover {
                            background-color: rgb(255, 255, 255) !important;
                            color: rgb(1, 78, 59) !important;
                            border-color: rgb(1, 78, 59) !important;
                        }

                        .result_main.quiz_questions_wrapper .result_sub_heading {
                            margin: 0px 0 90px;
                        }
                        .result_main.quiz_questions_wrapper>h2.product_title {
                            position: relative;
                            left: -10px;
                        }

                        .result_main.quiz_questions_wrapper {
                            padding-bottom: 0;
                            margin-bottom: 0;
                        }

                        .result_main.quiz_questions_wrapper>div:nth-last-child(3) {
                            margin: 0 0 50px;
                        } 
                        
                        .result_main.quiz_questions_wrapper .result_footer_wrapper {
                            width: 100% !important;
                            display: flex;
                            justify-content: center;
                            gap: 10px;
                        }

                        .result_main.quiz_questions_wrapper .result_footer_wrapper button.action_button {
                            width: auto;
                            height: auto;
                            min-height: auto;
                            font-family: "Roc Grotesk";
                            font-size: 10px;
                            color: rgb(0, 0, 0);
                            font-weight: 500;
                            border-top: none;
                            border-right: none;
                            border-bottom: 1px solid rgb(0, 0, 0);
                            border-left: none;
                            border-image: initial;
                            background: none;
                            line-height: 1.3;
                            border-radius: 0px;
                            letter-spacing: 1px;
                            text-transform: uppercase;
                            padding: 6px 10px;
                        }

                        form.answer_main_container.sc-fznBtT.quiz_form.slider-stick div#quiz-kit-question-grid input[type="hidden"] {
                            position: absolute;
                        }

                    @media(max-width:991px){
                        .quiz_intro_main {
                            padding-top: 100px;
                        }

                        .quiz_questions_wrapper .quiz-kit-container .quiz-kit-question-title {
                            font-size: 22px;
                         }

                         .result_main.quiz_questions_wrapper>.products>.product_card .card_img img.result_image {
                            width: 100% !important;
                            max-width: 100% !important;
                            min-width: 100%;
                            height: 146px;
                        }

                    }
                    @media(max-width:767px){
                    .answer_main_container {
                       grid-template-columns: repeat(1,1fr);
                       
                    }

                    .quiz_body_main .quiz-kit-question-grid {
                        margin: 50px 0px 0;
                    }
                    .answer_main_container .answer_main .radio-label {
                        height: auto;
                        margin: 0;
                        justify-content: center;
                    }

                    .quiz_body_main .quiz-kit-question-grid {
                        margin: 50px auto 0;
                    }

                    .quiz_body_main p#quiz-kit-question-description {
                        font-size: 15px;
                        margin: 0 0 20px;
                        line-height: 1.2;
                    }

                    .tooltip_main_container {
                        margin: 30px auto 30px;
                    }

                    .header_navigation.quiz-kit-question-navigation>button {
                       
                        top: 92px;
                    }
                    .quiz_intro_main {
                        padding-top: 70px;
                    }

                    .quiz_body_main .quiz-kit-question-grid form.answer_main_container {
                        max-width: 289px;
                        margin: 0px auto 0;
                    }

                    .quiz_body_main .quiz-kit-question-grid form.answer_main_container.slider-stick {
                        max-width: 340px;
                    }
                    .quiz_intro_main div#quiz-kit-container .header_navigation.quiz-kit-question-navigation {
                        padding: 0;
                    }

                    .quiz_questions_wrapper {
                        padding: 35px 0px 0px;
                    }
                    .quiz_body_main {
                        padding: 20px 18px 20px;
                    }
                    .quiz_questions_wrapper .quiz-kit-container>h1.quiz-kit-question-title {
                        max-width: 310px;
                    }
                    .answer_main_container .answer_main .radio-label {
                        text-align: center;
                    }

                    .result_main.quiz_questions_wrapper {
                        padding-top: 60px;
                    }

                    .result_main.quiz_questions_wrapper .result_sub_heading {
                        margin: 0px 0 50px;
                        font-size: 15px;
                    }
                    .result_main.quiz_questions_wrapper .result_heading {
                        font-size: 22px !important;
                        line-height: 1 !important;
                        margin: 0 0 15px;
                    }
                    .result_main.quiz_questions_wrapper>h2.product_title {
                        position: relative;
                        left: 0;
                        margin: 0 0 20px;
                    }
                    .result_main.quiz_questions_wrapper>.products {
                        grid-template-columns: repeat(1,1fr);
                        margin: 0 0 40px;
                        grid-row-gap: 40px;
                    }

                    .result_main.quiz_questions_wrapper>.products>.product_card .card_img img.result_image {
                        height: 250px;
                    }
                    
                }
                button.active-class.parent_slider_wrapper.quiz-kit-question-slider {
                    position: relative;
                    z-index: 1;
                }

            </style>
            <div id="quiz_kit_content" class="quiz_kit_sub">
                <div class="quiz-kit-content_main">
                    <div id="quiz_intro" class="quiz_intro_main center-center">
                        <div id="quiz-kit-question-image" class="quiz_kit_question_image">
                            <picture>
                                <img src="${data.quiz?.background_image}"
                                    alt="Hi! Have 3 min?">
                            </picture>
                        </div>
                        <div id="quiz-kit-container" class="sc-AxirZ quiz_body_main center-center">
                            <div class="quiz_questions_wrapper">
                                <h1 id="quiz_intro_title" >
                                    ${data?.quiz?.intro_heading}
                                </h1>
                                <p id="quiz_intro_text">
                                    ${data?.quiz?.intro_desc}
                                </p>
                                <button id="take_quiz_button" onclick="takeQuiz(0)" class="sc-fznxsB quiz_button_main aos-init aos-animate">
                                    ${data?.quiz?.intro_button_text}
                                </button>
                            </div>
                        </div>
                        <div id="quiz_intro_overlay" class="sc-fznJRM quiz_intro_overlay"
                            style="display: block; background-color: rgb(0, 0, 0); opacity: 0;">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        `;
            var data;
            const response = await fetch(dataUrl, {
                method: 'Get',
                headers: {
                    'Content-Type': 'application/json',
                }
            }).then(response => response.json()).then((responseData) => {
                data = responseData
                apiData = data?.data
                allQuestions = []
                data?.data?.questions.map((question) => {
                    let dup = allQuestions.find((q) => q.content.trim().replace(/\s+/g, ' ') == question.content.trim().replace(/\s+/g, ' '))
                    if (!dup) {
                        allQuestions.push(question)
                    }
                })
                mapMixpanelWithCustomer();
                let user_progress = data?.data?.progress
                let progress = []
                user_progress.map((val, i) => {
                    let temp_progress = progress.find((p) => p?.questionNumber == val?.question_id)
                    if (temp_progress) {
                        temp_progress.answers.push(val?.answer_id)
                        progress = progress.map((val) => {
                            if (val?.questionNumber == temp_progress?.questionNumber) {
                                return temp_progress
                            } else {
                                return val
                            }
                        })
                    } else {
                        let obj = { questionNumber: val?.question_id, answers: [] }
                        obj?.answers.push(val?.answer_id)
                        progress.push(obj)
                    }
                })
                selectedAnswers = progress;
                selectedAnswers = selectedAnswers.filter(function (element) {
                    return element !== undefined;
                });
                const renderedHtml = template(data.data);
                document.getElementById("quiz_main_container").innerHTML = renderedHtml
                if (progress?.length > 0) {
                    let lastSelectedAnswer = 0;
                    selectedAnswers?.map((a, index) => {
                        let previousQuestion = allQuestions?.find((q) => q?.id == a?.questionNumber)
                        let previousIndex = allQuestions?.findIndex((q) => q.id == previousQuestion?.id)
                        let selectedAnswer = previousQuestion?.answers?.find((q) => q.id == +a?.answers[0])
                        if (selectedAnswer?.next_question_id) {
                            i = selectedAnswer?.next_question_id ? selectedAnswer?.next_question_id - 1 : i
                            let nextIndex = i;
                            previousObject[nextIndex] = previousIndex
                        } else {
                            previousObject[previousIndex] = previousIndex - 1
                        }

                        lastSelectedAnswer = previousIndex

                    })

                    takeQuiz(lastSelectedAnswer + 1)
                }

                $('.tooltip_svg_container').hover(mouseEnter, mouseLeave);
                function mouseEnter() {
                    $(".tooltip_sub_container").css("visibility", "visible")
                    $(".tooltip_sub_container").css("opacity", "1")
                };
                function mouseLeave() {
                    $(".tooltip_sub_container").css("visibility", "hidden")
                    $(".tooltip_sub_container").css("opacity", "0")
                };


                var userName;

                function setUserName() {
                    userName = $("#name_input_field").val();
                }

                function showInterstitialPage() {
                    if (userName) {
                        $("#quiz_kit_content").html(`
                        <div class="quiz_questions_wrapper">
                            <div id="quiz-kit-container" class="sc-AxirZ quiz_question_main">
                                <h1 class="quiz-kit-question-title" font-family="Jost" font-size="44" color="#000000" font-weight="700" letter-spacing="0" data-aos="fade-left" data-aos-delay="150" data-aos-offset="-300" class="sc-AxhCb ZdEpG aos-init aos-animate" style="font-family: Jost; font-weight: 700; width: 100%; margin: 0px auto 20px; line-height: 1.2; font-size: 44px; color: rgb(0, 0, 0); text-transform: none; letter-spacing: initial;">
                                    Lovely to meet you, ${userName}.
                                </h1>
                                <p class="quiz-kit-question-description">
                                    This is an example of an interstitial page that you can easily add anywhere in the quiz.
                                </p>
                                <div class="quiz-kit-question-grid" data-aos="fade-left" data-aos-delay="500" data-aos-offset="-300" class="sc-AxiKw form_main_container aos-init aos-animate" style="justify-content: center;">
                                    <button data-aos="fade-left" data-aos-delay="500" data-aos-offset="-300" kind="fill" font-size="12" font-family="Jost" letter-spacing="1" font-weight="600" class="sc-fznxsB djJdtl aos-init aos-animate" style="padding: 13px; border-radius: 0px; width: auto; min-width: 100px; font-size: 12px; font-family: Jost; font-weight: 600; margin: 15px 0px -10px; color: rgb(255, 255, 255); background-color: rgb(0, 0, 0); border: 1px solid rgb(0, 0, 0); line-height: 1.3; height: auto; min-height: auto; letter-spacing: 1px;">
                                        Let's continue
                                    </button>
                                </div>
                                <div id="quiz-kit-question-navigation" data-aos="fade-left" data-aos-delay="600" data-aos-offset="-300" class="sc-fzoXzr next_button_main_container aos-init aos-animate" style="font-family: Jost;">
                                    <button onclick="takeQuiz(1)" id="quiz-kit-question-prev-button" tabindex="0" color="#000000" letter-spacing="1" class="sc-fzpjYC iHnUMY" style="height: auto; min-height: auto; width: auto; font-family: inherit; font-size: 14px; color: rgb(0, 0, 0); font-weight: 600; background: none; border: none;">
                                        <svg width="12px" height="10px" viewBox="0 0 14 12" version="1.1">
                                            <title>Back</title>
                                            <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                            <g id="Next/Back-Buttons" transform="translate(0.000000, -54.000000)" fill="#000000" fill-rule="nonzero" stroke="#000000">
                                            <g id="Group" transform="translate(0.000000, 50.000000)">
                                            <path d="M7.02814142,4 C7.10303865,4.00628851 7.17617741,4.03773106 7.2334898,4.09432766 L11.9032854,8.70580175 C12.0322382,8.83314409 12.0322382,9.03960679 11.9032854,9.16694917 C11.7743325,9.29429148 11.5652587,9.29429148 11.4363058,9.16694917 L7.33008912,5.11198996 L7.33104051,16.4516973 L7.32572085,16.5103293 C7.29776369,16.6624347 7.1629516,16.7777778 7.00085901,16.7777778 C6.81848843,16.7777778 6.67064429,16.6317903 6.67063168,16.4516973 L6.6696803,5.11198996 L2.56369419,9.16694917 C2.44906944,9.28014233 2.27113919,9.29271938 2.14244655,9.2046802 L2.09671464,9.16694917 C1.96776179,9.03960679 1.96776179,8.83314409 2.09671464,8.70580175 L6.76651023,4.09432766 C6.82382262,4.03773106 6.89696138,4.00628851 6.97185861,4 L7.02814142,4 Z" id="Path" transform="translate(7.000000, 10.388889) rotate(-90.000000) translate(-7.000000, -10.388889) "></path></g></g></g>
                                        </svg>
                                        <span>Back</span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    `)
                    }
                }

                AOS.init();

            })


        }

    }