index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vector Database TicTacToe</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gradient-to-br from-green-50 to-green-100 flex items-center justify-center h-screen">
  <div class="max-w-5xl w-full bg-white rounded-2xl shadow-lg p-6">
    <h1 class="text-3xl font-extrabold mb-4 text-center text-green-800">Vector Database TicTacToe</h1>
    <p class="text-center mb-4 text-sm text-gray-600">
      Reference: <a href="https://www.linkedin.com/pulse/introduction-vector-databases-michael-lively-dmeje/" class="text-green-600 hover:underline" target="_blank">Introduction to Vector Databases</a>
    </p>
    <div id="banner" class="hidden bg-green-100 border border-green-300 text-green-800 font-bold text-center py-2 rounded mb-4"></div>

    <div class="flex items-start justify-center space-x-4">
      <div id="board" class="grid grid-cols-3 gap-1 border-4 border-green-300 rounded-lg p-2 bg-white mx-auto"></div>
      <div id="questionPanel" class="w-1/2 bg-gray-50 rounded-lg shadow p-4">
        <h2 id="panelQuestion" class="text-xl font-semibold text-gray-800">Select a square to view the question</h2>
        <ul id="panelChoices" class="mt-4 space-y-2"></ul>
        <p id="panelHint" class="mt-3 text-sm text-gray-600 hidden"></p>
        <button id="hintBtn" class="mt-4 px-3 py-1 bg-gray-200 text-gray-700 rounded hover:bg-gray-300">Show Hint</button>
      </div>
    </div>

    <div class="flex justify-between mt-6">
      <p id="status" class="text-lg font-medium text-gray-800"></p>
      <button id="restartBtn" class="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700">Restart</button>
    </div>
  </div>

  <script>
    const questions = [
      {
        question: 'What is a vector database primarily designed to store and retrieve?',
        choices: [
          'Relational records',
          'High-dimensional vectors',
          'Flat files',
          'Time-series logs'
        ],
        answer: 2,
        hint: 'Think embeddings from LLMs and images.'
      },
      {
        question: 'Which similarity measure is commonly used to compare vectors?',
        choices: [
          'Euclidean distance',
          'Levenshtein distance',
          'Jaccard index',
          'Hamming distance'
        ],
        answer: 1,
        hint: 'It measures straight-line distance in space.'
      },
      {
        question: 'Why use Approximate Nearest Neighbor (ANN) search in vector DBs?',
        choices: [
          'To guarantee exact matches quickly',
          'To reduce memory usage only',
          'To speed up searches with large datasets',
          'To enforce data normalization'
        ],
        answer: 3,
        hint: 'Trading a bit of precision for performance.'
      },
      {
        question: 'What data structure helps index vectors for fast lookup?',
        choices: [
          'B-Tree',
          'Inverted index',
          'KD-Tree or HNSW graph',
          'Hash join table'
        ],
        answer: 3,
        hint: 'Hierarchical Navigable Small World is one.'
      },
      {
        question: 'Which embedding type might you store for a text document?',
        choices: [
          'One-hot encoding',
          'TF-IDF vector',
          'Neural network embedding',
          'Bitmap image'
        ],
        answer: 3,
        hint: 'Generated by models like BERT or Ada.'
      },
      {
        question: 'In the vector DB context, what does “dimension” refer to?',
        choices: [
          'Number of documents',
          'Length of each vector',
          'Storage size in MB',
          'Number of users'
        ],
        answer: 2,
        hint: 'It’s how many coordinates per vector.'
      },
      {
        question: 'What’s a common use case for vector databases?',
        choices: [
          'Transaction processing',
          'Semantic search and recommendation',
          'Log aggregation',
          'Batch billing'
        ],
        answer: 2,
        hint: 'Retrieving similar items by meaning.'
      },
      {
        question: 'Which open-source vector database did the article mention?',
        choices: [
          'MongoDB',
          'PostgreSQL',
          'Chroma',
          'MySQL'
        ],
        answer: 3,
        hint: 'Chroma by Chroma DB project.'
      },
      {
        question: 'What step comes first when ingesting data into a vector DB?',
        choices: [
          'Storing raw text',
          'Computing embeddings',
          'Creating SQL tables',
          'Visualizing data'
        ],
        answer: 2,
        hint: 'You need numeric vectors before indexing.'
      }
    ];
    let currentPlayer, boardState, cellQuestions, selectedCell;
    const boardEl = document.getElementById('board');
    const statusEl = document.getElementById('status');
    const bannerEl = document.getElementById('banner');
    const hintBtn = document.getElementById('hintBtn');
    const panelQuestion = document.getElementById('panelQuestion');
    const panelChoices = document.getElementById('panelChoices');
    const panelHint = document.getElementById('panelHint');
    const restartBtn = document.getElementById('restartBtn');
    function initGame() {
      currentPlayer = 'X';
      boardState = Array(9).fill('');
      bannerEl.classList.add('hidden');
      statusEl.innerText = '';
      const shuffled = questions.sort(() => 0.5 - Math.random());
      cellQuestions = shuffled.slice(0, 9);
      panelQuestion.innerText = 'Select a square to view the question';
      panelChoices.innerHTML = '';
      panelHint.classList.add('hidden');
      renderBoard();
    }
    function renderBoard() {
      boardEl.innerHTML = '';
      boardState.forEach((mark, idx) => {
        const btn = document.createElement('button');
        let cls = 'bg-white h-24 w-24 flex items-center justify-center text-2xl font-bold rounded-lg shadow hover:bg-gray-100';
        if (mark === 'X') cls += ' text-blue-600';
        if (mark === 'O') cls += ' text-red-600';
        btn.className = cls;
        btn.innerText = mark;
        btn.disabled = mark !== '';
        btn.addEventListener('click', () => openQuestion(idx));
        boardEl.appendChild(btn);
      });
      statusEl.innerText = `Current: ${currentPlayer}`;
    }
    function openQuestion(idx) {
      selectedCell = idx;
      const q = cellQuestions[idx];
      panelQuestion.innerText = q.question;
      panelChoices.innerHTML = '';
      panelHint.classList.add('hidden');
      panelHint.innerText = q.hint;
      q.choices.forEach((c, i) => {
        const li = document.createElement('li');
        const btn = document.createElement('button');
        btn.innerText = c;
        btn.className = 'w-full text-left px-4 py-2 bg-green-50 rounded hover:bg-green-100';
        btn.addEventListener('click', () => handleAnswer(i + 1));
        li.appendChild(btn);
        panelChoices.appendChild(li);
      });
    }
    function handleAnswer(choice) {
      const q = cellQuestions[selectedCell];
      if (choice === q.answer) {
        boardState[selectedCell] = currentPlayer;
        renderBoard();
        if (checkWin()) return endGame(`${currentPlayer} wins!`);
        if (boardState.every(c => c)) return endGame('Stalemate!');
      } else {
        alert('Incorrect! Turn missed.');
      }
      currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
      statusEl.innerText = `Current: ${currentPlayer}`;
    }
    function checkWin() {
      const wins = [
        [0,1,2],[3,4,5],[6,7,8],
        [0,3,6],[1,4,7],[2,5,8],
        [0,4,8],[2,4,6]
      ];
      return wins.some(combo => combo.every(i => boardState[i] === currentPlayer));
    }
    function endGame(msg) {
      bannerEl.innerText = `🎉 ${msg}`;
      bannerEl.classList.remove('hidden');
      document.querySelectorAll('#board button').forEach(b => b.disabled = true);
    }
    hintBtn.addEventListener('click', () => panelHint.classList.toggle('hidden'));
    restartBtn.addEventListener('click', initGame);
    initGame();
  </script>
</body>
</html>