Update index.html

index.html

@@ -9,9 +9,9 @@
   <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">Semantic Kernel TicTacToe</h1>
     <p class="text-center text-sm text-gray-600 mb-4">
-      Source: <a href="https://learn.microsoft.com/en-us/semantic-kernel/overview/"
+      Source: <a href="https://www.linkedin.com/pulse/illustrated-introduction-semantic-kernel-michael-lively-yogge/"
                  class="text-blue-600 underline" target="_blank" rel="noopener">
-        Introduction to Semantic Kernel
+        An Illustrated Introduction to Semantic Kernel (LinkedIn)
       </a>
     </p>
 
@@ -34,106 +34,139 @@
   </div>
 
   <script>
-    // Questions derived from the Microsoft Learn "Introduction to Semantic Kernel" page.
+    // Questions derived from the provided LinkedIn article text.
     const questions = [
       {
-        question: 'What is Semantic Kernel (SK)?',
+        question: 'In the article, what problem does Semantic Kernel (SK) primarily solve?',
         choices: [
-          'A managed cloud database',
-          'A frontend UI framework',
-          'A lightweight, open-source dev kit to build AI agents and integrate models into C#, Python, or Java',
-          'A container orchestration platform'
+          'Rendering front-end UI components',
+          'Bridging AI intelligence with real-world actions and system integration',
+          'Replacing databases with vector search',
+          'Training new foundation models from scratch'
         ],
-        answer: 3,
-        hint: 'Think SDK + agents + connecting models to your code.'
+        answer: 2,
+        hint: 'It’s about orchestration, not model training.'
       },
       {
-        question: 'Which languages have 1.0+ support in SK?',
+        question: 'Which analogy best describes SK in the article?',
         choices: [
-          'C#, Python, and Java',
-          'Ruby and Go',
-          'Only C#',
-          'JavaScript only'
+          'AI as the conductor, SK as the audience',
+          'SK as the conductor coordinating models (soloist) and plugins (instruments)',
+          'Plugins as the stage, SK as the spotlight',
+          'The Kernel as the ticket booth'
         ],
-        answer: 1,
-        hint: 'It’s a trio commonly used in enterprise backends.'
+        answer: 2,
+        hint: 'Conductor ↔ orchestra.'
       },
       {
-        question: 'What role does SK play in your application architecture?',
+        question: 'What is the Kernel’s role?',
         choices: [
-          'It renders HTML in the browser',
-          'It is a database ORM',
-          'It serves as middleware connecting AI models to your code and tools',
-          'It replaces your container runtime'
+          'Only routes HTTP requests',
+          'Central orchestrator that selects models, prepares prompts, calls plugins, and returns results',
+          'Persistent data store for embeddings',
+          'Front-end renderer for chat UIs'
         ],
-        answer: 3,
-        hint: 'It sits between models and your functions/APIs.'
+        answer: 2,
+        hint: 'Think “mission control.”'
       },
       {
-        question: 'Which “enterprise ready” capability is highlighted for SK?',
+        question: 'Which is NOT listed as one of the five main components?',
         choices: [
-          'Telemetry support plus hooks/filters for responsible AI',
-          'Built-in GPU scheduler',
-          'Native blockchain smart contracts',
-          'No observability by design'
+          'AI Connectors',
+          'Plugins',
+          'Prompt Templates',
+          'GPU Schedulers'
         ],
-        answer: 1,
-        hint: 'Observability and responsible AI integration matter at scale.'
+        answer: 4,
+        hint: 'Components include connectors, plugins, prompts, memory, planners.'
       },
       {
-        question: 'How does SK help automate business processes?',
+        question: 'AI Connectors are primarily used to…',
         choices: [
-          'By combining prompts with your existing APIs and translating model function calls to your code',
-          'By auto-migrating databases between clouds',
-          'By generating CSS from design files',
-          'By replacing all REST endpoints with GraphQL automatically'
+          'Switch or add models without rewriting the entire app',
+          'Compile TypeScript to JavaScript',
+          'Encrypt database backups',
+          'Render SVG charts'
         ],
         answer: 1,
-        hint: 'Function/tool calling + your existing services.'
+        hint: 'They link the Kernel to Azure OpenAI/OpenAI/etc.'
       },
       {
-        question: 'What does adding your code as a “plugin” in SK enable?',
+        question: 'Plugins give the AI the power to…',
         choices: [
-          'Flexible integration with AI services and reuse via connectors',
-          'Automatic UI generation for mobile apps only',
-          'Kernel-level OS scheduling',
-          'Replacing CI/CD pipelines'
+          'Change GPU clock speeds',
+          'Perform real-world actions like API calls or database queries',
+          'Alter the operating system kernel',
+          'Format CSS variables'
         ],
-        answer: 1,
-        hint: 'Expose capabilities so models can call them.'
+        answer: 2,
+        hint: 'Think “tools” the model can call.'
       },
       {
-        question: 'Which specification does SK use so extensions can be shared broadly?',
+        question: 'Prompt templates in SK are described as…',
         choices: [
-          'GraphQL SDL',
-          'SOAP',
-          'OpenAPI',
-          'WSDL only'
+          'Randomized prompts for model robustness',
+          'Static instructions only',
+          'Structured instructions blending guidance with dynamic inputs',
+          'A replacement for function calling'
         ],
         answer: 3,
-        hint: 'It’s the same spec used widely across modern APIs (and Microsoft 365 Copilot).'
+        hint: 'Recipe + ingredients.'
+      },
+      {
+        question: 'Memory in SK enables…',
+        choices: [
+          'GPU memory pooling',
+          'Storing and retrieving context across interactions (e.g., via vector DBs)',
+          'Only short-term cache of HTTP responses',
+          'Compiling kernel modules'
+        ],
+        answer: 2,
+        hint: 'Continuity for users over time.'
+      },
+      {
+        question: 'Planners are used for…',
+        choices: [
+          'Choosing CSS themes',
+          'Breaking tasks into steps and deciding plugin call order',
+          'Encrypting traffic between services',
+          'Scaling Kubernetes pods'
+        ],
+        answer: 2,
+        hint: 'Multi-step task strategy.'
       },
       {
-        question: 'What happens when new AI models are released, according to the overview?',
+        question: 'Which sequence best matches the “How it connects” flow?',
         choices: [
-          'You must rewrite your whole codebase',
-          'You simply swap models without major rewrites',
-          'You cannot use them until SK 2.0',
-          'They only work for chat completions'
+          'Plugins → Planner → Memory → Connectors → Prompt → Output',
+          'User request → Connectors/model select → Prompt template → Plugins → Memory (context) → Planner (multi-step) → Output',
+          'User request → Memory only → Output',
+          'Planner → Connectors → User request → Output'
         ],
         answer: 2,
-        hint: 'Future-proofing is a design goal.'
+        hint: 'Start with the user request and end with output.'
       },
       {
-        question: 'Existing chat-based APIs can be expanded to support which modalities?',
+        question: 'Which is a listed real-world use case in the article?',
         choices: [
-          'Blockchain and AR only',
-          'Audio only',
-          'Voice and video',
-          'Thermal imaging'
+          'Terraform plan generation',
+          'Quantum circuit compilation',
+          'Retail order/return handling via service bots',
+          '3D graphics rendering'
         ],
         answer: 3,
-        hint: 'Think beyond text.'
+        hint: 'Retail shows up alongside finance/healthcare/education.'
+      },
+      {
+        question: 'What differentiates SK according to the article’s “Framework for the Future” section?',
+        choices: [
+          'It is locked to one provider and one memory store',
+          'Modularity and adaptability—swap models/tools without starting from scratch',
+          'Only supports text modality',
+          'Requires rewriting for every model update'
+        ],
+        answer: 2,
+        hint: 'Modular, provider-agnostic design.'
       }
     ];
 
@@ -183,7 +216,7 @@
       panelQuestion.innerText = q.question;
       panelChoices.innerHTML = '';
       panelHint.classList.add('hidden');
-      panelHint.innerText = q.hint;
+      panelHint.innerText = q.hint || '';
       q.choices.forEach((c, i) => {
         const li = document.createElement('li');
         const btn = document.createElement('button');