I am having problems integrating the FB share button. I created a small quiz game on my blog (https://usa-reiseblogger.de/us-bundesstaaten-quiz-usa-wissen/) but somehow the FB share button (which appears at the end of the game) is not reacting on the click?
Can someone help me out with this problem? This is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>US Bundesstaaten Quiz</title>
<style>
#game-container {
margin: 20px auto;
max-width: 800px;
background-color: #8d99ae;
padding: 10px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
#map-container {
position: relative;
margin: 0;
background-color: #edf2f4;
border-radius: 5px;
overflow: hidden;
}
svg {
width: 100%;
max-width: 600px;
margin: 0 auto;
display: block;
}
#state-prompt, #round-info, #score-info, #accuracy-info, #timer {
margin: 10px 0;
font-size: 1.2em;
font-weight: bold;
color: #2b2d42;
}
#feedback {
margin-top: 5px;
font-size: 1.1em;
color: #ef233c;
}
button {
padding: 12px 24px;
font-size: 1em;
margin-top: 10px;
cursor: pointer;
border: none;
border-radius: 5px;
background-color: #ef233c;
color: white;
transition: background-color 0.3s;
}
button:hover {
background-color: #d90429;
}
.correct-1 {
fill: #2d6a4f !important; /* green */
}
.correct-2 {
fill: #f2d857 !important; /* yellow */
}
.correct-3 {
fill: #f4a261 !important; /* orange */
}
.incorrect {
fill: #d90429 !important;
}
</style>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
</head>
<body>
<div id="game-container">
<h1>US Bundesstaaten Quiz</h1>
<h2>Rate alle 50 Bundesstaaten - Du hast 3 Versuche</h2>
<div id="map-container">
<div id="svg-container">
<!-- The content of the SVG file will be inserted here by JavaScript -->
</div>
</div>
<div id="state-prompt"></div>
<div id="round-info"></div>
<div id="score-info"></div>
<div id="accuracy-info"></div>
<div id="timer">Zeit: 00:00</div>
<div id="feedback"></div>
<button id="start-button">Quiz starten</button>
<div id="results"></div>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
fetch('https://usa-reiseblogger.de/us.svg')
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.text();
})
.then(data => {
document.getElementById('svg-container').innerHTML = data;
initGame();
})
.catch(error => {
console.error('There was a problem with the fetch operation:', error);
});
function initGame() {
const states = [
{ name: 'Alabama', id: 'AL' },
{ name: 'Alaska', id: 'AK' },
{ name: 'Arizona', id: 'AZ' },
{ name: 'Arkansas', id: 'AR' },
{ name: 'California', id: 'CA' },
{ name: 'Colorado', id: 'CO' },
{ name: 'Connecticut', id: 'CT' },
{ name: 'Delaware', id: 'DE' },
{ name: 'Florida', id: 'FL' },
{ name: 'Georgia', id: 'GA' },
{ name: 'Hawaii', id: 'HI' },
{ name: 'Idaho', id: 'ID' },
{ name: 'Illinois', id: 'IL' },
{ name: 'Indiana', id: 'IN' },
{ name: 'Iowa', id: 'IA' },
{ name: 'Kansas', id: 'KS' },
{ name: 'Kentucky', id: 'KY' },
{ name: 'Louisiana', id: 'LA' },
{ name: 'Maine', id: 'ME' },
{ name: 'Maryland', id: 'MD' },
{ name: 'Massachusetts', id: 'MA' },
{ name: 'Michigan', id: 'MI' },
{ name: 'Minnesota', id: 'MN' },
{ name: 'Mississippi', id: 'MS' },
{ name: 'Missouri', id: 'MO' },
{ name: 'Montana', id: 'MT' },
{ name: 'Nebraska', id: 'NE' },
{ name: 'Nevada', id: 'NV' },
{ name: 'New Hampshire', id: 'NH' },
{ name: 'New Jersey', id: 'NJ' },
{ name: 'New Mexico', id: 'NM' },
{ name: 'New York', id: 'NY' },
{ name: 'North Carolina', id: 'NC' },
{ name: 'North Dakota', id: 'ND' },
{ name: 'Ohio', id: 'OH' },
{ name: 'Oklahoma', id: 'OK' },
{ name: 'Oregon', id: 'OR' },
{ name: 'Pennsylvania', id: 'PA' },
{ name: 'Rhode Island', id: 'RI' },
{ name: 'South Carolina', id: 'SC' },
{ name: 'South Dakota', id: 'SD' },
{ name: 'Tennessee', id: 'TN' },
{ name: 'Texas', id: 'TX' },
{ name: 'Utah', id: 'UT' },
{ name: 'Vermont', id: 'VT' },
{ name: 'Virginia', id: 'VA' },
{ name: 'Washington', id: 'WA' },
{ name: 'West Virginia', id: 'WV' },
{ name: 'Wisconsin', id: 'WI' },
{ name: 'Wyoming', id: 'WY' }
];
// Shuffle states to randomize the order
function shuffle(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;
}
const shuffledStates = shuffle(states);
let currentStateIndex = 0;
let attempts = 0;
let score = 0;
let correctFirstTry = 0;
let correctSecondTry = 0;
let correctThirdTry = 0;
let startTime;
let totalTime = 0;
let timerInterval;
const statePrompt = document.getElementById('state-prompt');
const feedback = document.getElementById('feedback');
const roundInfo = document.getElementById('round-info');
const scoreInfo = document.getElementById('score-info');
const accuracyInfo = document.getElementById('accuracy-info');
const timer = document.getElementById('timer');
const startButton = document.getElementById('start-button');
const resultsDiv = document.getElementById('results');
startButton.addEventListener('click', startGame);
function startTimer() {
startTime = Date.now();
timerInterval = setInterval(updateTimer, 1000);
}
function updateTimer() {
const now = Date.now();
totalTime = now - startTime;
timer.textContent = `Zeit: ${getFormattedTime(totalTime)}`;
}
function stopTimer() {
clearInterval(timerInterval);
}
function getFormattedTime(milliseconds) {
const seconds = Math.floor(milliseconds / 1000) % 60;
const minutes = Math.floor(milliseconds / (1000 * 60));
return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
}
function startGame() {
currentStateIndex = 0;
attempts = 0;
score = 0;
correctFirstTry = 0;
correctSecondTry = 0;
correctThirdTry = 0;
feedback.textContent = '';
startButton.style.display = 'none';
resultsDiv.innerHTML = '';
startTimer(); // Start the timer on game start
promptNextState();
}
function promptNextState() {
if (currentStateIndex < shuffledStates.length) {
statePrompt.textContent = `Klick auf ${shuffledStates[currentStateIndex].name}`;
roundInfo.textContent = `Runde: ${currentStateIndex + 1} / ${shuffledStates.length}`;
attempts = 0;
} else {
endGame();
}
}
function handleMapClick(event) {
const clickedStateId = event.target.getAttribute('data-id');
if (!clickedStateId) return;
attempts++;
if (clickedStateId === shuffledStates[currentStateIndex].id) {
if (attempts === 1) {
score += 10;
correctFirstTry++;
event.target.classList.add('correct-1');
} else if (attempts === 2) {
score += 5;
correctSecondTry++;
event.target.classList.add('correct-2');
} else {
score += 3;
correctThirdTry++;
event.target.classList.add('correct-3');
}
feedback.textContent = 'Korrekt!';
currentStateIndex++;
setTimeout(promptNextState, 1000);
} else if (attempts === 3) {
feedback.textContent = `Die richtige Antwort war ${shuffledStates[currentStateIndex].name}`;
document.querySelector(`[data-id="${shuffledStates[currentStateIndex].id}"]`).classList.add('incorrect');
currentStateIndex++;
setTimeout(promptNextState, 2000);
} else {
feedback.textContent = 'Versuch es nochmal!';
}
scoreInfo.textContent = `Dein Punktestand: ${score}`;
const totalAttempts = correctFirstTry + correctSecondTry + correctThirdTry + (currentStateIndex - (correctFirstTry + correctSecondTry + correctThirdTry));
const accuracy = ((correctFirstTry + correctSecondTry / 2 + correctThirdTry / 3) / totalAttempts) * 100;
accuracyInfo.textContent = `Genauigkeit: ${accuracy.toFixed(2)}%`;
}
function endGame() {
stopTimer();
const totalAttempts = correctFirstTry + correctSecondTry + correctThirdTry + (currentStateIndex - (correctFirstTry + correctSecondTry + correctThirdTry));
const accuracy = ((correctFirstTry + correctSecondTry / 2 + correctThirdTry / 3) / totalAttempts) * 100;
let timeBonus = 0;
if (totalTime < 3 * 60 * 1000) {
timeBonus = 100;
}
if (totalTime < 2 * 60 * 1000) {
timeBonus = 250;
}
resultsDiv.innerHTML = `
<p>Glückwunsch! Du hast das Quiz abgeschlossen.</p>
<p>Dein Punktestand: ${score + timeBonus}</p>
<p>Genauigkeit: ${accuracy.toFixed(2)}%</p>
<p>Zeit: ${getFormattedTime(totalTime)}</p>
<p>Zeitbonus: ${timeBonus} Punkte</p>
<p>Hier ist eine Aufschlüsselung deiner Versuche:</p>
<ul>
<li>Richtig beim ersten Versuch: ${correctFirstTry}</li>
<li>Richtig beim zweiten Versuch: ${correctSecondTry}</li>
<li>Richtig beim dritten Versuch: ${correctThirdTry}</li>
</ul>
<button id="share-button">Teile deine Ergebnisse auf Facebook!</button>
`;
document.getElementById('share-button').addEventListener('click', shareOnFacebook);
startButton.style.display = 'block';
}
function shareOnFacebook() {
const shareUrl = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(window.location.href)}"e=Ich habe gerade ${score} Punkte mit einer Genauigkeit von ${accuracy.toFixed(2)}% im US Bundesstaaten Quiz erzielt! Kannst du mich schlagen?`;
window.open(shareUrl, '_blank');
}
document.querySelectorAll('path[data-id]').forEach(state => {
state.addEventListener('click', handleMapClick);
});
}
initGame();
});
</script>
</body>
</html>