trycua--cua/libs/cua-bench/datasets/cua-bench-basic/click-button/gui/index.html

<main class="flex flex-col p-6 w-full h-full" role="main" aria-label="Task interface">
  <h1 class="text-xl font-semibold text-gray-900 mb-6">Click the button</h1>
  <div id="button-container" class="grid grid-cols-2 gap-4 max-w-md">
    <!-- Buttons will be inserted here by JavaScript -->
  </div>
  <script>
    window.__submitted = false;

    const targetText = '{{BUTTON_TEXT}}';

    // All possible button texts (distractors)
    const allButtonTexts = [
      'Submit',
      'Click Me',
      'Click Here',
      'OK',
      'Cancel',
      'Close',
      'Start',
      'Continue',
      'Next',
      'Back',
      'Save',
      'Delete',
    ];

    // Create array with target button and 5-7 random distractors
    const distractors = allButtonTexts.filter((text) => text !== targetText);
    const numDistractors = 5 + Math.floor(Math.random() * 3); // 5-7 distractors
    const selectedDistractors = distractors
      .sort(() => Math.random() - 0.5)
      .slice(0, numDistractors);

    // Combine target with distractors and shuffle
    const buttons = [targetText, ...selectedDistractors].sort(() => Math.random() - 0.5);

    // Create buttons
    const container = document.getElementById('button-container');
    buttons.forEach((text, index) => {
      const button = document.createElement('button');
      button.textContent = text;
      button.className =
        'px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded border transition-colors';
      button.setAttribute('aria-label', text + ' button');

      if (text === targetText) {
        button.id = 'submit';
        button.classList.add('btn');
        button.addEventListener('click', function () {
          window.__submitted = true;
          this.textContent = 'Clicked!';
          this.disabled = true;
          this.className =
            'px-4 py-2 bg-green-500 text-white rounded border cursor-not-allowed opacity-75';
        });
      } else {
        button.addEventListener('click', function () {
          // Wrong button clicked - show feedback
          this.className =
            'px-4 py-2 bg-red-500 text-white rounded border cursor-not-allowed opacity-75';
          this.disabled = true;
        });
      }

      container.appendChild(button);
    });
  </script>
</main>