in this javascript when the finalScore and totalScore are displayed I also want to remove the 'const message = "You scored " + score + " points";

 // Update the 'results' div using DOM manipulation
 const resultsDiv = document.getElementById("results");
 resultsDiv.textContent = message;
' message previously displayed in the 'results' div. 'let map; // Declare map globally
let streetLatitude;
let streetLongitude;
let marker; // Define marker globally to make it accessible across functions
let totalScore = 0; // Initialize total points variable
let possibleScore = 0; // Initialize total points variable
let imageIndex = 0; // Initialize image index
let PictureURL; // Define PictureURL at a higher scope level
let Description;
let clickListener; // Store the click listener reference
let roundScores = [];

function fetchStreetDetails(callback) {
 fetch("cat.json")
 .then((response) => response.json())
 .then((jsonData) => {
  const entryCount = jsonData.Features.length;

  // Check if there are more images to display
  if (imageIndex >= entryCount) {
  console.log("No more images to display!");
  // Display "Game Over" message
  const resultsDiv = document.getElementById("results");
   
  const finalScores = `Total Score: ${totalScore} points out of a possible ${possibleScore}<br><br>`;

  const scoreLine = createScoreLine(totalScore, possibleScore);
    
  const paintingDiv = document.getElementById("painting");
   paintingDiv.style.backgroundColor = "#fff"; // Set background color directly
   paintingDiv.innerHTML = finalScores; // Update content with innerHTML
   
  paintingDiv.appendChild(scoreLine);
   
  // Add individual round scores
resultsDiv.innerHTML += "<br><br><b>Painting Scores:</b><br><br>";
roundScores.forEach((roundScore, index) => {
 resultsDiv.innerHTML += `Round ${index + 1}: ${roundScore} points<br>`;
});
   
//remove painting info
const infoDiv = document.getElementById("info");

if (infoDiv) {
 infoDiv.remove();
} else {
 console.error("Div element with ID 'info' not found!");
}

  return;
  }

  const streetDetails = jsonData.Features[imageIndex]; // Get image data based on index
  // Extract PictureURL at a higher scope level
  PictureURL = streetDetails.PictureURL;
  Description = streetDetails.Description;
  // Extract details
  const FeatureID = streetDetails.FeatureID;
  streetLatitude = streetDetails.StreetLatitude;
  streetLongitude = streetDetails.StreetLongitude;
  const streetHeading = streetDetails.StreetHeading;
  const streetPitch = streetDetails.StreetPitch;
  const streetPanoID = streetDetails.StreetPanoID;
  const StreetPoints = streetDetails.Points;

  console.log("FeatureID: " + FeatureID);
  console.log("PictureURL: " + PictureURL);
  console.log("Description: " + Description);
  console.log("Street Latitude: " + streetLatitude);
  console.log("Street Longitude: " + streetLongitude);
  console.log("Street Heading: " + streetHeading);
  console.log("Street Pitch: " + streetPitch);
  console.log("Street PanoID: " + streetPanoID);
  console.log("Street Location: " + StreetPoints);

  // Update numberoffeeds div
  // Update numberoffeeds div
  const numberoffeedsElement = document.getElementById("results");
  numberoffeedsElement.textContent = `This is a ${entryCount} round game.\nClick on the map where you think this scene is.`;
  callback(FeatureID);
 })
 .catch((error) => console.error("Error fetching data: ", error));
}

//visualize and animate finalscore

function createScoreLine(
 totalScore,
 possibleScore,
 color = "#ff0000",
 backgroundColor = "#107896",
 animationDuration = 1000
) {
 // milliseconds
 const canvas = document.createElement("canvas");
 const ctx = canvas.getContext("2d");

 // Set canvas dimensions based on your needs
 canvas.width = 200;
 canvas.height = 30;

 let currentPercentage = 0; // Track current percentage for animation

 const animateFill = () => {
 if (currentPercentage >= (totalScore / possibleScore) * 100) {
  return; // Stop animation if reached target percentage
 }

 currentPercentage += 1; // Increment current percentage for animation

 // Clear the canvas before each redraw to avoid stacking lines
 ctx.clearRect(0, 0, canvas.width, canvas.height);

 // Set background color
 ctx.fillStyle = backgroundColor;
 ctx.fillRect(0, 0, canvas.width, canvas.height);

 // Set fill color for the line
 ctx.fillStyle = color;

 // Adjust the rectangle width based on current percentage
 ctx.fillRect(0, 0, canvas.width * (currentPercentage / 100), canvas.height);

 // Request another animation frame for smooth animation
 requestAnimationFrame(animateFill);
 };

 animateFill(); // Start the animation

 return canvas;
}

function initMap() {
 const mapStyles = [
 {
  featureType: "poi",

  stylers: [
  {
   visibility: "off",
  },
  ],
 },

 {
  featureType: "poi.park",

  stylers: [
  {
   visibility: "off",
  },
  ],
 },

 {
  featureType: "transit",
  stylers: [
  {
   visibility: "off",
  },
  ],
 },
 ];

 const mapOptions = {
 center: { lat: 21.382325, lng: -8.170154652 },
 zoom: 3,
 styles: mapStyles,
 };

 map = new google.maps.Map(document.getElementById("map"), mapOptions);

 // Add a click event listener to the map
 clickListener = map.addListener("click", (event) => {
 const clickLocation = event.latLng; // Get the latitude and longitude of the click

 // Create a new marker
 marker = new google.maps.Marker({
  position: clickLocation,
  map: map, // Set the map where the marker will be displayed
  draggable: true, // Set draggable to true
 });

 // (Optional) Add additional customization to the marker here,
 // such as setting an icon or info window

 // Remove the click event listener after adding the marker
 google.maps.event.removeListener(clickListener);
 // Add functionality after clicking the map
 createSubmitButton(map, clickLocation);
 });
}

