Vocalize Ad Wall

 <!-- Scripts -->
<script src="https://d211dnuaikc3d8.cloudfront.net/assets/ad-wall/main.bundle.js"></script>

<!--HTML Structure-->
<div class="text-block blk-txt">
    <div class="paragraph-wrapper ">
        <p>Lorem ipsum odor amet, consectetuer adipiscing elit. Urna condimentum magnis justo taciti habitasse
            ultricies. Montes sagittis platea proin sapien ut sapien. Quam erat odio dolor parturient platea
            mollis morbi leo venenatis.</p>
    </div>
    <div class="paragraph-wrapper unloaded">
        <p>
            Molestie convallis aliquam congue lectus lorem vehicula dis ante. Mollis
            in molestie gravida proin; tempor aliquet natoque praesent venenatis. At luctus rhoncus aliquet
            libero pellentesque etiam! Leo praesent ut platea proin ad massa? Phasellus ultrices pharetra
            rhoncus non non magna curabitur?
        </p>
    </div>
    <div class="paragraph-wrapper unloaded">
        <p>
            Gravida erat non fames dictum aliquet. Dictum aptent erat lobortis laoreet turpis lacinia dolor
            lorem.
            Rutrum iaculis sodales lacus sed nascetur aliquam nisi. Tempus aliquam dui tellus quam penatibus.
            Parturient gravida urna porttitor id pulvinar, nunc finibus purus morbi. Facilisi pulvinar auctor
            lectus
            hac vulputate accumsan sit lobortis sollicitudin. Habitasse imperdiet sem nam mattis praesent
            dignissim.
            Turpis nullam mauris massa odio, lacinia pretium vel. Inceptos fringilla dis eget sollicitudin
            turpis
            quam nunc.
        </p>
    </div>
    <div class="paragraph-wrapper unloaded">
        <p>
            Magna curae parturient duis facilisis; nascetur sem. Urna ad natoque accumsan vehicula suscipit eu.
            Fringilla metus feugiat massa natoque gravida habitasse vestibulum adipiscing. Mus suspendisse
            laoreet
            sit imperdiet in tellus finibus fusce augue. Facilisis tempus neque in tristique nibh natoque
            fermentum
            in. Porta sollicitudin iaculis ligula ultricies augue ante eros? Penatibus purus integer non conubia
            odio accumsan, pellentesque etiam.
        </p>
    </div>
    <div class="paragraph-wrapper unloaded">
        <p>
            Elementum sem egestas est est habitant vitae efficitur. Non fermentum cras accumsan maecenas
            imperdiet
            finibus sed. Dictumst in enim aptent phasellus massa condimentum interdum. Efficitur vivamus maximus
            finibus mauris platea porta ultrices facilisis. Parturient porttitor porttitor mattis vitae tortor.
            Natoque consequat mauris laoreet ac inceptos. Hendrerit pretium egestas tincidunt, enim vestibulum
            neque
            cras nisi. Posuere mattis penatibus lobortis nostra habitant facilisis urna.
        </p>
    </div>
</div>
<div class="spinner my-16 py-16 unloaded" id="article-general-spinner"></div>


<div class="wall-guard my-16 fade-out" id="wall-guard">
    <div id="ad-wall-container" class="mt-3"></div>
</div>

<!--Javascript  Initialization-->
<script>
    function typeEffect(element, text, speed) {
        let index = 0;
        element.innerHTML = "";

        function typeCharacter() {
            if (index < text.length) {
                element.innerHTML += text.charAt(index);
                index++;
                setTimeout(typeCharacter, speed);
            }
        }

        typeCharacter();
    }


    const revealContent = () => {
        const elements = document.querySelectorAll('.unloaded');
        let delay = 500;

        elements.forEach(element => {
            const paragraph = element.querySelector('p');
            if (paragraph) {
                setTimeout(() => {
                    element.style.display = "block";
                    typeEffect(paragraph, paragraph.innerText, 10);
                }, delay);
                delay += paragraph.innerText.length * 10;
            }
        });
    }
    document.addEventListener("DOMContentLoaded", () => {
        window.VocalizeAdWall.init({
            containerId: 'ad-wall-container',
            style: {
                theme: 'light-theme',
            },
            defaults: {
                title: "Listen to unlock",
                subtitle: "Listen to an Ad to unlock content"
            },
            callbacks: {
                onSuccess: () => {
                    window.VocalizeAdWall.unload();

                    revealContent();
                },
                onError: () => {
                    alert("Unable to play AD")
                    window.VocalizeAdWall.unload();

                    revealContent();
                }
            },
            vastUrls: [
    { url: 'https://example.com/vast1.xml', weight: 0.5 },
    { url: 'https://example.com/vast2.xml', weight: 0.3 },
    { url: 'https://example.com/vast3.xml', weight: 0.2 },
],
            auth: {
                "X-Api-Publisher-Id": "XXXX",
                "X-Api-Publisher-Secret": "XXXXX",
            }
        });
    });
</script>
</body>

window.VocalizeAdWall.init(options)