diff --git a/src/data/datasetStory.js b/src/data/datasetStory.js
new file mode 100644
index 0000000..088e752
--- /dev/null
+++ b/src/data/datasetStory.js
@@ -0,0 +1,56 @@
+export const datasetScenes = [
+ {
+ scene: 1,
+ title: "The Everyday Mystery",
+ narrative: "Think about the lists you see every day: your phone's contact list, a weekly weather forecast, or a sports league table.",
+
+ },
+ {
+ scene: 2,
+ title: "Naming the Thing",
+ narrative: "When we take those lists and organize them neatly, they transform into a table.",
+
+ },
+ {
+ scene: 3,
+ title: "One Row, One Story",
+ narrative: "In a dataset, every horizontal row is a single, complete storyโlike one individual person, one specific day, or one single transaction.",
+
+ },
+ {
+ scene: 4,
+ title: "Many Shapes of Data",
+ narrative: "Datasets aren't just numbers and text. They can be collections of images, folders of audio files, or libraries of books.",
+
+ },
+ {
+ scene: 5,
+ title: "Where Data Comes From",
+ narrative: "Where do they come from? Everywhere. Weather sensors, online surveys, website clicks, and smartwatches all feed information into datasets.",
+
+ },
+ {
+ scene: 6,
+ title: "Clean vs. Messy",
+ narrative: "Before AI can use data, it has to be cleaned. Real-world data is often messyโfilled with missing values, typos, and duplicates.",
+
+ },
+ {
+ scene: 7,
+ title: "What You Can Do",
+ narrative: "Once you have a clean dataset, the possibilities branch out: you can visualize trends, analyze statistics, or train an AI model.",
+
+ },
+ {
+ scene: 8,
+ title: "A Dataset in the Wild",
+ narrative: "Let's look at a real example: a dataset of house prices. By looking at columns like 'Size' and 'Bedrooms', we can predict 'Price'.",
+
+ },
+ {
+ scene: 9,
+ title: "The Core Definition",
+ narrative: "At its core, a dataset is simply a structured collection of related information used to help humansโand machinesโmake sense of the world.",
+
+ }
+];
diff --git a/src/data/datasetStoryboard.jsx b/src/data/datasetStoryboard.jsx
new file mode 100644
index 0000000..4094067
--- /dev/null
+++ b/src/data/datasetStoryboard.jsx
@@ -0,0 +1,55 @@
+// src/data/DatasetStoryboard.jsx
+
+import { useState } from "react";
+import { datasetScenes } from "./datasetStory";
+import DatasetVisualCues from "./datasetVisualCues";
+
+export default function DatasetStoryboard({ onClose }) {
+ const [currentSceneIdx, setCurrentSceneIdx] = useState(0);
+
+ return (
+
+ {/* Header */}
+
+
+ ๐๏ธ
+
What is a Dataset?
+
+
+
+
+ {/* Visual Canvas Box */}
+
+
+ Scene {datasetScenes[currentSceneIdx].scene} of {datasetScenes.length}
+
+
- These concepts are the building blocks of AI literacy. Each card includes a visual explainer, a short summary, and difficulty labeling to help learners choose the right next step.
+ These concepts are the building blocks of AI literacy. Each card
+ includes a visual explainer, a short summary, and difficulty
+ labeling to help learners choose the right next step.