> ## Documentation Index
> Fetch the complete documentation index at: https://academy.pathfindr.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Concepts

> Some vocabulary to get you started on the module.

export const Quiz = ({question, options, correctIndex, explanation}) => {
  const [selected, setSelected] = useState(null);
  const [showResult, setShowResult] = useState(false);
  const handleSelect = index => {
    if (showResult) return;
    setSelected(index);
    setShowResult(true);
  };
  const isCorrect = selected === correctIndex;
  return <div className="my-8 p-6 rounded-2xl border border-zinc-200 dark:border-zinc-700 bg-gradient-to-br from-zinc-50 to-white dark:from-zinc-900 dark:to-zinc-800 shadow-sm">
      <div className="flex items-center gap-3 mb-4">
        <div className="flex items-center justify-center w-10 h-10 rounded-xl bg-blue-100 dark:bg-blue-900/40">
          <span className="text-xl">📝</span>
        </div>
        <div className="flex flex-col">
          <p className="font-semibold text-zinc-800 dark:text-zinc-100 m-0">Knowledge Check</p>
          <p className="text-xs text-zinc-500 dark:text-zinc-400 mt-0.5 m-0">Select the best answer</p>
      </div>
      </div>
      
      <p className="text-zinc-700 dark:text-zinc-200 font-medium mb-5 text-lg leading-relaxed">{question}</p>
      
      <div className="space-y-3">
        {options.map((option, index) => {
    const isSelected = selected === index;
    const isCorrectOption = index === correctIndex;
    let optionStyles = "border-zinc-200 dark:border-zinc-600 hover:border-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20";
    if (showResult) {
      if (isCorrectOption) {
        optionStyles = "border-green-500 bg-green-50 dark:bg-green-900/30";
      } else if (isSelected && !isCorrectOption) {
        optionStyles = "border-red-500 bg-red-50 dark:bg-red-900/30";
      } else {
        optionStyles = "border-zinc-200 dark:border-zinc-700 opacity-60";
      }
    }
    return <button key={index} onClick={() => handleSelect(index)} disabled={showResult} className={`w-full text-left p-4 rounded-xl border-2 transition-all duration-200 ${optionStyles} ${!showResult && 'cursor-pointer'} ${showResult && 'cursor-default'}`}>
              <div className="flex items-start gap-3">
                <div className={`flex-shrink-0 w-6 h-6 rounded-full border-2 flex items-center justify-center text-xs font-bold ${showResult && isCorrectOption ? 'border-green-500 bg-green-500 text-white' : showResult && isSelected && !isCorrectOption ? 'border-red-500 bg-red-500 text-white' : 'border-zinc-300 dark:border-zinc-500 text-zinc-500 dark:text-zinc-400'}`}>
                  {showResult && isCorrectOption ? '✓' : showResult && isSelected ? '✗' : String.fromCharCode(65 + index)}
                </div>
                <span className="text-sm text-zinc-700 dark:text-zinc-200 leading-relaxed">{option}</span>
              </div>
            </button>;
  })}
      </div>
      
      {showResult && <div className={`mt-5 p-4 rounded-xl ${isCorrect ? 'bg-green-100 dark:bg-green-900/40 border border-green-200 dark:border-green-800' : 'bg-amber-100 dark:bg-amber-900/40 border border-amber-200 dark:border-amber-800'}`}>
          <div className="flex items-start gap-3">
            <span className="text-xl">{isCorrect ? '🎉' : '💡'}</span>
            <div className="flex flex-col">
              <p className={`text-sm font-semibold m-0 mb-1 ${isCorrect ? 'text-green-800 dark:text-green-200' : 'text-amber-800 dark:text-amber-200'}`}>
                {isCorrect ? 'Correct!' : 'Not quite right'}
              </p>
              <p className="text-sm text-zinc-600 dark:text-zinc-300 m-0 leading-relaxed">{explanation}</p>
          </div>
          </div>
        </div>}
    </div>;
};

export const GlossaryRow = ({title, description, children, flip = false, titleClassName = "text-2xl font-semibold tracking-tight text-zinc-950 dark:text-white", descriptionClassName = "mt-3 text-base leading-7 text-zinc-700 dark:text-zinc-300"}) => {
  return <div className="not-prose my-12">
      <div className="grid grid-cols-1 sm:grid-cols-[1fr_1.6fr] gap-10 items-start">
        {}
        <div className={flip ? "sm:order-2" : "sm:order-1"}>
          <div className={titleClassName}>{title}</div>
          {description ? <div className={descriptionClassName}>{description}</div> : null}
        </div>

        {}
        <div className={flip ? "sm:order-1" : "sm:order-2"}>
          <div className="rounded-2xl overflow-hidden bg-transparent pointer-events-auto">
            {children}
          </div>
        </div>
      </div>
    </div>;
};