//nextbutton
const nextButton = document.createElement("button");
nextButton.id = "nextButton";
nextButton.textContent = "Next"; // Customize button text as needed
nextButton.className = "nextbutton";

// Apply CSS animation class for easy management
nextButton.classList.add("nextButtonAnimation");

// Function to create and add the button
function createSubmitButton(map, clickLocation) {
 const buttonsDiv = document.getElementById("buttons");
 if (!buttonsDiv) {
 console.error("Element with ID 'buttons' not found!");
 return;
 }

 const submitButton = document.createElement("button");
 submitButton.textContent = "Submit"; // Customize button text
 submitButton.classList.add("button"); // Add class 'button'
 submitButton.addEventListener("click", () => {
 // Handle button click event here (e.g., send clickLocation data)
 console.log(
  "Button clicked! Latitude:",
  clickLocation.lat(),
  "Longitude:",
  clickLocation.lng()
 );

 // Get the current marker position when the button is pressed
 const markerPosition = marker.getPosition();

 // Calculate distance between marker and StreetPoints
 const distanceInMeters =
  google.maps.geometry.spherical.computeDistanceBetween(
  new google.maps.LatLng(streetLatitude, streetLongitude),
  markerPosition
  );
 const roundedDistanceInMeters = Math.floor(distanceInMeters); // Round down to the nearest meter
 console.log(
  "Distance to StreetPoints: " + roundedDistanceInMeters + " meters"
 );

 // Adjust points based on distance
 let score = 5000 - roundedDistanceInMeters;
 if (score < 0) {
  score = 0;
 }

 totalScore += score; // Add current points to total
 possibleScore += 5000;
  
 roundScores.push(score);

 const message = "You scored " + score + " points";

 // Update the 'results' div using DOM manipulation
 const resultsDiv = document.getElementById("results");
 resultsDiv.textContent = message;

 // Create a polyline between marker and StreetPoints
 const lineCoordinates = [
  { lat: streetLatitude, lng: streetLongitude },
  { lat: markerPosition.lat(), lng: markerPosition.lng() },
 ];

 const polyline = new google.maps.Polyline({
  path: lineCoordinates,
  geodesic: true,
  strokeColor: "#FF0000",
  strokeOpacity: 1.0,
  strokeWeight: 2,
 });

 // Set the polyline on the map
 polyline.setMap(map);

 marker.setDraggable(false);
 // Replace the buttons
 buttonsDiv.replaceChild(nextButton, submitButton);
 // Set map bounds to encompass marker and polyline
 const bounds = new google.maps.LatLngBounds(); // Use google.maps here
 bounds.extend({ lat: streetLatitude, lng: streetLongitude });
 bounds.extend(polyline.getPath().getAt(1));
 map.fitBounds(bounds);
 });

 buttonsDiv.appendChild(submitButton);
}

fetchStreetDetails((fetchedFeatureID) => {
 updateImage(fetchedFeatureID, PictureURL);
});

// Function to update the image and description
function updateImage(FeatureID, PictureURL) {
 const infoDiv = document.getElementById("info");
 const infoHTML = Description;
 infoDiv.innerHTML = infoHTML;

 const paintingDiv = document.getElementById("painting");
 const imageHTML =
 '<img src="' +
 PictureURL +
 '" onclick="this.requestFullscreen()" style="width: 90%;" class="center">';
 console.log("Image URL:", imageHTML); // Log the image URL to the console
 paintingDiv.innerHTML = imageHTML;
}
// Add click event for the ‘Next’ button
nextButton.addEventListener("click", () => {
 // Increment the image index to fetch the next image
 imageIndex++;

 // Fetch the next image from the JSON file and update the painting div
 fetchStreetDetails((fetchedFeatureID) => {
 updateImage(fetchedFeatureID, PictureURL);
 // Create a LatLng object representing the new position
 const newLatLng = new google.maps.LatLng(21.382325, -8.170154652);
 map.setCenter(newLatLng);
 map.setZoom(3);
 const message = "Where do you think this scene is?";

 // Add click event listener back to the map
 google.maps.event.clearListeners(map, "click"); // Clear existing click listeners
 clickListener = map.addListener("click", (event) => {
  const clickLocation = event.latLng;
  // Create a new marker
  marker = new google.maps.Marker({
  position: clickLocation,
  map: map,
  draggable: true,
  });
  // Remove the click event listener after adding the marker
  google.maps.event.removeListener(clickListener);
  createSubmitButton(map, clickLocation);
 });

 // Update the 'results' div using DOM manipulation
 const resultsDiv = document.getElementById("results");
 resultsDiv.textContent = message;
 });

 const buttonsDiv = document.getElementById("buttons");
 buttonsDiv.removeChild(nextButton);
});'