Html5 sent variable to text caption

hi from Cancun, and i have one question, i have this html5 code and i dont known how to send the variable score in the code to my text caption in active presenter whe finish the questions and show the result.

this is the html5 code:

Trivia NFL body { font-family: Arial, sans-serif; text-align: center; background-color: #f0f0f0; padding: 20px; } .question { font-size: 24px; margin-bottom: 20px; } .options { display: flex; justify-content: center; gap: 10px; margin-bottom: 20px; } .option { padding: 10px 20px; font-size: 18px; cursor: pointer; background-color: #007bff; color: white; border: none; border-radius: 5px; } .option:hover { background-color: #0056b3; } .result { font-size: 20px; margin-top: 20px; }

Trivia NFL

<script>
    // Base de datos de preguntas
    const questions = [
        { question: "¿Qué equipo ganó el primer Super Bowl?", options: ["Green Bay Packers", "Kansas City Chiefs", "Dallas Cowboys"], answer: "Green Bay Packers" },
        { question: "¿Quién es el máximo anotador de puntos en la historia de la NFL?", options: ["Adam Vinatieri", "Morten Andersen", "Gary Anderson"], answer: "Adam Vinatieri" },
        { question: "¿Qué equipo tiene más victorias en Super Bowl?", options: ["Pittsburgh Steelers", "New England Patriots", "San Francisco 49ers"], answer: "New England Patriots" },
        // Agrega más preguntas aquí...
    ];

    let score = 0;
    let usedQuestions = [];

    // Función para seleccionar una pregunta aleatoria
    function getRandomQuestion() {
        const availableQuestions = questions.filter((_, index) => !usedQuestions.includes(index));
        if (availableQuestions.length === 0) {
            return null; // No hay más preguntas disponibles
        }
        const randomIndex = Math.floor(Math.random() * availableQuestions.length);
        const question = availableQuestions[randomIndex];
        usedQuestions.push(questions.indexOf(question));
        return question;
    }

    // Función para mostrar la pregunta actual
    function displayQuestion() {
        const questionElement = document.getElementById('question');
        const optionsElement = document.getElementById('options');
        const resultElement = document.getElementById('result');

        const currentQuestion = getRandomQuestion();
        if (!currentQuestion) {
            resultElement.textContent = `¡Fin del juego! No hay más preguntas. Tu puntuación final es: ${score}`;
            sendScoreToActivePresenter(score); // Enviar puntaje a ActivePresenter
            return;
        }

        questionElement.textContent = currentQuestion.question;

        // Mezclar las opciones de respuesta
        const shuffledOptions = shuffleArray(currentQuestion.options);

        optionsElement.innerHTML = '';
        shuffledOptions.forEach(option => {
            const button = document.createElement('button');
            button.textContent = option;
            button.classList.add('option');
            button.addEventListener('click', () => checkAnswer(option, currentQuestion.answer));
            optionsElement.appendChild(button);
        });
    }

    // Función para verificar la respuesta seleccionada
    function checkAnswer(selectedOption, correctAnswer) {
        if (selectedOption === correctAnswer) {
            score += 10;
            displayQuestion(); // Pasar a la siguiente pregunta
        } else {
            document.getElementById('result').textContent = `Respuesta incorrecta. Tu puntuación final es: ${score}`;
            document.getElementById('options').innerHTML = ''; // Limpiar opciones
            sendScoreToActivePresenter(score); // Enviar puntaje a ActivePresenter
        }
    }

    // Función para mezclar un array (algoritmo de Fisher-Yates)
    function shuffleArray(array) {
        for (let i = array.length - 1; i > 0; i--) {
            const j = Math.floor(Math.random() * (i + 1));
            [array[i], array[j]] = [array[j], array[i]];
        }
        return array;
    }

    // Función para enviar el puntaje a ActivePresente

    function sendScoreToActivePresenter(score) {
        if (window.parent && window.parent.postMessage) {
            window.parent.postMessage({ type: 'score', value: score }, '*');
                    
                    
        }
    }

    // Iniciar el juego
    displayQuestion();
</script>

Hi Alexandro,

For ActivePresenter HTML5 to receive the score variable sent by postMessage({ type: 'score', value: score }, '*') and show it in a text caption, please do as follows:

  • Add a number variable, say externalScore, and insert a reference to this variable in the text caption: What is Variable in ActivePresenter 9? - Atomi Systems, Inc.
  • Add an Execute JavaScript action with the following script to the project On Load event (ActivePresenter > Project > Properties > Interactivity tab) to receive the post message, read the score value and set it to the externalScore variable:
    window.addEventListener('message', function(event) {
        var message = event.data;
        if (message.type == 'score')
            prez.variable('externalScore', message.value);
    });

Regards