Ad refresh outside the Riddle embed

You can refresh the ad on your website based on the questions answered in the Riddle. Open the example page in your browser: Link

Oh you like Fruits?

Here is a fresh ad for you!

How it works

You can listen to the JS events as you can read here: Event logger. For each answer that is submitted by the quiz player, you can write some code to refresh your ad. In this simple example, we just change the background color and the text in the small ad below the quiz.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Riddle Ad Refresh</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .riddle-ad-refresh {
            display: flex;
            flex-direction: column;
            gap: 20px;
            background-color: #f0f0f0;
            padding: 20px;
            border-radius: 12px;
        }

        .riddle-embed {
            display: flex;
            justify-content: center;
        }

        .ad {
            display: flex;
            justify-content: center;
        }

        .fruit-ad {
            padding: 12px;
            border-radius: 12px;
            text-align: center;
            background-color: #ffffff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            padding: 20px;
            border-radius: 12px;
        }

        .fruit {
            font-weight: bold;
            color: #000;
        }
    </style>
</head>

<body>
    <div class="riddle-ad-refresh" id="riddle-ad-refresh">
        <div class="riddle-embed">
            <div class="riddle2-wrapper" data-rid-id="zyRr1aMw" data-auto-scroll="false"
                data-is-fixed-height-enabled="false" data-bg="#fff" data-fg="#00205b"
                style="margin:0 auto; max-width:100%; width:640px;">

                <script src="https://www.riddle.com/embed/build-embedjs/embedV2.js"></script>

                <iframe src="https://www.riddle.com/embed/a/zyRr1aMw?lazyImages=false&staticHeight=false"
                    allow="autoplay" referrerpolicy="strict-origin"></iframe>
            </div>
        </div>

        <div class="ad">
            <div id="fruit-ad" class="fruit-ad">
                <strong>Oh you like <span class="fruit">Fruits</span>?</strong>
                <p>Here is a fresh ad for you!</p>
            </div>
        </div>
    </div>

    <script>
        function onRiddleMessage(event) {
            var eventData = event.data;

            if (eventData.isRiddle2Event !== true) {
                return;
            }

            if (eventData.action === "Block_Submit") {
                const answer = eventData.answer;
                const selectedAnswer = document.querySelector('.fruit');
                const adBackground = document.getElementById('riddle-ad-refresh');

                selectedAnswer.textContent = answer;

                switch (answer.toLowerCase()) {
                    case "cherry":
                        adBackground.style.backgroundColor = "#e74c3c";
                        break;
                    case "apple":
                        adBackground.style.backgroundColor = "#2ecc71";
                        break;
                    case "banana":
                        adBackground.style.backgroundColor = "#f1c40f";
                        break;
                    case "blueberry":
                        adBackground.style.backgroundColor = "#2980b9";
                        break;
                    case "strawberry":
                        adBackground.style.backgroundColor = "#e74c3c";
                        break;
                    case "durian":
                        adBackground.style.backgroundColor = "#e67e22";
                        break;
                    case "mango":
                        adBackground.style.backgroundColor = "#f1c40f";
                        break;
                    case "pineapple":
                        adBackground.style.backgroundColor = "#f1c40f";
                        break;
                    case "orange":
                        adBackground.style.backgroundColor = "#f39c12";
                        break;
                    case "lemmon":
                        adBackground.style.backgroundColor = "#f39c12";
                        break;
                    case "lime":
                        adBackground.style.backgroundColor = "#2ecc71";
                        break;
                    case "grapefruit":
                        adBackground.style.backgroundColor = "#16a085";
                        break;
                    default:
                        break;
                }

                adBackground.style.display = 'block';
            }
        }

        window.addEventListener("message", onRiddleMessage);
    </script>
</body>

</html>