Spaces:

eaglelandsonce
/

AI_History_TicTacToe

Running

App Files Files Community

eaglelandsonce commited on 24 days ago

Commit

fad5160

verified ·

1 Parent(s): 3db803d

Update index.html

Browse files

Files changed (1) hide show

index.html +369 -18

index.html CHANGED Viewed

@@ -1,19 +1,370 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <title>History of AI TicTacToe</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+</head>
+<body class="bg-gradient-to-br from-sky-50 to-indigo-100 flex items-center justify-center min-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-indigo-800">History of AI TicTacToe</h1>
+    <p class="text-center text-sm text-gray-600 mb-4">
+      Source:
+      <a href="https://www.linkedin.com/pulse/milestones-ai-conversational-systems-michael-lively-5k24e/"
+         class="text-blue-600 underline" target="_blank" rel="noopener">
+        Milestones in AI Conversational Systems (LinkedIn)
+      </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 flex-col md:flex-row items-start justify-center md:space-x-4 space-y-4 md:space-y-0">
+      <div id="board" class="grid grid-cols-3 gap-1 border-4 border-gray-300 rounded-lg p-2 bg-white mx-auto"></div>
+      <div id="questionPanel" class="md:w-1/2 w-full 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-indigo-700 text-white rounded hover:bg-indigo-800">Restart</button>
+    </div>
+  </div>
+  <script>
+    // Question bank derived from the provided timeline content.
+    // Answers are 1-based indexes.
+    const questions = [
+      {
+        question: 'What is the core idea of the Turing Test?',
+        choices: [
+          'Measuring model size in parameters',
+          'Testing if a machine’s behavior is indistinguishable from a human',
+          'Scoring accuracy on multiple-choice exams',
+          'Ranking search results by PageRank'
+        ],
+        answer: 2,
+        hint: 'It’s about human-like behavior in conversation.'
+      },
+      {
+        question: 'ELIZA (1966) is best known for:',
+        choices: [
+          'Learning Go from scratch',
+          'A DOCTOR script that mimicked a psychotherapist via keyword matching',
+          'Speech recognition on smartphones',
+          'A proactive card-based assistant'
+        ],
+        answer: 2,
+        hint: 'Think “keyword matching” and therapy-style replies.'
+      },
+      {
+        question: 'PARRY (1972) primarily focused on:',
+        choices: [
+          'Financial forecasting',
+          'Modeling a patient with paranoid schizophrenia with emotionally consistent replies',
+          'Generating images from text prompts',
+          'Machine translation between English and French'
+        ],
+        answer: 2,
+        hint: 'Psychiatrist Kenneth Colby created it.'
+      },
+      {
+        question: 'SHRDLU (1973) operated in which environment?',
+        choices: [
+          'A simulated “blocks world” following natural language commands',
+          'A self-driving car simulator',
+          'A web-scale search index',
+          'A voice-controlled smart home'
+        ],
+        answer: 1,
+        hint: 'Small world, big reasoning.'
+      },
+      {
+        question: 'Jabberwacky (1988) aimed to:',
+        choices: [
+          'Translate languages in real time',
+          'Hold human-like, entertaining conversations using contextual pattern matching',
+          'Provide medical triage on kiosks',
+          'Control industrial robots'
+        ],
+        answer: 2,
+        hint: 'Entertainment and personality.'
+      },
+      {
+        question: 'A.L.I.C.E. (1995) was built on:',
+        choices: [
+          'AIML (Artificial Intelligence Markup Language)',
+          'TensorFlow',
+          'Prolog',
+          'Reinforcement Learning from Human Feedback'
+        ],
+        answer: 1,
+        hint: 'Markup language for pattern-based chats.'
+      },
+      {
+        question: 'Reinforcement Learning (2000s) teaches agents by:',
+        choices: [
+          'Backtranslating sentences',
+          'Labeled images only',
+          'Trial and error with rewards and penalties',
+          'Counting word frequencies'
+        ],
+        answer: 3,
+        hint: 'Actions → rewards → policy.'
+      },
+      {
+        question: 'IBM Watson gained fame by winning which game show in 2011?',
+        choices: [
+          'Who Wants to Be a Millionaire?',
+          'The Price Is Right',
+          'Jeopardy!',
+          'Family Feud'
+        ],
+        answer: 3,
+        hint: 'Clues in natural language.'
+      },
+      {
+        question: 'The Medical Bayesian Kiosk (2010) showcased:',
+        choices: [
+          'Self-attention networks',
+          'Probabilistic diagnosis using Bayesian inference via a kiosk',
+          'Neural machine translation',
+          'Edge TPU acceleration'
+        ],
+        answer: 2,
+        hint: 'Bayes at the point of care.'
+      },
+      {
+        question: 'Apple Siri (2011) marked the mainstreaming of:',
+        choices: [
+          'On-device GAN image synthesis',
+          'Voice assistants integrating speech recognition and NLP',
+          'Quantum encryption',
+          'AR glasses for shoppers'
+        ],
+        answer: 2,
+        hint: '“Hey…” on phones.'
+      },
+      {
+        question: 'Google Now (2012) was known for:',
+        choices: [
+          'Pattern-based AIML chats',
+          'Proactive, context-aware cards with personalized info',
+          'Only offline speech dictation',
+          'Generating code from prompts'
+        ],
+        answer: 2,
+        hint: 'Cards and context.'
+      },
+      {
+        question: 'Word2Vec (2013) introduced:',
+        choices: [
+          'Symbolic logic rules',
+          'Dense word embeddings capturing semantic relationships',
+          'Only one-hot encodings',
+          'Audio-to-text pipelines'
+        ],
+        answer: 2,
+        hint: 'Vectors that reflect meaning.'
+      },
+      {
+        question: 'Microsoft Cortana (2014) focused on:',
+        choices: [
+          'Windows integration for productivity tasks and reminders',
+          'Cloud GPU scheduling',
+          'Streaming video recommendations only',
+          'IoT sensor calibration'
+        ],
+        answer: 1,
+        hint: 'Assistant baked into Windows.'
+      },
+      {
+        question: 'Amazon Alexa (2015) popularized:',
+        choices: [
+          'Home voice interaction and smart-home integration',
+          'Neural radiance fields',
+          'Handwriting recognition on PDAs',
+          'Genome assembly'
+        ],
+        answer: 1,
+        hint: '“Skills” + smart speakers.'
+      },
+      {
+        question: 'AlphaGo (2016) was notable because:',
+        choices: [
+          'It solved protein folding first',
+          'It defeated world champions in Go using deep RL',
+          'It ran only on mobile phones',
+          'It was purely rule-based'
+        ],
+        answer: 2,
+        hint: 'Monte Carlo search + policy/value nets.'
+      },
+      {
+        question: 'Transformers (2017) revolutionized NLP by using:',
+        choices: [
+          'Only convolution',
+          'Self-attention mechanisms instead of recurrence',
+          'Rule-based grammars',
+          'Acoustic models'
+        ],
+        answer: 2,
+        hint: '“Attention Is All You Need.”'
+      },
+      {
+        question: 'BERT (2018) provided:',
+        choices: [
+          'Static embeddings',
+          'Contextual embeddings that vary by sentence context',
+          'Purely symbolic parsing',
+          'Only character-level models'
+        ],
+        answer: 2,
+        hint: 'Bidirectional context.'
+      },
+      {
+        question: 'ChatGPT (2022) was fine-tuned for:',
+        choices: [
+          'Dialogue—coherent, context-aware conversations',
+          '3D mesh reconstruction',
+          'Time-series forecasting only',
+          'Optical flow estimation'
+        ],
+        answer: 1,
+        hint: 'It chats. A lot.'
+      },
+      {
+        question: 'Which pairing is correct?',
+        choices: [
+          'ELIZA — deep reinforcement learning',
+          'PARRY — proactive card-based assistant',
+          'SHRDLU — blocks world language understanding',
+          'Word2Vec — rule-based templates'
+        ],
+        answer: 3,
+        hint: 'Think Winograd.'
+      },
+      {
+        question: 'Which is the correct chronological order?',
+        choices: [
+          'A.L.I.C.E. (1995) → ELIZA (1966) → PARRY (1972)',
+          'ELIZA (1966) → PARRY (1972) → A.L.I.C.E. (1995)',
+          'PARRY (1972) → A.L.I.C.E. (1995) → ELIZA (1966)',
+          'A.L.I.C.E. (1995) → PARRY (1972) → ELIZA (1966)'
+        ],
+        answer: 2,
+        hint: '1960s → 1970s → 1990s.'
+      },
+      {
+        question: 'Which statement best captures the timeline’s theme?',
+        choices: [
+          'Shift from symbolic rules to data-driven and deep learning approaches enabling human-like communication',
+          'Decline of NLP research over time',
+          'Exclusive focus on robotics',
+          'Abandonment of embeddings'
+        ],
+        answer: 1,
+        hint: 'From patterns → embeddings → transformers.'
+      }
+    ];
+    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');
+      panelHint.innerText = '';
+      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 transition';
+        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-gray-100 rounded hover:bg-gray-200';
+        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>