<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Sarah's Story Quiz</title>
<style>
  body {
    font-family: Arial, sans-serif;
   max-width: 620px;
    margin: 10px auto;
    line-height: 1.6;
font-size: 14px;
  }

  /* Style for the paragraph with image inside */
  #quizText {
    overflow: hidden; /* Clear floats if used */
    margin-bottom: 10px;
  }

  #quizText img {
    float: left;
    width: 150px; /* Adjust size as needed */
    height: auto;
    margin-right: 10px;
    margin-bottom: 0px; /* Add some space below the image if text wraps */
  }

  /* Optional: Style for the heading */
  h2 {
    margin-top: 0;
margin-bottom: 10px;
font-size: 18px;
  }

  /* Style for selects */
  select {
    margin: 0 5px;
  }

  /* Style for the button */
  #scoreButton {
    display: none;
    padding: 10px 10px;
    font-size: 14px;
    cursor: pointer;
  }

  #scoreResult {
    margin-top: 10px;
    font-weight: bold;
  }
</style>
</head>
<body>

<h2>Sarah's Story</h2>

<!-- Paragraph with image floated inside -->
<div id="quizText">
  <p>
    <img src="teacher.jpg" alt="Top Left Image" />
    Sarah is a <select data-correct="Dedicated">
      <option value="">--</option>
    </select> teacher who really loves her job. She thinks it’s <select data-correct="fulfilling">
      <option value="">--</option>
    </select> because she gets to help students grow and succeed. Her personal<select data-correct="qualities">
      <option value="">--</option>
    </select> like patience, creativity, and good communication make her great at what she does. Every day, she prepares interesting lessons, uses videos and games, and encourages her students to participate. Seeing her students become more confident and interested in learning is what keeps her motivated. Despite the busy schedule, she finds her work <select data-correct="Meaningful">
      <option value="">--</option>
    </select> and rewarding.
  </p>
  <p>
    Of course, teaching isn’t always easy. One of the main <select data-correct="drawbacks">
      <option value="">--</option>
    </select> is the workload — teachers often work extra hours grading papers and planning lessons. This can be <select data-correct="overwhelming">
      <option value="">--</option>
    </select> sometimes, especially when managing different students with various needs. Also, the <select data-correct="salary">
      <option value="">--</option>
    </select> isn’t very high considering the effort involved, which can be frustrating. But Sarah feels that the <select data-correct="impact">
      <option value="">--</option>
    </select> she has on her students makes it all worthwhile. She loves her job because it’s lively, full of surprises, and gives her the chance to make a real difference.
  </p>
</div>

<button id="scoreButton">Your Score</button>
<div id="scoreResult"></div>

<script>
// Define questions with options and correct answer
const questions = [
  {
    correct: "dedicated",
    options: ["committed", "indifferent", "negligent"]
  },
  {
    correct: "fulfilling",
    options: ["satisfying", "boring", "frustrating"]
  },
  {
    correct: "qualities",
    options: ["skills", "traits", "disadvantages"]
  },
  {
    correct: "meaningful",
    options: ["pointless", "valuable", "superficial"]
  },
  {
    correct: "drawbacks",
    options: ["advantages", "disadvantages", "benefits"]
  },
  {
    correct: "overwhelming",
    options: ["manageable", "stressful", "easy"]
  },
  {
    correct: "salary",
    options: ["wage", "debt", "expense"]
  },
  {
    correct: "impact",
    options: ["effect", "problem", "obstacle"]
  }
];

// Get all select elements
const selectElements = document.querySelectorAll('select');

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]];
  }
}

// Populate each select with options, ensuring the correct answer is included
questions.forEach((question, index) => {
  const select = selectElements[index];
  const options = [...question.options];
  if (!options.includes(question.correct)) {
    options.push(question.correct);
  }
  shuffleArray(options);
  options.forEach(opt => {
    const optionElem = document.createElement('option');
    optionElem.value = opt;
    optionElem.textContent = opt;
    select.appendChild(optionElem);
  });
});

// Function to check if all selections are made
function checkAllSelected() {
  const allSelected = Array.from(selectElements).every(s => s.value !== "");
  if (allSelected) {
    document.getElementById('scoreButton').style.display = 'inline-block';
  } else {
    document.getElementById('scoreButton').style.display = 'none';
  }
}

// Initial check in case all are pre-selected (unlikely)
checkAllSelected();

// Add event listeners to each select
selectElements.forEach(select => {
  select.addEventListener('change', () => {
    checkAllSelected();
  });
});

// When clicking the score button, evaluate answers
document.getElementById('scoreButton').addEventListener('click', () => {
  let score = 0;
  selectElements.forEach((select, index) => {
    const selectedValue = select.value;
    if (selectedValue === questions[index].correct) {
      score++;
      select.style.border = '2px solid green';
    } else {
      select.style.border = '2px solid red';
    }
  });
  document.getElementById('scoreResult').innerHTML = `You got ${score} out of ${questions.length} correct.`;
});
</script>

</body>
</html>