Untitled

// Array of all options
const imagesWithText = [
  { id: "1", image: "../assets/images/beach.png", text: "مشاهدة غروب الشمس", result: "../assets/images/Background8.png" },
  { id: "2", image: "../assets/images/cinema.png", text: "مشاهدة فيلم في سينما", result: "../assets/images/Background4.png" },
  { id: "3", image: "../assets/images/hiking.png", text: "مغامرات الويكاند", result: "../assets/images/teamaeon_Hikers_with_backpacks_and_walking_sticks_on_the_way_to_11d7d8e0-8323-4f5e-9f25-682e9d158fac.png" },
  { id: "4", image: "../assets/images/restaurant.png", text: "نتجمعو في مطعم جديد", result: "../assets/images/teamaeon_A_group_of_friends_having_dinner_in_an_open_air_restau_133c7d9e-8e7f-4d98-8ac5-4bf2f781c797.png" },
];

// Index to keep track of the current position in the array
let currentIndex = 0;

// Array to store the current options
let currentOptions = [];

// Variable to store the chosen option
let chosenOption = null;

// Function to initialize the game
function initializeGame() {
  currentOptions = [imagesWithText[0], imagesWithText[1]];
  displayOptions();
}

// Function to display current options
function displayOptions() {
  const option1Element = document.getElementById('option-1');
  const option2Element = document.getElementById('option-2');

  option1Element.querySelector('#text-1').textContent = currentOptions[0].text;
  option2Element.querySelector('#text-2').textContent = currentOptions[1].text;

  option1Element.style.backgroundImage = `url('${currentOptions[0].image}')`;
  option2Element.style.backgroundImage = `url('${currentOptions[1].image}')`;
}

// Function to handle option selection
function selectOption(optionIndex) {
  chosenOption = currentOptions[optionIndex];
  
  // Move to the next option in the array
  currentIndex++;
  if (currentIndex < imagesWithText.length) {
    currentOptions[1 - optionIndex] = imagesWithText[currentIndex];
  } else {
    endGame();
    return;
  }

  displayOptions();
}

// Function to end the game
function endGame() {
  // Save the last chosen option
  saveResult(chosenOption);

  // Display the result
  displayResult();
}

// Function to save the result
function saveResult(result) {
  // Implement your logic to save the result, e.g., send to a server or save in local storage
  localStorage.setItem('gameResult', JSON.stringify(result));
}

// Function to display the result
function displayResult() {
  const resultElement = document.getElementById('result');
  resultElement.textContent = `Your final choice: ${chosenOption.text}`;
  resultElement.style.backgroundImage = `url('${chosenOption.result}')`;

  // Show the result section
  document.getElementById('section2').style.display = 'block';
}

// Initialize the game when the page loads
window.onload = initializeGame;

// Event listeners for option selection
document.getElementById('option-1').addEventListener('click', () => selectOption(0));
document.getElementById('option-2').addEventListener('click', () => selectOption(1));

// Event listener for the "Next" button
document.querySelector('.footer-btn-next').addEventListener('click', () => {
  if (currentIndex >= imagesWithText.length - 1) {
    endGame();
  } else {
    // Continue to the next round
    displayOptions();
  }
});