<GlossaryRow title="Workspace apps" description="Workspace apps let Gemini use context from Gmail, Drive, Docs, Calendar, and more (when connected). When it’s on, Gemini can pull the right details without you pasting everything. You can connect or disconnect access as needed.">
  <div className="w-full aspect-[16/9] rounded-xl overflow-hidden bg-transparent border-0 ring-0 shadow-none">
    <video className="w-full h-full object-contain bg-transparent border-0 ring-0 shadow-none outline-none focus:outline-none focus:ring-0" controls preload="metadata" playsInline>
      <source src="https://mintcdn.com/pathfindr/3TQzs6PVc9ZxsxUT/videos/gemini/geminiConceptsWorkspaceApps.mp4?fit=max&auto=format&n=3TQzs6PVc9ZxsxUT&q=85&s=0dd77a85f7c3acf475e7a18523dbb7cd" type="video/mp4" data-path="videos/gemini/geminiConceptsWorkspaceApps.mp4" />
    </video>
  </div>
</GlossaryRow>

<GlossaryRow title="Side panel" description="The side panel is Gemini inside Google apps like Docs, Sheets, and Gmail. When you work in the side panel, the open file becomes the default context. You can stay in flow instead of bouncing between tabs.">
  <div className="w-full aspect-[16/9] rounded-xl overflow-hidden bg-transparent border-0 ring-0 shadow-none">
    <video className="w-full h-full object-contain bg-transparent border-0 ring-0 shadow-none outline-none focus:outline-none focus:ring-0" controls preload="metadata" playsInline>
      <source src="https://mintcdn.com/pathfindr/3TQzs6PVc9ZxsxUT/videos/gemini/geminiConceptsSidePanel.mp4?fit=max&auto=format&n=3TQzs6PVc9ZxsxUT&q=85&s=b845712107a59586f0dbb24fd80afcb1" type="video/mp4" data-path="videos/gemini/geminiConceptsSidePanel.mp4" />
    </video>
  </div>
</GlossaryRow>

<GlossaryRow title="Gems" description="Gems are custom helpers you set up once, so Gemini follows a consistent style for repeat tasks. When you use a Gem, you cut down on re-explaining the same instructions. You can create different Gems for different jobs.">
  <div className="w-full aspect-[16/9] rounded-xl overflow-hidden bg-transparent border-0 ring-0 shadow-none">
    <video className="w-full h-full object-contain bg-transparent border-0 ring-0 shadow-none outline-none focus:outline-none focus:ring-0" controls preload="metadata" playsInline>
      <source src="https://mintcdn.com/pathfindr/3TQzs6PVc9ZxsxUT/videos/gemini/geminiConceptsGems.mp4?fit=max&auto=format&n=3TQzs6PVc9ZxsxUT&q=85&s=f103f83fc3ea2c939f5a79f6761a5996" type="video/mp4" data-path="videos/gemini/geminiConceptsGems.mp4" />
    </video>
  </div>
</GlossaryRow>

<GlossaryRow title="Connections" description="Connections are the on/off switches that control what Gemini can pull from your Google services. When a connection is off, Gemini can’t use that content as context. You can turn on only what you’re comfy with.">
  <img src="https://mintcdn.com/pathfindr/VD1wT_r1ge0tW_Kg/videos/gemini/geminiConceptsConnections.webp?fit=max&auto=format&n=VD1wT_r1ge0tW_Kg&q=85&s=85a52b6f43024b44be29c0ebbdac244a" alt="Gemini connections concept" className="w-full h-full object-contain bg-transparent border-0 ring-0 shadow-none rounded-xl" noZoom={true} width="1920" height="1080" data-path="videos/gemini/geminiConceptsConnections.webp" />
</GlossaryRow>

<GlossaryRow title="Double Check" description="Double-check is Gemini Thinking mode's built-in way to verify claims using Google Search. When something feels iffy, they can run double-check to see what matches (or doesn’t) online. It’s a handy safety step before sharing answers in a deck or email.">
  <div className="w-full aspect-[16/9] rounded-xl overflow-hidden bg-transparent border-0 ring-0 shadow-none">
    <video className="w-full h-full object-contain bg-transparent border-0 ring-0 shadow-none outline-none focus:outline-none focus:ring-0" controls preload="metadata" playsInline>
      <source src="https://mintcdn.com/pathfindr/3TQzs6PVc9ZxsxUT/videos/gemini/geminiConceptsDoubleCheck.mp4?fit=max&auto=format&n=3TQzs6PVc9ZxsxUT&q=85&s=62de47a0d62de697e90eabeaa8e7b705" type="video/mp4" data-path="videos/gemini/geminiConceptsDoubleCheck.mp4" />
    </video>
  </div>
</GlossaryRow>

<div className="mt-8" />

<Accordion title="🎯 Test your understanding">
  <Quiz
    question="Which feature allows Gemini to pull context directly from your Google Sheets, Docs, and Gmail?"
    options={[
  "Gems",
  "Workspace apps",
  "Side panel",
  "Double Check"
]}
    correctIndex={1}
    explanation="Connecting Workspace apps allows Gemini to directly access and utilize files from your Google ecosystem as context."
  />
</Accordion>