Skip to content

Instantly share code, notes, and snippets.

@ekaone

ekaone/index.html

Created January 16, 2026 04:35
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ekaone/ba0a52fc9fcc8de619c8569929c339d7 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ekaone/ba0a52fc9fcc8de619c8569929c339d7 to your computer and use it in GitHub Desktop.
Download ZIP
Quiz generated from Youtube by Google Opal
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>YouTube Learning Report: Google Opal AI</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Outfit:wght@600;700;800&display=swap');
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.glass-card {
background: rgba(255, 255, 255, 0.05);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.gradient-text {
background: linear-gradient(90deg, #38bdf8, #818cf8);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
}
.fancy-border {
border: 1px solid transparent;
background-clip: padding-box, border-box;
background-origin: padding-box, border-box;
background-image: linear-gradient(to right, #0e172a, #0e172a), linear-gradient(90deg, rgba(56, 189, 248, 0.2), rgba(129, 140, 248, 0.2));
}
.quiz-option {
transition: all 0.2s ease-in-out;
}
.quiz-option:hover {
background-color: rgba(56, 189, 248, 0.1);
transform: translateY(-2px);
}
.quiz-option.correct {
background-color: rgba(16, 185, 129, 0.2);
border-color: rgba(16, 185, 129, 0.8);
color: #d1fae5;
}
.quiz-option.incorrect {
background-color: rgba(239, 68, 68, 0.2);
border-color: rgba(239, 68, 68, 0.8);
color: #fee2e2;
}
</style>
<script>
tailwind.config = {
theme: {
extend: {
fontFamily: {
sans: ['Inter', 'sans-serif'],
display: ['Outfit', 'sans-serif'],
},
colors: {
'brand-bg': '#0e172a',
'brand-surface': '#1e293b',
'brand-primary': '#38bdf8',
'brand-secondary': '#818cf8',
'brand-text': '#cbd5e1',
'brand-subtle': '#94a3b8',
},
animation: {
'fade-in-up': 'fadeInUp 0.8s ease-out forwards',
'gradient-pulse': 'gradientPulse 5s ease infinite',
},
keyframes: {
fadeInUp: {
'0%': { opacity: '0', transform: 'translateY(20px)' },
'100%': { opacity: '1', transform: 'translateY(0)' },
},
gradientPulse: {
'0%, 100%': { 'background-position': '0% 50%' },
'50%': { 'background-position': '100% 50%' },
}
}
}
}
}
</script>
</head>
<body class="bg-brand-bg font-sans text-brand-text">
<div class="relative min-h-screen overflow-hidden p-4 sm:p-6 lg:p-8">
<!-- Background Glows -->
<div class="absolute top-0 left-0 -translate-x-1/3 -translate-y-1/3 w-96 h-96 bg-brand-primary/10 rounded-full blur-3xl animate-pulse"></div>
<div class="absolute bottom-0 right-0 translate-x-1/3 translate-y-1/3 w-96 h-96 bg-brand-secondary/10 rounded-full blur-3xl animate-pulse delay-1000"></div>
<header class="text-center mb-12 animate-fade-in-up" style="animation-delay: 0.1s;">
<h1 class="font-display text-4xl sm:text-5xl lg:text-6xl font-extrabold tracking-tight">
<span class="gradient-text">YouTube Learning Report</span>
</h1>
<p class="mt-4 text-lg text-brand-subtle max-w-2xl mx-auto">An AI-driven analysis of automating project management with Google Opal</p>
</header>
<main class="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-3 gap-6 lg:gap-8">
<!-- Left Column: Video & Key Learnings -->
<div class="lg:col-span-2 space-y-6 lg:space-y-8">
<!-- Video Section -->
<section class="glass-card rounded-2xl p-6 lg:p-8 shadow-2xl shadow-black/20 animate-fade-in-up" style="animation-delay: 0.3s;">
<h2 class="font-display text-2xl sm:text-3xl font-bold mb-4 flex items-center gap-3">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-brand-primary" viewBox="0 0 24 24" fill="currentColor"><path d="M21.582 6.186a2.016 2.016 0 0 0-1.423-1.42C18.67 4.5 12 4.5 12 4.5s-6.67 0-8.159.266c-.636.174-1.15.596-1.423 1.232C2 7.67 2 12 2 12s0 4.33.266 5.814c.174.636.596 1.15 1.232 1.423C4.33 19.5 12 19.5 12 19.5s6.67 0 8.159-.266a2.016 2.016 0 0 0 1.423-1.423C22 16.33 22 12 22 12s0-4.33-.418-5.814zM9.75 15.5V8.5l6 3.5-6 3.5z"/></svg>
Original Video
</h2>
<div class="aspect-video bg-black/50 rounded-lg flex items-center justify-center border border-slate-700/50">
<div class="text-center text-brand-subtle">
<svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 mx-auto text-slate-600" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 14.5v-9l6 4.5-6 4.5z"/></svg>
<p class="mt-2 text-sm">Video content not available for playback.</p>
</div>
</div>
</section>
<!-- Key Learning Points Section -->
<section class="glass-card rounded-2xl p-6 lg:p-8 shadow-2xl shadow-black/20 animate-fade-in-up" style="animation-delay: 0.4s;">
<h2 class="font-display text-2xl sm:text-3xl font-bold mb-6 flex items-center gap-3">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-brand-primary" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>
Key Learning Points
</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div class="fancy-border rounded-lg p-4">
<h3 class="font-bold text-white mb-1">IPO Framework</h3>
<p class="text-sm text-brand-subtle">Utilizes a fundamental Input, Process, Output structure for building workflows.</p>
</div>
<div class="fancy-border rounded-lg p-4">
<h3 class="font-bold text-white mb-1">No-Code Automation</h3>
<p class="text-sm text-brand-subtle">Build complex automations using natural language with minimal technical knowledge.</p>
</div>
<div class="fancy-border rounded-lg p-4">
<h3 class="font-bold text-white mb-1">Agentic AI Capabilities</h3>
<p class="text-sm text-brand-subtle">AI nodes can perform web searches and retrieve data from external services.</p>
</div>
<div class="fancy-border rounded-lg p-4">
<h3 class="font-bold text-white mb-1">Multi-Tool Chaining</h3>
<p class="text-sm text-brand-subtle">"Blazing Zebra" approach: integrate tools like Opal and Gamma AI for superior results.</p>
</div>
<div class="fancy-border rounded-lg p-4">
<h3 class="font-bold text-white mb-1">AI Personas & Models</h3>
<p class="text-sm text-brand-subtle">Tailor node behavior by assigning personas and selecting specific Gemini models.</p>
</div>
<div class="fancy-border rounded-lg p-4">
<h3 class="font-bold text-white mb-1">Effective Prompting</h3>
<p class="text-sm text-brand-subtle">Guide AI output effectively by providing detailed descriptions and examples.</p>
</div>
</div>
</section>
<!-- Educational Analysis Section -->
<section class="glass-card rounded-2xl p-6 lg:p-8 shadow-2xl shadow-black/20 animate-fade-in-up" style="animation-delay: 0.5s;">
<h2 class="font-display text-2xl sm:text-3xl font-bold mb-4 flex items-center gap-3">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-brand-primary" viewBox="0 0 24 24" fill="currentColor"><path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"/></svg>
Educational Content Analysis
</h2>
<div class="space-y-4 text-brand-text/90 leading-relaxed">
<p>The video introduces Google's experimental Opal AI as a transformative tool for project managers, enabling the automation of complex, multi-step workflows without requiring deep technical expertise. The core of Opal is its intuitive Input-Process-Output (IPO) framework, where tasks are visualized as interconnected "nodes" that can be chained together to perform sophisticated operations.</p>
<p>Three practical project management automations are demonstrated to showcase Opal's versatility:</p>
<ul class="list-disc list-inside space-y-2 pl-4">
<li><strong class="text-white">Weekly Status Report Generator:</strong> Automates the creation of detailed status updates by processing raw data through a series of AI nodes that analyze, generate insights, and format the final report.</li>
<li><strong class="text-white">Team Allocation Optimizer:</strong> Highlights "agentic" AI capabilities, allowing nodes to perform web searches and integrate external data to optimize team assignments, with outputs formatted into Google Slides.</li>
<li><strong class="text-white">Social Media Content Creation:</strong> Illustrates how to manually build a creative automation, turning call transcripts into multiple engaging social media threads by leveraging effective prompting and iterative node structures.</li>
</ul>
<p>The content is highly relevant for project managers and AI enthusiasts, demystifying AI automation and providing actionable insights into leveraging multi-tool integrations for enhanced productivity and superior outcomes.</p>
</div>
</section>
</div>
<!-- Right Column: Quiz -->
<div class="lg:col-span-1">
<section id="quiz-section" class="glass-card rounded-2xl p-6 lg:p-8 shadow-2xl shadow-black/20 sticky top-8 animate-fade-in-up" style="animation-delay: 0.6s;">
<h2 class="font-display text-2xl sm:text-3xl font-bold mb-6 flex items-center gap-3">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-brand-primary" viewBox="0 0 24 24" fill="currentColor"><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm0-13c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4zM11 18h2v-2h-2v2z"/></svg>
Knowledge Check
</h2>
<div class="space-y-6">
<div class="quiz-item" data-correct="b">
<p class="font-semibold text-white mb-3">1. What is the core framework Google Opal AI utilizes for building automations?</p>
<div class="flex flex-col space-y-2">
<button class="quiz-option text-left p-3 rounded-md border border-slate-600">a) API Integration Protocol (AIP)</button>
<button class="quiz-option text-left p-3 rounded-md border border-slate-600">b) Input, Process, Output (IPO)</button>
<button class="quiz-option text-left p-3 rounded-md border border-slate-600">c) Data, Analyze, Distribute (DAD)</button>
<button class="quiz-option text-left p-3 rounded-md border border-slate-600">d) Sequence, Transform, Generate (STG)</button>
</div>
</div>
<div class="quiz-item" data-correct="c">
<p class="font-semibold text-white mb-3">2. What technical knowledge is primarily required to set up automations with Google Opal AI?</p>
<div class="flex flex-col space-y-2">
<button class="quiz-option text-left p-3 rounded-md border border-slate-600">a) Extensive coding expertise in Python</button>
<button class="quiz-option text-left p-3 rounded-md border border-slate-600">b) Advanced knowledge of machine learning</button>
<button class="quiz-option text-left p-3 rounded-md border border-slate-600">c) Hardly any, primarily natural language</button>
<button class="quiz-option text-left p-3 rounded-md border border-slate-600">d) Proficiency in SQL</button>
</div>
</div>
<div class="quiz-item" data-correct="b">
<p class="font-semibold text-white mb-3">3. Which workflow was NOT demonstrated in the video?</p>
<div class="flex flex-col space-y-2">
<button class="quiz-option text-left p-3 rounded-md border border-slate-600">a) Weekly Status Report Generator</button>
<button class="quiz-option text-left p-3 rounded-md border border-slate-600">b) Budget Forecasting and Expense Tracking</button>
<button class="quiz-option text-left p-3 rounded-md border border-slate-600">c) Team Allocation Optimizer</button>
<button class="quiz-option text-left p-3 rounded-md border border-slate-600">d) Social Media Content Creation</button>
</div>
</div>
<div class="quiz-item" data-correct="c">
<p class="font-semibold text-white mb-3">4. What term describes advanced AI functions like web searching and data retrieval?</p>
<div class="flex flex-col space-y-2">
<button class="quiz-option text-left p-3 rounded-md border border-slate-600">a) Generative AI functions</button>
<button class="quiz-option text-left p-3 rounded-md border border-slate-600">b) Predictive analytics</button>
<button class="quiz-option text-left p-3 rounded-md border border-slate-600">c) Agentic AI capabilities</button>
<button class="quiz-option text-left p-3 rounded-md border border-slate-600">d) Neural network processing</button>
</div>
</div>
<div class="quiz-item" data-correct="b">
<p class="font-semibold text-white mb-3">5. What is the key benefit of the "Blazing Zebra" approach?</p>
<div class="flex flex-col space-y-2">
<button class="quiz-option text-left p-3 rounded-md border border-slate-600">a) Sticking to a single AI tool</button>
<button class="quiz-option text-left p-3 rounded-md border border-slate-600">b) Moving fast by chaining multiple AI tools</button>
<button class="quiz-option text-left p-3 rounded-md border border-slate-600">c) Focusing only on open-source AI</button>
<button class="quiz-option text-left p-3 rounded-md border border-slate-600">d) Prioritizing pre-built templates</button>
</div>
</div>
</div>
</section>
</div>
</main>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
const quizItems = document.querySelectorAll('.quiz-item');
quizItems.forEach(item => {
const correctAnswer = item.dataset.correct;
const options = item.querySelectorAll('.quiz-option');
options.forEach(option => {
option.addEventListener('click', () => {
// Disable all buttons in this question to prevent re-answering
options.forEach(btn => btn.disabled = true);
const selectedAnswer = option.textContent.trim().split(')')[0];
if (selectedAnswer === correctAnswer) {
option.classList.add('correct');
} else {
option.classList.add('incorrect');
// Highlight the correct answer
const correctOption = item.querySelector(`.quiz-option:nth-child(${getOptionIndex(correctAnswer)})`);
if (correctOption) {
correctOption.classList.add('correct');
}
}
});
});
});
function getOptionIndex(letter) {
return letter.charCodeAt(0) - 'a'.charCodeAt(0) + 1;
}
// Simplified quiz items for demonstration purposes
const questions = [
{
q: "1. What is the core framework that Google Opal AI utilizes for building automations, as described in the video?",
o: ["a) API Integration Protocol (AIP)","b) Input, Process, Output (IPO)","c) Data, Analyze, Distribute (DAD)","d) Sequence, Transform, Generate (STG)"],
c: "b"
},
{
q: "2. According to the video, what kind of technical knowledge is primarily required to set up project management automations with Google Opal AI?",
o: ["a) Extensive coding expertise in Python or JavaScript","b) Advanced knowledge of machine learning algorithms","c) Hardly any technical knowledge, primarily natural language description","d) Proficiency in database management and SQL"],
c: "c"
},
{
q: "3. Which of the following is NOT one of the three specific project management automation workflows demonstrated in the video?",
o: ["a) Weekly Status Report Generator","b) Budget Forecasting and Expense Tracking","c) Team Allocation Optimizer","d) Social Media Content Creation from Call Transcripts"],
c: "b"
},
{
q: "4. When creating the \"Weekly Status Report Generator\" in Opal, what did the AI automatically do to tailor the behavior of an analysis node?",
o: ["a) It requested the user to manually input Python code for data processing.","b) It suggested using an external API for sentiment analysis.","c) It built a prompt assigning an AI persona, \"diligent project analyst.\"","d) It required the user to select specific keywords for extraction."],
c: "c"
},
{
q: "5. The \"Team Allocation Optimizer\" workflow demonstrated a more advanced capability where AI nodes could perform web searches, retrieve information from Google Maps, and get weather data. What term was used to describe these advanced functions?",
o: ["a) Generative AI functions","b) Predictive analytics","c) Agentic AI capabilities","d) Neural network processing"],
c: "c"
},
{
q: "6. After Opal generated Google Slides for the Team Allocation Optimizer, what was the recommended next step to improve their visual design, demonstrating the \"Blazing Zebra\" approach?",
o: ["a) Manually redesigning the slides within Google Slides.","b) Exporting the slides to PowerPoint and uploading them to Gamma AI for design enhancement.","c) Using Opal's internal design templates.","d) Hiring a graphic designer to refine the presentation."],
c: "b"
},
{
q: "7. When creating the social media content automation, what strategy did the presenter emphasize for guiding the AI's style and formatting when generating tweet storms?",
o: ["a) Providing a very lengthy, detailed description of the desired tone.","b) Giving the AI explicit negative constraints (what not to do).","c) Supplying concrete examples of desired tweet storms.","d) Only using short, single-word prompts."],
c: "c"
},
{
q: "8. What is a key benefit of the \"Blazing Zebra\" way, as described in the video, for leveraging AI tools?",
o: ["a) Sticking to a single AI tool for all tasks to ensure consistency.","b) Moving fast and embracing unique strengths by chaining multiple AI tools together.","c) Focusing solely on open-source AI models to reduce costs.","d) Prioritizing AI tools that offer the most pre-built templates."],
c: "b"
}
];
const quizContainer = document.getElementById('quiz-section').querySelector('.space-y-6');
quizContainer.innerHTML = ''; // Clear placeholder content
questions.forEach((data, index) => {
const itemDiv = document.createElement('div');
itemDiv.className = 'quiz-item';
itemDiv.dataset.correct = data.c;
const questionP = document.createElement('p');
questionP.className = 'font-semibold text-white mb-3';
questionP.textContent = data.q;
itemDiv.appendChild(questionP);
const optionsDiv = document.createElement('div');
optionsDiv.className = 'flex flex-col space-y-2';
data.o.forEach(optionText => {
const button = document.createElement('button');
button.className = 'quiz-option text-left p-3 rounded-md border border-slate-600 text-sm';
button.textContent = optionText;
optionsDiv.appendChild(button);
});
itemDiv.appendChild(optionsDiv);
quizContainer.appendChild(itemDiv);
});
// Re-bind events to the dynamically created content
const newQuizItems = document.querySelectorAll('.quiz-item');
newQuizItems.forEach(item => {
const correctAnswer = item.dataset.correct;
const options = item.querySelectorAll('.quiz-option');
options.forEach(option => {
option.addEventListener('click', () => {
options.forEach(btn => btn.disabled = true);
const selectedAnswer = option.textContent.trim().split(')')[0];
if (selectedAnswer === correctAnswer) {
option.classList.add('correct');
} else {
option.classList.add('incorrect');
const correctOption = Array.from(options).find(opt => opt.textContent.trim().startsWith(correctAnswer + ')'));
if (correctOption) {
correctOption.classList.add('correct');
}
}
});
});
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment