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>